/*
 xs = Extra small <576px Max container width None (auto)
 sm = Small ≥ 576px Max container width 540px
 md = Medium ≥ 768px Max container width 720px
 lg = Large >= 992px Max container width 960px
 xl = Extra large ≥1200px Max container width 1140px

    xl: {
        width: 1200,
        height: 1200 * (9/16) // 675 Landscape
    },
    lg: {
        width: 992,
        height: 992 * (9/16) // 558 Landscape
    },
    md: {
        width: 768,
        height: 768 * (3/4) // 576 Landscape
    },
    sm: {
        width: 576,
        height: 576 * (4/3) // 768 Portrait
    }
*/

/*text { pointer-events: none; }*/
html,body{
  background-color: #eff9e4;
}
.text-hover:hover {
  text-decoration: underline;
  cursor: pointer;
}
#sidr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 999;
  display: none;
}

#sidr {
  z-index: 1000;/* should be +1 sidr-overlay */
  visibility: hidden;
}

.sidr-open #sidr-overlay {
  display: block;
}

.menu-buttonorig {
  display: block;
  position: absolute;
  top: 60px;
  right: 20px;
  overflow: hidden;
  width: 34px;
  height: 31px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  border-radius: 4px;
}

.gg-menu-boxed {
  text-indent: -9999px;
}

.gg-menu-boxed::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 7px;
  left: 5px;
  width: 20px;
  height: 3px;
  background: currentColor;
  border-radius: 3px;
  box-shadow: 0 7px 0, 0 14px 0
}




.menu-button.right {
    right: 20px;
    left: auto;
}

.menu-button.bottom {
    top: 100px;
}

.menu-button.fixed {
    position: fixed;
}

#close-menu-button {
  float: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

#close-menu-button:hover {
  fill: #ccc;
}

#mapwrapper {
  position: relative;
  padding: 0;
  outline: 1px solid #999;
}
#mapwrapper img {
  top: 0;
  left: 0;
}

#canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

#canvas2 {
  width: 100%;
}
#canvas2 { min-height: 400px; }
/* menubar is 60px high */
@media(min-height: 480px) { #canvas2 { min-height: 420px} }
@media(min-height: 760px) { #canvas2 { min-height: 650px} }

.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.sepia img {
  -webkit-filter: grayscale(30%) sepia(30%);
  -moz-filter: grayscale(30%) sepia(30%);
  -ms-filter: grayscale(30%) sepia(30%);
  -o-filter: grayscale(30%) sepia(30%);
  filter: grayscale(30%) sepia(30%);
}

.banner img {
  /*transform: translateX(-550px);*/
  margin-left: 50%;
  transform: translateX(-50%);
}

.banner2 {
  position: relative;
  overflow: hidden;
  height: 39px;
}

.banner2 img {
  position: absolute;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

.navbar-image {
  background-color: #97a4aa;
  /* first is on top */
  background-image: url("/dist/banner2.jpg"), url("/dist/banner2sky.jpg");
  background-position: left bottom, bottom;
  background-repeat: no-repeat, repeat-x;
}

.navbar-brand {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  text-align: center;
  text-rendering: optimizeLegibility;
  font-weight: bold;
  font-size: 150%;
  color: white;
  text-shadow: 0.1em 0.2em 0.1em black;
  padding: 0;
}
ul.navbar-nav > li > a{
  font-size: 110%;
  font-weight: bolder;
  color: white;
  text-shadow: 0.1em 0.2em 0.1em black;
  text-rendering: optimizeLegibility;
}
.dropdown-toggle:after{
  font-size: 120%;
}
.navbar a:hover {
  color: #bade00;
}

/* tabs */
.tabbable ul li{
  margin-right: 0.5ex;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs a:hover {
   background-color: #bade00;
}

.nav-tabs .nav-link {
  color: #444;
  background-color: #bcbecb;
}
.nav-link {
  padding: 0.3ex 1ex;
}

.title{
  text-align: center;
}


.tippy-tooltip.shipais-theme {
  background-color: yellow;
  color: black;
  line-height: 85%;
  white-space: nowrap;
}

.opentip h1 {
 font-weight: bold;
 font-size: 1.08em;
}
.opentip table td {
 font-size: small;
 line-height: 0.9;
}
.links a {
  padding: 2px 6px 2px 6px;
  margin-right: 1ex;
  background-color: #fff;
}
.opentip-container.style-popup .opentip {
  color: #000;
}

#mapcontainer {
  background: #fff;
  border: 1px solid #ccc; 
  position: relative; 
  overflow: hidden; 
}
/* Specific mapael css class are below
 * 'mapael' class is added by plugin
 */

.mapael .map {
  background-color: #cddee0;
  margin-bottom: 10px;
  position: relative;
}

/* For all zoom buttons */
.mapael .zoomButton {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #000;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  position: absolute;
  top: 0;
  font-weight: bold;
  left: 10px;

  -webkit-user-select: none;
  -khtml-user-select : none;
  -moz-user-select: none;
  -o-user-select : none;
  user-select: none;
}

/* Reset Zoom button first */
.mapael .zoomReset {
  top: 10px;
}

/* Then Zoom In button */
.mapael .zoomIn {
  top: 35px;
}

/* Then Zoom Out button */
.mapael .zoomOut {
  top: 60px;
}

.mapael .mapTooltip {
  position: absolute;
  background-color: #474c4b;
  -moz-opacity: 0.70;
  opacity: 0.70;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  max-width: 200px;
  display: none;
  color: #fff;
}

.mapcontainer2 {
  border: 1px solid #ccc; 
  position: relative; 
}


.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.picpop {
  margin-bottom: 1ex;
}
.toolpop {
}
.close:hover {
  background: #bbb;
  font-weight: bold;
}
.showdir {
  display:inline-block;
  font-weight: bolder;
}
.shipbold {
  font-weight: bolder;
}

.flow-element {
  display: inline-block;
  margin-right: 3em;
  vertical-align: top;
}
.flow-element:last-child {
  margin-right: 0;
}
.flow-element input {
  margin-top: 0;
}

.footer a {
  color: #a9c;
}

.bogey a {
  color: #769;
}

.bogey2 a {
  color: #547;
}

/* slider */
.slidecontainer {
  width: 100%; /* Width of the outside container */
  line-height: 32px;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 15px; /* Specified height */
  border-radius: 5px;   
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


/* FAQ */
/* Horizontal line */
.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}

/* general mytoolbar styles */
.mytoolbar {
  box-shadow: 0.1em 0.2em 0.1em grey;
  border-radius: 4px;
  z-index: 410;
}
.mytoolbar a,
.mytoolbar a:hover {
  background-color: #fff;
  width: 31px;
  height: 31px;
  line-height: 31px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
  border-radius: 3px;
  border: 2px solid;
}
.mytoolbar a {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}
.mytoolbar a:hover {
  background-color: #bade90;
}
.mytoolbar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}


.mytoolbar a svg {
  vertical-align: -5px;
  fill: #333;
}

/* control positioning */
.mytoolbar {
  position: relative;
  pointer-events: auto;
}
.mytoolbar-top,
.mytoolbar-bottom {
  position: absolute;
}
.mytoolbar-top {
  top: 60px;
}
.mytoolbar-right {
  right: 0px;
}
.mytoolbar-bottom {
  bottom: 0;
}
.mytoolbar-left {
  left: 0;
}
.mytoolbar {
  float: left;
  clear: both;
}
.mytoolbar-right .mytoolbar {
  float: right;
}
.mytoolbar-top .mytoolbar {
  margin-top: 15px;
}
.mytoolbar-bottom .mytoolbar {
  margin-bottom: 10px;
}
.mytoolbar-left .mytoolbar {
  margin-left: 5px;
}
.mytoolbar-right .mytoolbar {
  margin-right: 5px;
}

.bookmarkdown {
  color: white !important;
  background-color: green !important;
}
.bookmarkdown>svg>path{
  fill: #fff;
}
.rulerdown {
  background-color: red !important;
}
.rulerdown>svg>path{
  fill: #fff;
}
.timer {
  color: black;
  font-weight: bold;
  padding: 2px;
  background-color: white;
}
.timerdone {
  background-color: red !important;
  color: #fff !important;
}
.jst-hours {
  display: none;
}
.jst-minutes {
  display: none;
}

/* typeahead.js */
#typeahead-search .empty-message {
  padding: 2px 10px;
  text-align: center;
  background-color: white;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 300px;
  overflow-y: auto;
}


/* leaderboard: 728x90, full banner 496x60, half banner: 234x60 */
.full_banner { width: 234px; height: 80px; margin-left: -117px}
@media(min-width: 360px) { .full_banner { width: 360px; height: 80px; margin-left: -180px} }
@media(min-width: 496px) { .full_banner { width: 496px; height: 80px; margin-left: -248px} }


#myadBox {
  position: fixed;
  bottom: 0;
  left: 50%;
  text-align:center;
  border-radius: 6px;
}

#myadBox-inner { width: 234px; height: 60px;}
@media(min-width: 360px) { #myadBox-inner { width: 360px; height: 60px;} }
@media(min-width: 496px) { #myadBox-inner { width: 496px; height: 60px;} }

#myadBox-inner {
    display: inline-block;
    /*border: 1px solid #f00;
    /margin-right: 24px;*/
    background-color: #bade90;
}

#adbox-close-button {
    display:inline-block;
    line-height: 16px;
    margin: 3px;
}

#adbox-close-button:hover {
  fill: #ccc;
}

#adbox2-close-button {
    overflow: hidden;
    line-height: 1;
}

#adbox2-close-button .float-right {
    float: right;
    height: 20px;
    padding: 4px;
    background-color: #bade90;
    /*line-height: 20px;*/
    border-radius: 4px 4px 0 0;
}

#adbox2-close-button:hover {
  fill: #fff;
}

#loader {
    text-align: center;
}

.spinner {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/**
Fixing bootstrap columns for safari
 */
.row:before, .row:after{
 display: inline-block !important;
}