/*
      -> element/tag
    . -> class
    # -> id      
*/


/*************************************
 * Cesium stuff
 ************************************/

.cesium-viewer-animationContainer, .cesium-viewer-timelineContainer, .cesium-viewer-bottom, .cesium-fullscreenButton, .cesium-viewer-geocoderContainer, .cesium-toolbar-button {
    visibility: hidden;
}


/*************************************
 * WebGL stuff
 ************************************/
html, body {
    padding: 0;
    margin: 0;
}

#earth_div {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute !important;
}



/*************************************
 * Windy stuff
 ************************************/
#windy #logo-wrapper {
    top: 0px;
    bottom: 65px;
}

#windy #logo-wrapper #logo {
    visibility: hidden;
}

.leaflet-control-attribution {
    visibility: hidden
}

#playpause {
    visibility: hidden
}

#progress-bar, #plugin-menu, #mobile-ovr-select, #legend-mobile {
    z-index: 1000 !important;
}


.leaflet-popup {
    opacity: 0.9 !important
}

.vessel_name_span {
    background-color: aquamarine;
    font-weight: bold;
    opacity: 0.6;
    white-space: nowrap;
    pointer-events: none;
}

.my-div-icon {
    width: 0px !important;
    height: 0px !important;
}

.popupButton {
    display: inline-flex;
    padding: 0px;
}


/*************************************
 * CONTROLS collapsible button
 ************************************/
#controlsButtonId {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    z-index: 1000;
    border-radius: 4px
}

.collapsible {
    background-color: slategray;
    color: white;
    cursor: pointer;
    width: 152px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}


#besideMouse {
    background-color: whitesmoke;
    border-radius: 4px;
    z-index: 1000;
    position: fixed;
    opacity: 0.7;
}


/**************************************************************
 * Hide controls when screen size is too small to display
***************************************************************/
/*@media only screen and (max-height: 600px) {
    #controlsButtonId {
        display: none !important;
    }
    #controlsFieldsetId {
        display: none !important;
    }
    #bingSimulationControlsFieldsetId {
        display: none !important;
    }
    #beaufortLegendFieldsetId {
        display: none !important;
    }
    #playPauseButtonId {
        display: none !important;
    }
}*/

#bingId {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#windy {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}



/************************************
   PLAY/PAUSE button
*************************************/
#playPauseButtonId {
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 1000;
}

.playPauseButton {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 20px;
    border-color: transparent transparent transparent mediumaquamarine; /*transparent transparent transparent #202020;*/
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 10px 0 10px 16px;
}

.playPauseButton.paused {
    border-style: double;
    border-width: 0px 0 0px 16px;
}

.playPauseButton:hover {
    border-color: transparent transparent transparent aquamarine; /*transparent transparent transparent #404040;*/
}


/*************************************
 * DATETIME SLIDER styling
**************************************/
#dateTimeLabelId {
    position: absolute;
    bottom: 48px;
    left: 15px;
    z-index: 1000;
    background-color: #d49500;
    color: white;
    height: 1.8em;
    box-sizing: border-box;
    padding: 0 .8em;
    white-space: nowrap;
    text-align: center;
    border-radius: .5em;
    box-shadow: 0 0 4px 0 black;
    font-size: 10px;
    font-family: sans-serif;
}

#dateTimeSliderId {
    background-color: mediumaquamarine;
    position: absolute;
    z-index: 1000;
    height: 5px;
    opacity: 0.7;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 15px;
    cursor: ew-resize;
    background: #d49500;
}


/*************************************
 * BEAUFORT LEGEND styling
**************************************/
#beaufortLegendFieldsetId {
    position: absolute;
    bottom: 13px;
    left: 0px;
    right: 0px;
    height: 17px;
    z-index: 400;
    display: none;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255), rgb(174, 241, 249), rgb(150, 247, 220), rgb(150, 247, 180), rgb(111, 244, 111), rgb(115, 237, 18), rgb(164, 237, 18), rgb(218, 237, 18), rgb(237, 194, 18), rgb(237, 143, 18), rgb(237, 99, 18), rgb(237, 41, 18), rgb(213, 16, 45));
}

#beaufortLegendFieldsetId > span {
        text-align: center;
        display: inline-block;
        width: 6.7%
}


/*************************************
 * INFORMATION PANEL stuff
 ************************************/

@media only screen and (min-width: 1367px) {
    .body-overflow {
        overflow: hidden !important;
    }
}

.body-overflow {
    overflow: auto;
}

.leftPadding {
    padding: 0px 0px 0px 8px;
}

.topPadding {
    padding: 8px 0px 0px 0px;
    vertical-align: sub;
}

.topLeftPadding {
    padding: 8px 0px 0px 8px;
}

.topRightPadding {
    padding: 8px 8px 0px 0px;
}

.topLeftRightPadding {
    padding: 8px 8px 0px 8px;
}

.leftRightPadding {
    padding: 0px 8px 0px 8px;
}

.topBottomLeftRightPadding {
    padding: 8px 8px 8px 8px;
}

hr {
    margin: 2px;
}

.accordion-button {
    padding: 4px;
}

.accordion-body {
    padding: 2px;
}

.controlsPanel {
    background-color: snow;
    border: 2px solid grey;
    padding: 1px;
    border-radius: 4px;
}

.informationPanel {
    color: black;
    font-family: 'Segoe UI';
    /*    font-weight: 700;*/
    float: left;
    display: contents;
}

.informationPanelHeader {
    min-width: 120px;
    border: 1px solid black;
}

@media only screen and (min-width: 1000px) {
    .accordion-collapse.collapse.show > td {
        min-width: 500px;
    }

    #fleetTrackerViewOptionsId {
        min-width: 250px;
    }
}

p {
    margin-block-start: 0px;
    margin-block-end: 4px;
}

input[type='text'] {
    width: 200px;
    height: 20px;
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
    float: right;
    font-family: monospace;
}

textarea {
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
    font-family: monospace;
}

input[type='number'] {
    width: 100px;
    height: 20px;
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
    font-family: monospace;
}

.vesselPositionDropdownLabel {
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 14px;
    color: black !important;
    white-space: nowrap;
}

.vesselPositionCB {
    margin: 0px;
    width: 17px;
    height: 17px;
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
    font-family: monospace;
}

#vesselOtheralertsId {
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
    font-family: monospace;
    width: 400px;
    height: 200px;
    overflow: auto;
}

button {
    border-radius: 4px;
}

hr {
    border: 1px solid black;
}


/************************************
VESSEL WEATHER IMAGE
*************************************/

#boatContainerId {
    position: relative;
    background-color: lightyellow;
    opacity: 1.0;
    border: 1px solid silver;
    border-radius: 4px;
}

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

#weatherIndicatorId, #weatherIndicatorIdAP, #weatherIndicatorIdCOMPLETE, #weatherIndicatorIdCALCULATED {
    position: absolute;
    left: 51px;
    top: 37px;
}



/************************************
VESSEL AIS LIST
*************************************/

.vesselAISList {
    border: 1px solid black;
    white-space: nowrap;
    padding: 0px 2px 0px 2px;
}

.modal-title {
    font-weight: bold;
}

#waypointSpeedsModal .modal-dialog {
    width: auto;
    margin: 0 auto;
}

@media only screen and (min-width: 1000px) {
    #waypointSpeedsModal .modal-dialog {
        width: 65%;
        margin: 1rem auto;
    }
}

.officeTypeSlider {
    width: 40px !important;
}