/* Main CSS Document for User Analytics Site */

@font-face {
    font-family: Calibre-R School;
    font-style: normal;
    font-weight: 500;
    src: url("../../fonts/Calibre-RSchool-Medium.4b33fc58d66b.otf") format("opentype");
}

@font-face {
    font-family: Calibre-R School;
    font-style: normal;
    font-weight: 400;
    src: url("../../fonts/Calibre-RSchool-Regular.df95df34b448.otf") format("opentype");
}

:root{
    --background: #F6F6F6;
    --femfit-blue: #00677F;
    --femfit-purple: #470A68;
    --femfit-purple-bar: #AA51A5;
    --charcoal: #2F2E2E;
    --femfit-logo-color: #95268F;
    --femfit-green: #438072;
    --grey2: #474747;
    --grey5: #E7E7E7;
    --primary1: #CE0F69;    /*Pink*/
    --primary2: #75757B;    /*Grey*/
    --primary3: #FFFFFF;    /*White*/
    --primary-font: 'Calibre-R School';
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* h1,h2,h3,h4{
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
} */

input, textarea, button, select, a{
    -webkit-tap-highlight-color: transparent;
}


@media only screen and (max-height: 200px){
    .load_screen{
        height: 1000px;
    }
}
@media only screen and (min-height: 250px){
    .load_screen{
        height: 100%;
    }
}

   
@media only screen and (max-width: 991px){
    /* CSS that should be displayed if width is equal to or less than 991px goes here */
    header.metrics_header{
        width: 100%;
        margin: 0px;
        background-color: var(--primary3);
    }

    .metrics_nav_bar{
        /* margin-bottom: 8%; */
    }

    div.metrics_body{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content:center;
        flex-direction: column;
        /* padding: 10px; */
        background-color: var(--background);
    }

    h1.metrics_h1{
        font-size: 10vw;
    }

    h1.metrics_h1.title{
        font-size: 5vw;
    }

    h2.metrics_h2{
        font-size: 5vw;
    }

    h2.metrics_h2.lrg_val{
        font-size: 7vw;
    }

    h3.metrics_h3{
        font-size: 4vw;
    }

    h3.metrics_h3.label{
        font-size: 3.5vw;
    }

    p.metrics_info{
        font-size: 3vw;
    }

    span.pressure_unit{
        font-size: 3vw;
    }

    .i_button{
        font-size: 5vw;
    }

    .nav_button{
        font-size: 3.5vw;
    }

    .progress_bar_text{
        font-size: 3.5vw;
    }
}

@media only screen and (min-width: 992px){
    /* CSS that should be displayed if width is equal to or greater than 992px goes here */
    header.metrics_header{
        width: 1000px;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        background-color: var(--primary3);
    }

    .metrics_nav_bar{
        /* margin-bottom: 80px; */
    }
    
    div.metrics_body{
        width: 1000px;
        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content:center;
        flex-direction: column;
        padding: 10px;
        background-color: var(--background);
    }

    h1.metrics_h1{
        font-size: 100px;
    }

    h1.metrics_h1.title{
        font-size: 50px;
    }

    h2.metrics_h2{
        font-size: 50px;
    }

    h2.metrics_h2.lrg_val{
        font-size: 70px;
    }

    h3.metrics_h3{
        font-size: 40px;
    }

    h3.metrics_h3.label{
        font-size: 35px;
    }

    p.metrics_info{
        font-size: 30px;
    }

    span.pressure_unit{
        font-size: 30px;
    }

    .i_button{
        font-size: 50px;
    }

    .nav_button{
        font-size: 35px;
    }

    .progress_bar_text{
        font-size: 35px;
    }
}


body{
    background-color: var(--background);
    margin: 0;
}

.metrics_header{
    position: relative;
    /* padding-top: 5%; */
}

.header_line{
    background-color: var(--grey5);
    clear: both;
    display: block;
    border:solid 1px var(--grey5);
    /* margin: 5% 0 5% 0; */
    margin-top: 5%;
    margin-bottom: 5%;
    width: 100%;
    height: 2px;
}

.header_line.pfma{
    margin-top: 12%;
    margin-bottom: 12%;
}


h1.metrics_h1{
    font-family: var(--primary-font);
    font-weight: normal;
    color: var(--charcoal);
    margin-top: 0px;
    margin-bottom: 10px;
}

h1.metrics_h1.title{
    font-weight: Medium;
    text-align: center;
}

h2.metrics_h2{
    font-family: var(--primary-font);
    /* font-weight: lighter; */
    font-weight: normal;
    color: var(--charcoal);
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 2%;
    text-align: left;
}

h2.metrics_h2.lrg_val{
    font-weight: 500;
    margin:0; 
    line-height: 1;
    color: var(--charcoal)
}
span.lrg_val_unit{
    font-weight: 400;
    font-size: 0.5em;
}

.dot{
    height: 1em;
    width: 1em;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-right: 1em;
    vertical-align: top;
}

h3.metrics_h3{
    font-family: var(--primary-font);
    /* font-weight: lighter; */
    font-weight: normal;
    color: var(--charcoal);
    margin-top: 2px;
    margin-bottom: 2px;
}

h3.metrics_h3.label{
    line-height: 1;
    margin-bottom: 1em;
}

span.pressure_unit{
    font-family: var(--primary-font);
    font-weight: lighter;
    color: var(--charcoal);
    margin-top: 5px;
    margin-bottom: 10px;
}

.metric_logo{
    position: absolute;
    align-self: top;
    margin-top: 10px;
    margin-right: 10px;
    justify-self: right;
    width: 15%;
}

.load_screen{
    position: absolute;
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading_image{
    width: 15%;
    animation-name: spin;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

.metrics_nav_bar{
    position: relative;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    margin-top: 10%;
    aspect-ratio: 12/1;
    /* border-radius: 4.5%/50%; half HEIGHT = vertical Radius */
    /* border-radius: 8.33%/100%; full HEIGHT = vertical Radius */
    /* border-radius: 8.33% 8.33% 0 0/100% 100% 0 0; */
    white-space: nowrap;
    overflow: hidden;
    /* background-color: #b4b4b4; */
    text-align: center;
    /* display: grid; */
    /* margin: 0; */
}

.nav_tab{
    display: inline-block; 
    /* border-radius: 15%/50%; */
    /* list-style-type: none;  */
    width: 33%;
    height: 100%;
    transition: 0.4s;
    overflow: hidden;
}

.nav_button{
    /* position: absolute; */
    background: transparent;
    /* border-radius: 15%/50%; */
    border: 0;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    align-self: center;
    cursor: pointer;
    color: var(--charcoal);
    font-family: var(--primary-font);
    padding: 0px;
    /* padding-bottom: 0px; */
    /* transition: 0.4s; */
    display: inline-flex;
    align-items: center; 
    flex-direction: column;
    
}
.nav_button.active{
    /* background: var(--femfit-blue); */
    color: var(--femfit-blue);
}
.nav_button.active hr.nav_line{
    border-color: var(--femfit-blue);
}

.nav_button:hover{
    color: var(--primary2);
    /* background-color: var(--primary1); */
}

.nav_line{
    border: 0.3vw solid transparent;
    border-radius: 0.3vw;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0;
}

.tab_content{
/* display: none; */
}

#tabs .ui-tabs-active{
    background-color: var(--primary1);
}

div.metric_container{
    position: relative;
    overflow: visible; /* don't clip edges or change size of the metrics container */
    background-color: transparent;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 327/180;
    display: flex;
    margin-bottom: 5%;
    margin-top: 5%;
}

div.metric_container.adherence{
    aspect-ratio: 327/155;
}

div.metric_inner{
    position: relative;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: var(--grey5); 
    border-width: 1px;
    /* border-radius: 30px; */

    /* background: var(--primary3); */
    box-shadow: 0px 0px 4px #B0B0B040;
    display: flex;
    transition: transform 0.4s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

div.metric_inner.normal{
    border-radius: 4%/8%;
}

div.metric_inner.large{
    border-radius: 4%/4.8%;
}
/* .metric_container:hover .metric_inner{
    transform: rotateY(180deg);
} */

div.metric_main{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    -webkit-backface-visibility: hidden;
    border-radius: inherit;
    background: var(--primary3);
    backface-visibility: hidden;
    padding: 5% 4%;
}

.metric_inner.large > div.metric_main{
    padding: 4% 4% 4% 4%;
}

/* div.metric_main > *{
    backface-visibility: hidden;
}

div.metric_back > *{
    backface-visibility: hidden;
} */

.metric_graphic_container{
    /* flex: 66.66%;
    flex: calc((100% / 3)*2); */
    flex: 50%;
    height: 100%;
    /* text-align: center; */

    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal align */
    justify-content: center; /* vertical align */
}

.metric_text_container{
    /* flex: 33.33%;
    flex: calc(100% / 3); */
    flex: 50%;
    height: 100%;
    /* text-align: center; */
    /* border-style: solid; */

    display: flex;
    flex-direction: column;
    align-items: left; /* horizontal align */
    justify-content: top; /* vertical align */
}

.metric_graphic{
    width: 95%;
    max-width: 95%;
    aspect-ratio: 1;
    overflow: hidden;

    /* border-style: solid; */
    /* border-color: var(--primary1); */
    /* border-width: 6px; */
    /* border-radius: 25px; */
    /* outline: 6px solid var(--primary1); */
    /* outline-offset: -6px; */
    /* box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    /* padding-top: 5%; */
    /* padding: 5px; */
    margin: 2.5%;
}

.ls_graphic{
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    aspect-ratio: 1;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    overflow: visible;
    text-align: center;
    padding: 0;
    /* border: 2px solid green; */
}
.ls_item{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
    height: 100%;
    transition: 0.4s;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    /* border: 2px solid green; */
}
.ls_text{
    width: 48%;
}

.ls_vl_box{
    width: 4%;
}
.ls_vl{
    border-left: solid var(--primary2); 
    margin: auto;
    height: 90%;
}

.bird_box{
    padding: 10%;
    display: flex;
}
.bird_graphic{
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.adherence_ring{
    aspect-ratio: 1; 
    width:80%; 
    height: 80%;
    align-self: centre;
    justify-self: centre; 
    
    margin: 10%;
    /* margin-top: 10%;
    margin-left: 10%; */
}

.adherence_container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 70%;
    gap: 7%;
    margin-top: 5%;
}

.adherence_box{
    aspect-ratio: 139/85;
    background-color: var(--femfit-blue);
    height: 100%;
    border-radius: 13.2%/20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.adherence_box.current{
    /* background-color: var(--femfit-blue); */
    background: linear-gradient(137.08deg, var(--femfit-purple) 1.28%, var(--femfit-purple) 95.65%);
    border: 1px solid var(--femfit-purple);
    box-shadow: 0px 0px 16px rgba(134, 134, 134, 0.3);
}

.adherence_box.previous{
    /* background-color: var(--femfit-blue); */
    background: linear-gradient(290.5deg, var(--femfit-blue) 0%, var(--femfit-blue) 100%);
    border: 1px solid var(--femfit-blue);
    box-shadow: 0px 0px 4px rgba(176, 176, 176, 0.25);
}

.metric_back{
    position: absolute;
    justify-self: left;
    text-align: center;
    color: var(--primary1);
    width: 100%;
    height: 100%;
    /* border-style: solid;
    border-color: var(--primary1); */
    /* border-width: 6px; */
    border-radius: inherit;
    background: var(--primary3);
    /* display: block;  */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    /* transform: rotateX(180deg); */
}

.metric_info_container{
    width: 100%;
    height: 100%;
    text-align: center;
}

p.metrics_info{
    font-family: var(--primary-font);
    text-align: center;
    padding-left:10%; padding-right:10%;
    color: var(--charcoal);
}

.i_button{
    /* z-index: 0; */
    /* display: block; */
    position: absolute;
    /* align-self: top; */
    /* justify-self: right; */
    background-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* aspect-ratio: 1; */
    width: 7%;
    padding: 0px;
    top: 8%;
    right: 4%;
    border-style: solid;
    border-color: var(--primary1);
    border-width: 0px;
    border-radius: 50%;
    text-align: center;
    font-family: var(--primary-font);
    color: var(--primary1);

    cursor: pointer;
}

.i_button img {
    vertical-align: middle; /* or top */
  }

.i_button:hover{
    /* border-color: #b4b4b4;
    color: #b4b4b4; */
}

.info-sign{
    font-family: var(--primary-font);
    font-style: normal;
}

span.metric_span{
    display:inline-block;
    vertical-align: middle;
}

.legend_toggle{
    height: 100%;
}

.legend_box {
    position: relative;
    display: flex;
    align-items: center;
    border: solid medium var(--primary3);
    /* outline: solid medium; */
    aspect-ratio: 1;
    height: 100%;
    margin-right: 10px;
    border-radius: 50%;
    justify-content: center;
    z-index: 1;
}

.legend_box.pfma::before {
    /* border-style: solid 1% var(--primary3); */
    /* stroke-dasharray: 100 100; */
    border: medium solid var(--primary1);
    /* outline-offset: -1%; */
}

.legend_box.pelv::before {
    border: medium dashed var(--femfit-purple-bar);
}

.legend_box.ab::before {
    border: medium solid var(--charcoal);
}

.legend_box::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    border-radius: 50%;
    z-index: -1;
}

.legend_tab{
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    height: 100%;
}

.legend_row {
    display: flex; /* Use flexbox */
    flex-direction: row; /* Make the wrappers align horizontally */
    align-items: center; /* Center the child elements vertically */
    justify-content: center;
    margin: 2% auto auto 0px;
    width: 100%;
    height: 100%;
    gap: 30%;
  }

.long_graph_legend{
    /* border: solid black; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2%;
}

.legend_container{
    margin: auto;
}

.progress_bar_text{
    position: absolute;
    right: 0;
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--charcoal);
    margin-top: 2%;
}

.progress_bar{
    position: relative;
    margin-top: 2%;
}

.center_div{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
}