html {
    /*background-image:linear-gradient(white,white,#2EBBAD,#256EFF,#2EBBAD,white);*/
    background-color:white;
}

@font-face {
    font-family: 'Replica Regular'; /* Or the name you want to use */
    src:url('fonts/replica-regular.ttf'); /* Or the correct file name */
}

@font-face {
    font-family: 'Replica Mono'; /* Or the name you want to use */
    src:url('fonts/replica-mono.ttf'); /* Or the correct file name */
}

@font-face {
    font-family: 'Replica Bold'; /* Or the name you want to use */
    src:url('fonts/replica-bold.ttf'); /* Or the correct file name */
}

:root {
  --main-font:'Replica Regular', sans-serif; /* Define the main font family */
  --primary-color:#256EFF;
  --header-color:white;
  --time-header-color:rgba(140, 177, 253, 1);
  --header-background-color:#002366 !important;
  --header-background-opacity:80% !important;
  --header-font-color:#002366 !important;
  --header-outline-color:#256EFF !important;
  --header-font-size:14px;
  --header-font-weight:normal;
  --header-container-width:83em;
  --info-font-size:12px;
  --info-height:17.5em;
  --temperatures-info-height:16.5em;
  --info-bottom-radius:2px;
  --info-color:#002366;
  --tide-container-height:8em;
  --tide-container-width:40.75em;
  --waves-weather-container-width:28em;
  --temperature-container-width:25em;
  --sub-latest-conditions-height:15em;
  --value-font-size:12px;
  --default-width:83em;
  --max-width:83em;
  --navbar-color:linear-gradient(to right, #2EBBAD,#256EFF);
  --latest-conditions-width:30em;
  --latest-conditions-height:28.5em;
  --latest-conditions-font-size:24px;
  --dash-pages-height:30em;
  --info-container-background-opacity:75%;
  --gauge-background-color:#AABEE5;
  --sidebar-param-drop-width:16em
}

.main-container {
    height:49.5em;
    width:var(--default-width);
    max-width:var(--max-width);
    margin:auto;
    left:0;
    right:0;
    position:absolute;
    top:5vh;
}    

.container-dimmed {
    height:49.5em;
    width:var(--default-width);
    max-width:var(--max-width);
    margin:auto;
    left:0;
    right:0;
    position:absolute;
    top:5vh;
    opacity:35%;
    overflow:scroll
}    

.latest-conditions-container {
    height:var(--latest-conditions-height);
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:var(--default-width);
    max-width:var(--max-width);
    padding-bottom:0px;
    position:absolute;
    top:0.5em;
    display:flex;
    justify-content:space-between;
    border:var(--header-background-color);
    border-radius:var(--info-bottom-radius);
    -webkit-box-shadow: 0 0 15px var(--header-outline-color);
    box-shadow: 0 0 15px var(--header-outline-color);
}

.active-tide-style {
    padding-bottom:0.25em;
    font-weight:bold;
    color:#256EFF
}

.nonactive-tide-style {
    padding-bottom:0.25em;
    font-weight:normal;
}

.time-header {
    font-size:12px;
    color:var(--time-header-color)
}

.info {
    position:relative;
    width:20px;
    height:20px;
    top:0.4em;
    left:0.5em;
    float:left
}

.info:hover {
    cursor:pointer
}

.info-text {
    position:relative;
    text-align:left;
    left:-1em
}

.info-container-hidden {
    position:relative;
    display:none;
}

.daq-container {
    position:absolute;
    display:flex;
    justify-content:space-evenly;
    top:4em
}

.disclaimer {
    position:absolute;
    bottom:-33em;
    width:108em;
    left:0;
    right:0;
    color:#002366;
    text-align:justify;
    font-size:12px;
    padding-bottom:1em
}