::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.cesium-toolbar-button {
    display: inline-block;
    position: relative;
    margin: 0 3px;
}
.nav-toggle {
    margin: 0;
    padding: 1px 2px;
}
.screenshot-button {
    margin: 0;
}
.sidebar-toggle {
    margin: 0;
    padding: 2px;
}
.animation-controls {
    text-align: center;
}
.animation-controls a {
    text-decoration: none;
    font-size: 24px;
    color: white;
}
.record-button {
    font-size: 22px;
    margin: 0;
    top: 0;
}
.save-view-button {
    font-size: 22px;
    margin: 0;
    top: 0;
}
.ajax-loader {
    background: #303336 url('https://www.allisonhouse.com/images/ajax-loader.gif') no-repeat center;
}

h2 {font: normal 26px Arial, sans-serif; padding: 20px 0; margin: 0 0 30px 0;}
.wrap {width: 960px; margin: 0 auto;}
.clear {clear: both;}

/* LANDSCAPE STYLES */
img.branding {
    z-index: 1;
    max-width: 100% !important;
    height: auto;
}
@media only screen and (min-width : 321px) {
    img.branding {
        max-width: 150px !important;
    }
}
@media only screen and (max-width : 320px) {
    img.branding {
        max-width: 120px !important;
    }
    #productList {
        font-size: 8px;
    }
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    img.branding {
        max-width: 200px !important;
    }
}
/* Portrait phone */
@media only screen and (max-width: 767px) {
    .info {
        border-radius: 0px!important;
    }
    .slideout-menu {
        font: bold 10px Arial, sans-serif;
    }

    .graphite li a .dd-raster {
        right: 40px;
        top: 9px;
    }

    .graphite li a .dd-contour {
        right: 10px;
        top: 9px;
    }

    .graphite li a .dd-delete {
        right: 40px;
        top: 5px;
    }

    #productList {
        font-size: 10px;
    }

    #status { display: none; }
}

.btn, .btn:visited {
    color: #000;
    font: 18px/1 'Aller', Arial, Helvetica, sans-serif;
    text-align: center;
    display: block;
    border-radius: 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
}
.btn:hover, .btn:focus {
    color: #FFF;
}
.btn-red, .btn:visited {
    background-color: #B11316;
}
.btn-red:hover, .btn-red:focus {
    background-color: #C71B1F;
}
.chkClear {
    padding-left: 5px;
}
div.ah_branding, div.custom_branding {
    left: 5px;
    position: fixed;
    clear: none;
    max-width: 100%;
    margin: 12px 20px 0 0 !important;
    z-index: 2;
}
div.ah_logo_bottom {
    left: 10px;
    bottom: 10px;
    position: fixed;
    clear: none;
    max-width: 100%;
    margin: 12px 20px 0 0 !important;
}

/** Slider **/
#slider {
    padding-top: 0px;
    bottom: 0;
    width: 92%;
    margin: 0 4% 0 4%
}

.cesiumContainer { height: 100%; }

/* Product List Styling */
#productList {
    width: 92%;
    margin: 0 4% 0 4%;
}
#productList .productList_runs select {
    background-color: rgba(84,84,84,1.0);
    border-color: #303030;
    color: #edffff;
}

#productList .productList-product-removeSpan {
    padding: 0 5px;
    cursor: pointer;
}

#productList .productList-product {
    cursor: pointer;
}

/* Slider Styling */

#slider .noUi-base {
    background-color: #555;
}

#slider .noUi-tooltip {
    white-space: nowrap;
}

#slider .noUi-handle {
    cursor: pointer;
}

.cd-accordion-menu {
  width: 100%;
  max-width: 600px;
  background: #4d5158;
  margin: 0;
  padding: 0;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
  list-style: none;
  padding: 0;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style-type: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 50px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 0.8rem;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu a.selected::after {
    filter: hue-rotate(-10deg) saturate(20);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
  background-image: url(images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.overlayRaster.selected::before, .overlayContour.selected::before {
    color: #0A7FFF;
}
@media only screen and (max-width: 767px) {
    ul li li a.product span.overlayRaster {
        position: absolute;
        left: 60px;
    }
    ul li ul li ul li a.product span.overlayRaster {
        position: absolute;
        left: 75px;
    }
    ul li ul li ul li a.product span.overlayContour {
        position: absolute;
        left: 55px;
    }
}
@media only screen and (min-width: 600px) {
    ul li li a.product span.overlayRaster {
        position: absolute;
        left: 80px;
    }
    ul li ul li ul li a.product span.overlayRaster {
        position: absolute;
        left: 100px;
    }
    ul li ul li ul li a.product span.overlayContour {
        position: absolute;
        left: 70px;
    }
}
@media only screen and (min-width : 1224px) {
    ul li li a.product span.overlayRaster {
        position: absolute;
        left: 80px;
    }
    ul li ul li ul li a.product span.overlayRaster {
        position: absolute;
        left: 106px;
    }
    ul li ul li ul li a.product span.overlayContour {
        position: absolute;
        left: 80px;
    }
}
/*
.cd-accordion-menu a::after {
  left: 30px;
  background-image: url(images/cd-icons.svg);
  background-position: -48px 0;
  background-repeat: no-repeat;
}
.cd-accordion-menu a::after {
    content:"\E099";
    display: inline-block;
    font-family: 'Glyphicons Regular';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: top;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/
.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before {
  left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
@media only screen and (min-width: 600px) {
  .cd-accordion-menu label, .cd-accordion-menu a {
    padding: 24px 24px 24px 82px;
    font-size: 1.0rem;
  }
  .cd-accordion-menu label::before {
    left: 24px;
  }
  .cd-accordion-menu label::after {
    left: 53px;
  }
  .cd-accordion-menu ul label,
  .cd-accordion-menu ul a {
    padding-left: 106px;
  }
  .cd-accordion-menu ul label::before {
    left: 48px;
  }
  .cd-accordion-menu ul label::after,
  .cd-accordion-menu ul a::after {
    left: 77px;
  }
  .cd-accordion-menu ul ul label,
  .cd-accordion-menu ul ul a {
    padding-left: 130px;
  }
  .cd-accordion-menu ul ul label::before {
    left: 72px;
  }
  .cd-accordion-menu ul ul label::after,
  .cd-accordion-menu ul ul a::after {
    left: 101px;
  }
  .cd-accordion-menu ul ul ul label,
  .cd-accordion-menu ul ul ul a {
    padding-left: 154px;
  }
  .cd-accordion-menu ul ul ul label::before {
    left: 96px;
  }
  .cd-accordion-menu ul ul ul label::after,
  .cd-accordion-menu ul ul ul a::after {
    left: 125px;
  }
  .nav {
      width: 25rem!important;
  }
}
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

.nav {
  -webkit-transition: right 0.5s ease;
  -moz-transition: right 0.5s ease;
  -ms-transition: right 0.5s ease;
  -o-transition: right 0.5s ease;
  transition: right 0.5s ease;
  color: white;
  cursor: pointer;
  font-size: 2rem;
  max-height: 90%;
  right: -30rem;
  position: fixed;
  top: 50px;
  width: 100%;
  z-index: 10;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}

.nav.expanded { right: 0; overflow-y: scroll; }

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: white;
  content: '';
  height: 0.4rem;
  width: 100%;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; }

.nav-toggle .nav-toggle-bar::after { margin-top: 0.8rem; }

.nav-toggle .nav-toggle-bar::before { margin-top: -0.8rem; }

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
  background: white;
  margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* MODAL */
#modal-overlay {
  background: #000;
  filter: alpha(opacity=60);
  height: 100%;
  left: 0;
  -moz-opacity: 0.6;
  -webkit-opacity: 0.6;
  -ms-filter: alpha(opacity=60);
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 998;
}

#modal-container {
  background: #35383d;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: none;
  height: auto;
  font-family: sans-serif;
  font-size: 14px;
  position: absolute;
  z-index: 998;
  max-width: 100%;
  min-width: 40%;
}

#modal-header {
  height: 20px;
  overflow: hidden;
  clear: both;
}

#modal-close {
  background: #35383d url('images/jsmodal/modal-close.png') no-repeat center center;
  cursor: pointer;
  display: block;
  filter: alpha(opacity=60), invert(100%);
  -moz-opacity: 0.6;
  -webkit-opacity: 0.6;
  -ms-filter: alpha(opacity=60);
  opacity: 0.6;
  float: right;
  height: 20px;
  width: 20px;
}
#modal-close:hover {
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  -webkit-opacity: 1.0;
  -ms-filter: alpha(opacity=100);
  opacity: 1.0;
}

#modal-content {
  display: block;
  padding: 0 10px 10px 10px;
  z-index: 999;
}

#modal-container.modal-loading {
  background: #35383d url('images/jsmodal/loading.gif') no-repeat center center;
}

#soundings fieldset {
    border: 0;
}

#soundings dt {
    font-weight: bold;
}

#soundings dt, #soundings dd {
    float: left;
}
#soundings dd {
    margin: 0 5px 0 5px;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 512px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      /* 2-Column Grid */
      fieldset.block_2 { clear: left; padding: 0; margin: 0; }
      .block_2 dl { float: left; margin: 0 0 0 15px; }
      .block_2 dd { margin: 0; padding-bottom: 10px; }
}


#soundings img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto; }

#soundings {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#sounding {
    min-height: 500px;
}

#sounding a {
    display: inline-block;
}

/*
    initial twipsy code taken from bootstrap
*/
.twipsy {
    display: none;
    position: absolute;
    visibility: visible;
    max-width: 200px;
    min-width: 100px;
    padding: 5px;
    font-size: 11px;
    z-index: 1000;
    opacity: 0.8;
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
}
.twipsy.left .twipsy-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #000000;
}
.twipsy.right .twipsy-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #000000;
}
.twipsy-inner {
    padding: 3px 8px;
    background-color: #000000;
    color: white;
    text-align: center;
    max-width: 200px;
    text-decoration: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.twipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

/*
css rules for the draw helper components
*/

.toolbar {
    margin: 0px;
    padding: 0px;
    background: white;
    position: absolute;
    top: 100px;
    margin: 0 0 0 5px;
}

.toolbar > .button {
    margin: 5px;
    border: 1px solid #eee;
    cursor: pointer;
}

.toolbar > .button:hover {
    background: #eee;
}

/*
css rules for the infowindow
*/

.infoWindow {
    position: absolute;
    min-width: 100px;
    max-width: 300px;
}
.infoWindow #frame {
    padding: 10px;
    border: 1px solid black;
    background: white;
}
.infoWindow #close {
    float: right;
    margin: 5px 2px;
    font-size: small;
    color: gray;
    cursor: pointer;
}
.infoWindow #arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -10px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid white;
}

.maps_outdated {
    display: none;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.legend {
    display: inline-block;
    float: left;
    width: 100%;
    font: 12px Arial, Helvetica, sans-serif;
}

.color {
    float: left;
    height: 15px;
    width: 100%;
    display: table;
    table-layout: fixed;
}

.color div {
    display: table-cell;
    color: white;
    text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em;
}