@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');

/*
:root{
    --primary-color:#3d3d3d;
    --header-background:#7C898B;
    --secondary-background:#e8e8e8;
    --header-text-color:#fff;
    --main-font:'Montserrat';
    --secondary-font:'Montserrat';
    --title-font:'League Gothic' , sans-serif;
    --fill-color-main:#7C898B;
    --main-line-color:#7C898B;
    --font-size-subtitles: 2.5rem;
    --font-size-main-text: 1.5rem;
    --fill-color-2: #d09587;
    --fill-color-3:#8E71C1;


}
*/
:root{
    --primary-color:#3d3d3d;
    --header-background:#7C898B;
    --secondary-background:#e8e8e8;
    --header-text-color:#fff;
    --main-font:'Montserrat';
    --secondary-font:'Montserrat';
    --title-font:'League Gothic' , sans-serif;
    --fill-color-main:#7C898B;
    --main-line-color:#e37327;
    --main-line-color-2:#7C898B;
    --font-size-subtitles: 2.5rem;
    --font-size-main-text: 1.5rem;
    --fill-color-2: #7C898B;
    --fill-color-3:#93705B;


}

body{
    font-family: var(--main-font);
    background: var(--secondary-background);

}
.title{
    font-family: var(--title-font);
    font-size:8rem;
    text-transform: uppercase;
    line-height: 8rem;

}
.subtitle{
    font-family: var(--secondary-font);
    font-size:var( --font-size-subtitles);
    letter-spacing: 1rem;
    text-transform: uppercase;

}
.banner{
    background: var(--header-background);
}

#main-header{
    width:600px;
    margin:0px auto;
    padding-top: 7rem;
    padding-bottom: 7rem;
    color: var(--header-text-color);

}
#main-header>.title{
    width:500px;
    margin:0px auto;
}
#main-header>.subtitle{
    width:630px;
    margin:0px auto;
}
#summarydiv{
    position:relative;
    margin:0px auto;
    width:627px;
}
.bar-holder{
    position: relative;
    width: 627px;
    min-heigh: 228px;
}
.bar-label{
    width: 125px;
    /* text-align: center; */
    margin-top: 12px;
    margin-left: 18px;
    margin-bottom:20px;
    text-align: center;

}
.chart-title{
    font-size:var( --font-size-subtitles);
    letter-spacing: .5rem;
    font-family: var(--main-font);
    letter-spacing: 1rem;

}
.main-text{
    font-size:var(--font-size-main-text);
    font-family: var(--main-font);
    letter-spacing: .2rem;
    text-transform: uppercase;
}
.chart-holder{
    text-align: center;
}
.buoy-chart{
    width: 100%;
    max-width: 60rem;
    margin: 30px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 45vw;
    min-height: 37rem;
    vertical-align: top;
    overflow: hidden;
}
.buoy-chart-large{
    width: 100%;
    max-width: 240rem;
    margin: 30px;
    display: inline-block;
    position: relative;
    width: 100%;
    height: 81vw;
    min-height: 37rem;
    vertical-align: top;
    overflow: hidden;
}
.heatmap-container{
    min-height: 45rem;
}
.bar{
    fill:var(--fill-color-main)
}
.main-line{
    stroke:var(--main-line-color);
    stroke-width: 1.75;
}
.main-line-raw{
    stroke:var(--main-line-color);
    stroke-width: .5;
    opacity:.50;
}
.main-line-2{
    stroke:var(--main-line-color-2);
    stroke-width: 1.75;
}
.main-line-heavy{
    stroke-width: 2.75;
}
.raw-line-2{
    stroke:var(--fill-color-2);
    stroke-width: .5;
    opacity:.5;
}
.raw-line-3{
    stroke:var(--fill-color-3);
    stroke-width: .5;
    opacity:.5;
}

.annotation-note-bg{
    fill: rgba(255, 255, 255,1);
    fill-opacity: 1;
}
.domain{
    stroke:gray;
    opacity: .3;
}

.wave-height{
    font-size:38px;
}
.wave-summary-text{
    font-size:var(--font-size-main-text);
    font-family: var(--main-font);
}
.condition-summary{
    margin:25px;
    font-family: var(--main-font);
}



.svg-container {
    display: inline-block;
    position: relative;
    width: 80%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}
.svg-wave-overall{
    height: 172px;
    width: 235px;
    top: 22px;
    left: 185px;

}
.svg-bar-generic{
    height: 172px;
    width: 407px;
    top: 58px;
    left: 218px;
}



/***
DROPDOWN WIDGET
 */

    /* Dropdown styles */

.dropdown-css {
    max-width: 200px;
    margin: 80px auto 0;
    height: 600px;
    position: relative;
    width: 100%;
}

.dropdown-btn-css {
    background: #1d1f24;
    font-size: 18px;
    width: 100%;
    border: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7em 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
}

.arrow-css {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    transition: transform ease-in-out 0.3s;
}

.dropdown-content-css {
    list-style: none;
    position: absolute;
    top: 3.2em;
    width: 100%;
    visibility: hidden;
    overflow: hidden;
}

.dropdown-content-css li {
    background: #2f3238;
    border-radius: 0.5em;
    position: relative;
    left: 100%;
    transition: 0.5s;
    transition-delay: calc(60ms * var(--delay));
    cursor: pointer;
}

.dropdown-btn-css:focus + .dropdown-content-css li {
    left: 0;
}

.dropdown-btn-css:focus + .dropdown-content-css {
    visibility: visible;
}

.dropdown-btn-css:focus > .arrow {
    transform: rotate(180deg);
}

.dropdown-content-css li:hover {
    background: #1d1f24;
}

.dropdown-content-css li a {
    display: block;
    padding: 0.7em 0.5em;
    color: #fff;
    margin: 0.1em 0;
    text-decoration: none;
    cursor: pointer;
}