:root {
  --color-bg:#fff;
  --color-bg-off:#f9f9f9;
  --color-fg:#000;
  --color-border:#000;
  --color-border-low-contrast:rgb(204,204,204);
  --color-fg-high-contrast:#000;
}
[data-theme="dark"] {
  --color-bg: #000000;
  --color-bg-off:#222;
  --color-fg:#ddd;
  --color-border-low-contrast:#444;
  --color-border:rgb(104,104,104);
  --color-fg-high-contrast:#fff;
}
html, body{
  height:100%;
  margin:0px;
  overflow:hidden;
  background-color:var(--color-bg);
}
.popupDivTable{
    display:table;
}
.popupDivTableBody{
}
.popupDivTableRow{
    display:table-row;
}
.popupDivTableCell{
    display:table-cell;
    vertical-align:middle;
    padding-right:5px;
}
.temperatureInput{
    width:50px;
}
#sidebar #sidebarr{
    background-clip:unset !important;
    padding:8px 8px 8px 8px;
    overflow-y:scroll;
}
#sidebarr{
    padding-left:0px;
    padding-right:0px;
}
#logo{
        background:unset!important;
        padding-left:.2em;
        padding-bottom:1em;
}
.logo{
        height:5em;
}
.headerlogo{
        height:2em;
}
.sidebarWidget{
    border:var(--color-border);
    background-color: var(--color-bg-off);
    border-style:solid;
    border-radius:5px;
    /*width: 100%;*/
    padding-left:.2em;
    font-size:1.2em;
    /*overflow-y:scroll;*/
}
.sidebarWidgetScrollElement{
    display: flex;
    max-height: 240px;
    overflow-y: scroll;
}
#temperatureFlexControl{
    display:none;
}
#temperatureControl{
    width:100%;
/*    height:68px;*/
/*    overflow:auto;*/
    /*overflow:hidden;*/
/*    display:none;*/
/*    height:auto;*/
/*    display:inline-block;*/
}
.temperatureControlElement{
    display:table-cell;
    padding:5px;
    padding-right:0px;
/*    float:left;*/
    height:100%;
    vertical-align:middle;
}
#shipFilterControl{
    display:none;
}
#otherFlexControl{
    display:none;
}
#otherControl{
    width:100%;
}
#minmaxbutton{
    height:42.8px;
    width:120px;
    color:#EEE;
}
.widgetbutton{
    text-align:center;
    border:#000;
    border-style:solid;
    border-radius:5px;
    background-color:#888;
    font-weight:bolder;
    display:table-cell;
    vertical-align:middle;
}
.currentwidgetbutton{
    display:unset !important;
    padding:5px;
    color:#fff !important;
    padding-left:10px !important;
    padding-right:10px !important;
}
#trackedVesselButton{
    color:#EEE;
}
.trackedVesselTextDiv{
    width:100%
}
#myFleetControl{
    display:none;
}
#myFleetListContainer{
    display:none;
}
.trackedVesselTextDiv:hover{
    background-color:#0000F0;
    color:#FFFFFF;
}
.trackedVesselElement{
    display:flex;
    width:100%;
/*    justify-content: space-between;*/
}
#trackedVesselControl{
    display:none;
}
#trackedVesselListContainer{
    display:none;
}
#trackedVesselSubelementName{
    margin-right:auto;
    margin-left:5px;
    float:left;
}
.trackedVesselSubelement{
    margin-right:5px;
    float:right;
}
#boxFilterControl{
    display:none;
}
.leafletmap {
    height:100%;
    width:100%;
}
.leaflet-tooltip.pointLabel{
  color: black;
  font-size:12px;
  text-shadow : 2px 2px 4px white, 2px -2px 4px white,-2px 2px 4px white, -2px -2px 4px white;
  font-weight:900;

  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }
.leaflet-tooltip.pointLabelLink{
  color: black;
  font-size:12px;
  text-shadow : 2px 2px 4px white, 2px -2px 4px white,-2px 2px 4px white, -2px -2px 4px white;
  font-weight:900;

  pointer-events:unset !important;
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }
.leaflet-tooltip.windLabel, .leaflet-tooltip.windLabel2{
  color: white;
  font-size:20px;
  -webkit-text-fill-color: black; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  font-weight:900;

  background-color: transparent;
  background:rgba(0,0,0,0) !important;
  border: none !important;
  box-shadow: none !important;
  }
.leaflet-sidebar{
    padding:0 !important;
}
.leaflet-tooltip.windLabel::before, .leaflet-tooltip.windLabel2::before{
    display:none;
}
.logo_overlay {
    position:absolute;
    z-index:9000;
    bottom:30px;
    right:10px;
    width:250px;
}
.leaflet-control-temperaturelist{
    margin:0px !important;
    background-color:rgba(255,255,255,0.7);
    display:table;
}
.temperature-list-ship{
    display:table-row;
}
.temperature-list-ship-element{
    display:table-cell;
    padding-left:4px;
}
.temperature-list-ship-information{
    text-align:right;
}
.sidebar-widget-sub-element{
    display:table;
    width:100%;
    border-top-style:dashed;
    border-top-color:var(--color-border);
    border-top-width:1px;
}

/*
.temperature-list-tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}*/

/* Tooltip text */
.temperature-list-tooltip .temperature-list-tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 52%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.temperature-list-tooltip:hover .temperature-list-tooltip-text {
  visibility: visible;
}
.language-flag{
    float: left;
}
.language-flag-text{
    height: 80px;
    font-size: 5em;
    margin-top: -22px;
}
.language-flag-img{
    height: 48px;
}
#autocomplete_target_input{
    border-style:none;
    width:99%;
    font-size:1.2em;
}

body{
    display:flex;
    flex-flow:column;
    color:var(--color-fg);
}
#mapid{
    flex:1 1 auto;
}
#topbar{
    flex:0 1 auto;
    border-bottom:#afafaf;
    border-bottom-style:solid;
    border-bottom-width:2px;
    background-color:var(--color-bg);
}
#namediv{
    line-height:28px;
    float:left;
}
#logout{
    float:right;
}
.leaflet-control-layers-expanded {
    color:var(--color-fg)!important;
}
.leaflet-control{
    background:var(--color-bg)!important;
    color:var(--color-fg-high-contrast)!important;
    border-color:var(--color-border-low-contrast)!important;
}
.leaflet-control-layers{
}
.leaflet-container{
    background-color:var(--color-bg)!important;
}
.leaflet-bar a{
    background-color:var(--color-bg)!important;
    color:var(--color-fg)!important;
    border-bottom-color:var(--color-border-low-contrast);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color:var(--color-bg-off)!important;
    color:var(--color-fg)!important;
}
.close {
    background-color:var(--color-bg-off)!important;
    color:var(--color-fg)!important;
    border-color:var(--color-border)!important;
}
input {
    background-color:var(--color-bg-off)!important;
    color:var(--color-fg)!important;
    border-radius: 4px;  
    border-color: var(--color-border-low-contrast);
    margin-top: 3px;
    padding:2px;
}
#mouseCoords {
    float:right;
}
.mouseCoords {
    float:left;
    font-size:21px;
    text-align:right;
    width:160px;
}
#topmenubutton{
    font-size:2em;
}
.topmenubutton{
    font-size:2em;
}
@media (max-height:812px){
    .mouseCoords{
        width:unset;
    }
    #topmenubutton{
        font-size:1em;
    }
    .topmenubutton{
        font-size:1em;
    }
}
@media (max-width:600px){
    #topmenubutton{
        display:none;
    }
    #coordtype{
        display:none;
    }
    .mouseCoordsActual{
        width:115px !important;
    }
}
.mouseCoordsActual {
    float:left;
    width:140px;
}
#bottomdiv {
    background-color:var(--color-bg);
}
.leaflet-tooltip.sartTip {
    font-weight:bold;
    font-size:1.5em;
    margin-top:1em;
    padding:unset;
}
.leaflet-tooltip-top.nameTip:before,
.leaflet-tooltip-bottom.nameTip:before,
.leaflet-tooltip-left.nameTip:before,
.leaflet-tooltip-right.nameTip:before {
	border: unset;
}
.leaflet-tooltip.nameTip {
    background:unset;
    border:unset;
    box-shadow: unset;
    color:var(--color-fg-high-contrast);
    text-shadow: 3px 3px 3px var(--color-bg), -3px -3px 3px var(--color-bg), -3px 3px 3px var(--color-bg), 3px -3px 3px var(--color-bg);
}
.leaflet-bottom{
    z-index:999;
}
.sidebar-trip-active{
    background:#0f0;
    color:#fff;
    width:100%;
}
.sidebar-trip:hover{
    background:#00f;
    color:#fff;
}
.sidebar-trip{
/*    display:flex;*/
    width:100%;
    display:table-row;
}
.trip-info{
/*    float:left;*/
/*    padding-right:10px;*/
    min-width:28px;
    max-width:128px;
    padding-right:10px;
    text-align:center;
    display:table-cell;
}
.trip-info-header{
    text-align:left;
    font-weight:bold;
}
.trip-info-date{
    min-width:130px;
}
.trip-info-right{
    text-align:right;
}
#tripsourceflex{
    width:100%;
    display:flex;
}
#tripsflex{
    width:100%;
}
.borderedscroll{
    border-top:black solid;
    margin-left:-.2em;
    width:calc( 100% + .2em);
    padding-left:.2em;
}
.overlaytable{
    display:table;
    border-collapse:collapse;
    width:calc(100% - 4em);
    margin-top:1em;
    margin-left:2em;
}
.overlayroweven{
    background-color:var(--color-bg-off);
}
.overlayheader{
    width:100%;
    font-size: 2em;
    padding-top:.3em;
    overflow:auto;
}
.overlayheadergroup{
    font-size:1.5em;
}
.overlayheader-inner{
    float:left;
    left:50%;
    position:relative;
}
.overlayheader-center{
    position:relative;
    float:left;
    left:-50%;
    padding-bottom:0.2em;
}
.tripfishtypetable{
    display:table;
    border-collapse:collapse;
    width:100%;
}
.tripfishtyperow{
    display:table-row;
}
.tripfishtyperow:hover{
    background-color:#00F;
    color:#fff;
}
.tripfishtyperowtotal{
    font-weight:bold;
}
.tripfishtypecell{
    display:table-cell;
    border-bottom-style:dashed;
    border-bottom-color:var(--color-border);
    border-bottom-width:1px;
    padding-right:.2em;
}
.tripfishtypename{
    width:90px;
}
.tripfishtypenumber{
    text-align:right;
    padding-left:20px;
}
.loader {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #000;
  width: 12px;
  height: 12px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  /*float:right;*/
  margin-right:5px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.outer{
    background:unset !important;
}
.overlay-outer{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:none;
        z-index:9999999;
}
.overlay-inner{
        position:absolute;
        top:20px;
        left:20px;
        width: calc( 100% - 40px );
        height: calc( 100% - 40px);
/*        height: 444px;*/
        background-color:var(--color-bg);
        overflow: scroll;
        border-color:var(--color-border);
        border-width:thick;
        border-style:solid;
        border-radius:2em;
}
@media print {
    .overlay-inner{
        width: 100%; 
        height: 100%; 
        top:0;
        left:0;
        border-radius:0;
        border-width:0;
        border-style:none;
        border-color:#fff;
        background-color:#fff;
        color:#000;
        overflow: visible;
    }
    #closeDIV{
        display:none;
    }
    #overlayPrintDiv{
        display:none;
    }
    .currentwidgetbutton{
        display:none !important;
    }
    .overlayroweven{
        background-color:#fff;
    }
}
.graphdiv{
        height:400px;
        width:100%;
        padding-top:2em;
}
#closeDIV{
        padding:.3em;
        border-color:var(--color-border)
        border-width:thin;
        border-style:solid;
        border-radius:.2em;
        margin-top:.2em;
        font-size:1.5em;
        background-color:var(--color-bg-off);
        position:absolute;
        right:.5em;
}
.vesseldivtable{
/*    display:table;
    width:auto;*/
    width:100%;
}
.vesseldivrow:hover{
    background-color:#00F;
}
.vesseldivrow{
/*    display:table-row;*/
    width:calc(100% - 6px);
    overflow:auto;
    border: solid var(--color-border) 3px;
}
.vesseldivcell{
/*    display:table-cell;
    font-size:2em;*/
    width:calc(100% - 4px);
    float:left;
    font-size:1.5em;
    text-align:center;
    border:solid var(--color-border) 2px;
}
.emptyIcon{
/*    height:0px !important;
    width:80px !important;
    margin-left:-40px !important;
    margin-top:0px !important;*/
}
.vesseldivcellright{
    text-align:right;
/*    padding-left:0.4em;*/
    width:calc(25% - 4px);
    height:1.5em;
    font-size:1.8em;
    border-bottom:unset;
    border-top:unset;
}

#overlayPrintDiv{
    position:absolute;
    top: 1em;
    right: 4em;
}
#overlayPrintImg{
    height:3em;
}
@media (max-width:800px){
.overlayheader{
    font-size:1.5em;
}
.overlayheadergroup{
    font-size:1em;
}
#overlayPrintDiv{
    display:none;
}
}