* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --transition: 700ms all;
  --vis-trans : visibility 0s, opacity 0.5s linear;     
  --shadow: 0px 2px 10px rgba(0, 0, 0, .6);
  --dark-color : rgba(0, 0, 0, .5)
}

h5 {
  color: white;
}


/* Map container */
#map {
  height: 100vh;
  display: grid;
  grid-template-areas: "mini-map side-bar";
  background-color: black;
}

.ship__information {
  display: flex;
  flex-direction: column;
  width: 28rem;
  height: 100vh;
  z-index: 9999;
  padding: 0.5rem;
  justify-content: space-between;
}

.mini__map {
  grid-area: mini-map;
  z-index: 9999;
  height: 33vh;
  color: white;
  border-radius: 0.5rem;
  display: flex;
  justify-content: end;
  align-items: flex-end;
  border: 1px solid var(--dark-color);
  background-color: red;
  box-shadow: var(--shadow);
}

.dinamicInfo {
  background-color: var(--dark-color);
  border: 1px solid white;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  padding: 0.5rem;
}

.dinamicContent {

}

.titleInfo {
  display: flex;
  justify-content: space-between;
}

.titleInfo > button  {
  background: none;
  border: none;
}

.dropdown-toggle {
  width: 100% ; 
  text-align: start !important;
}

.leaflet-control-layers {
  transition: var(--transition);
}

.fullScr {
  margin: .5rem;
  border-radius: .4rem;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  background-color: white;
  transition: var(--transition);
  z-index: 9999;
}

.fullScr:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Search rute bar */
.start {
  z-index: 9997;
  margin: 5.5rem 0.7rem  ;
  display: flex;
  justify-self: end;
}

.start__bar {
  border: 1px solid white;
  width: 15rem;
  height:99vh;
  background-color: var(--dark-color);
  align-self: flex-start;
  justify-self: end;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-right: 0.5rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  transform: translate(20rem , -5.35rem);
}

.start__btn {
  display: flex;
  flex-direction: column;
}

.side-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.routeExplore {
  height: 3rem;
  width: 3rem;
  border-radius: 5px;
  background-color: white;
  transition: var(--transition);
  border-color: var(--dark-color);
}

.portInfo {
  margin-top: 2rem;
  height: 3rem;
  width: 3rem;
  border-radius: 5px;
  background-color: white;
  border-color: var(--dark-color);
  transition: var(--transition);
}

.anchor_active {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: anchor;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
}

@keyframes anchor {
  0%   {top:0px;}
  25%  {top:2px;}
  50%  {top:1px;}
  75%  {top:2px;}
  100% {top:0px;}
}