:root {
    
    --height-header: 60px;
    --width-sidebar: 170px;
    --width-userMenu: 200px;


    /* background */
    --background-main: #28c281;
    --background-main-DT: color-mix(in srgb, var(--background-main) 50%, rgb(0, 25, 50)); 
    --background-mainShade: color-mix(in srgb, var(--background-main) 90%, rgb(0, 0, 0)); 
    --background-mainShade-DT: color-mix(in srgb, var(--background-main-DT) 93%, rgb(255, 255, 255)); 

    --background-body: #dfdfdf;
    --background-body-DT: #242424;

    --background-sidebar: color-mix(in srgb, var(--background-main) 15%, rgb(203, 203, 203)); 
    --background-sidebar-DT: #1a1a1a;
    --background-sidebarShade: color-mix(in srgb, var(--background-main) 35%, rgb(203, 203, 203)); 
    --background-sidebarShade-DT: #272727;

    --background-green: #0080004d;
    --background-green-DT: #0080004d;
    --background-red: #ff00003d;
    --background-red-DT: #ff00003d;
    --background-blue: #6ebdc7;
    --background-blue-DT: #00e2ff78;
    --background-pink: #d58ad5;
    --background-pink-DT: #89207c;

    /* color */
    --color-main: color-mix(in srgb, var(--background-main) 50%, rgb(0, 0, 0));
    --color-link: color-mix(in srgb, var(--background-main) 80%, rgb(0, 0, 0));
    --color-link-DT: color-mix(in srgb, var(--background-main) 50%, rgb(255, 255, 255));

    --color-white: #fff;
    --color-black: #000000;
    --color-gray: #808080;
    --color-grayDark: #5b5b5b;
    --color-grayLight: #a5a5a5;

    --color-green: #008000;
    --color-green-DT: #72e872;
    --color-red: #f00;
    --color-red-DT: #f07171;
    --color-blue: #009aae;
    --color-blue-DT: #49eaff;
    --color-pink: #ca31ca;
    --color-pink-DT: #ff8cec;
    --color-heart: #ff4f4f;
    --color-heart-DT: #ff8b8b;

    
  
}





/* ТЕГИ */
* {
    margin: 0;
    padding: 0;
}
BODY {
    font-family: Arial, sans-serif;
    font-size: 16px;
    background: var(--background-body);
    color: var(--color-main);
}
FIELDSET {
    border: none;
    border-top: 1px solid var(--background-body);
}
LEGEND {
  margin: 0 auto;
  padding: 0 10px;
  color: var(--color-grayLight);
  font-size: 14px;
}
IMG {display: block;}

/* Ссылки */
A {
    text-decoration: none;
}
.link {
    color: var(--color-link);
    text-decoration: underline;
}
.link:hover {
    text-decoration: none;
}

/* header */
.header {
    height: var(--height-header);
    background: var(--background-main);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--background-body);
}
.elemRightHeader {margin-right: 6px;}
.elemLeftHeader {margin-left: 6px;}


/* main-content */
.main-content {
    margin: var(--height-header) 0 0 0;
    /* padding-bottom: 90px; */
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
    position: relative;
}


/* footer */
.footer {
    margin-left: var(--width-sidebar);
    background: #131313;
    color: white;
    padding: 50px;
}


/* sidebar */
.sidebar {
    background-color: var(--background-sidebar);
    width: var(--width-sidebar);
    margin-top: var(--height-header);
    height: calc(100% - var(--height-header));
    position: fixed;
    top: 0;
    transition: left 0.5s;
    z-index: 10;
    overflow: auto;
    scrollbar-width: thin;
    
}
.sidebar ul {
    list-style-type: none;
}
.sidebar a:hover {background-color:var(--background-sidebarShade);}


/* blockListMenu */
.blockListMenu {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    padding: 0 4px 0 12px;
}
.listMenu {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    background-image: url('/public/img/site/menu.png');
    background-position: center top;
    filter: brightness(135%);
}
.listMenu:hover {
    background-position: center bottom;
}


/* Переключатель языков */
.wrapLangBlock {
    font-size: 18px; 
    padding: 4px 12px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    cursor: pointer; 
    color: white;
}
.langList {
    padding: 6px 0;
    background-color: var(--background-main);
    border-radius: 3px;
    position: absolute;
    width: 80px;
    margin-top: 6px;
  }
  .langList > a {
    padding: 8px 0;
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: center;
  }
  .langList > a:hover {
    background-color: var(--background-mainShade);
  }


/* theme-switch */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 32px;
}
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background-main-DT);
    transition: 0.4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: var(--background-main);
    transition: 0.4s;
    border-radius: 50%;
}
input:checked + .slider:before {
    transform: translateX(42px);
}


/* userMenu */
.userMenu {
    background-color: var(--background-main);
    width: 200px;
    margin: var(--height-header) 0 0 0;
    position: fixed;
    top: 0;
    box-sizing: border-box;
    transition: right 0.5s;
    z-index: 9;
    right: -200px;
}
.userMenu ul {
    list-style-type: none;
}
.userMenu ul a {
    padding: 16px;
    text-align: center;
    color: var(--color-white);
    text-decoration: none;
    display: block;
}
.userMenu ul a:hover {
    background-color: var(--background-mainShade);
}


/* blockLogo */
.blockLogo {
    display: flex;
    height: 100%;
    flex: 0 0 var(--width-sidebar);
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 26px;
    color: var(--color-white);
}
.blockLogo:hover {
    background: var(--background-mainShade);
}



/* blockLogin */
.blockLogin {
    display: flex;
    height: 100%;
}

.blockLogin > * {
    display: flex;
    transition: 0.3s;
    cursor: pointer;
}

.blockLogin img[data-type="notification"]  {
    margin: 14px;
}
.blockLogin > *:hover {
    background: var(--background-mainShade);
}

.blockLogin .notificationCircle {
    position: absolute;
    top: 32px;
    left: 11px;
    background: red;
    border-radius: 20px;
    padding: 7px;
    border: 2px solid var(--background-main);
}






/* popup */
#popup {
    background: #00000021;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;
    top: var(--height-header);
}
#popupFull {
    background: #0000004d;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* display: flex;
    justify-content: center;
    align-items: start; */
    top: 0;
    backdrop-filter: blur(5px);
}
#popupFull > div:nth-child(1) {
    margin-top: 100px;
}
#popupFull > div:nth-child(2) {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -100;
}





/* ACTIVE CLASSES */
.noActiveGame {
    opacity: 0.6; 
    filter: grayscale(85%);
}
.activeGame {
    background-color: var(--background-sidebarShade);
}
.activeUserMenu {right: 0 !important;}
.activeSidebar {left: 0 !important;}




/* ЦВЕТА */
.c-blue {color: var(--color-blue);}
.c-pink {color: var(--color-pink);}
.c-heart {color: var(--color-heart);}
.b-blue {background-color: var(--background-blue);}
.b-pink {background-color: var(--background-pink);}




/*/////////////////////////////////*/
/*////////// ТЁМНАЯ ТЕМА //////////*/
/*/////////////////////////////////*/
body.dark-theme {background: var(--background-body-DT); color: var(--color-white);}
body.dark-theme .link {color: var(--color-link-DT);}
body.dark-theme .header {background-color: var(--background-main-DT); border-bottom: 2px solid var(--background-body-DT);}
body.dark-theme .sidebar {background-color: var(--background-sidebar-DT);}
body.dark-theme .sidebar a:hover {background-color:var(--background-sidebarShade-DT);}
body.dark-theme .slider {background-color: var(--background-main);}
body.dark-theme .slider:before {background-color: var(--background-main-DT);}
body.dark-theme .userMenu {background-color: var(--background-main-DT);}
body.dark-theme .userMenu ul a:hover {background: var(--background-mainShade-DT);}
body.dark-theme .listMenu {filter: none;}
body.dark-theme .blockLogo:hover {background: var(--background-mainShade-DT);}
body.dark-theme .blockLogin > *:hover {background: var(--background-mainShade-DT);}
body.dark-theme .blockLogin .notificationCircle {border: 2px solid var(--background-main-DT);}
body.dark-theme .langList {background-color: var(--background-main-DT);}
body.dark-theme .langList > a:hover {background: var(--background-mainShade-DT);}
body.dark-theme .activeGame {background-color: var(--background-sidebarShade-DT);}
body.dark-theme FIELDSET {border-top-color: var(--background-body-DT);}
body.dark-theme .c-blue {color: var(--color-blue-DT);}
body.dark-theme .c-pink {color: var(--color-pink-DT);}
body.dark-theme .c-heart {color: var(--color-heart-DT);}
body.dark-theme .b-blue {background-color: var(--background-blue-DT);}
body.dark-theme .b-pink {background-color: var(--background-pink-DT);}




/*/////////////////////////////////*/
/*////////// АДАПТИВНОСТЬ //////////*/
/*/////////////////////////////////*/
@media screen and (max-width: 1024px) {
    .blockListMenu {display: flex;}
    .main-content {margin: var(--height-header) 0 0 0;} 
    .sidebar {left: calc(-1 * var(--width-sidebar));}
    .footer {margin-left: 0;}
    .blockLogo {flex: 0;}
}

@media screen and (max-width: 640px) {
    :root{--height-header: 50px;}
    .main-content {min-height: calc(100vh - 50px);}
    .blockLogo > div:nth-child(2) {display: none;}
    .blockLogo {gap: 2px; padding: 0 4px; font-size: 18px;}
    .blockLogo img {width: 38px !important;}
    .wrapLangBlock {font-size: 16px; padding: 4px 10px;}
    .langList {padding: 4px 0; width: 72px;}
    .langList > a {padding: 6px 0; font-size: 14px;}
    .theme-switch {width: 60px; height: 28px;}
    .slider::before {height: 22px; width: 22px;}
    input:checked + .slider:before {transform: translateX(32px);}
    .blockLogin img[data-type="notification"] {margin: 12px;}
    .blockLogin .notificationCircle {padding: 6px; top: 26px; left: 10px;}
}

@media screen and (max-width: 480px) {
    /* .main-content {padding-bottom: 70px;} */
    .blockListMenu {flex: 0 0 26px; padding: 0 0px 0 4px;}
    .listMenu { background-size: 26px; width: 26px; height: 26px;}
    .wrapLangBlock {font-size: 14px; padding: 4px 10px;}
    .langList {padding: 3px 0; width: 66px;}
    .langList > a {padding: 6px 0; font-size: 14px;}
    .theme-switch {width: 56px; height: 26px;}
    .slider::before {height: 20px; width: 20px;}
    input:checked + .slider:before {transform: translateX(30px);}
}