.box {
  background: -webkit-linear-gradient(
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background: -o-linear-gradient(
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  background: linear-gradient(
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  border-radius: 0;
}

.box header h1,
h3 {
  /* font-style:italic; */
}

.leaflet-popup-content {
  max-width: 2255px;
}

ul.popupEntryStyle {
  margin: 0;
  padding: 0 0 0 24px;
}

.popupEntryStyle {
  margin-bottom: 0.5em;
}

.popupTitleStyle {
  text-align: left;
  text-transform: none;
  font-weight: bold;
}

.leaflet-popup-tip,
.leaflet-popup-content-wrapper {
  color: #fff;
  background-color: rgba(24, 92, 100, 0.9);
  border-radius: 3px;
}

.leaflet-popup-content p {
  color: white;
}

.leaflet-popup-content a {
  white-space: nowrap;
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-bottom: 1px solid white;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.33) 33%,
    rgba(255, 255, 255, 0.33) 33%
  );
  background-size: 100% 0%;
  background-repeat: no-repeat;
  background-position-y: 100%;
}

.leaflet-popup-content a:hover {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.33) 33%,
    rgba(255, 255, 255, 0.33) 33%
  );
  background-size: 100% 100%;
}

.leaflet-popup-content a svg {
  height: 12px;
  width: 12px;
  margin-left: 6px;
  fill: rgba(255, 255, 255, 1);
}

.leaflet-container {
  font: 14px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.icon-group {
  border-bottom: 27px solid #fff;
  border-top: 0 solid transparent;
  border-radius: 0;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  height: 0 !important;
  width: 0 !important;
}

.leaflet-marker-icon.leaflet-interactive:not(.marker-cluster-small):not(img)
  .text {
  border: 0 !important;
  top: 6px !important;
  left: -5px !important;
}

span.text::after {
  content: 'ports';
  display: block;
  font-size: 9px;
  font-size: 0.6rem;
  position: absolute;
  left: -6px;
  top: 110%;
}

#controls .widget:last-child {
  margin-bottom: 0;
}

section.risks {
  min-height: 75px;
}

section.risks h3 {
  display: none;
}

header p {
  font: 13.5px/17.5px 'Open Sans';
}

.chokepoint {
  border-radius: 50%;
  border: 6px solid black;
}

.chokepoint-label span {
  text-transform: uppercase;
  font-size: 10px;
  background-color: white;
  padding: 3px;
  border: 1px solid black;
  white-space: nowrap;
}

.chokepoint-label span::before {
  content: '';
  width: 200%;
  right: 103%;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 50%;
}

.disclaimer{

  background-color:black;
    color:white;
  padding:0.3rem;
  display:none;
  text-align: center;
  font-weight: bold;
  z-index:10;
  width:100vw;
}

@media (max-width: 425px) {

  .disclaimer {
    display:block
  }

  body > section {
  height:95vh
}

  aside.toolbox .ui:not(:checked) ~ .box {
    display: none;
  }

  aside.toolbox .ui:not(:checked) ~ .box {
    display: none;
  }

}