@import "../colors.css";

/* Dark mode switcher */

nav.main_menu.right{
    display:flex;
}
 .wpnm-button {
    font-size: 25px; 
    margin-left: 20px;
}
 .wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     outline: none 
}
 .wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
     display: inline-block;
     font-size: 0.875em;
     position: relative;
     padding: 0em;
     line-height: 1em;
     cursor: pointer;
     color: var(--white);
     font-weight: normal 
}
 .wpnm-button .wpnm-button-inner-left:before {
     content: '';
     display: block;
     position: absolute;
     z-index: 1;
     line-height: 2.125em;
     text-indent: 2.5em;
     height: 20px;
     width: 20px;
     margin: 5px;
    /*border-radius*/
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     right: 30px;
     bottom: 0em;
     background: var(--background-km-orange);
     transform: rotate(-45deg);
     box-shadow: 0 0 0.625em var(--white); 
}
 .wpnm-button .wpnm-button-inner-left:after {
     content: "";
     display: inline-block;
     width: 60px;
     height: 30px;
     -webkit-border-radius: 1em;
     -moz-border-radius: 1em;
     border-radius: 1em;
     background: var(--background-transparent);
     vertical-align: middle;
     border: 0.125em solid var(--border-km-orange)
}
 .wpnm-button.active .wpnm-button-inner-left:before {
     right: 10px;
     box-shadow: 0.3125em 0.3125em 0 0 var(--black);
     background: var(--background-transparent);
}
 .wpnm-button.active .wpnm-button-inner-left:after {
     background: var(--background-transparent);
     border: 0.125em solid var(--black) 
}
 .wpnm-button .wpnm-button-inner-left {
     color: var(--color-medium-light-gray);
     font-weight: bold 
}
 .wpnm-button.active .wpnm-button-inner-left {
     color: var(--color-light-gray);
     font-weight: normal 
}
 .wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
     color: var(--color-medium-light-gray);
     font-weight: bold 
}


.wpnm-button.mobile{
    display: none;
}

@media only screen and (max-width: 992px){
    .wpnm-button{
        display:none;
    }
   .wpnm-button.mobile{
/*        display: table;*/
/*        height: 100px;*/
/*        position: absolute;*/
    } 

    .menu .wpnm-button{
        font-size:inherit;
        margin-left:0;
    }
}


.wpnm-button-inner-left:before, 
.wpnm-button-inner-left:after,
body{
    /*transition*/
     -webkit-transition: 0.2s ease-in-out;
     -moz-transition: 0.2s ease-in-out;
     -o-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out
;}



/*body.dark-mode {
    filter: invert(1) hue-rotate(-180deg) ;

}
body.dark-mode img, 
body.dark-mode .section-leaderboard .thead-primary tbody tr td span.profile_img, 
body.dark-mode .divTableCell span.img, 
body.dark-mode iframe,
body.dark-mode .wpnm-button{
    filter: invert(1) hue-rotate(-180deg);
}
body.dark-mode .q_logo img, 
body.dark-mode .footer_top a img{
  filter: initial;
}
body.dark-mode section.home-sec1, 
body.dark-mode section.home-sec4{
    background-color:var(--background-transparent) !important;
}

body.dark-mode .hero-video iframe{
    box-shadow: none;
}*/

body.dark-mode {
    --white: #000;
    --black: #fff;
    --background-transparent: transparent;
    --background-light-gray: #242424;
    --background-dark-gray: #d6d6d6;
    --background-light-green: #071100;
    --background-medium-light-green: #d5ea98;
    --background-km-green: #87b501;
    --background-light-orange: #362304;
    --background-light-orange2: #ffce88;
    
    --background-km-orange: #f37b06;
    --border-transparent: transparent;
    --border-light-gray: #3c3c3c;
    --border-dark-gray: #808080;
    --border-light-orange: #f7c269;
    --border-km-orange: #f37b06;
    --border-light-green: #34420f;
    --border-km-green: #87b501;
    --border-km-dark-green: #789A0F;
    --color-transparent: transparent;
    --color-light-gray: #252525;
    --color-medium-light-gray: #a9a9a9;
    --color-medium-dark-gray: #7b7b7b;
    --color-dark-gray: #bababa;
    --color-light-orange: #eb774c;
    --color-km-orange: #f37b06;
    --color-km-green: #87b501;
    --color-km-dark-green: #789A0F;
    --boxshadow-light-gray: #212121;
    --text-shadow-green: #59740f;
    --gradient-start-orange: #f97e06;
    --gradient-end-orange: #fa9d06;
    --gradient-start-green: #7bc01f;
    --gradient-mid-green: #a8d34e54;
    --gradient-end-green: #a9ce26;
    --gradient-start-blue: #00ffff;
    --gradient-end-blue: #33ccff;
    --yellow: #f6ec11;
    --red: #b90000;
    --light-pink: #f5a0a0;
    --purple: #602bb5;
    --megenta: #b52b6b;
    --light-blue:#5ba7dd;
}


body.dark-mode .q_logo img, 
body.dark-mode .footer_top a img,
body.dark-mode .dashboard main .row3 .vector{
    filter: invert(1) hue-rotate(-180deg);
}

body.dark-mode section.home-sec1:after{
    background-image: url(./images/home-top-seperator-dark.png);
}

body.dark-mode section.home-sec4:before{
    background-image: url(./images/home-bottom-seperator-dark.png);
}

body.dark-mode .tournaments h3,
body.dark-mode .tournaments p,
body.dark-mode.page-template-page-tournament nav.main_menu > ul > li > a {
    color: var(--color-light-gray);
}

body.dark-mode .uagb-block-55861cc3 > .uagb-section__overlay{
    background-color:var(--background-light-orange);
}

body.dark-mode .has-very-dark-gray-color {
    color: var(--black);
}

body.dark-mode .uagb-block-e60dd18f > .uagb-section__overlay{
    background-color:var(--background-light-green);
}

body.dark-mode {
    color: var(--color-dark-gray);
    background: var(--white);
}


body.dark-mode .cloud_left{
    background-image: url(./images/cloud_left-dark.png);
}

body.dark-mode .divTableHeading{
    background: var(--background-light-orange2);
}