.dash-pages-container {
    position:relative;
    width:var(--default-width);
    height:38em;
    top:30em;
    margin-top:0.75em;
    border-radius:5px;
    border:var(--header-background-color);
    -webkit-box-shadow: 0 0 15px var(--header-outline-color);
    box-shadow: 0 0 15px var(--header-outline-color);
}

.tabs { 
    position:relative;
    margin:0 0.01em 1em 0.01em; 
    top:-0.5em;
    padding:0.5em 19.75em 0.5em 19.75em;
    text-decoration:none;
    color:white;
    background-color:#002366e6!important;
    font-size:16px;
    height:0em;
    line-height:2em;
    z-index:5;
    border-radius:2px;
    font-family:var(--main-font)
} 

.tabs.active {
    background-color:#256EFF !important;
    color:white !important
}

.tabs:hover {
    background-color:#256EFF !important;
    color:white !important;
}

/*------------------ map page ---------------*/
.map {
    position:absolute;
    float:center;
    width:90%;
    height:30em;
    top:5.6em;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto
}

.map-legend {
    position:relative;
    display:flex;
    justify-content:space-evenly;
    width:55em;
    z-index:1;
    font-size:14px;
    color:rgba(0, 35, 102, 0.9);
    border:1px solid #256EFF;
    background-color:white;
    height:3em;
    top:-1.25em;
    margin:auto;
    border-radius:5px;
    -webkit-box-shadow: 0 0 15px var(--header-outline-color);
    box-shadow: 0 0 15px var(--header-outline-color);
    font-family:var(--main-font)
}

.map-legend-icon {
    position:relative;
    top:0.45em;
    left:-1em;
    height:30px;
    width:30px;
}

/*------------------ data page ---------------*/
.data-content {
    position:relative;
    left:3em;
    right:0;
    top:-2.5em;
    margin:0 auto 0 auto
}

.plot-settings-menu-icon {
    position:absolute;
    right:3.25em;
    z-index:2;
    top:2.5em;
    height:2.5em
}

.plot-settings-text {
    color:#256EFF;
    right:5.75em;
    top:2.25em;
    position:absolute;
    font-family:var(--main-font)
}

.plot-settings-menu-icon:hover {
    cursor:pointer
}

.sidebar-container {
    position:fixed;
    top:0;
    right:0;
    padding:3em 1em;
    width:20em;
    height:93%;
    background-color:white;
    border-left:2px solid rgba(0,35,102,1);
    transition:0.2s ease-in-out right;
    z-index:999;
    color:#256EFF;
    overflow:auto;
    font-family:Arial, Helvetica, sans-serif;
}

.sidebar-container-hidden {
    position:fixed;
    height:93%;
    padding:3em 0 0 0;
    top:0;
    bottom:0;
    right:-19rem;
    width:19rem;
    display:hidden;
    transition:right 0.2s
}

.sidebar-content {
    margin-left:20rem;
    padding-left:1rem;
    transition:margin-right 0.3s;
    z-index:1;
}

.sidebar-content-hidden {
    margin-right:0rem;
    transition:margin-right 0.3s;
    display:hidden;
    overflow:hidden;
    right:-18rem;
}

.sidebar-close {
    border:1px;
    border-radius:3px;
    color:rgba(0,35,102,1);
    background-color:white;
    font-size:30px;
    position:absolute;
    top:-3.5em;
    right:0
}

.sidebar-close:hover {
    cursor:pointer;
}

.waves-param {
    top:-5px;
    left:0px;
    justify-content:space-between;
    display:flex;
    width:auto;
    position:relative;
}

.data-param-drop {
    position:relative;
    text-align:left;
    left:0;
    width:20rem;
    color:#256EFF;
    top:0px;
    font-size:px;
}

.data-param-drop:hover {
    cursor:pointer
}

.data-param-drop-div {
    position:relative;
    text-align:left;
    top:-2em
}

.wave-options {
    position:relative;
    top:-440px;
    justify-content:space-between;
    display:flex;
    width:850px;
    left:-10px;
    background-color:#DDE8FE;
    padding-top:20px;
    padding-bottom:20px;
}

.wave-plot-format {
    display:flex;
    justify-content:space-between;
    width:850px;
    border-top:1px solid #256EFF;
    border-bottom:1px solid #256EFF;
    background-color:rgba(37, 110, 255, 0.3);
    left:-12px;
    top:29em;
    position:relative;
    padding-top:20px;
    padding-bottom:10px;
    margin-left:auto;
    margin-right:auto
}

.sidebar-title {
    color:white;
    background-color:#256EFF;
    font-weight:normal;
    text-align:center;
    border-radius:2px;
    border:1px solid rgba(0,35,102,1);
    font-size:16px;
    margin-bottom:-0.25rem;
    top:-1em;
}

.sidebar-subtitle {
    margin-bottom:2px;
    color:rgba(0,35,102,1);
}

.sidebar-hr-line1 {
    height:1px;
    background-color:rgba(0,35,102,1);
    top:0.25rem;
    position:relative;
    width:19rem;
    margin-top:0em
}

.sidebar-hr-line2 {
    height:3px;
    background-color:rgba(0,35,102,1);
    position:relative;
    top:-2em;
    margin:auto}

.plot-settings-label {
    color:white;
    background-color:rgba(0,35,102,1);
    border-radius:2px;
    padding:0.25em 0 0.25em 0;
    text-align:center;
    position:relative;
    top:-1em
}

.button {
    background-color:#022366
}

.data-subtab-container {
    position:absolute;
    left:1.2em;
    top:0em;
    border:2px solid #2EBBAD;
    border-radius:2px
}

.data-subtab {
    background-color:rgba(0, 35, 102, 0.9) !important;
    padding:0.15em 16em 0.15em 16em !important;
    color:white !important;
    font-size:16px !important;
    border-radius:2px;
}

.data-subtab--selected {
    background-color: #256EFF !important;
    color:white !important;
    cursor:pointer !important
}

.data-subtab--hover {
    background-color: #256EFF !important;
    color:white !important;
    cursor:pointer !important
}

/*
.data-subtab {
    position:relative;
    background-color:#256EFF !important;
    top:-5em;
    left:0em;
    width:0em;
    padding:0.35em 12em 0.35em 12em;
    font-size:14px;
    border:none;
    text-decoration:none;
    line-height:0px;
    height:0px;
    color:black
}

.data-tab-format:hover {
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-left-radius: 0em;
}
*/

.data-loading{
    position:relative;
    top:17.25rem
}

.date-picker {
    position:relative;
    top:0em;
    text-align:left;
}

.settings-label-bot-margin {
    margin-bottom:2em;
    font-weight:bold;
}

.DateInput, .DateInput_1 {
    border-radius: 2px 0 0 2px !important;
    width:20rem;
}

.DateInput_input, .DateInput_input_1 {
    Height:30px !important;
    Width:20rem !important;
    border-radius:inherit;
}

.DateInput_input:hover {
    cursor:pointer
}

.DateInput_input_1:hover {
    cursor:pointer
}

.SingleDatePickerInput__withBorder {
    border-radius: 2px 0 0 2px;
    border: 1px solid #ccc !important;
}

.tide-sameplot-div {
    display:flex;
    justify-content:space-between;
    left:0;
    margin:1em 2em 0 0;
    font-size:16px
}

.bottom-sidebar-buttons {
    display:flex;
    justify-content:space-between;
    position:absolute;
    width:19em
}

.update-plot-button {
    background-color:rgba(0,35,102,1);
    border-radius:2px;
    padding:0.5em 1.5em 0.5em 1.5em;
    color:white;
    font-size:16px;
    margin:1em 0 1.5em 0em;
}

.update-plot-button:hover {
    background-color:#256EFF;
    cursor:pointer
}

.clear-plot-button {
    background-color:rgba(0,35,102,1);
    border-radius:2px;
    padding:0.5em 1em 0.5em 1em;
    color:white;
    font-size:16px;
    margin:1em 0 1.5em 0em;
}

.clear-plot-button:hover {
    background-color:#256EFF;
    cursor:pointer
}

.modebar-container {
    top:4em !important; /* Adjust as needed */
    left:-7em !important; /* Adjust as needed */
}


/*
.tabs-background {
    position:relative;
    left:0;
    right:0;
    top:39.2em;
    height:39em;
    background-color:white;
    border-radius:2px;
    width:77em;
    border:1px solid #256EFF;
    -webkit-box-shadow: 0 0 15px var(--header-outline-color);
    box-shadow: 0 0 15px var(--header-outline-color);
}
.page-container {
    background-color:green;
    font-family:Arial, Helvetica, sans-serif;
    width:65em;
    text-align:center;
    left:-4em;
    right:0;
    margin-right:auto;
    margin-left:auto;
    position:absolute;
    top:35em
}
*/



/* .dash-pages-container {
    top:37em;
    position:absolute;
    margin:auto;
    border-image: linear-gradient(to right, #022366, #256EFF, #022366) 1;
    border:3px solid red
} */

/*
.dash_pages_container2 {
    position:relative;
    left:0;
    right:0;
    height:50em;
    border:1px solid blue
}  
*/
/*
.station_links {
    font-size:16px;
    display:wrap;
    justify-content:space-between;
    width:12em;
    position:relative;
    border-image: linear-gradient(to right, #256EFF, #2EBBAD, #256EFF) 2;
    border-left:0.25em solid;
    border-top:0.25em solid;
    top:3em;
    left:3.6em;
    padding-bottom:0em;
    padding-top:1.5em;
    border-top-left-radius:0.5em;
}
*/

/* .station_links_header {
    color:white;
    font-weight:bold;
    font-size:16px;
    position:absolute;
    float:left;
    background:rgba(0,35,102,1);
    padding-right:4.5em;
    padding-left:4.5em;
    margin-left:-.4em;
    padding-bottom:0em;
    padding-top:0em;
    top:11.3em;
} */