html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: "Avenir Next W00";
}

hr {
  width: 200%;
  color: white;
  margin: 0px 0px 0px -20px;
  background: white;
  border-top: medium solid white;
  /*     position: absolute; */
}

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

label {
  font-weight: normal !important;
  margin-bottom: 0px !important;
}

.header {
  grid-area: header;
  background-color: #112e51;
}

.ocadsTitle {
  display: inline;
}

.footer {
  grid-area: footer;
  margin-top: -2px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #333;
  position: relative;
  color: #fff;
}

.map {
  grid-area: map;
}

.esri-search {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 15px;
  left: 230px;
}

.wrapper {
  display: grid;
  grid-template-rows: 92px 475px 500px 50px;
  grid-template-areas:
    "header"
    "sidebar"
    "map"
    "footer";
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

@media only screen and (max-width: 900px) {
  .title {
    margin-left: -85px !important;
  }
}

@media only screen and (max-width: 750px) {
  .hamburgerBtn {
    margin-top: -18px !important;
  }
  #helpLink {
    margin-top: -10px !important;
  }
}

.box {
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

#sidebarQuery,
#sidebarResults {
  width: 100%;
}

#sidebarQuery {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  padding: 10px;
}

.section {
  color: #fff;
}

.additionalTermsHint {
  font-size: 11px;
  margin: -9px 0px 7px 160.5px;
}

.dateHint {
  font-size: 11px;
  float: bottom;
  margin-left: 187.5px;
  margin-top: 1.5px;
}

.dateSection {
  color: #fff;
  font-size: 13px;
  margin: 10px 0px 15px 0px;
}

.dateElems {
  margin-left: 150px;
}

.subheader {
  font-size: 13px;
  margin-top: 9px;
}

.noaaLogo {
  height: 50px;
  vertical-align: middle;
  padding: 3px 5px;
  margin-right: 100px;
}

/* Responsive styling for larger screens */
@media only screen and (min-width: 1700px) {
  .dateSection {
    font-size: 0.8vw !important;
  }
  .dateElems {
    margin-left: 185px !important;
  }
  .dateHint {
    margin: 2px 0 0 228px !important;
    font-size: 0.7vw !important;
  }
  .additionalTermsHint {
    margin: -8px 0px 7px 185px !important;
    font-size: 0.7vw !important;
  }
  .subheader {
    margin-top: 11px !important;
    font-size: 0.8vw !important;
  }
  #wrapper {
    grid-template-rows: 6.38vw minmax(0, 1fr) 30px !important;
    /* sidebarQuery shrink */
    grid-template-columns: 40% 60%;
  }
  .header {
    font-size: 1.3vw !important;
  }
  .footer {
    font-size: 0.7vw !important;
  }
  .noaaLogo {
    height: 3.8vw !important;
  }
  .hamburgerBtn {
    font-size: 20px !important;
    padding: 10px 16px !important;
    margin-top: 20px !important;
  }
  .hamburgerDropdown {
    top: 90px !important;
    font-size: 0.9vw !important;
    min-width: 150px !important;
  }
  #helpLink {
    margin-top: 22px !important;
    font-size: 1.6vw !important;
  }
  /* sidebarQuery shrink */
  hr {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 1175px) {
  .wrapper {
    grid-template-columns: 50% 50%;
    grid-template-rows: 93px minmax(0, 1fr) 30px;
    grid-template-areas:
      "header   header"
      "sidebar  map"
      "footer   footer";
  }
}

#footerDiv {
  background-color: #112e51;
  color: white;
  font-size: 12px;
  font-family: Helvetica, Arial;
}

#footerDiv a {
  color: white;
}

#footerDiv tr {
  background-color: #112e51;
}

#loadingDiv {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
}

.dijitTextBox {
  border: solid black 1px;
  #overflow: hidden;
  width: 10em !important;
  vertical-align: middle;
}

.dijitPlaceHolder {
  color: #000000 !important;
  font-style: normal !important;
}

#sidebarResults a {
  color: #00acff;
}

a.disabled,
a.disabled:hover {
  color: gray !important;
  cursor: progress !important;
  text-decoration: none !important;
}

#sidebarResults {
  max-height: 100%;
  flex-direction: column;
  padding: 10px;
}

.resultsSummaryWrapper {
  /* 	width: 100%; */
  /* 	display: inline-block; */
  margin-bottom: 8px;
}

#resultsAPIDiv {
  margin-top: 23px;
  margin-bottom: 5px;
}

#resultsContentDiv {
  flex: 1;
  overflow: auto;
  color: white;
  margin: 0px -5px -5px -5px;
}

#resultsContentDiv.disabled {
  pointer-events: none;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #808080;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c0c0c0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e1e1e1;
}

.btn-primary {
  float: bottom;
}

#helpNavWrapper {
  float: right;
}

#helpLink {
  display: inline-block;
  float: right;
  margin: 2px 11px 0px 16px;
  font-size: 25px;
  color: #fff;
}

#helpLink:hover,
#helpLink:active,
#helpLink:focus,
#helpLink:visited {
  text-decoration: none !important;
}

/* Hamburger Menu Styling */
.hamburgerBtn {
  transition: all 0.25s ease;
  padding: 5px 10px;
  font-size: 17px;
  line-height: 1.3333333;
  color: #4c4c4c;
  background-color: #bcdaed;
  border-color: #3b8fc4 !important;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid;
  white-space: nowrap;
  padding: 6px 12px;
}

.hamburgerBtn:hover {
  background-color: #005e95;
  border-color: #005e95;
  color: white;
}

.hamburgerBtn:active {
  color: #4c4c4c;
  background-color: #bcdaed;
  border-color: #3b8fc4 !important;
}

.hamburgerDropdown {
  list-style: none;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 100;
  display: none;
  float: left;
  min-width: 140px;
  padding: 0;
  margin: 2px 0 0 -95px;
  font-size: 16px;
  text-align: left !important;
  background-color: #ffffff;
  border: 1px solid #efefef;
  border: 1px solid #efefef;
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.hamburgerDropdown > li > a {
  display: block;
  padding: 10px 10px 10px 8px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #6e6e6e;
  white-space: nowrap;
  text-decoration: none !important;
}

.hamburgerDropdown > li {
  border-top: 1px solid #efefef;
}

.hamburgerDropdown > li:hover {
  background-color: #efefef;
}

.breadcrumbsLink {
  position: relative;
  color: white;
  padding: 8px;
}

.breadcrumbsLink:hover {
  color: white;
  text-decoration: none;
}

.breadcrumbsLink:visited {
  color: white;
  text-decoration: none;
}

.breadcrumbsLink:focus {
  text-decoration: none;
}

.breadcrumbsLink:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #0071bc;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

.breadcrumbsLink:hover:before {
  visibility: visible;
  transform: scaleX(1);
}