@font-face {font-family: OpenBold;src: url('../fonts/OpenSans-Bold.ttf');}
@font-face {font-family: OpenLight;src: url('../fonts/OpenSans-Light.ttf');}
@font-face {font-family: OpenRegular;src: url('../fonts/OpenSans-Regular.ttf');}
@font-face {font-family: OpenSemiBold;src: url('../fonts/OpenSans-Semibold.ttf');}
@font-face {font-family: MontserratBlack;src: url('../fonts/Montserrat-Black.ttf');}
@font-face {font-family: MontserratBold;src: url('../fonts/Montserrat-Bold.ttf');}
@font-face {font-family: MontserratLight;src: url('../fonts/Montserrat-Light.ttf');}
@font-face {font-family: MontserratMedium;src: url('../fonts/Montserrat-Medium.ttf');}
@font-face {font-family: MontserratRegular;src: url('../fonts/Montserrat-Regular.ttf');}
@font-face {font-family: MontserratSemiBold;src: url('../fonts/Montserrat-SemiBold.ttf');}

*{ 
    margin: 0;
    padding: 0;
}
*, *:after, *:before {
    box-sizing: inherit;
}
Html {
    font-size: 62.5%;
    Box-sizing: border-box;
}
p, a {
    font-size: 1.6rem;
    font-family: 'OpenRegular';
}
a {
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
a:hover {
    opacity: 0.7;
}
h1 {
    font-size: 3rem;
    font-family: 'MontserratRegular';
}
h2, h3, h4, h5 {
    font-size: 2.5rem;
    font-family: 'MontserratRegular';
}
p#datafile {
    height: 0;
    opacity: 0;
}
.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    display: none;
}

.centred-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
.hide-it{
    display: none !important;
}
.mobile-only{
    display: none;
}
header#masthead {
    box-shadow: 1.5px 2.6px 10px 0 rgba(223, 223, 223, 0.75);
    height: 90px;
}
.header-content {
    width: 90%;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-cameleon {
    object-fit: contain;
    max-width: 200px;
}
.logout {
    font-size: 1.6rem;
    text-align: left;
    color: #5ab8e4;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.logo-off {
    width: 18px;
    margin: 0 5px;
    object-fit: contain;
}
.stats-header {
    height: 220px;
    background-size: 100%;
    background-color: rgb(89,184,228,0.1);
    background-image: url('../images/money-header.png');
}
.stats-header-title {
    margin: 0 auto;
    max-width: 1600px;
    width: 80%;
    padding: 30px;
}
.stats-header-title h4 {
    font-family: 'MontserratLight';
    font-size: 3rem;
    color: #00263e;
}
.stats-header-title h2 {
    font-size: 3.5rem;
    color: #00263e;
    font-family: 'MontserratBold';
}
.input-date {
    min-width: 26.5rem;
    max-height: 48px;
    font-family: 'MontserratRegular';
    font-size: 1.4rem;
    font-weight: 300;
    text-align: center;
    color: #00263e;
    border: none;
    margin-bottom: 15px;
    border-radius: 15px;
    padding: 1.6rem 3rem 1.6rem 40px;
    box-shadow: 1.5px 2.6px 13px 0 rgba(213, 213, 213, 0.53);
    background-color: #ffffff;
    outline: none;
    background-image: url(../images/cal.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 18px center;
    cursor: pointer;
}
canvas#chart {
    max-width: 800px;
    max-height: 400px;
    height: 100%;
}
.stats-content {
    border-radius: 30px;
    box-shadow: 0 0 13px 0 rgba(218, 218, 222, 0.75);
    /* background-color: #ffffff; */
    background-color: transparent;
    max-width: 1600px;
    width: 80%;
    margin: -75px auto 50px;
    overflow: hidden;
}
.graph-header {
    /* border-bottom: solid 0.5px #e5ebf1; */
    display: flex;
    padding: 0 0;
    position: relative;
    background-color: transparent;
    background-color: #E0F5FC;
    height: 75px;
    margin-bottom: 3rem;
    justify-content: space-between;
}
.graph-header-title {
    position: relative;
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(0, 38, 62, 0.42);
    transition: all 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* background-color: rgba(0,0,0,0.1); */
    padding: 0 60px;
    width: 50%;
}
.graph-header-title.active {
    color: #eebf46;
    font-family: 'OpenSemiBold';
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    background-color: #fff;
}
.graph-header-title.active:after {
    content: "";
    width: 90px;
    height: 6px;
    bottom: -2px;
    border-radius: 5px;
    left: 60px;
    position: absolute;
    background-color: #eebf46;
}
.graph-inputs {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
}
.graph-content {
    padding: 0 60px 30px;
}
.calender-btn {
    background-color: #eebf46;
    display: flex;
    width: 100px;
    height: 30px;
    border: none;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-family: 'MontserratRegular';
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
}
span.drp-selected {
    display: none !important;
}
.drp-buttons {
    display: flex !important;
    justify-content: space-between;
    flex-direction: row;
}
[class$="-legend"] {
    list-style: none;
    cursor: pointer;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    margin-top: 20px;
}
  
[class$="-legend"] li {
    display: block;
    font-family: 'MontserratRegular';
    font-size: 1.2rem;
    font-weight: 300;
    text-align: left;
    color: #00263e;
    border-radius: 15.5px;
    box-shadow: 0 0 13px 0 rgba(213, 213, 213, 0.34);
    background-color: #ffffff;
    border: solid 0.5px #eaf1f7;
    padding: 6px 15px;
    margin: 0 5px 5px;
    cursor: default;
}
  
[class$="-legend"] li.hidden {
    text-decoration: line-through;
}
  
[class$="-legend"] li span {
    border-radius: 2px;
    display: inline-block;
    height: 10px;
    margin-right: 10px;
    width: 10px;
}
div.format-chart {
    margin: 50px 0 0;
    display: flex;
    justify-content: space-between;
}
.child-chart {
    width: 48%;
    border-radius: 20px;
    box-shadow: 0 0 13px 0 rgba(218, 218, 222, 0.75);
    padding: 20px 15px;
    background-color: #ffffff;
}
h4.title-chart {
    font-family: 'OpenSemiBold';
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 2.5rem;
    color: #00263e;
    padding-left: 20px;
}
.pie-chart [class$="-legend"] {
    justify-content: center;
    border-radius: 20px;
    padding: 15px 0 5px 0;
}
.pie-chart [class$="-legend"] li {
    font-size: 1.1rem;
    white-space: nowrap;
}
.hozi-chart {
    height: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
select#format-select, select#site-select {
    max-width: 200px;
    width: 100%;
    border-radius: 16px;
    height: 45px;
    border: none;
    margin: 0 10px;
    box-shadow: 1.5px 2.6px 13px 0 rgba(213, 213, 213, 0.53);
    background-color: #ffffff;
    font-family: 'MontserratSemiBold';
    font-size: 1.4rem;
    font-weight: 300;
    text-align: left;
    color: #00263e;
    outline: none;
}
.legend-container{
    width: 100%;
    margin-top: 2rem;
    padding: 0 20px;
}
ul.lengd-bar li {
    width: 100%;
    font-family: 'MontserratRegular';
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    text-align: left;
    color: #00263e;
}
ul.lengd-bar li span.bold{
    font-family: 'MontserratBold';
}
.select-container {
    display: flex;
    justify-content: space-between;
    width: 435px;
    margin-left: 10px;
}
@media not all and (min-resolution:.001dpcm) { 

    .select-container {
        width: 480px;
    }
}
.export-btn {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
.export-btn img {
    height: 50px;
    object-fit: contain;
}
nav.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content{
    display: none;
}
.login-container{
    display: flex;
    height: 100vh;
}
.login-part {
    width: 50%;
}
.login-partI img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.login-partII {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-title {
    font-size: 2.2rem;
    font-family: 'MontserratLight';
    margin: 3rem 0;
    color: #010101;
}
.login-part .logo-cameleon {
    max-width: 240px;
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
    border: none;
    padding: 0;
    margin: 0;
}
.login-part .woocommerce {
    width: 90%;
    max-width: 380px;
}
.woocommerce form .form-row {
    width: 100%;
    min-height: 55px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0;
    border: solid 0.5px #e6e6e6;
    transition: all 0.2s ease-in-out;
}
p.woocommerce-form-row.form-row:focus-within {
    border-left: 4px solid #ee7a75;
    outline: none;
}
p.woocommerce-form-row.form-row:focus-within label {
    display: block;
}
.woocommerce form .form-row label {
    display: none;
    line-height: normal;
    font-family: 'OpenRegular';
    font-size: 1.2rem;
    text-align: left;
    color: #cdcdcd;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    margin-top: 5px;
    font-family: 'OpenSemiBold';
    font-size: 1.6rem;
    text-align: left;
    border: none;
    color: #000000;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    line-height: normal;
}
.woocommerce form .form-row input.input-text::-webkit-input-placeholder,.woocommerce form .form-row textarea::-webkit-input-placeholder { 
    color: #cdcdcd;
    font-size: 1.4rem;
}
.woocommerce form .form-row input.input-text:-ms-input-placeholder,.woocommerce form .form-row textarea:-ms-input-placeholder { 
    color: #cdcdcd;
    font-size: 1.4rem;
}  
.woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder {
    color: #cdcdcd;
    font-size: 1.4rem;
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
    font-family: 'MontserratSemiBold';
    font-size: 1.3rem;
    text-align: left;
    color: #010101;
    margin: 10px 0;
}
.woocommerce-form-login__rememberme input {
    margin-right: 10px;
    cursor: pointer;
}
.btn-container {
    width: 100%;
    margin: 3rem 0 2rem;
    display: flex;
    justify-content: center;
}
button.woocommerce-button.button.woocommerce-form-login__submit, button.woocommerce-Button.button{
    width: 100%;
    font-family: 'MontserratRegular';
    font-size: 1.8rem;
    border-radius: 5px;
    background-color: #eebf46;
    color: #ffffff;
    margin-right: 0;
    transition: all 0.3s ease-in-out;
    outline: none;
}
button.woocommerce-button:hover,  button.woocommerce-Button.button:hover {
    opacity: 0.8;
    background-color: #eebf46;
    color: #ffffff
}
.text-reset {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    color: #000;
    text-align: center;
}
p.woocommerce-LostPassword.lost_password, p.woocommerce-LostPassword.lost_password a {
    font-family: 'MontserratSemiBold';
    font-size: 1.3rem;
    text-align: center;
    color: #010101;
    margin: 10px 0;
    text-decoration: none;
}
.woocommerce-error {
    border-top-color: #ee7a75 ;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    padding: 1em 2em 1em 3.5em;
    margin: 0 0 2rem;
    position: relative;
    background-color: #f7f6f7;
    color: #515151;
    border-top: 3px solid #ee7a75;
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
    font-size: 1.4rem;
    font-family: 'OpenRegular';
}
ul.woocommerce-error a {
    display: none;
}
.woocommerce-error::before {
    color: #ee7a75 !important;
}
.woocommerce-message::before {
    color: #ee7a75 !important;
}
section.error-404.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}
.daterangepicker.ltr.show-ranges.opensright {
    min-width: 270px;
}
.total-rev h4.title-chart, .total-impr h4.title-chart{
    margin-bottom: 1.5rem;
}
.format-details {
    margin-top: 2rem;
    border-radius: 20px;
    box-shadow: 0 0 13px 0 rgba(218, 218, 222, 0.75);
    padding: 20px 15px;
    background-color: #ffffff;
}
.price-nowrap {
    white-space: nowrap;
}
@media screen and (min-width: 1400px){
    Html {
        font-size: 65.5%;
    }
    .pie-chart [class$="-legend"] li {
        font-size: 1.1rem;
    }
    ul.lengd-bar li {
        font-size: 1.2rem;
    }
}
@media screen and (max-width: 1130px){
    .select-container {
        width: 100%;
        margin-left: 0;
    }
    select#format-select, select#site-select {
        margin: 0 0;
        max-width: 100%;
        width: 100%;
    }
    .selectric-wrapper {
        width: 49%;
        min-width: 155px !important;
    }
    .selectric .label {
        font-size: 1.4rem !important;
    }
    .graph-inputs {
        flex-direction: column;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width: 960px){
    .stats-content {
        max-width: 95%;
        /* padding: 30px 30px 25px; */
    }
    .graph-content {
        padding: 0 5% 30px;
    }
    /* .graph-header {
        padding: 20px 5% 20px;
    } */
    .stats-header-title {
        max-width: 95%;
        
    }
    .graph-header-title {
        text-align: center;
        font-size: 1.6rem;
        width: 50%;
        padding: 0px 30px;
    }
    .graph-header-title.active:after {
        width: 100%;
    }
    .graph-header-title.active:after {
        left: 0;
    }
}
@media screen and (max-width: 768px){
    Html {
        font-size: 50.5%;
    }
    .mobile-only{
        display: inline;
    }
    .desk-only{
        display: none;
    }
    .stats-header {
        height: 195px;
    }
    div.format-chart {
        flex-direction: column;
        align-items: center;
        margin: 0 0 0;
    }
    .child-chart {
        margin-bottom: 3rem;
        max-width: 350px;
        width: 100%;
    }
    .format-chart canvas {
        margin: 0 auto;
    }
    div#ecmp-chart, div#visi-chart {
        margin-bottom: 30px;
    }
    .stats-header-title h2 {
        white-space: nowrap;
        font-size: 3rem;
    }
    /* .graph-content {
        padding: 0px 5% 5px;
    } */
    
   
    [class$="-legend"] {
        margin-bottom: 0rem;
    }
    .total-rev p,.total-impr p {
        margin-bottom: 1rem;
    }
    .format-impre,.format-rev{
        margin-bottom: 2rem;
    }
    .format-chart div:last-child {
        margin-bottom: 0;
    }
    .pie-chart [class$="-legend"] {
        margin-bottom: 0;
    }
   
    div#ecmp-legend ul, div#visi-legend ul {
        flex-wrap: nowrap;
    }
    div#ecmp-legend ul li, div#visi-legend ul li{
        white-space: nowrap;
    }
    
    .login-container {
        height: 100%;
        flex-direction: column-reverse;
        min-height: 100vh;
        align-items: center;
        justify-content: space-between;
    }
    .login-partII {
        margin: 6rem 0 4rem;
    }
    .login-part {
        width: 100%;
    }
    .login-partI {
        height: 180px;
    }
    .login-partI.login-part img {
        object-position: center;
    }
    /* .stats-content {
        padding: 10px 0px 10px;
    } */
    .input-date {
        min-width: 26.5rem;
    }
    /* .graph-header {
        padding: 10px 0% 20px;
    } */
    .export-btn img {
        height: 38px;
    }
    .selectric {
        margin-right: 0 !important;
        height: 45px !important;
    }
    .selectric .label {
        line-height: 45px !important;
    }
    .selectric .button {
        height: 45px !important;
        line-height: 45px !important;
    }
    .pie-chart [class$="-legend"] li {
        margin: 0 2px 5px;
    }
    .graph-header-title {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 10px;
    }
    .format-details {
        margin-bottom: 3rem;
    }
}
@media screen and (max-width: 450px){
    .select-container {
        flex-wrap: wrap;
    }
    .select-wrapper {
        width: 100% !important;
        margin-bottom: 1.5rem !important;
        height: 38px !important;
    }
    .stats-header-title {
        width: 95%;
    }
    .graph-header-title {
        padding: 0px 5px;
    }
    
}
@media screen and (max-width: 390px){
    .stats-content {
        max-width: 90%;
        width: 100%;
    }
    div#ecmp-legend ul, div#visi-legend ul {
        flex-wrap: wrap;
    }
    div#ecmp-legend ul li {
        min-width: 150px;
    }
    div#visi-legend ul li {
        min-width: 170px;
    }
    p.graph-header-title span {
        line-height: 4px;
    }
    .graph-header-title {
        line-height: 19px;
    }
}
/* spinner annimation */
.sk-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}
.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}
.sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg); }
.sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
}
.sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg); 
}
.sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); 
}
.sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg); 
}
.sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg); 
}
.sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
}
.sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); 
}
.sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg);
}
.sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
}
.sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
}
.sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
}
.sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
}
.sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; 
}
.sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; 
}
.sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; 
}
.sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; 
}
.sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s; 
}
.sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
}
.sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s; 
}
@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
}
@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
}
/* end animation spinner */