@font-face {
    font-family: "Montserrat";  
    src: url("static/Montserrat-Regular.ttf") format("truetype"); 
    font-style: normal; 
    font-weight: normal;
     }
     
    @font-face{
    font-family: "Montserrat-Medium";
    src: url("static/Montserrat-Medium.ttf") format("truetype");
    font-style: normal; 
    font-weight: normal; 
    }
  
    @font-face{
      font-family: "Montserrat-Light";
      src: url("static/Montserrat-Medium.ttf") format("truetype");
      font-style: normal; 
      font-weight: normal; 
    }
  
    @font-face{
        font-family: "Montserrat-Bold";
        src: url("static/Montserrat-Bold.ttf") format("truetype");
        font-style: normal; 
        font-weight: normal; 
      }
  
  
      @font-face{
        font-family: "Montserrat-ExtraBold";
        src: url("static/Montserrat-ExtraBold.ttf") format("truetype");
        font-style: normal; 
        font-weight: normal; 
      }
  
  
    
    
    
  
  * {
      box-sizing: border-box;
      user-select: none;
      outline: none;
      overflow-x: hidden;
      overflow-y: hidden;
      font-family: 'Montserrat-Medium', sans-serif;
  }
  
  body {
      margin: 0;
      padding: 0;
      font-family: Arial;
      background-color: black;
  }
  
  /* input {
    caret-color: transparent;
  } */

  section.login {
      height: 600px;
      width: 909px;
      position: relative;
      background: linear-gradient(180deg, #1E2025 0%, #141621 100%);
      /* display: none!important; */
  }
  
  section.login span.title {
      text-align: center;
      color: #DCD9DB;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 16px;
      display: block;
      font-weight: 700;
      padding: 120px 0 0 0px;
  }
  
  /* section.login .form.reg span.title {
    padding: 10px 0 0 0px;
  } */
  
  section.login form {
      position: relative;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
  
  }
  
  section.login input {
      background-color: rgba(255, 255, 255, 0.03);
      border: none;
      padding: 11px 55px;
      font-size: 12px;
      width: 100%;
      outline: none;
      /* border: 2px solid #2A2B30; */
      border-radius: 4px;
      height: 100%;
      color: #DCD9DB;
      transition: .5s;
      /* text-transform: uppercase; */
      
      /* font-family: "Montserrat"; */
  }
  
  
  section.login form .input-login {
      position: relative;
      width: 260px;
      height: 48px;
      /* display: none; */
  }
  
  section.login form .input-login:hover .fa{
    opacity: .6;
  }
  
  section.login form img {
    position: absolute;
    left: 14px;
    top: 14px;
    filter: invert(47%) sepia(11%) saturate(28%) hue-rotate(267deg) brightness(92%) contrast(89%);
  
  }
  
  section.login form .input-password:hover .fa{
    opacity: .6;
  }
  
  section.login form .input-password {
      position: relative;
      z-index: 999;
      width: 260px;
      height: 48px;
      margin-top: 12px;
      /* display: none; */
  }
  
  section.login form .input-externalKey {
    display: none;
  }
  
  section.login .remItem {
    /* display: none; */
    display: flex;
    flex-direction: row;
    width: 260px;
    max-width: 260px;
    justify-content: flex-start;
    margin-top: 15px;
    margin-left: 2px;
  }
  
  section.login .remItem h4 {
    margin-left: 8px;
    font-family: 'Montserrat-Light';
    font-weight: 200;
    
  }
  
  section.login .remKeyItem {
    display: none;
  }
  
  section.login .fa {
      position: absolute;
      color: white;
      opacity: .3;
      top: 12px;
      left: 28px;
      transition: .5s;
      display: none;
  }
  
  section.login .focus {
      opacity: .7;
      transition: .5s;
  }
  
  section.login button.sub {
      border-radius: 4px;
      background: transparent;
      width: 260px;
      height: 52px;
      cursor: pointer;
      color: white;
      background-color: #7775D1;
      text-transform: uppercase;
      transition: .6s;
      font-size: 12px;
      border: none;
      clip-path: none;
      -webkit-clip-path: none;
      outline: none;
  }
  
  
  
  section.login button.sub:hover {
    transition: 0s;
      color: #7775D1;
      /* background: #F92853; */
      /* box-shadow: 0 18px 30px #f928523a, 0 2.75474px 10.8938px #f92852c4; */
      cursor: pointer;
      background-color: #DCD9DB;
  
      /* box-shadow: 0 22px 87px rgb(255 0 0 / 52%), 0 2.75474px 10.8938px rgb(255 0 0 / 37%), inset 0 -5px 5px hsl(0deg 0% 100% / 30%); */
  }
  
  section.login button.sub:active {
    transition: .1s;
    transform: scale(0.95);
  }
  
  section.login button.sub.blocked {
    transform: scale(0.95);
    pointer-events: none;
    opacity: .7;
  }
  
  
  /* 
  section.login button.sub:focus {
    box-shadow: inset 0px 0px 17px -4px rgba(0,0,0,0.73);
  } */
  
  /* section.login button.sub.blocked {
    box-shadow: inset 0px 0px 17px -4px rgba(0,0,0,0.73);
    color: white;
    background: #F92853;
    cursor: pointer;
    transition-property: background,color;
    transition-duration: .2s;
    pointer-events: none;
    opacity: .6;
  } */
  
  section.login .btns {
      margin-top: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* display: none; */
      padding: 0 0 60px 0;
      overflow: visible;
      width: auto;
      height: auto;
      clip-path: none;
      -webkit-clip-path: none;
      background: transparent;
  }
  
  section.login .btns .forgot {
      margin-left: 25px;
      background-color: transparent;
      border: none;
      font-size: 12px;
      cursor: pointer;
      color: #4c4c4d;
      text-decoration: underline;
  }
  
  section.login .btns .forgot:hover {
      text-decoration: none;
  }
  
  
  
  
  
  section.login .reg_btns {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */
    padding: 0 0 60px 0;
    overflow: visible;
    width: auto;
    height: auto;
    clip-path: none;
    -webkit-clip-path: none;
    background: transparent;
  }
  
  section.login .reg_btns .forgot {
    margin-left: 25px;
    background-color: transparent;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: #4c4c4d;
    text-decoration: underline;
  }
  
  section.login .reg_btns .forgot:hover {
    text-decoration: none;
  }
  
  
  
  
  
  
  section.login p {
      color: #626262;
      text-align: center;
      width: 100%;
      font-weight: 800;
      padding: 0 40px;
      text-transform: uppercase;
      font-size: 11px;
      position: absolute;
      bottom: 0;
  }
  
  .wrong {
      width: 80%;
      margin: auto;
      background-color: rgba(255, 0, 0, 0.246);
      border: 1px solid rgba(255, 0, 0, 0.568);
      border-radius: 5px;
      text-align: center;
      transition: .2s;
      transform: translateY(-100%);
      position: absolute;
      left: 30px;
  }
  
  .wrong.on {
      transform: translateY(0%);
  }
  
  .wrong span {
      color: rgb(221, 221, 221);
      text-transform: uppercase;
      letter-spacing: 2px;
      display: inline-block;
      margin: 6px 0;
      font-size: 11px;
  }
  
  
  /* GMC ////////////////// */
  
  .gmcMain {
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .gmcMain .gmcMain__left {
    width: 100%;
  }

  .gmcMain .gmcMain__left .games {
    overflow-y: scroll;
    max-height: 497px;
    max-width: 804px;
  }
  
  .gmcMain .gmcMain__right {
    flex: 1;
  }
  
  .gmcMain__right-comms {
    margin-top: 58px;
  }
  
  .gmcMain .gmcMain__right .comment {
    background-color: #26272C;
    border-radius: 5px;
    padding: 14px 14px;
    margin-top: 20px;
    position: relative;
    margin-bottom: 40px;
  }
  
  .gmcMain .gmcMain__right .comment span {
    position: absolute;
    top: -20px;
    font-size: 12px;
    color: rgb(221, 221, 221);
  }
  
  .gmcMain .gmcMain__right .comment p {
    color: rgb(221, 221, 221);
    font-size: 15px;
    line-height: 21px;
    margin: 0;
  }
  
  section.gmc {
      height: 604px;
      padding: 0 20px;
      width: 914px;
      background: linear-gradient(180deg, #1E2025 0%, #141621 100%);
      position: relative;
      overflow: hidden;
  }
  
  section.gmc .right-panel {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
      /* border-top: 1px solid #2A2B30; */
      /* background-color: #1E2025; */
      transition: .5s;
      z-index: 1000;
      padding-left: 92px;
  }
  
  section.gmc .right-panel::after {
    content: "";
    display: block;
    background: rgba(255, 255, 255, 0.03);
    width: 804px;
    height: 2px;
    position: absolute;
    left: 94px;
    bottom: 0px;
  }
  
  section.gmc .right-panel .userInfo {
    display: flex;
    padding-right: 20px;
  }
  
  section.gmc .right-panel .userInfo .userInfoIcon {
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  section.gmc .right-panel .userInfo .userInfoIcon img {
  
  }
  
  section.gmc .right-panel .userInfo .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  section.gmc .right-panel .panel-user span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    /* identical to box height, or 183% */
    
    letter-spacing: 0.42px;
    text-transform: uppercase;
    
    /* white */
    
    color: #DCD9DB;
  }
  
  section.gmc .right-panel .panel-time span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.42px;
    text-transform: uppercase;
    
    color: rgba(220, 217, 219, 0.48);
  }
  
  
  section.gmc .right-panel .fa {
      color: #52525C;
      font-size: 23px; 
  }
  
  section.gmc .right-panel .panel-user {
      display: flex;
      align-items: center;
  }
  
  section.gmc .right-panel .panel-time {
      display: flex;
      align-items: center;
  }
  
  section.gmc .right-panel .description {
  
  }
  
  section.gmc .right-panel .description span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(220, 217, 219, 0.48);
    padding-top: 16px;
    margin-left: 0;
  }
  
  section.gmc .right-panel .description p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    /* identical to box height, or 183% */
    margin: 0;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    /* white */
    
    color: #DCD9DB;
  }
  
  
  
  
  
  
  
  
  
  
  .panel .right-panel {
    height: 68px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    /* border-top: 1px solid #2A2B30; */
    /* background-color: #1E2025; */
    transition: .5s;
    z-index: 1000;
    padding-left: 83px;
  }
  
  .panel .right-panel::after {
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.03);
  width: 800px;
  height: 2px;
  position: absolute;
  left: 92px;
  bottom: 0px;
  }
  
  
  .panel .right-panel .description {
    text-align: right;
    position: absolute;
    right: 20px;
  }
  
  .panel .right-panel .description span {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.2);
  padding-top: 16px;
  margin-left: 0;
  }
  
  .panel .right-panel .description p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  /* identical to box height, or 183% */
  margin: 0;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  /* white */
  
  color: #DCD9DB;
  }
  
  
  
  
  
  
  
  
  
  
  
  .key_modal .right-panel {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    /* border-top: 1px solid #2A2B30; */
    /* background-color: #1E2025; */
    transition: .5s;
    z-index: 1000;
    padding: 0px 24px;
  }
  
  .key_modal .right-panel::after {
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.03);
  width: 340px;
  height: 2px;
  position: absolute;
  bottom: 0px;
  }
  
  
  .key_modal .right-panel .description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  
  .key_modal .right-panel .description span {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.48);
  /* padding-top: 16px; */
  margin-left: 0;
  }
  
  .key_modal .right-panel .description p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  /* identical to box height, or 183% */
  margin: 0;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  /* white */
  
  color: #DCD9DB;
  }
  
  
  
  
  
  
  
  
  
  
  
  section.gmc .panel-key {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    /* margin-left: 30px; */
    cursor: pointer;
    /* position: absolute; */
    top: 30px;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px;
    border-radius: 4px;
    right: 35px;
    transition: .15s;
  }
  
  section.gmc .panel-key:hover {
    transform: scale(.9);
  }
  
  section.gmc .panel-key:active {
    transform: scale(.8);
  }
  
  .key_modal img.close {
    position: absolute;
    right: 24px;
    top: 17px;
    cursor: pointer;
    z-index: 1001;
    transition: .15s;
  }
  
  .key_modal img.close:hover {
    transform: scale(.8);
    /* transform: rotate(90deg) */
  }
  
  .key_modal .input-key img {
    width: 18px;
    filter: invert(100%) sepia(92%) saturate(2%) hue-rotate(258deg) brightness(107%) contrast(100%);
    opacity: .5;
    position: absolute;
    left: 15px;
    top: 15px;
  }
  
  section.gmc .panel-key img {
    width: 22px;
    filter: invert(100%) sepia(92%) saturate(2%) hue-rotate(258deg) brightness(107%) contrast(100%);
    opacity: .5;
  }
  
  /* section.gmc .panel-key:hover img {
    opacity: .7;
  } */
  
  section.gmc button.game {
      cursor: pointer;
      overflow: hidden;
      background-color: transparent;
      width: 188px;
      padding: 0;
      height: 240px;
      border: none;
      outline: none;
      position: relative;
      transition: .6s;
      margin-right: 10px;
      margin-bottom: 14px;
      border-radius: 6px;
      border-bottom: 3px solid transparent;
      /* display: none; */
      
  }

  /* Оверлей названия игры (нейро-режим) — в brand1 скрыт, стили в style_ai.css */
  section.gmc .brand2-floating-title {
      display: none;
  }
  
  .login .left-panel {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    width: 72px;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
  }
  
  section.gmc .left-panel {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    width: 72px;
    background: rgba(255, 255, 255, 0.04);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
  }
  
  /* .logo.active {
    opacity: 0;
  } */
  
  /* .blur_cs {
    background-image: url(../img/blur_cs.jpg);
    background-size: cover;
    background-position-x: -2px;
  }
  
  .blur_pubg {
    background-image: url(../img/blur_pubg.jpg);
    background-size: 108%;
    background-position-y: 0px;
    background-position-x: -5px;
  }
  
  .blur_rust {
    background-image: url(../img/blur_rust.jpg);
    background-size: 110%;
    background-position-y: 0px;
    background-position-x: -7px;
  }
  
  .blur_apex {
    background-image: url(../img/blur_apex.jpg);
    background-size: 110%;
    background-position-y: 0px;
    background-position-x: -7px;
  }
  
  .blur_r6 {
    background-image: url(../img/blur_r6.jpg);
    background-size: 107%;
    background-position-y: 0px;
    background-position-x: -6px;
  }
  
  .blur_bf {
    background-image: url(../img/blur_bf.jpg);
    background-size: 107%;
    background-position-y: 0px;
    background-position-x: -4px;
  }
  
  .blur_warzone {
    background-image: url(../img/blur_warzone.jpg);
    background-size: 107%;
    background-position-y: 0px;
    background-position-x: -4px;
  } */


  .game .expire {
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    z-index: 2;
    left: 50%;
    width: 100%;
    padding: 7px 0;
    font-size: 11px;
    color: #ffffff;
    opacity: .10;
  }
  
  section.gmc button.game .button {
    position: absolute;
    bottom: 38px;
    background: rgba(27, 29, 33, 0.28);
    backdrop-filter: blur(10px);
    z-index: 5;
    height: 28px;
    width: 132px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: .2s;
  }
  
  
  
  
  
  section.gmc button.game .button span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: #FFFFFF;
  }
  
  
  section.gmc button.game .blackOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(33, 35, 43, 0) 0%, rgba(33, 35, 43, 0.8) 58.58%, #21232B 100%);
    z-index: 2;
    transition: .4s;
  }
  
  section.gmc button.game .colorOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(33, 35, 43, 0) 0%, rgba(131, 129, 221, 0.2) 52.6%, rgba(131, 129, 221, 0.4) 100%);
    z-index: 3;
    transition: .4s;
    opacity: 0;
  }
  
  
  section.gmc button.game.soon {
    /* opacity: .2; */
    pointer-events: none;
  }
  
  
  section.gmc button.game img {
    opacity: .5;
  }
  
  section.gmc button.game:hover {
    border-bottom: 3px solid #7B79D6;
    transition: .1s;
  }
  
  section.gmc button.game:hover .button {
    opacity: 1;
    transition: .3s;
  }
  
  section.gmc button.game:hover .blackOverlay {
    opacity: 0;
    transition: .1s;
  }
  
  section.gmc button.game:hover .colorOverlay {
    opacity: 1;
    transition: .1s;
  }
  
  section.gmc button.game:hover > img {
    opacity: 1;
    
  }
  
  section.gmc button.game:hover .title {
    bottom: 42%;
    transform: translateY(50%);
  }
  
  section.gmc button.game:hover .title img {
    opacity: 1;
  }
  
  section.gmc button.game:hover .expire {
    backdrop-filter: blur(3px);
    opacity: 1;
    font-size: 11px;
    transition: .15s;
    padding: 7px 0px;
  }

  section.gmc button.game:hover .expire span {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 2.45);
  }
  
  
  section.gmc button.game.block {
    pointer-events: none;
    opacity: .3;
  }
  
  
  section.gmc button .title {
      left: 0px;
      bottom: 37px;
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      transition: .3s;
  }
  
  section.gmc button .title img {
    opacity: .6;
    width: auto;
    height: auto;
    max-height: 44px;
    transition: .4s;
  }
  
  section.gmc button .title span {
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size:  13px;
      font-weight: light;
      color: rgb(221, 221, 221);
  }
  
  section.gmc h1 {
      margin: 0;
      font-size: 24px;
      text-align: left;
      padding-top: 30px;
      font-weight: light;
      color: rgb(221, 221, 221);
      text-transform: uppercase;
      letter-spacing: 3px;
  }
  
  section.gmc .games {
      width: 100%;
      margin-left: 67px;
      height: auto;
      margin-top: 137px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow: hidden;
      opacity: 0;
      transition: .7s;
  }
  
  section.gmc .games.active {
    margin-top: 97px;
    opacity: 1;
  }
  
  section.gmc .games img {
      height: 100%;
      /* max-width: 148px; */
      /* opacity: .5; */
      /* height: auto; */
  }
  
  button.close-gms {
      position: absolute;
      bottom: 13px;
      right: 35px;
      border-radius: 50px;
      background: transparent;
      padding: 10px 50px;
      cursor: pointer;
      border: 2px solid #F92853;
      color: #F92853;
      text-transform: uppercase;
      font-size: 11px;
      transition-property: background,color;
      transition-duration: .2s;
      margin: 0 0 0 28px;
      outline: none;
  }
  
  button.close-gms:hover {
      color: white;
      background: #F92853;
      cursor: pointer;
      transition-property: background,color;
      transition-duration: .2s;
  }
  
  
  /* ///////// */
  
  .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    /* padding: 1px 1px; */
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #272830;
  }
  .cbx:not(:last-child) {
    margin-right: 6px;
  }
  .cbx:hover {
    background: #272830;
  }
  .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
  }
  .cbx span:first-child {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid rgba(220, 217, 219, 0.08);
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
  }
  .cbx span:first-child svg {
    position: absolute;
    top: 5px;
    left: 3.5px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
  }
  .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
  }
  .cbx:hover span:first-child {
    border-color: #7775d15b;
  }
  .inp-cbx {
    position: absolute;
    visibility: hidden;
  }
  .inp-cbx:checked + .cbx span:first-child {
    background: #7775D1;
    border-color: #7775D1;
    animation: wave 0.4s ease;
  }
  .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
  }
  
  .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
  }
  @media screen and (max-width: 640px) {
    /* body {
      width: auto;
      display: inherit;
      padding: 20px;
    } */
    .cbx {
      width: 100%;
      margin-bottom: 4px;
      display: inline-block;
    }
  }
  @-moz-keyframes wave {
    50% {
      transform: scale(0.9);
    }
  }
  @-webkit-keyframes wave {
    50% {
      transform: scale(0.9);
    }
  }
  @-o-keyframes wave {
    50% {
      transform: scale(0.9);
    }
  }
  @keyframes wave {
    50% {
      transform: scale(0.9);
    }
  }
  
  
  
  
  /* // SECTION PANEL  */
  
  
  .tg-list {
      text-align: center;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center;
    }
    
    h2 {
      color: #777;
    }
    
    h4 {
      color: #999;
    }
  
  .tgl {
      display: none;
    }
    .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
      box-sizing: border-box;
    }
    .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
      background: none;
    }
    .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
      background: none;
    }
    .tgl + .tgl-btn {
      outline: 0;
      display: block;
      min-width: 2.5em;
      width: 2.5em;
      height: 1.3em;
      position: relative;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
  
    .tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
      position: relative;
      display: block;
      content: "";
      width: 50%;
      height: 100%;
    }
    .tgl + .tgl-btn:after {
      left: 0;
    }
    .tgl + .tgl-btn:before {
      display: none;
    }
    .tgl:checked + .tgl-btn:after {
      left: 50%;
    }
  
  .tgl-ios + .tgl-btn {
    width: 48px;
    height: 24px;
    background: rgba(255, 255, 255, 0.04);
      border-radius: 4px;
      padding: 2px;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
      border: 3px solid rgba(255, 255, 255, 0.00);
      transform: rotate(90deg);
    }
    .tgl-ios + .tgl-btn:after {
      border-radius: 4px;
      background: #e2e2e2;
      -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
      transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
      /* background-image: url('../img/pizdec3.png');
      background-size: 23px 15px;
      background-repeat: no-repeat; */
    }
    .tgl-ios + .tgl-btn:hover:after {
      will-change: padding;
    }
    .tgl-ios + .tgl-btn:active {
      /* box-shadow: inset 0 0 0 2em #7775d17c; */
    }
    .tgl-ios + .tgl-btn:active:after {
      padding-right: 0.8em;
    }
    .tgl-ios:checked + .tgl-btn {
      background: rgba(119, 117, 209, 0.12);
    }
    .tgl-ios:checked + .tgl-btn:active {
      /* box-shadow: none; */
      
    }
    .tgl-ios:checked + .tgl-btn:active:after {
      margin-left: -0.8em;
      background: #7775D1;
    }
  
    .tgl-ios:checked + .tgl-btn:after {
      background: #7775D1;
    }
  
  
  
  section.panel {
      width: 909px;
      height: 604px;
      position: relative;
      background: linear-gradient(180deg, #1E2025 0%, #141621 100%);
  }
  
  section.panel .tab {
    display: none;
    width: 100%;
    height: auto;
    overflow: visible;
    padding-left: 92px;
    padding-right: 17px;
    opacity: 0;
    transform: translateY(7px);
    transition: .4s;
  }
  
  
  
  section.panel .tab.scroll-mod {
    height: 505px;
    /* border: 1px solid red; */
    width: 96.3%;
    overflow-y: scroll;
    margin: auto;
    margin-top: 77px;
    padding-left: 69px;
  }
  
  section.panel .tab.scroll-mod .inputs {
    margin-top: 0;
  }
  
  section.panel .tab.scroll-mod .inputs .inputWrap {
    margin: 6px 6px 6px 6px;
  }
  
  /* width */
  ::-webkit-scrollbar {
    width: 2px; }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #1C1B21; }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #303238;
    border-radius: 50px; }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #303238; }
  
  section.panel .tab.active {
    display: block;
  }
  
  section.panel .tab.anim {
    opacity: 1;
    transform: translateY(0px);
  }
  
  section.panel .tabs {
    width: 72px;
    
    height: 100%;
    display: flex;
    z-index: 1000;
    /* border-bottom: 2px solid red; */
    position: absolute;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
  }
  
  section.panel .tabs .tabs__item {
    flex: 1;
    height: 100%;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* background-color: #1C1B21; */
    transition: .2s;
    position: relative;
  }
  
  
  
  
  
  
  
  section.panel .tabs .tabs__item.apexMod_k span {
    color: #ffffff53;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_k {
    box-shadow: 4px 10px 17px -13px #D38747!important;
    border-bottom: 2px solid #D38747!important;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, #d3874736 100%)!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_k .triangle {
    border: 6px solid #D38747!important;
    border-top: 10px solid transparent!important;
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_k span {
    color: #D38747;
  }
  
  
  
  
  
  section.panel .tabs .tabs__item.apexMod_g span {
    color: #ffffff53;
  }
  
  
  section.panel .tabs .tabs__item.active.apexMod_g {
    box-shadow: 4px 10px 17px -13px #62B798!important;
    border-bottom: 2px solid #62B798!important;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, #62b79841 100%)!important;
    
  }
  
  section.panel .tabs .tabs__item.active.apexMod_g .triangle {
    border: 6px solid #62B798!important;
    border-top: 10px solid transparent!important;
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_g span {
    color: #62B798;
  }
  
  
  
  
  
  section.panel .tabs .tabs__item.apexMod_y span {
    color: #ffffff53;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_y {
    box-shadow: 4px 10px 17px -13px #AEBF50!important;
    border-bottom: 2px solid #AEBF50!important;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, #aebf5032 100%)!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_y .triangle {
    border: 6px solid #AEBF50!important;
    border-top: 10px solid transparent!important;
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_y span {
    color: #AEBF50;
  }
  
  
  
  
  section.panel .tabs .tabs__item.apexMod_r span {
    color: #ffffff53;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_r {
    box-shadow: 4px 10px 17px -13px #EB0048!important;
    border-bottom: 2px solid #EB0048!important;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, #eb00473b 100%)!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_r .triangle {
    border: 6px solid #EB0048!important;
    border-top: 10px solid transparent!important;
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
  }
  
  section.panel .tabs .tabs__item.active.apexMod_r span {
    color: #EB0048;
  }
  
  
  
  
  
  
  
  
  
  section.panel .tabs .tabs__item span {
    position: absolute;
    top: 6px;
    left: 9px;
    font-family: 'Montserrat-Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #7775D1;
    opacity: .2;
  }
  
  section.panel .tabs .tabs__item {
    transition: .4s;
  }
  
  section.panel .tabs .tabs__item:hover img {
    opacity: .9;
  }
  
  section.panel .tabs .tabs__item:active img {
    transform: scale(0.95);
    /* transform: translateY(5px); */
  }
  
  section.panel .tabs .tabs__item.active {
    /* background-color: #1C1B21; */
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%);
    border-bottom: 2px solid #7775D1;
    box-shadow: 4px 10px 17px -13px #7775d1;
  }
  
  section.panel .tabs .tabs__item.active img {
    opacity: 1;
    /* filter: invert(49%) sepia(66%) saturate(455%) hue-rotate(202deg) brightness(88%) contrast(86%); */
  }
  
  section.panel .tabs .tabs__item.active span {
    opacity: 1;
    /* filter: invert(49%) sepia(66%) saturate(455%) hue-rotate(202deg) brightness(88%) contrast(86%); */
  }
  
  section.panel .tabs .tabs__item:nth-child(2) img {
    max-width: 80px;
  }
  
  section.panel .tabs .tabs__item:last-child {
    border-right: none;
  }
  
  section.panel .tabs .tabs__item img {
    /* max-width: 95px; */
    transition: .1s;
    /* max-height: 66px; */
    pointer-events: none;
    opacity: .2;
  }
  
  section.panel .inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    overflow: visible;
    margin-top: 75px;
  }
  
  button.backToGames {
    left: 0px;
    bottom: 10px;
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    border: none;
    border-radius: 8px;
  }
  
  button.backToGames .fa {
    color: white;
    font-size: 16px;
    opacity: .5;
  }
  
  button.backToGames:hover .fa {
    opacity: 1;
  }
  
  .modal-wrap-settings, .modal-wrap-settings_2, .modal-wrap-settings_3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    left: 0;
    background: rgba(26, 28, 32, 0.78);
    z-index: 1000;
    display: none;
    transition: .2s;
  }
  
  .modal-wrap-settings.anim, .modal-wrap-settings_2.anim, .modal-wrap-settings_3.anim {
    opacity: 1;
  }
  
  .modal-wrap-settings.active, .modal-wrap-settings_2.active, .modal-wrap-settings_3.active {
    display: block;
  }
  
  
  .modal-wrap-settings .modal-settings, .modal-wrap-settings_2 .modal-settings_2, .modal-wrap-settings_3 .modal-settings_3 {
    padding-top: 8px;
    position: absolute;
    width: 876px;
    background-image: url('../img/pizdec.png');
    background-size: cover;
    background-position-x: -2px;
    /* background: rgba(34, 36, 39, 0.98); */
    border: 2px solid rgba(43, 48, 64, 0.24);
    /* right: -265px; */
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 518px;
    z-index: 10;
    display: flex;
    border-radius: 6px;
    padding: 24px;
    display: none;
    opacity: 0;
    transition: .2s;
  }
  
  
  .modal-wrap-settings .modal-settings.active {
    display: flex;
  }
  
  .modal-wrap-settings .modal-settings.anim {
    top: 50%;
    opacity: 1;
    overflow: visible;
  }
  
  
  
  .modal-wrap-settings .modal-settings .modal-settings-btns, .modal-wrap-settings_2 .modal-settings_2 .modal-settings-btns, .modal-wrap-settings_3 .modal-settings_3 .modal-settings-btns  {
    /* border: 1px solid red; */
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: auto;
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
  }
  
  
  .left-tab {
    max-width: 378px;
    /* border: 1px solid red; */
    /* margin-top: 53px; */
    /* background: rgba(255, 255, 255, 0.02); */
    overflow: visible;
  }
  
  .change_button_wrap {
    background-color: red;
    /* height: 70px; */
  }

  .change_button_wrap.extended {
    height: 110px;
  }

  .change_button_wrap .button_mode {
    width: 341px;
    height: 34px;
    background-color: #35364F;
    margin-left: 10px;
    border-radius: 4px;
  }

  .change_button_wrap .button_mode .mods {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .change_button_wrap .button_mode .mods span {
    color: rgba(255, 255, 255, 0.527);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
  }

  .change_button_wrap .button_mode .mods span.active {
    background-color: #7775D1;
    color: white;
    transition: .05s;
  }
  
  .change_button {
    position: relative;
    overflow: visible;
    width: 341px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 9px;
    margin-top: 15px;
  }
  
  .change_button .info {
    display: flex;
    cursor: pointer;
    transition: opacity 0.3s;
    flex-shrink: 0;
    width: 150px;
    justify-content: flex-end;
  }
  
  .change_button .info:hover {
    opacity: 0.8;
  }
  
  .change_button .info img {
    margin-right: 5px;
    order: 1;
    margin-left: 11px;
  }
  
  .change_button .info.blink {
    animation: blink 1s infinite;
  }
  
  .change_button .info.green .key-name {
    color: #7775D1;
  }

  .change_button .info.is-binding.blink {
    animation: none;
  }

  .change_button .key-name.key-name--prompt {
    margin: 0;
    padding: 0;
    opacity: 1;
    font-size: 10px;
    line-height: 20px;
    white-space: nowrap;
    color: #9b99e8;
    animation: keyBindPromptPulse 1.6s ease-in-out infinite;
  }

  @keyframes keyBindPromptPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  .change_button-title {
    margin-left: 11px;
     /* top: -28px; */
    left: 3px;
    position: absolute;
    /*color: white;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.9px; */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    /* identical to box height, or 240% */
    
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: rgba(240, 237, 239, 0.9);
  }
  
  
  .change_button p.key-change {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: rgba(220, 217, 219, 0.48);
  }
  
  .change_button p.key-change:hover {
    opacity: 1;
    cursor: pointer;
  }
  
  .change_button p.key-change.green {
    color: #7775D1;
  }
  
  .change_button p.key-name {
    color: white;
    margin: 0;
    opacity: .4;
    font-size: 10px;
    text-transform: uppercase;
  }

  .weapon-reset-keys {
    width: 100%;
    margin: 0;
    padding: 10px 12px 12px;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    transition: background 0.35s ease, box-shadow 0.35s ease;
  }

  .weapon-reset-keys--panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px 12px;
    overflow: visible;
  }

  .weapon-reset-keys.is-listening {
    background: rgba(119, 117, 209, 0.12);
    box-shadow: inset 0 0 0 1px rgba(119, 117, 209, 0.5);
  }

  .weapon-reset-keys__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }

  .weapon-reset-keys__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .weapon-reset-keys__title {
    font-family: 'Montserrat', sans-serif;
    color: rgba(240, 237, 239, 0.9);
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  }

  .weapon-reset-keys__ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .weapon-reset-keys__ques:hover,
  .weapon-reset-keys__ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .weapon-reset-keys-modal {
    left: 12px;
    right: 12px;
    top: 34px;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: 10020;
  }

  .weapon-reset-keys-modal span {
    text-transform: none;
    white-space: normal;
    overflow: visible;
  }

  .weapon-reset-keys-modal p {
    white-space: normal;
    overflow: visible;
  }

  .weapon-reset-keys__hint {
    color: rgba(255, 255, 255, 0.35);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: opacity 0.3s ease, color 0.3s ease;
  }

  .weapon-reset-keys.is-listening .weapon-reset-keys__hint {
    opacity: 0.25;
  }

  .weapon-reset-keys__listen-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 0;
    margin-top: 0;
    padding: 0 10px;
    overflow: hidden;
    opacity: 0;
    border-radius: 4px;
    background: rgba(119, 117, 209, 0.22);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      max-height 0.35s ease,
      opacity 0.3s ease,
      margin-top 0.3s ease,
      padding 0.3s ease,
      transform 0.35s ease;
  }

  .weapon-reset-keys__listen-banner.is-visible {
    max-height: 44px;
    margin-top: 8px;
    padding: 9px 10px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: weapon-reset-keys-text-blink 1.35s ease-in-out infinite;
  }

  .weapon-reset-keys__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-bottom: 8px;
  }

  .weapon-reset-keys__empty {
    color: rgba(255, 255, 255, 0.28);
    font-size: 10px;
    text-transform: uppercase;
    padding: 6px 2px;
  }

  .weapon-reset-keys__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 0;
    padding: 5px 8px 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background: rgba(53, 54, 79, 0.85);
    color: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .weapon-reset-keys__chip:hover {
    background: rgba(119, 117, 209, 0.28);
    border-color: rgba(119, 117, 209, 0.55);
    color: #fff;
  }

  .weapon-reset-keys__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .weapon-reset-keys__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .weapon-reset-keys__chip:hover .weapon-reset-keys__chip-remove {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }

  .weapon-reset-keys__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  }

  .weapon-reset-keys__add:hover {
    color: #fff;
    border-color: rgba(119, 117, 209, 0.7);
    background: rgba(119, 117, 209, 0.12);
  }

  .weapon-reset-keys__add.is-binding {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(119, 117, 209, 0.55);
    border-style: solid;
    background: rgba(119, 117, 209, 0.12);
  }

  .weapon-reset-keys__add-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: rgba(119, 117, 209, 0.35);
    color: #fff;
    font-size: 13px;
    line-height: 1;
  }

  @keyframes weapon-reset-keys-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(119, 117, 209, 0.25); }
    50% { box-shadow: 0 0 0 4px rgba(119, 117, 209, 0); }
  }

  @keyframes weapon-reset-keys-text-blink {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 1; }
  }

  .settings-lang {
    width: 100%;
    margin: 0;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .settings-lang__title {
    font-family: 'Montserrat', sans-serif;
    color: rgba(240, 237, 239, 0.9);
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  }

  .settings-lang__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
  }

  .settings-lang__opt {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.38);
    font: inherit;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  .settings-lang__opt img {
    width: 18px;
    height: auto;
    border-radius: 2px;
    display: block;
    pointer-events: none;
    opacity: 0.45;
    filter: grayscale(0.35);
  }

  .settings-lang__opt span {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .settings-lang__opt:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
  }

  .settings-lang__opt:hover img {
    opacity: 0.7;
    filter: none;
  }

  .settings-lang__opt.active {
    color: #fff;
    border-color: transparent;
    background: #7775D1;
    box-shadow: 0 4px 14px rgba(119, 117, 209, 0.28);
  }

  .settings-lang__opt.active img {
    opacity: 1;
    filter: none;
  }
  
  .right-tab {
    position: relative;
    width: 50%;
    /* border-left: 4px solid #222327; */
    /* margin-top: 53px; */
    max-width: 378px;
    /* background: rgba(255, 255, 255, 0.02); */
    overflow: visible;
  }

  .tab .settings_wrapper {
    max-height: 500px;
    overflow-y: scroll;
  }
  
  /* .modal-settings .right-tab:after {
    content: "";
    display: block;
    background: rgba(217, 217, 217, 0.04);
    width: 2px;
    height: 409px;
    position: absolute;
    left: -45px;
    top: 0;
  
  } */
  
  .rangeWrap {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  
  
  
  
  .modal-wrap-settings .modal-settings .modal-settings-btns button.ok, .modal-wrap-settings_2 .modal-settings_2 .modal-settings-btns button.ok, .modal-wrap-settings_3 .modal-settings_3 .modal-settings-btns button.ok {
    border-radius: 50px;
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    transition: .2s;
    border: none;
    font-size: 10px;
    font-weight: bold;
    transition-property: background,color;
    transition-duration: .2s;
    outline: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    transition: .15s;
  }
  
  .modal-wrap-settings .modal-settings .modal-settings-btns button.ok:hover, .modal-wrap-settings_2 .modal-settings_2 .modal-settings-btns button.ok:hover, .modal-wrap-settings_3 .modal-settings_3 .modal-settings-btns button.ok:hover {
    transform: scale(.8)
  }
  /* .modal-wrap-settings .modal-settings .modal-settings-btns button.ok:hover, .modal-wrap-settings_2 .modal-settings_2 .modal-settings-btns button.ok:hover, .modal-wrap-settings_3 .modal-settings_3 .modal-settings-btns button.ok:hover {
    color: white;
    background: #F92853;
    box-shadow: 0 18px 30px #f928523a, 0 2.75474px 10.8938px #f92852c4;
    cursor: pointer;
    transition-property: background,color;
    transition-duration: .01s;
  } */
  
  .modal-settings .title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 24px;
  }
  
  .modal-settings .title p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(220, 217, 219, 0.48);
  }
  
  .modal-settings .title span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    /* identical to box height, or 183% */
    
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    /* white */
    
    color: #DCD9DB;
  }
  
  .modal-wrap-settings .modal-settings p.settings-alert, .modal-wrap-settings_2 .modal-settings_2 p.settings-alert, .modal-wrap-settings_3 .modal-settings_3 p.settings-alert {
    color: white;
    font-weight: 700;
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 5px;
    opacity: .8;
  }
  
  .modal-wrap-settings .modal-settings p.settings-text, .modal-wrap-settings_2 .modal-settings_2 p.settings-text, .modal-wrap-settings_3 .modal-settings_3 p.settings-text {
    color: white;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    /* margin-left: 10px;
    padding-left: 9px; */
    margin-top: 5px;
    margin-bottom: 5px;
    opacity: .8;
  }
  
  /* .modal-wrap-settings .modal-settings p.settings-text:after, .modal-wrap-settings_2 .modal-settings_2 p.settings-text:after, .modal-wrap-settings_3 .modal-settings_3 p.settings-text:after {
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    background-color: #F92853;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 5px;
  } */
  
  .modal-wrap-settings .modal-settings p.settings-text strong, .modal-wrap-settings_2 .modal-settings_2 p.settings-text strong, .modal-wrap-settings_3 .modal-settings_3 p.settings-text strong {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 14px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    padding: 10px 20px;
    color: #FFFFFF;
    text-align: center;
    background: rgba(119, 117, 209, 0.24);
    border-radius: 4px;
  }
  
  
  .modal-wrap-settings .modal-settings p.settings-text strong hui, .modal-wrap-settings_2 .modal-settings_2 p.settings-text strong hui, .modal-wrap-settings_3 .modal-settings_3 p.settings-text strong hui {
    background-color: #7775D1;
  }
  
  /* .modal-wrap-settings .modal-settings.active, .modal-wrap-settings_2 .modal-settings_2.active, .modal-wrap-settings_3 .modal-settings_3.active  {
    right: 0;
    /* display: block; 
  } */
  
  section.panel .settings {
    align-items: center;
    /* position: absolute; */
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    overflow: visible;
    padding: 10px 16px;
  
  }
  
  section.panel .settings .back {
    position: absolute;
    left: 0;
    bottom: 10px;
    cursor: pointer;
    width: auto;
    height: 40px;
    border-radius: 8px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-top: 23px;
  }
  
  section.panel .settings .back .fa {
    color: #ffffff;
    font-size: 18px;
    opacity: .5;
    padding-left: 10px;
  }
  
  section.panel .settings .back:hover .fa {
    opacity: 1;
  } 
  
  section.panel .settings .back:hover span {
    opacity: 1;
  }
  
  section.panel .settings .back span {
    font-size: 12px;
    color: white;
    letter-spacing: 2.5px;
    padding: 0 10px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: .5;
  }
  
  
  section.panel .main_tabs_btn {
    cursor: pointer;
    width: auto;
    height: 42px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    padding: 0 12px;
    transition: background 0.1s, border-bottom 0.1s, box-shadow 0.1s;
    border-bottom: 1px solid transparent;
  }
  
  section.panel .main_tabs_btn img {
    margin-right: 10px;
    max-width: 25px;
    opacity: 0.48;
    transition: opacity 0.2s, transform 0.15s, filter 0.2s;
  }
  
  section.panel .main_tabs_btn:hover img {
    transform: rotate(360deg);
  }
  
  section.panel .main_tabs_btn.misc:hover img {
    transform: none;
  }
  
  section.panel .main_tabs_btn span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 20px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: rgba(220, 217, 219, 0.48);
    transition: color 0.2s, opacity 0.2s;
  }
  
  section.panel .main_tabs_btn.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(119, 117, 209, 0.24) 100%);
    border-bottom: 1px solid #7775D1;
    box-shadow: 4px 10px 12px -14px #7775d1;
  }
  
  section.panel .main_tabs_btn.active img {
    opacity: 1;
    filter: brightness(0) invert(0.6);
  }
  
  section.panel .main_tabs_btn.active span {
    color: #ffffff;
    opacity: 1;
  }
  
  section.panel .settings .info {
    cursor: pointer;
    width: auto;
    height: 40px;
    border-radius: 8px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-top: 23px;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  section.panel .settings .info .fa {
    color: #ffffff;
    font-size: 18px;
    opacity: .5;
  }
  
  section.panel .settings .info:hover .fa {
    opacity: 1;
  } 
  
  
  
  .resetKeys {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  
  .resetKeys .fa {
    color: white;
    font-size: 20px;
    opacity: .5;
  }
  
  .resetKeys:hover .fa {
    opacity: 1;
  }
  
  /* section.panel .sound {
    overflow: visible;
    position: relative;
    margin-top: 23px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  
  section.panel .sound span {
    top: -16px;
    left: 3px;
    position: absolute;
    color: white;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.9px;
  }
  
  
  section.panel .sound .fa {
    color: #ffffff;
    font-size: 18px;
    opacity: .5;
  }
  
  section.panel .sound:hover .fa{
    opacity: 1;
  }
  
  section.panel .sound.active .fa {
    font-size: 18px;
  } */
  
  section.panel .settings .setting {
    margin-left: 10px;
    cursor: pointer;
    background-color: #1C1B21;
    display: block;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 40px;
  }
  
  section.panel .settings .setting .fa{
    color: rgba(230, 230, 230, 0.897);
  }
  
  
  section.panel .settings .on {
    margin-left: 10px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #1C1B21;
    display: block;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 40px;
  }
  
  
  section.panel .settings .on .fa{
    color: #F92853;
    font-size: 18px;
  }
  
  section.panel .settings .on.active .fa{
    color: rgb(204, 255, 204);
  }
  
  
  .tg-list-item {
    /* margin-top: 10px; */
    /* max-width: 100px;
    min-width: 100px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24px;
    overflow: visible;
  }
  
  .tg-list-item h4 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
    
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    /* white */
    
    color: #DCD9DB;
    margin: 0;
  }
  
  
  
  .inputWrap {
    width: 184px;
    height: 124px;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    margin: 8px 8px 8px 8px;
    justify-content: space-between;
    /* padding-bottom: 25px; */
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    overflow: visible;
    padding: 16px;
    border-bottom: 2px solid transparent;
    transition: .2s;
  }
  
  .inputWrap.active {
    border-bottom: 2px solid #7775D1;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 14.58%, rgba(119, 117, 209, 0.38) 100%), rgba(255, 255, 255, 0.04);
  }
  
  .inputWrap.active .info .name img {
    filter: invert(100%) sepia(9990%) saturate(0%) hue-rotate(2deg) brightness(804%) contrast(303%);
  }
  
  .inputWrap.active .fastBtn img {
    filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(216deg) brightness(103%) contrast(103%);
  }
  
  .inputWrap.active .fastBtn span {
    color: rgba(255, 255, 255, 0.741)
  }
  
  .inputWrap .info .name h4 {
      font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: block;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    /* white */
  
    color: #DCD9DB;
    margin: 0;
  }

  .inputWrap .info .name h4 span {
    color: #595959;
    font-size: 10px;
  }
  
  .tab .inputs .inputWrap > .info {
    display: flex;
    width: 100%;
    /* padding: 16px; */
    justify-content: space-between;
  }
  
  .inputWrap .info .name img {
    min-height: 24px;
    max-width: 55px;
  }
  
  .inputWrap.mini-mod {
    margin: 6px 2px 0 3px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 10px;
  }
  
  .inputWrap.mini-mod .tg-list-item {
    min-width: 97px;
  }
  
  
  .inputWrap.mini-mod .tg-list-item {
    margin-top: 2px;
  }
  
  .inputWrap.mini-mod .tg-list-item h4 {
    margin-bottom: 4px;
  }
  
  .inputWrap.mini-mod .fastBtn p {
    margin-top: 7px;
    margin-bottom: 0;
  }
  
  
  
  
  
  
  
  
  
  
  .inputWrap.mini {
    height: 100px;
  }
  
  .inputWrap.mini .tg-list-item {
    width: 54px;
  }
  
  .inputWrap.mini .tg-list-item label {
    transform: rotate(0deg);
  }
  
  .inputWrap.mini .info .name h4 {
    font-size: 11px;
  }
  
  
  
  
  
  
  
  
  
  
  .elem.crosshair {
    background-color: rgb(234, 0, 255);
  }
  
  .timeout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .timeout p {
    width: 100%;
    text-align: left;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
  
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    margin-top: 10px;
    color: rgba(240, 237, 239, 0.36);
  }
  
  .timeout .timeout-btns {
    width: 100%;
    margin-top: 30px;
  }
  
  .timeout .timeout-btns button{
    background-color: #26272C;
    color: white;
    margin-top: 6px;
    width: 100%;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: 5px;
    height: 28px;
    padding: 0 16px;
    
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    /* text-transform: uppercase; */
    text-align: left;
    color: rgba(220, 217, 219, 0.48);
  }
  
  /* .timeout .timeout-btns button:hover {
    opacity: .6;
    cursor: pointer;
  } */
  
  .timeout .timeout-btns button.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    border-radius: 5px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    /* text-transform: uppercase; */
    
    color: white;
    border-bottom: 2px solid #7775D1;
  }

  /* Valorant misc: make sliders/controls inside misc item look like settings */
  .inputWrap.valorant_misc_trigger {
    width: 381px;
    height: auto;
    min-height: 264px;
    padding: 16px;
    justify-content: flex-start;
  }
  
  .inputWrap.valorant_misc_trigger .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .inputWrap.valorant_misc_trigger .info h4 {
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .inputWrap.valorant_misc_trigger .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .inputWrap.valorant_misc_trigger .info img:hover {
    transform: scale(1.2);
  }
  
  .inputWrap.valorant_misc_trigger > .info {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .inputWrap.valorant_misc_trigger .change_button_wrap {
    margin-bottom: 0px;
    height: auto;
  }

  .inputWrap.valorant_misc_trigger .change_button {
    width: 100%;
    margin-left: 0;
    /* keep space for absolute title (top: -28px) like in settings */
    margin-top: 39px;
  }

  /* Fix: .timeout p { width:100% } breaks keybind layout */
  .inputWrap.valorant_misc_trigger .change_button p.key-name,
  .inputWrap.valorant_misc_trigger .change_button p.key-change {
    width: auto;
    margin-top: 0;
    display: block;
  }
  .valorant_misc_trigger .timeout {
    align-items: stretch;
    justify-content: flex-start;
  }
  .valorant_misc_trigger .triggerSensitivity,
  .valorant_misc_trigger .triggerDelay {
    height: auto;
  }
  /* Fix: .timeout p makes slider values full width */
  .valorant_misc_trigger .triggerSensitivity .rangeWrap p,
  .valorant_misc_trigger .triggerDelay .rangeWrap p {
    width: auto;
    margin-top: 0;
    flex: 0 0 auto;
  }
  .valorant_misc_trigger .triggerSensitivity .rangeWrap input.slider,
  .valorant_misc_trigger .triggerDelay .rangeWrap input.slider {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .inputWrap__awp {
    width: 384px;
    height: 264px;
    padding: 16px;
    padding-right: 45px;
    justify-content: flex-start;
    overflow: visible;
    /* margin: 0; */
  }
  
  .inputWrap__awp .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .inputWrap__awp .info h4 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .inputWrap__awp .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .inputWrap__awp .info img:hover {
    transform: scale(1.2);
  }
  
  .inputWrap__awp .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    min-height: 30px;
  }
  
  .inputWrap__bunny {
    width: 220px;
  }
  
  .inputWrap__ssg {
    width: 220px;
  }
  
  .inputWrap .ques {
    position: absolute;
    right: 5px;
    top: 5px;
    overflow: visible;
    cursor: pointer;
    z-index: 2;
    border-radius: 5px;
  }
  
  .inputWrap .ques .fa {
    color: white;
    font-size: 17px;
  }
  
  .inputWrap .ques .fa.active {
    color: #f92852;
  }
  
  .change {
    margin-top: 10px;
  }
  
  .change input {
    display: none;
  }
  .change input:checked + label::before {
    opacity: 1;
  }
  
  .change label {
    margin-right: -20px;
    color: white;
    position: relative;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
  }
  
  .change label::after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 5px;
    position: absolute;
    top: -2px;
    left: -22px;
  }
  
  .change label::before {
    opacity: 0;
    content: "";
    display: block;
    width: 6px;
    height: 3px;
    transform: rotate(-45deg);
    background-color: transparent;
    border: 2px solid white;
    border-right: 0;
    border-top: 0;
    position: absolute;
    top: 2px;
    left: -18px;
  }
  
  .ques__modal {
    display: none;
    padding: 20px 22px;
    width: 300px;
    min-height: 30px;
    position: absolute;
    left: 13px;
    top: 50px;
    z-index: 1002;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 22, 28, 0.62);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.42),
      0 2px 8px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  
  .ques__modal.top {
    top: auto;
    bottom: 90px;
  }
  
  .ques__modal.active {
    display: block;
  }
  
  .ques__modal span {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Montserrat', system-ui, sans-serif;
    letter-spacing: 0.045em;
    line-height: 1.35;
    margin-bottom: 12px;
  }
  
  .ques__modal p {
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Montserrat', system-ui, sans-serif;
  }
  
  .ques__modal p:last-child {
    margin-bottom: 0;
  }
  
  /* Кнопка подсказки (?): без backdrop-filter на <img> — иначе в Chromium обрезается круг;
     «стекло» имитируем градиентом. */
  section.panel .tab .inputs .inputWrap .info img.quesIcon,
  section.panel .inputWrap__awp .info img.quesIcon,
  section.panel .inputWrap.valorant_misc_trigger .info img.quesIcon {
    width: 12px;
    height: 12px;
    padding: 3px;
    margin-right: 12px;
    object-fit: contain;
    object-position: center;
    box-sizing: content-box;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(255, 255, 255, 0.04) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 1px 5px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  section.panel .tab .inputs .inputWrap .info img.quesIcon:hover,
  section.panel .inputWrap__awp .info img.quesIcon:hover,
  section.panel .inputWrap.valorant_misc_trigger .info img.quesIcon:hover {
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.1) 45%,
      rgba(255, 255, 255, 0.06) 100%
    );
    border-color: rgba(255, 255, 255, 0.26);
    transform: scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 3px 12px rgba(0, 0, 0, 0.2);
  }
  
  section.panel .tab .inputs .inputWrap .info img.quesIcon.active,
  section.panel .inputWrap__awp .info img.quesIcon.active,
  section.panel .inputWrap.valorant_misc_trigger .info img.quesIcon.active {
    background: linear-gradient(
      155deg,
      rgba(119, 117, 209, 0.35) 0%,
      rgba(119, 117, 209, 0.14) 50%,
      rgba(119, 117, 209, 0.1) 100%
    );
    border-color: rgba(119, 117, 209, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 1px rgba(119, 117, 209, 0.25);
  }
  
  .fastBtn {
    display: flex;
    overflow: visible;
    align-items: center;
    width: 156px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    border-bottom: 2px solid transparent;
  }
  
  .fastBtn.active {
    box-shadow: 4px 13px 18px -13px #7775d1;
    border-bottom: 2px solid #7775D1;
    background: rgba(255, 255, 255, 0.04);
    /* background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.09) 100%); */
  }
  
  .fastBtn img {
    min-width: 18px;
    min-height: 11px;
    margin: 0 9px;
  }
  
  .fastBtn p {
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    margin: 4px 0;
    opacity: .3;
    font-weight: 600;
    margin-top: 14px;
    overflow: visible;
  }
  
  .fastBtn span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    /* identical to box height, or 200% */
    
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: rgba(220, 217, 219, 0.48);
    cursor: pointer;
  }
  
  .fastBtn span.done .close-key {
    /* color: #F92853;  */
    min-width: 16px;
    max-width: 10px;
    width: 14px;
    position: absolute;
    right: -4px;
    top: 0px;
    /* opacity: .6; */
    /* opacity: 0; */
  }
  
  .fastBtn span.done:hover {
    opacity: 1;
  }
  
  .fastBtn span.done {
    position: relative;
    overflow: visible;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    display: block;
    width: 100%;
    color: #e4e4e4;
    margin-left: -27px;
  }
  
  .fastBtn span.done img:hover {
    opacity: .8;
  }
  
  .fastBtn span.active {
    color: #7775d1;
  }
  
  .blink {
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes blink {
    from {
      opacity: 1; 
    }
    50% {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .fastBtn span:hover {
    opacity: .8;
  }
  
  .keysModalOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(26, 28, 32, 0.78);
    z-index: 1001;
    display: none;
    opacity: 0;
    transition: .2;
  }
  
  .keysModalOverlay.anim {
    opacity: 1;
  }
  
  .keysModalOverlay.active {
    display: block;
  }
  
  .keysModal {
    width: 876px;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 290px;
    border-radius: 5px;
    position: absolute;
    padding: 24px;
    z-index: 1000;
    /* display: none; */
    flex-wrap: wrap;
    background: rgba(34, 36, 39, 0.98);
    border: 2px solid rgba(43, 48, 64, 0.24);
    border-radius: 6px;
    opacity: 0;
    transition: .3s;
  }
  
  .keysModal.active {
    top: 50%;
    opacity: 1;
  }
  
  .keysModal span.keyboardTitle {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    /* identical to box height, or 200% */
  
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(220, 217, 219, 0.48);
  }
  
  .keysModal .info {
    display: flex;
    margin-bottom: 16px;
  }
  
  .keysModal .info span.weapon {
    position: relative;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
    margin-right: 21px;
    overflow: visible;
  }
  
  .keysModal .info span.weapon:after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    position: absolute;
    right: -11px;
    top: 3px;
    background: rgba(217, 217, 217, 0.06);
  
  }
  
  .keysModal .info > img {
    position: relative;
    margin-right: 21px;
    overflow: visible;
  }
  
  .keysModal .info .miniKeyboard {
    display: flex;
    position: relative;
    overflow: visible;
    align-items: center;
  }
  
  .keysModal .info .miniKeyboard span.keyName {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
  
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin-left: 5px;
    color: #888A8C;
  }
  /* .keysModal .info .miniKeyboard img {
    width: 18px;
  } */
  
  .keysModal .info .miniKeyboard:after {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    position: absolute;
    left: -11px;
    top: 3px;
    background: rgba(217, 217, 217, 0.06);
  }
  
  
  .keysModal .keysWrap {
    display: flex;
  }
  
  .keysModal .keysWrap .left {
    display: flex;
    flex-wrap: wrap;
    width: 496px;
    justify-content: center;
  }
  
  .keysModal .keysWrap .right {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
    margin-right: -5px;
    align-items: flex-start;
    height: 123px;
    overflow: visible;
  }
  
  .keysModal .keysWrap .right:after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 200px;
    background: rgba(217, 217, 217, 0.04);
    left: 7px;
    top: 0;
  }
  
  .closeKeyboard {
    position: absolute;
    top: 31px;
    right: 24px;
    cursor: pointer;
    transition: .15s;
  }
  
  .closeKeyboard:hover {
    transform: scale(.8);
  }
  
  .keysModal svg {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    opacity: .7;
    transition: .1s;
  }
  
  .keysModal svg:hover {
    transform: rotate(-90deg);
  }
  
  .keysModal .keysModal__item {
    display: flex;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    cursor: pointer;
    margin-right: 6px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 40px;
    /* or 333% */
  
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
  
    color: rgba(220, 217, 219, 0.5);
  }
  
  .keysModal .keysModal__item.disable {
    opacity: .32;
  }
  
  .keysModal .keysModal__item:hover {
    background: #7775D1;
  border: 2px solid rgba(119, 117, 209, 0.25);
  box-shadow: inset -2px -2px 4px rgb(10 10 35 / 20%), inset -4px -4px 6px rgb(0 0 0 / 3%), inset 2px 2px 6px rgb(131 129 221 / -4%);
  border-radius: 6px;
  }
  
  .keysModal .keysModal__item.disable:hover {
    box-shadow: none;
    border: 2px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.04);
  }
  
  .window-size {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #1C1B21;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  
  .window-size.active {
    position: absolute;
    top: -360px;
    width: 220px;
    border-radius: 0px;
    height: 45px;
    background-color: #1C1B21;
    z-index: 3000;
    left: -20px;
  }
  
  .window-size .fa {
    color: white;
    opacity: .5;
  }
  
  .window-size:hover .fa {
    opacity: 1;
  }
  
  /* BTN  */
  
  
  
  /* section data  */
  
  /* section.data {
    width: 150px;
    height: 50px;
    background-color: #26272C;
    border-radius: 10px;
    opacity: .8;
  }
  
  .activeBorder {
    animation-name: activeBorder;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes activeBorder {
    from {
      box-shadow: inset 0px 0px 13px -1px rgb(134, 249, 40); 
    }
  
    50% {
      box-shadow: inset 0px 0px 22px -1px rgb(134, 249, 40);
    }
  
    to {
      box-shadow: inset 0px 0px 13px -1px rgb(134, 249, 40);
    }
  }
  
  section.data {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  section.data .data__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1
  }
  
  section.data span {
    color: white;
    font-weight: 600;
  } */
  
  
  /* frame  */
  
  section.frame {
    height: 25px;
    background-color: #1C1B21;
    max-width: 620px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  section.frame .frame-title {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-left: 10px;
    overflow-x: hidden;
  }
  
  section.frame .frame-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    line-height: 1.5;
  }
  
  section.frame #window-controls {
    display: flex;
  }
  
  .scope {
    position: relative;
    margin-top: 23px;
    width: 215px;
    height: 40px;
    background-color: #1C1B21;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    margin-left: 10px;
  }
  
  .scope img {
    position: absolute;
    max-width: 22px;
    opacity: .5;
    left: 12px;
  }
  
  .scope .ex {
    margin: 0 5px;
    padding: 4px 4px;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid transparent;
  }
  .scope .ex:hover {
    opacity: .7;
  }
  
  .scope .ex span {
    color: white;
    font-weight: 600;
    opacity: .5;
  }
  
  
  
  .scope.imgMod {
    position: relative;
    width: 240px;
    height: 40px;
    background-color: #1C1B21;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin-left: 10px;
    overflow: visible;
  }
  
  .scope.imgMod.r6 {
    width: 200px;
  }
  
  .scope.imgMod span.title {
    top: -16px;
    left: 3px;
    position: absolute;
    color: white;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.9px;
  }
  
  .scope.imgMod img {
    position: relative;
    max-width: 32px;
    opacity: .5;
    left: 0
  }
  
  .scope.imgMod .ex {
    margin: 0 5px;
    position: relative;
    width: 35px;
    height: 30px;
    padding: 0px 0px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid #7775d180; */
  }
  
  
  .scope.imgMod .ex:hover {
    opacity: .7;
  }
  
  .scope.imgMod .ex span {
    color: white;
    font-size: 15px;
    font-weight: 600;
    opacity: .5;
  }
  
  
  .ex .fa {
    color: #ffffff;
    font-size: 21px;
    opacity: .5;
  }
  
  
  .ex.active {
    /* background-color:#32b76c46; */
    background-color: #7775d1c5;
    /* -webkit-box-shadow: 0px 0px 5px 1px rgba(119,117,209,1);
    -moz-box-shadow: 0px 0px 5px 1px rgba(119,117,209,1);
    box-shadow: 0px 0px 5px 1px rgba(119,117,209,1); */
  }
  
  .ex.active span {
    opacity: 1!important;
  }
  
  .ex.active img {
    opacity: 1!important;
  }
  
  .ex.active .fa {
    opacity: 1!important;
  }
  /* 
  .insertKey {
    position: absolute;
    bottom: 13px;
    right: 215px;
    border-radius: 50px;
    background: transparent;
    padding: 10px 50px;
    cursor: pointer;
    border: 2px solid #52525C;
    color: rgb(204, 204, 204);
    text-transform: uppercase;
    font-size: 11px;
    transition-property: background,color;
    transition-duration: .2s;
    margin: 0 0 0 28px;
    outline: none;
  }
  
  .insertKey .fa {
    position: absolute;
    top: 6px;
    color: #52525C!important;
    right: 16px;
    font-size: 20px!important;
  } */






  .preloader_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #22242680;
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    transition: .2s;
  }

  .preloader_overlay.active {
    display: block;

  }

  .preloader_overlay p {
    transform: translate(-14%, 7%);
    top: 50%;
    left: 50%;
    position: absolute;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    margin: 0;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
  }

  .letter-x {
    padding: 25px;
    z-index: 4;
    height: 5rem;
    width: 5rem;
    position: fixed;
    top: 45%;
    left: 54%;
    transform: translate(-50%, -50%);
}

.letter-x .line {
    border-radius: 2px;
    position: absolute;
    height: 0.2rem;
    width: 1.4rem; /* Длина черточек */
    background: white;
    transform-origin: center center;
    /* animation: pulseFade 2s infinite; */
    animation: pulseFade 1s infinite;
}

/* Верхняя правая черточка */
.letter-x .line:nth-child(1) {
    margin-top: 30px;
    transform: translate(60%, -60%) rotate(45deg);
    animation-delay: -2s;
}

/* Верхняя левая черточка */
.letter-x .line:nth-child(2) {
    margin-top: 30px;
    transform: translate(-60%, -60%) rotate(-45deg);
    animation-delay: -1.5s;
}

/* Нижняя левая черточка */
.letter-x .line:nth-child(3) {
    
    transform: translate(-60%, 60%) rotate(45deg);
    animation-delay: -1s;
}

/* Нижняя правая черточка */
.letter-x .line:nth-child(4) {
    transform: translate(60%, 60%) rotate(-45deg);
    animation-delay: -0.5s;
}

@keyframes pulseFade {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0.6;
    }
    4% {
        opacity: 0.4;
    }
    6% {
        opacity: 0.8;
    }
    8% {
        opacity: 0.4;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


.debug_images {
  border: 1px solid red;
  z-index: 9999;
  min-width: 600px;
  min-height: 400px;
  display: none;
  box-sizing: border-box;
}

.debug_images.active {
  display: block;
  pointer-events: auto;
  max-height: min(90vh, calc(100vh - 16px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}



.new_attach_sys {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.new_attach_sys.active {
  display: flex;
}

.new_attach_sys .vertical_wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.new_attach_sys .vertical_wrapper .sys_block {
  position: relative;
  padding: 6px;
  background-color: #292B2D;
  border-radius: 4px;
  width: 79px;
  height: 36px;
}

.new_attach_sys .vertical_wrapper .sys_block p {
  margin: 0;
  letter-spacing: 1px;
  font-size: 8px;
  margin-bottom: 2px;
  font-weight: 800;
  color: rgba(240, 237, 239, 0.9);
  text-transform: uppercase;
  font-family: 'Montserrat-Medium', sans-serif;
}

.new_attach_sys .vertical_wrapper .sys_block span {
  color: #7775D1;
  font-family: 'Montserrat-Bold';
  font-weight: 100;
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  position: relative;
}


.new_attach_sys .vertical_wrapper .sys_block img {
  position: absolute;
  right: 3px;
  top: 2px;
  max-width: 22px;
  opacity: .5;
}

.new_overlay_attachs {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #22242680;
  /* background-color: rgba(0, 0, 0, 0.452); */
  top: 0;
  left: 0;
  z-index: 90;
  backdrop-filter: blur(5px);
  display: none;
}

.new_overlay_attachs.active {
  display: block;
}


.new_overlay_attachs .modal {
  /* background-color: rgba(31, 31, 31, 0.473); */
  border: 2px solid rgba(255, 255, 255, 0.041);
  width: auto;
  height: 62px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -35%);
  border-radius: 4px;
  display: flex;
  display: none;
}

.new_overlay_attachs .modal.active {
  display: flex;
}

.new_overlay_attachs span.title {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  line-height: 22px;
  margin: 0;
  margin-top: 2px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #DCD9DB;
  text-align: center;
  display: block;
}

.new_overlay_attachs .modal .item {
 max-width: 60px;
 /* border: 1px solid blue; */
 padding: 2px 7px;

 border-radius: 4px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 3px;
 min-width: 45px;
}

.new_overlay_attachs .modal .item.active {
  background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
  border-bottom: 2px solid #7775D1;
}


.new_overlay_attachs .modal .item span.name {
  display: inline-block;
  color: white;
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  min-height: 20px;
  display: flex;
  align-items: center;
}

.new_overlay_attachs .modal .item img {
  max-width: 37px;
  
}







  .download_materials_overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.315);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
  }

  .download_materials_overlay.active {
    display: block;
  }

  .download_materials {
    width: 388px;
    height: 280px;
    position: absolute;
    left: 260px;
    top: 190px;
    /* background: rgba(34, 36, 39, 0.808); */
    background: transparent;
    /* border: 2px solid rgba(43, 48, 64, 0.24); */
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* display: flex; */
    flex-direction: column;
    justify-content: flex-start;
    display: none;
    /* backdrop-filter: blur(12px); */
}

.download_materials p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  margin-top: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #DCD9DB;
  margin-bottom: 0px;
}

.download_materials span {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.48);
  margin-left: 0;
  margin-bottom: 12px;
}

.download_materials.active {
    display: flex;
}

.progress-ring {
    position: relative;
    width: 75px;
    height: 75px;
}

.progress-ring__svg {
    transform: rotate(-90deg);
}

.progress-ring__circle--bg {
    fill: none;
    stroke: #ccc;
    stroke-width: 4; /* Уменьшено вдвое */
}

.progress-ring__circle {
    fill: none;
    stroke: #7775D1;
    stroke-width: 4; /* Уменьшено вдвое */
    stroke-dasharray: 204; /* Пропорционально уменьшенному радиусу */
    stroke-dashoffset: 204;
    transition: stroke-dashoffset 0.3s ease;
}

.progress-ring__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px; /* Уменьшено пропорционально */
    color: white;
    font-family: Arial, sans-serif;
}














  
  .key_modal {
    width: 388px;
    height: 324px;
    position: absolute;
    left: 260px;
    top: 190px;
    z-index: 1002;
    padding: 24px;
    text-align: center;
    background: rgba(34, 36, 39, 0.98);
    border: 2px solid rgba(43, 48, 64, 0.24);
    border-radius: 6px;
    display: none;
    transition: .3s;
    opacity: 0;
  }
  
  .key_modal.active {
  
    display: block;
  }
  
  .key_modal.anim {
    top: 140px;
    opacity: 1;
  }
  
  .key_modal {
    overflow: visible;
  }
  
  .key_modal .uvaga {
    margin-top: 66px;
    display: flex;
    align-items: flex-start;
  }
  
  .key_modal .uvaga img {
    min-width: 20px;
    margin-right: 10px;
    margin-top: 4px;
  }
  
  .key_modal .uvaga p.title {
    margin: 0;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    /* or 154% */
    text-align: left;
    letter-spacing: 0.012em;
    
    color: rgba(220, 217, 219, 0.48);
  }
  
  .key_modal .fa-times {
    position: absolute;
    right: 6px;
    padding: 8px;
    display: inline-block;
    top: 6px;
    color: white;
    opacity: .3;
    cursor: pointer;
  }
  
  .key_modal .fa-times:hover {
    opacity: .7;
  }
  
  .key_modal .input-key {
    position: relative;
    margin-top: 30px;
  }
  
  .key_modal .input-key {
    position: relative;
  }
  
  .key_modal input {
    border: none;
    padding: 11px 50px;
    width: 100%;
    outline: none;
    min-height: 48px;
    color: rgba(220, 217, 219, 0.48);
    transition: .5s;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
  
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  /* identical to box height, or 167% */
  
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(220, 217, 219, 0.48);
  }
  
  
  .key_modal .fa-key {
    position: absolute;
    color: white;
    opacity: .3;
    top: 12px;
    left: 28px;
    transition: .5s;
  }
  
  .active_key {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    
    
    /* main */
    min-height: 52px;
    width: 100%;
    border: none;
    background: #7775D1;
    border-radius: 4px;
  
  
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    /* identical to box height, or 167% */
  
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: #FFFFFF;
    transition: .2s;
    cursor: pointer;
  }
  
  .active_key:hover {
  
    background: #DCD9DB;
  
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
  
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    /* main */
  
    color: #7775D1;
  }
  
  .active_key.blocked {
    opacity: .7;
    pointer-events: none;
  }
  
  .remember {
    /* position: absolute; */
    bottom: 48px;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  
  .remember input {
    display: none;
  }
  
  .done_key {
    display: none;
    margin-top: 63px;
    margin-bottom: 200px;
  }
  
  .mainModal_key {
    display: block;
    height: 100%;
  }
  
  .code_key-text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
  }
  
  .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7775D1;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 13% auto;
    box-shadow: inset 0px 0px 0px #7775D1;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 30px #7775D1;
    }
  }
  
  .slider {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 310px;
    height: 6px;
    outline: none;
    border-radius: 0.25rem;
    background: #2D2F3D;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 27px;
    height: 18px;
    /* background-color: #7775D1; */
    background-image: url('../img/pizdec2.png');
    background-size: cover;
    /* border: 0.25rem solid #fff; */
    border-radius: 2px;
    opacity: 1;
    cursor: pointer;
    box-shadow: inset -2px -2px 4px rgba(10, 10, 35, 0.2), inset -4px -4px 6px rgba(0, 0, 0, 0.2), inset 2px 2px 6px rgba(131, 129, 221, 0.4);
  }
  
  /* 
  .range {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170px;
    margin-top: 10px;
    transform: translate(-50%, -50%);
  }
  
  input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: #7775D1;
    background: -moz-linear-gradient(45deg, #7775D1 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, #F92853 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, #7775D1), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, #F92853));
    background: -webkit-linear-gradient(45deg, #7775D1 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, #F92853 100%);
    background: -o-linear-gradient(45deg, #7775D1 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, #F92853 100%);
    background: -ms-linear-gradient(45deg, #7775D1 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, #F92853 100%);
    background: linear-gradient(45deg, #7775D1 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, #F92853 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
  
  input[type=range]:focus {
    outline: none;
  }
  
  input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: rgba(119, 117, 209, 0.12);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid;
    border-radius: 40px;
    height: 18px;
    width: 28px;
    max-width: 80px;
    position: relative;
    bottom: 8px;
    background-color: #1d1c25;
    cursor: -webkit-grab;
  
    -webkit-transition: border 1000ms ease;
    transition: border 1000ms ease;
  }
  
  input[type=range]::-moz-range-thumb {
    -moz-appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    max-width: 80px;
    position: relative;
    bottom: 11px;
    background-color: #1d1c25;
    cursor: -moz-grab;
    -moz-transition: border 1000ms ease;
    transition: border 1000ms ease;
  }
  
  
  
  .range.blue::-webkit-slider-thumb {
     border-color: #7775D1;
  }
  
  .range.ltpurple::-webkit-slider-thumb {
     border-color: rgb(87,111,230);
  }
  
  .range.purple::-webkit-slider-thumb {
     border-color: rgb(152,68,183);
  }
  
  .range.pink::-webkit-slider-thumb {
     border-color: #F92853;
  }
  
  .range.blue::-moz-range-thumb {
     border-color: #7775D1;
  }
  
  .range.ltpurple::-moz-range-thumb {
     border-color: rgb(87,111,230);
  }
  
  .range.purple::-moz-range-thumb {
     border-color: rgb(152,68,183);
  }
  
  .range.pink::-moz-range-thumb {
     border-color: #F92853;
  }
  
  input[type=range]::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing;
  }
  
  input[type=range]::-moz-range-thumb:active {
    cursor: -moz-grabbing;
  } */
  .sensetive, .ads_sensetive, .fov, .freezeOpacity, .triggerSensitivity, .triggerDelay, .humanizationRandom {
    position: relative;
    overflow-y: visible;
    overflow-x: visible;
    /* background: rgba(255, 255, 255, 0.02); */
    height: 70px;
    /* border-radius: 8px; */
    width: 100%;
    padding: 12px;
  }
  
  /* AI AIMBOT SPEED CONTAINER - отдельные стили без конфликтов */
  .aiAimbotSpeedContainer {
    position: relative;
    overflow-y: visible;
    overflow-x: visible;
    height: 70px;
    width: 100%;
    padding: 12px;
  }
  
  /* AI NEURAL CONFIDENCE CONTAINER - отдельные стили без конфликтов */
  .aiNeuralConfidenceContainer {
    position: relative;
    overflow-y: visible;
    overflow-x: visible;
    height: 70px;
    width: 100%;
    padding: 12px;
  }
  
  .settingsColorOne {
    background: rgba(255, 255, 255, 0.02);
  }
  
  .settingsColorTwo {
    background: rgba(255, 255, 255, 0.01);
  }
  
  .sensetive span, .ads_sensetive span, .fov span, .freezeOpacity span, .triggerSensitivity span, .triggerDelay span, .humanizationRandom span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    /* identical to box height, or 240% */
    
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    
    color: rgba(240, 237, 239, 0.9);
  }

  .humanizationRandom .humanization-random-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .humanizationRandom .humanization-random-ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .humanizationRandom .humanization-random-ques:hover,
  .humanizationRandom .humanization-random-ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .humanizationRandom .humanization-random-modal {
    left: auto;
    right: 0;
    top: auto;
    bottom: 58px;
    width: 330px;
    height: auto;
    min-height: 0;
    z-index: 10020;
  }

  .humanizationRandom .humanization-random-modal span {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 12px;
  }

  .humanizationRandom .humanization-random-modal p {
    display: block;
    width: auto;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
  }
  
  /* AI AIMBOT SPEED SPAN - отдельные стили */
  .aiAimbotSpeedContainer span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }
  
  /* AI NEURAL CONFIDENCE SPAN - отдельные стили */
  .aiNeuralConfidenceContainer span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }
  
  .sensetive p, .ads_sensetive p, .fov p, .freezeOpacity p, .triggerSensitivity p, .triggerDelay p, .humanizationRandom .rangeWrap > p {
    /* position: absolute;
    top: 7px;
    font-size: 15px;
    left: 16px;
    color: white;
    opacity: .5;
    font-weight: 700;*/
    margin: 0; 
    margin-right: 5px;
    min-width: 25px;
    display: flex;
    justify-content: center;
  
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  /* or 167% */
  
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: #FFFFFF;
  }

  /* HUMANIZATION RANDOM: фиксируем ширину значения, чтобы при 100% не разъезжался layout */
  .humanizationRandom .rangeWrap > p {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    white-space: nowrap;
    overflow: hidden;
  }
  
  /* AI AIMBOT SPEED P - отдельные стили */
  .aiAimbotSpeedContainer p {
    margin: 0; 
    margin-right: 5px;
    display: flex;
    align-items: center;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #FFFFFF;
  }

  .aiAimbotSpeedContainer .aiAimbotSpeedDisplayValue {
    flex: 0 0 52px;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    justify-content: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-sizing: border-box;
    padding-right: 2px;
  }
  
  /* AI NEURAL CONFIDENCE P - отдельные стили */
  .aiNeuralConfidenceContainer p {
    margin: 0; 
    margin-right: 5px;
    min-width: 25px;
    display: flex;
    justify-content: center;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #FFFFFF;
  }
  
  /* AI AIMBOT SPEED RANGE WRAP - отдельные стили */
  .aiAimbotSpeedRangeWrap {
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 8px;
    width: 100%;
  }

  .aiAimbotSpeedRangeWrap .aiAimbotSpeedSliderInput {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  
  /* AI NEURAL CONFIDENCE RANGE WRAP - отдельные стили */
  .aiNeuralConfidenceRangeWrap {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  
  
  .settings_hr {
    display: block;
    color: white;
    font-weight: 100;
    font-size: 12px;
    margin-left: 12px;
    margin-top: 16px;
    margin-bottom: 10px;
  }
  
  
  input[type=range] {
    overflow-y: visible;
    overflow-x: visible;
    top: 7px;
    left: 56%;
  }
  
  canvas {
    display: none;
    position: absolute;
    border: none;
    background-color: black;
    top: 100px;
  }
  
  canvas.screenshot {
    margin-left: 310px;
  }
  
  section.login {
    display: flex;
    /* display: none; */
  }
  
  section.login .form {
    display: none;
    background: rgb(28,30,36);
    background: linear-gradient(0deg, rgba(28,30,36,1) 0%, rgba(20,22,33,0.7693452380952381) 100%, rgba(28,28,28,1) 100%);
    min-width: 100%;
    position: absolute;
    z-index: 3;
    height: 100%;
    backdrop-filter: blur(10px);
  }
  
  section.login .form.active {
    display: block;
  }

  body#mainBody .app-mode-switch {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 22px 28px 18px;
    user-select: none;
  }

  body#mainBody .app-mode-opt {
    margin: 0;
    padding: 6px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  body#mainBody .app-mode-opt:focus {
    outline: none;
  }

  body#mainBody .app-mode-opt:focus-visible .app-mode-label {
    outline: 1px solid rgba(120, 200, 255, 0.45);
    outline-offset: 4px;
  }

  body#mainBody .app-mode-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(236, 242, 255, 0.92);
    transition: opacity 0.2s ease, filter 0.2s ease, text-shadow 0.2s ease;
  }

  body#mainBody .app-mode-opt:not(.active) .app-mode-label {
    opacity: 0.36;
    color: rgba(200, 210, 230, 0.55);
    text-shadow: none;
    filter: grayscale(0.25);
  }

  body#mainBody .app-mode-opt:not(.active):hover .app-mode-label {
    opacity: 0.58;
    filter: grayscale(0.1);
  }

  body#mainBody .app-mode-opt.active .app-mode-label {
    opacity: 1;
    filter: none;
    text-shadow:
      0.85px 0 0 rgba(255, 132, 72, 0.5),
      -0.85px 0 0 rgba(72, 210, 255, 0.42),
      0.4px -0.45px 0 rgba(255, 160, 100, 0.28),
      -0.4px 0.45px 0 rgba(100, 195, 255, 0.28),
      0 0 18px rgba(190, 220, 255, 0.14);
  }

  body#mainBody .app-mode-sep {
    display: inline-block;
    margin: 0 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(180, 195, 220, 0.28);
    text-shadow:
      0.5px 0 0 rgba(255, 120, 80, 0.22),
      -0.5px 0 0 rgba(80, 200, 255, 0.2);
    pointer-events: none;
    transform: translateY(-0.5px);
  }
  
  
  
  
  section.login .imgWrap {
    z-index: 1;
    width: 100%;
  
  }
  
  section.login .imgWrap img {
    height: 100%;
    wiidth: auto;
  }
  
  /* .gmc__section {
    display: none;
  } */
/*   
  .panel.csgo {
    display: none;
  }
  
  .panel.pubg {
    display: none;
  }
  
  .panel.bf {
    display: none;
  }
  
  .panel.warzone {
    display: none;
  }
  
  .panel.apex {
    display: none;
  }
  
  .panel.lite {
    display: none;
  }
  
  .panel.rust {
    display: none;
  }
  
  .panel.r6 {
    display: none;
  } */
  
  .scopes-varieties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
    /* padding: 0 6px; */
    margin-left: 10px;
  }
  
  .scopes-varieties .scopes-varieties-item {
    width: 38px;
    height: 38px;
    cursor: pointer;
    opacity: .4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    margin: 0 4px;
    margin-bottom: 8px;
  }
  
  
  .scopes-varieties .scopes-varieties-item.active {
    border-bottom: 2px solid #6565AE;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 14.58%, rgba(119, 117, 209, 0.38) 100%), rgba(255, 255, 255, 0.04);
    opacity: 1;
  }
  
  /* .scopes-varieties .scopes-varieties-item.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 14.58%, rgba(119, 117, 209, 0.38) 100%), rgba(255, 255, 255, 0.04);
    border-bottom: 2px solid #6565AE;
    border-radius: 4px;
  } */
  
  
  
  .scopes-varieties .scopes-varieties-item:hover {
    opacity: 1;
  }
  
  .scopes-varieties .scopes-varieties-item img {
    width: 18px;
    height: 18px;
    filter: invert(100%) sepia(3%) saturate(372%) hue-rotate(356deg) brightness(112%) contrast(100%);
  }
  
  
  .crosshair-modal {
    max-width: 18px;
  }
  
  section.binds {
    /* width: 700px; */
    height: 92px;
  
  
    opacity: 1;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    padding: 6px;
    padding-left: 4px;
    /* transition: .2s; */
    background: #222426;
    border: 2px solid #262A32;
    border-radius: 6px;
  }
  
  section.binds.freeze {
    cursor: pointer;
  
  }
  
  section.binds .icons {
    background-color: #292A2F;
    width: 64px;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }
  
  section.binds .icons p.title {
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 800;
    color: #e2e2e2;
    margin-bottom: 8px;
    margin-top: 3px;
  }
  
  .keys_container {
    margin: 0px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
  section.binds .keys {
  
    display: flex;
    margin: 0 5px;
    display: none;
    margin-left: 0px;
  }
  
  section.binds .keys .key-data {
    /* border: 1px solid red; */
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    padding: 0 8px;
    min-height: 36px;
    min-width: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  
  section.binds .keys .key-data p.key {
    /* text-align: center;
    color: #F92853;
    font-weight: 800;
    display: block;
    font-size: 11px;
    text-transform: uppercase;*/
    margin: 0;
  
    font-family: 'Montserrat-Bold';
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    /* line-height: 16px; */
    /* identical to box height, or 160% */
  
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(119, 117, 209, 0.8);
  }
  
  section.binds .keys .key-data p.weapon {
    /* text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    color: #e2e2e2; */
    margin: 0;
  
    font-family: 'Montserrat-Bold';
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  /* identical to box height, or 160% */
  
  display: flex;
  align-items: center;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.8);
  }
  
  section.binds .active-weapon {
    background: rgba(255, 255, 255, 0.03);
    min-width: 136px;
    height: 76px;
    position: relative;
    border-radius: 4px;
    right: 10px;
    /* margin-top: 6px; */
    border-bottom: 2px solid transparent;
    margin-right: -8px;
    margin-left: 15px;
    transition: .3s;
  }
  
  section.binds .active-weapon.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
  border-bottom: 2px solid #7775D1;
  border-radius: 4px;
  }
  
  
  section.binds .active-weapon.redAlert {
    position: relative;
    border-radius: 4px;
    border-bottom: 2px solid transparent;
    background: rgba(255, 255, 255, 0.03);
  }
  
  section.binds .active-weapon.redAlert::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgb(209 117 117 / 0%) 0%, rgba(211, 103, 103, 0.24) 100%), rgb(255 255 255 / 4%);
    border-bottom: 2px solid #bd4747;
    opacity: 1;
    animation: flash 2s;
    opacity: 0;
  }
  
  @keyframes flash {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  
  section.binds .active-weapon p.title {
    /* text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 800;
    color: #e2e2e2;
    margin-bottom: 0;
    margin-top: 3px; */
    font-family: 'Montserrat-Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 22px;
  
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
  
  }
  
  section.binds .active-weapon span {
    text-align: center;
    color: #7775D1;
    font-family: 'Montserrat-Bold';
    font-weight: 100;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
  }
  
  section.binds button.slided {
    background-color: #292A2F;
    width: 15px;
    border: none;
    height: 55px;
    border-radius: 10px;
    position: absolute;
    left: -6px;
  }
  
  section.binds button.slided .fa {
    color: white;
    font-size: 16px;
    margin-left: 2px;
  }
  
  
  .statuses {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  
  .statuses .stat {
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
  }
  
  .statuses .onlineStatus {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    width: 36px;
    height: 34px;
  
    border-bottom: 2px solid transparent;
    box-sizing: content-box;
    margin-bottom: 4px;
  }
  
  .statuses .onlineStatus.active {
    border-bottom: 2px solid #7775d1;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    box-sizing: content-box;
  }
  
  .statuses .onlineStatus.active.merged {
    border-bottom: 2px solid #1C1B21;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  
  .hidden_sup {
    width: 26px;
    position: absolute;
    top: 28px;
    left: 5px;
    box-sizing: content-box;
    height: 14px;
    border-left: 2px solid #7775d1;
    border-right: 2px solid #7775d1;
    background-color: #292A2F;
    display: none;
  }
  
  .statuses .freezeStatus {
    margin-top: 1px;
    border-bottom: 2px solid transparent;
    width: 36px;
    height: 34px;
    box-sizing: content-box;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
  }
  
  .statuses .freezeStatus.freeze {
    border-bottom: 2px solid #7775d1;
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    box-sizing: content-box;
  }
  
  .statuses .freezeStatus.freeze.merged {
    border-top: 2px solid #1C1B21;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  
  .statuses .onlineStatus .fa{
    color: #88888A;
    font-size: 19px;
  }
  
  .statuses .onlineStatus .fa.active{
    color: rgba(255, 255, 255, 0.89);
    font-size: 19px;
  }
  
  .statuses .freezeStatus .fa{
    color: #88888A;
    font-size: 19px;
  }
  
  .statuses .freezeStatus .fa.freeze {
    color: rgba(255, 255, 255, 0.902);
    font-size: 19px;
  }
  
  
  
  
  
  
  .handles {
    display: flex;
    /* padding: 4px 5px; */
    height: 100%;
    width: auto;
    margin: 0 2px;
  }
  
  .handlesContainer {
    height: 100%;
    /* padding: 2px 2px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 1px solid red; */
    margin: 0 2px;
  }
  
  .handles .handles__item {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-color: #292A2F;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid transparent;
  }
  
  .handles .handles__item .fa {
    color: white;
    font-size: 19px;
    opacity: .5;
  }
  
  .handles .handles__item img {
    max-height: 27px;
    opacity: .5;
  }
  
  .handles .handles__item.active img {
    opacity: 1;
  }
  
  .handles .handles__item.active .fa {
    opacity: 1;
  }
  
  .handles .handles__item.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    border-bottom: 2px solid #7775D1;
  }
  
  .handles .handles__item.active span {
    opacity: 1;
    color: white;
  }
  
  .handles .handles__item span {
    color: white;
    opacity: .6;
    font-size: 12px;
    font-weight: 700;
  }
  
  
  
  
  
  
  
  
  .attach {
    display: flex;
    /* padding: 4px 5px; */
    height: 100%;
    width: auto;
    margin: 0 4px;
  }
  
  .attachContainer {
    height: 100%;
    /* padding: 2px 2px; */
    margin: 0 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 1px solid red; */
  }
  
  .attach .attach__item {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .attach .attach__item .fa {
    color: white;
    font-size: 19px;
    opacity: .5;
  }
  
  .attach .attach__item img {
    max-height: 27px;
    opacity: .5;
  }
  
  .attach .attach__item.active img {
    opacity: 1;
  }
  
  .attach .attach__item.active .fa {
    opacity: 1;
  }
  
  .attach .attach__item.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    border-bottom: 2px solid #7775D1;
    transition: 0;
  }
  
  .attach .attach__item.active span {
    opacity: 1;
    color: white;
  }
  
  .attach .attach__item span {
    color: white;
    opacity: .6;
    font-size: 12px;
    font-weight: 700;
  }
  
  
  
  
  
  
  
  .scopes {
    display: flex;
    height: 100%;
    width: auto;
    margin: 0 2px;
    margin-left: 0;
  }
  
  .scopeContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2px;
  }
  
  .scopes .scopes__item {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid transparent;
  }
  
  .scopes .scopes__item .fa {
    color: white;
    font-size: 19px;
    opacity: .5;
  }
  
  .scopes .scopes__item img {
    max-height: 27px;
    opacity: .5;
  }
  
  .scopes .scopes__item.active img {
    opacity: 1;
  }
  
  .scopes .scopes__item.active .fa {
    opacity: 1;
  }
  
  .scopes .scopes__item.active {
    background: linear-gradient(180deg, rgba(119, 117, 209, 0) 0%, rgba(119, 117, 209, 0.24) 100%), rgba(255, 255, 255, 0.04);
    border-bottom: 2px solid #7775D1;
  }
  
  .scopes .scopes__item.active span {
    opacity: 1;
    color: white;
  }
  
  .scopes .scopes__item span {
    color: white;
    opacity: .6;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  }
  
  
  
  /* .loader {
    display: block;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    z-index: 2;
    left: 48%;
    bottom: 16px;
    z-index: 1000;
  }
  
  
  .loader__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .loader {
    overflow: visible;
    padding-top: 2em;
    height: 0;
    width: 2em;
  }
  
  .loader__figure {
    height: 0;
    width: 0;
    box-sizing: border-box;
    border: 0 solid #ffffff;
    border-radius: 50%;
    -webkit-animation: loader-figure .8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-figure .8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-figure .8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  
  @-webkit-keyframes loader-figure {
    0% {
      height: 0;
      width: 0;
      background-color: #FE665C;
    }
    29% {
      background-color: #FE665C;
    }
    30% {
      height: 2em;
      width: 2em;
      background-color: transparent;
      border-width: 1em;
      opacity: 1;
    }
    100% {
      height: 2em;
      width: 2em;
      border-width: 0;
      opacity: 0;
      background-color: transparent;
    }
  }
  @-moz-keyframes loader-figure {
    0% {
      height: 0;
      width: 0;
      background-color: #FE665C;
    }
    29% {
      background-color: #FE665C;
    }
    30% {
      height: 2em;
      width: 2em;
      background-color: transparent;
      border-width: 1em;
      opacity: 1;
    }
    100% {
      height: 2em;
      width: 2em;
      border-width: 0;
      opacity: 0;
      background-color: transparent;
    }
  }
  @keyframes loader-figure {
    0% {
      height: 0;
      width: 0;
      background-color: #FE665C;
    }
    29% {
      background-color: #FE665C;
    }
    30% {
      height: 2em;
      width: 2em;
      background-color: transparent;
      border-width: 1em;
      opacity: 1;
    }
    100% {
      height: 2em;
      width: 2em;
      border-width: 0;
      opacity: 0;
      background-color: transparent;
    }
  }  */
  
  
  
  
  .loader {
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 12;
    position: absolute;
    overflow: hidden;
    background-color: transparent;
  
  }
  
  .loader:before {
    content: "";
    position: absolute;
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: #7775d199;
    -webkit-animation: lineAnim 1s linear infinite;
    -moz-animation: lineAnim 1s linear infinite;
    animation: lineAnim 1s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  }
  
  @keyframes lineAnim {
    0% {
        left: -40%;
    }
    50% {
        left: 20%;
        width: 80%;
    }
    100% {
        left: 100%;
        width: 100%;
    }
  }
  
  
  
  
  
  .window-title {
    opacity: .2;
  }
  
  .testFactor {
    width: 50px;
  }
  
  .settings-item {
    display: flex;
    width: 100%;
    height: 40px;
    /* border-radius: 8px; */
    /* margin-left: 12px; */
    padding: 6px 12px;
    justify-content: flex-start;
    align-items: center;
  }
  
  .settings-item.big {
    padding: 0 12px;
    /* padding-bottom: 45px; */
    position: relative;
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 0;
  }
  
  .settings-item.blocked {
    opacity: .4;
    pointer-events: none;
  }
  
  .settings-item.big button {
    position: absolute;
    border-radius: 50px;
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
    background: transparent;
    padding: 4px 17px;
    cursor: pointer;
    border: 2px solid #F92853;
    color: #F92853;
    text-transform: uppercase;
    transition: .2s;
    font-size: 10px;
    transition-property: background,color;
    transition-duration: .2s;
    outline: none;
    bottom: 12px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  }
  
  .settings-item.big button:hover {
    color: white;
    background: #F92853;
    cursor: pointer;
    transition-property: background,color;
    transition-duration: .2s;
  }
  
  
  .settings-item > span {
    /* color: white; */
    margin-left: 8px;
    /* display: block;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.2px; */
  
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  /* line-height: 24px; */
  /* identical to box height, or 240% */
  
  display: flex;
  align-items: center;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.9);
  }

  .settings-item.checkpkm-setting {
    position: relative;
    overflow: visible;
  }

  .settings-item.checkpkm-setting .checkpkm-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
    min-width: 0;
    margin-left: 8px;
  }

  .settings-item.checkpkm-setting .checkpkm-label-row .lng-checkPkm {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }

  .settings-item.checkpkm-setting .checkpkm-ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .settings-item.checkpkm-setting .checkpkm-ques:hover,
  .settings-item.checkpkm-setting .checkpkm-ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .settings-item.checkpkm-setting .checkpkm-modal {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    width: 330px;
    z-index: 10020;
  }

  .settings-item.weapon-data-overlay-setting {
    position: relative;
    overflow: visible;
  }

  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
    min-width: 0;
    margin-left: 8px;
  }

  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-label-row .lng-showWeaponDataOverlay {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }

  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-ques:hover,
  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .settings-item.weapon-data-overlay-setting .weapon-data-overlay-modal {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    width: 330px;
    z-index: 10020;
  }

  .settings-item.autodetect-scope-setting {
    position: relative;
    overflow: visible;
  }

  .settings-item.autodetect-scope-setting .autodetect-scope-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
    min-width: 0;
    margin-left: 8px;
  }

  .settings-item.autodetect-scope-setting .autodetect-scope-label-row .lng-autodetectScope {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }

  .settings-item.autodetect-scope-setting .autodetect-scope-ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .settings-item.autodetect-scope-setting .autodetect-scope-ques:hover,
  .settings-item.autodetect-scope-setting .autodetect-scope-ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .settings-item.autodetect-scope-setting .autodetect-scope-modal {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    width: 330px;
    z-index: 10020;
  }

  .settings-item.inference-device-setting {
    position: relative;
    height: 78px;
    padding: 8px 12px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    overflow: visible;
  }

  .settings-item.inference-device-setting .inference-device-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .settings-item.inference-device-setting .inference-device-title {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }

  .settings-item.inference-device-setting .inference-device-ques {
    width: 12px;
    height: 12px;
    padding: 3px;
    object-fit: contain;
    box-sizing: content-box;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .55;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
    transition: opacity .15s, background .15s;
  }

  .settings-item.inference-device-setting .inference-device-ques:hover,
  .settings-item.inference-device-setting .inference-device-ques.active {
    opacity: .95;
    background: rgba(125, 113, 255, 0.18);
  }

  .settings-item.inference-device-setting .inference-device-modal {
    left: auto;
    right: 0;
    top: auto;
    bottom: 58px;
    width: 330px;
    z-index: 10020;
  }

  .settings-item.inference-device-setting .inference-device-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 34px;
    background-color: #35364F;
    border-radius: 4px;
  }

  .settings-item.inference-device-setting .inference-device-option {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
  }

  .settings-item.inference-device-setting .inference-device-option input {
    display: none;
  }

  .settings-item.inference-device-setting .inference-device-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 2px 12px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.527);
    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: .4s;
  }

  .settings-item.inference-device-setting .inference-device-option:hover span {
    color: rgba(240, 237, 239, 0.85);
  }

  .settings-item.inference-device-setting .inference-device-option input:checked + span {
    background-color: #7775D1;
    color: #ffffff;
    transition: .05s;
  }
  
  .settings-item strong {
    margin: 0 6px;
  }
  
  span.autoderes {
    position: absolute;
    top: 0;
    right: 0;
    color: rgb(75, 75, 75);
    font-size: 11px;
  }
  
  .language {
    position: relative;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.04);
    transition: .15s;
    border-radius: 4px;
  }
  
  .language.active {
    height: 219px;
  }
  
  .flags {
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 219px;
    width: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 2px;
  }
  
  .flagWrap {
    max-width: 24px;
    max-height: 23px;
    margin: 0 4px;
    cursor: pointer;
    position: relative;
  }
  
  .flagWrap:hover {
    opacity: .7;
  }
  
  .flagWrap.active {
    border: 3px solid #7775D1;
    border-radius: 4px;
  }
  
  .flagWrap img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  
  
  .indexLoader {
    height: 471px;
    width: 344px;
    position: relative;
    background-color: #1C1B21;
  }
  
  
  
  
  
  
  .wrap_select {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    height: 80px;
    /* margin-top: 33px; */
    /* background: #232529; */
  }
  
  .wrap_select.blocked {
    opacity: .4;
    pointer-events: none;
  }
  
  .keysModal__item.blocked {
    opacity: .2;
    pointer-events: none;
  }
  
  .wrap_select .screen-resolution,
.wrap_select .input-type {
    /* top: -30px;
    left: 14px;
    position: absolute;
    color: white;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.9px; */
    
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-size: 10px;
  line-height: 24px;
  /* identical to box height, or 240% */
  padding: 0 1px;
  display: block;
  width: 341px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.9);
}
  
  .wrap_select .chevron {
    /* top: -30px;
    left: 14px;
    position: absolute;
    color: white;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.9px; */
    
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-size: 10px;
  line-height: 24px;
  /* identical to box height, or 240% */
  padding: 0 1px;
  display: block;
  width: 341px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.9);
  }
  
  
  .wrap_select .title_select {
    width: 341px;
    height: 50px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  
  .wrap_select  .title_select_priority {
    width: 341px;
    height: 50px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  .wrap_select  .title_select_process {
    width: 341px;
    height: 50px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  .wrap_select .title_select-mod {
    width: 341px;
    height: 50px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
  }
  
  .wrap_select .title_select.active {
    /* border-color: #F92853; */
    border-radius: 4px 4px 0 0;
    border-bottom: none;
  }
  
  
  .wrap_select .title_select.active p {
    opacity: 1;
  }
  
  .wrap_select .title_select.active .fa {
    opacity: 1;
    transform: rotate(180deg)
  }
  
  .wrap_select .title_select:hover .fa {
    opacity: 1;
  }
  
  .wrap_select .title_select:hover p {
    opacity: 1;
  }
  
  .wrap_select .title_select p {
    /* color: white;
  
    font-weight: bold;
   */
   margin-left: 8px;
   margin-top: 2px;
    text-align: left;
    display: block;
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  /* identical to box height, or 200% */
  
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.5);
  }
  
  .wrap_select .title_select .fa {
    color: white;
    position: absolute;
    top: 6px;
    opacity: .4;
    right: 15px;
    font-size: 12px;
    transition: .2s;
  
  }
  
  
  
  
  
  .wrap_select .title_select_process.active {
    /* border-color: #F92853; */
    border-radius: 4px 4px 0 0;
    border-bottom: none;
  }
  
  
  .wrap_select .title_select_process.active p {
    opacity: 1;
  }
  
  .wrap_select .title_select_process.active .fa {
    opacity: 1;
    transform: rotate(180deg)
  }
  
  .wrap_select .title_select_process:hover .fa {
    opacity: 1;
  }
  
  .wrap_select .title_select_process:hover p {
    opacity: 1;
  }
  
  .wrap_select .title_select_process p {
    /* color: white;
  
    font-weight: bold;
   */
   margin-left: 8px;
   margin-top: 2px;
    text-align: left;
    display: block;
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  /* identical to box height, or 200% */
  
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.5);
  }
  
  .wrap_select .title_select_process .fa {
    color: white;
    position: absolute;
    top: 6px;
    opacity: .4;
    right: 15px;
    font-size: 12px;
    transition: .2s;
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .wrap_select .title_select_priority.active {
    /* border-color: #F92853; */
    border-radius: 4px 4px 0 0;
    border-bottom: none;
  }
  
  
  .wrap_select .title_select_priority.active p {
    opacity: 1;
  }
  
  .wrap_select .title_select_priority.active .fa {
    opacity: 1;
    transform: rotate(180deg)
  }
  
  .wrap_select .title_select_priority:hover .fa {
    opacity: 1;
  }
  
  .wrap_select .title_select_priority:hover p {
    opacity: 1;
  }
  
  .wrap_select .title_select_priority p {
    /* color: white;
  
    font-weight: bold;
   */
   margin-left: 8px;
   margin-top: 2px;
    text-align: left;
    display: block;
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  /* identical to box height, or 200% */
  
  letter-spacing: 0.012em;
  text-transform: uppercase;
  
  color: rgba(240, 237, 239, 0.5);
  }
  
  .wrap_select .title_select_priority .fa {
    color: white;
    position: absolute;
    top: 6px;
    opacity: .4;
    right: 15px;
    font-size: 12px;
    transition: .2s;
  
  }
  
  
  
  
  
  
  
  
  
  .wrap_select__options {
    position: absolute;
    top: 71px;
    width: 341px;
    background: #26282C;
    min-height: 50px;
    z-index: 200;
    /* border: 2px solid #7775D1; */
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
  
  
  }
  
  .wrap_select__options_priority {
    position: absolute;
    top: 71px;
    width: 341px;
    background: #26282C;
    min-height: 50px;
    z-index: 200;
    /* border: 2px solid #7775D1; */
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
  }
  
  .wrap_select__options_process {
    position: absolute;
    top: 71px;
    width: 341px;
    background: #26282C;
    min-height: 50px;
    z-index: 200;
    /* border: 2px solid #7775D1; */
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
  }
  
  .wrap_select__options-mod {
    position: absolute;
    top: 71px;
    width: 341px;
    background: #26282C;
    min-height: 50px;
    z-index: 200;
    /* border: 2px solid #7775D1; */
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
  }
  
  .wrap_select__options_process.active {
    display: block;
    overflow-y: scroll;
    height: auto;
  }
  
  
  .wrap_select__options_priority.active {
    display: block;
    overflow-y: scroll;
    height: auto;
  }
  
  .wrap_select__options-mod.active {
    display: block;
    overflow-y: scroll;
    height: auto;
  }
  
  .wrap_select__options.active {
    display: block;
    overflow-y: scroll;
    height: 210px;
  }
  
  .wrap_select__options .select_option {
    width: 100%;
    cursor: pointer;
    transition: .2s;
    height: 23px;
  }
  
  
  
  .wrap_select__options .select_option:hover {
    background-color: #7775D1;
    color: white;
  }
  
  .wrap_select__options .select_option:hover span {
    opacity: 1;
  }
  
  .wrap_select__options .select_option span {
    color: white;
    font-family: 'Montserrat';
      margin-left: 11px;
      margin-top: 5px;
      font-weight: bold;
      display: block;
      opacity: .4;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1.2px;
      text-align: left;
  }
  
  
  
  
  
  .wrap_select__options_process .select_option_process {
    width: 100%;
    cursor: pointer;
    transition: .2s;
    height: 23px;
  }
  
  .wrap_select__options_process .select_option_process:hover {
    background-color: #7775D1;
    color: white;
  }
  
  .wrap_select__options_process .select_option_process:hover span {
    opacity: 1;
  }
  
  .wrap_select__options_process .select_option_process span {
    color: white;
    font-family: 'Montserrat';
      margin-left: 11px;
      margin-top: 5px;
      font-weight: bold;
      display: block;
      opacity: .4;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1.2px;
      text-align: left;
  }
  
  
  
  
  
  
  
  .wrap_select__options_priority .select_option_priority {
    width: 100%;
    cursor: pointer;
    transition: .2s;
    height: 23px;
  }
  
  .wrap_select__options_priority .select_option_priority:hover {
    background-color: #7775D1;
    color: white;
  }
  
  .wrap_select__options_priority .select_option_priority:hover span {
    opacity: 1;
  }
  
  .wrap_select__options_priority .select_option_priority span {
    color: white;
    font-family: 'Montserrat';
      margin-left: 11px;
      margin-top: 5px;
      font-weight: bold;
      display: block;
      opacity: .4;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1.2px;
      text-align: left;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  .wrap_select__options .select_option-mod {
    width: 100%;
    cursor: pointer;
    transition: .2s;
    height: 23px;
  }
  
  .wrap_select__options .select_option-mod:hover {
    background-color: #7775D1;
    color: white;
  }
  
  .wrap_select__options .select_option-mod:hover span {
    opacity: 1;
  }
  
  .wrap_select__options .select_option-mod span {
    color: white;
    font-family: 'Montserrat';
      margin-left: 11px;
      margin-top: 5px;
      font-weight: bold;
      display: block;
      opacity: .4;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1.2px;
      text-align: left;
  }
  
  
  
  
  
  .scope-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 4px;
  }
  
  .scope-wrap span.scope-view {
    width: 100%;
    text-align: left;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    margin-top: 8px;
    color: rgba(240, 237, 239, 0.36);
  }
  
  .scope-colors {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
    width: 100%;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  padding: 0 14px;
  }

  /* neutral color picker inside scope-colors blocks */
  .scope-colors input[type="color"] {
    width: 34px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
  }
  .scope-colors input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  .scope-colors input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
  }
  
  .scope-colors .color-item {
    width: 14px;
    height: 14px;
    background-color: red;
    cursor: pointer;
    /* margin-left: 2px; */
    margin-right: 12px;
    border-radius: 4px;
  }

  .scope-colors .color-item.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  }
  
  section.logs {
    height: 30px;
    background-color: red;
    width: 100px;
    margin: 0;
    padding: 0;
  }
  
  
  .message__alert.active {
    top: -20px;
  }
  .message__alert {
    margin-top: 40px;
    width: 290px;
    height: 60px;
    z-index: 1100;
    transition: .2s;
    background-color: #F2C94C;
    border-radius: 10px;
    top: -120px;
    left: 308px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .message__alert .fa {
    color: #8f772f;
    font-size: 24px;
    position: absolute;
    right: 20px;
    top: 18px;
  }
  
  .message__alert span {
    color: #8f772f;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px;
    display: block;
    max-width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: -30px;
  }
  
  
  .settings-item.admin {
    display: none;
  }
  
  
  .froze {
    
    pointer-events: none;
  }
  
  p.fr {
    color: white;
    position: absolute;
    text-align: center;
  }
  
  .froze img.froze {
    opacity: .1!important;
  }
  
  
  .visualEng {
    max-width: 24px;
      max-height: 23px;
      margin: 0 4px;
      cursor: pointer;
      position: relative;
  }
  
  .visualEng img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }
  
  section.panel .tabs .tabs__item .triangle {
    opacity: 0;
  }
  
  section.panel .tabs .tabs__item.active .triangle {
    opacity: 1;
    width: 16px;
    height: 10px;
    overflow: visible;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    border: 6px solid #7775D1;
    border-top: 10px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }
  
  
  
  .zoom {
    width: 384px;
    height: 86px;
    padding: 16px;
    padding-right: 45px;
    justify-content: flex-start;
    /* margin: 0; */
  }
  
  .zoom .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .zoom .info h4 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .zoom .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .zoom .info img:hover {
    transform: scale(1.2);
  }
  
  .zoom .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  
  
  
  .afk {
    width: 384px;
    height: 88px;
    padding: 16px;
    padding-right: 45px;
    justify-content: flex-start;
    /* margin: 0; */
  }
  
  .afk .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .afk .info h4 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .afk .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .afk .info img:hover {
    transform: scale(1.2);
  }
  
  .afk .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  .fastup {
    width: 384px;
    height: 264px;
    padding: 16px;
    padding-right: 45px;
    justify-content: flex-start;
    /* margin: 0; */
  }
  
  .fastup .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .fastup .info h4 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .fastup .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .fastup .info img:hover {
    transform: scale(1.2);
  }
  
  .fastup .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  
  
  
  
  
  
  
  
  .inputWrap__crosshair {
    width: 384px;
    height: 264px;
    padding: 16px;
    padding-right: 45px;
    justify-content: flex-start;
    overflow: visible;
  }
  
  
  .inputWrap__crosshair .tg-list-item {
    position: absolute;
    right: 16px;
    top: 30px;
  }
  
  .inputWrap__crosshair .info h4 {
    /* width: 100%; */
    text-align: left;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
    /* identical to box height, or 200% */
  
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
  
    color: rgba(240, 237, 239, 0.9);
    margin: 0;
    margin-right: 8px;
  }
  
  .inputWrap__crosshair .info img {
    cursor: pointer;
    transition: .2s;
  }
  
  .inputWrap__crosshair .info img:hover {
    transform: scale(1.2);
  }
  
  .inputWrap__crosshair .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    min-height: 30px;
  }
  
  
  .demoWrap {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
  padding: 14px;
  margin-top: 16px;
  }
  
  .demoWrap .demo {
    min-width: 163px;
    position: relative;
  }
  
  .demoWrap .demo img.forest {
    width: 100%;
  }
  
  .demoWrap .demo img.demoscope {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  
  .inputs span.type {
    text-transform: uppercase;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      font-size: 10px;
      line-height: 20px;
      letter-spacing: 0.012em;
      display: block;
      color: rgba(220, 217, 219, 0.28);
      margin-top: 4px;
  }
  
  
  .pose_wrap {
    
  }
  
  .pose_wrap .pose {
    background: rgba(255, 255, 255, 0.03);
    min-width: 36px;
    width: 36px;
    height: 36px;
    position: relative;
    border-radius: 4px;
    /* right: 10px; */
    /* margin-top: 6px; */
    border-bottom: 2px solid transparent;
    margin-right: -8px;
    /* margin-left: 15px; */
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  .pose_wrap .pose img {
    max-height: 34px;
    opacity: .4;
    height: auto;
    width: 100%;
  }
  
  /* ADMIN VISOR */
  
  .coords {
    display: none;
  }
  
  .prim {
    display: none;
  }
  
  /* canvas {
    display: none;
  } */
  
  .settings_wrapper {
    display: flex;
    justify-content: space-between;
    
    margin-top: 82px;
  }
  
  .settings_wrapper::-webkit-scrollbar {
    width: 6px; /* Set the width of the scrollbar */
    border-radius: 50px;
  }
  
  .settings_wrapper::-webkit-scrollbar-track {
    background: rgb(47, 47, 47); /* Set the background color of the scrollbar track */
  }
  
  .settings_wrapper::-webkit-scrollbar-thumb {
    background-color: rgb(50, 50, 50); /* Set the background color of the scrollbar thumb */
    border-radius: 6px; /* Add rounded corners to the scrollbar thumb */
    border: 3px solid rgb(76, 76, 76); /* Add a border to the scrollbar thumb */
  }
  
  
  
  #mouse-scroll {
    style: block;
    transform: translateX(-61%);
    bottom: 30px;
  }
  #mouse-scroll {
    position: fixed;
    margin: auto;
    left: 53.90%;
    bottom: 22px;
    z-index: 9999;
  }
  #mouse-scroll span{
    display: block;
    width: 5px; 
    height: 5px;
    -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
         transform: rotate(45deg);
         transform: rotate(45deg);
    border-right: 2px solid rgba(255, 255, 255, 0.262); 
    border-bottom: 2px solid rgba(255, 255, 255, 0.233);
    margin: 0 0 3px 5px;
  }
  #mouse-scroll .mouse {
    height: 21px;
    width: 14px;
    border-radius: 10px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    border: 2px solid #ffffff2b;
    top: 170px;
  }
  #mouse-scroll .down-arrow-1 {
    margin-top: 6px;
  }
  #mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {
    -webkit-animation: mouse-scroll 1s infinite; 
      -moz-animation: mouse-scroll 1s infinite;
  }
  #mouse-croll .down-arrow-1 {
     -webkit-animation-delay: .1s; 
     -moz-animation-delay: .1s;
     -webkit-animation-direction: alternate;
  }
  #mouse-scroll .down-arrow-2 {
    -webkit-animation-delay: .2s; 
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
  }
  #mouse-scroll .down-arrow-3 {
     -webkit-animation-delay: .3s;
     -moz-animation-dekay: .3s;
     -webkit-animation-direction: alternate;
  }
  #mouse-scroll .mouse-in {
    height: 5px;
    width: 2px;
    display: block; 
    margin: 5px auto;
    background: #ffffff3d;
    position: relative;
  }
  #mouse-scroll .mouse-in {
   -webkit-animation: animated-mouse 1.2s ease infinite;
    moz-animation: mouse-animated 1.2s ease infinite;
  }
  
  @-webkit-keyframes animated-mouse {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
       opacity: 0;
      -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
      transform: translateY(6px);
    }
  }
  @-webkit-keyframes mouse-scroll {
    0% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    } 
  }
  @keyframes mouse-scroll {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  
  
  
  
  
  
  
  
  /* //////////////////////////////// */
  /* CONFETY CSS 
   */
  
   :root {
    --primary: #7775D1;
    --success: #7775D1;
    --light: transparent;
  }
  
  .progress {
    --background: #222427;
    border-radius: 50%;
    background: var(--light);
    position: relative;
  }
  
  .progress:before {
    --s: 1;
    content: "";
    width: 28px;
    height: 28px;
    left: 50%;
    top: 50%;
    z-index: 1;
    position: absolute;
    background: var(--background);
    border-radius: inherit;
    transform: translate(-50%, -50%) scale(var(--s));
    transition: transform 0.32s ease;
  }
  .progress svg {
    display: block;
    fill: none;
  }
  .progress svg.pie {
    --s: 1;
    width: 32px;
    height: 32px;
    transform: rotate(-90deg) scale(var(--s));
    transition: transform 0.5s ease;
  }
  .progress svg.pie circle {
    stroke-width: 16;
    stroke: var(--primary);
  }
  .progress svg.tick {
    --path: 17.805;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--primary);
    transition: stroke 0.3s ease 0.8s;
  }
  .progress svg.tick polyline {
    stroke-dasharray: 18 18 18;
    stroke-dashoffset: 18;
    transition: stroke-dashoffset 0.4s ease 0.7s;
  }
  .progress.complete {
    background: none;
  }
  .progress.complete:before {
    --s: 0;
  }
  .progress.complete svg.pie {
    --s: 0.08;
    -webkit-animation: tick 0.3s linear forwards 0.4s;
            animation: tick 0.3s linear forwards 0.4s;
  }
  .progress.complete svg.tick {
    stroke: var(--success);
  }
  .progress.complete svg.tick polyline {
    stroke-dashoffset: 36;
  }
  
  @-webkit-keyframes tick {
    100% {
      transform: rotate(-90deg) translate(0, -6px) scale(var(--s));
    }
  }
  
  @keyframes tick {
    100% {
      transform: rotate(-90deg) translate(0, -6px) scale(var(--s));
    }
  }
  .rangeSlider {
    --active: var(--primary);
    --border: var(--light);
    --handle: var(--primary);
    --background: #fff;
    position: absolute;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
  }
  .rangeSlider.rangeSlider__horizontal {
    height: 10px;
    width: 160px;
  }
  .rangeSlider .rangeSlider__fill {
    border-radius: 7px;
    background: var(--active);
    position: absolute;
  }
  .rangeSlider .rangeSlider__fill:before {
    content: "";
    left: -2px;
    top: -2px;
    bottom: -2px;
    right: -2px;
    border: 2px solid var(--background);
    border-radius: 6px;
    position: absolute;
  }
  .rangeSlider .rangeSlider__fill__horizontal {
    height: 100%;
    top: 0;
    left: 0;
  }
  .rangeSlider .rangeSlider__handle {
    border: 2px solid var(--background);
    cursor: grab;
    cursor: -webkit-grab;
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    background: var(--handle);
    border-radius: 50%;
  }
  .rangeSlider .rangeSlider__handle__horizontal {
    top: -7px;
  }
  
  .progress.complete + input + .rangeSlider {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .progress_wrap {
    width: auto!important;
    position: relative!important;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 50px 0;
  }
  
  canvas.confe {
    display: block;
    background-color: transparent;
      position: absolute;
    height: 650px;
    pointer-events: none;
    position: fixed;
    width: 650px;
    /* border: 1px solid red; */
    z-index: 2;
  }
  
  
  .reg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .reg span.noacc {
    position: relative;
    display: block;
    color: #737373;
    font-size: 11px;
  }
  
  .reg span.create {
    position: relative;
    display: block;
    color: #c5c5c5;
    cursor: pointer;
    font-size: 13px;
    transition: .15s;
  }
  
  .reg span.create:hover {
    transform: scale(.96);
  }
  
  .reg span.create:active {
    transform: scale(.92);
  }
  
  
  .form.reg {
    display: none;
  }
  
  /* / */
  /* ////////////////////////////////////// */
  
  .settings_btn {
    padding-left: 10px;
    padding-top: 11px;
  }
  
  
  .settings_btn span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }
  
  .settings_btn button {
    cursor: pointer;
    font-weight: 500;
    margin-top: 4px;
    position: relative;
    overflow: visible;
    width: 341px;
    height: 28px;
    background: #35364F;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    color: rgb(228, 228, 228);
    /* opacity: .4; */
    font-size: 10px;
    text-transform: uppercase;
    transition: .2s;
  }
  
  .settings_btn button:hover {
    transform: translateY(-2px);
  }
  
  /* Стили для кнопок управления драйвером */
  .driver-control-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    height: 90px;
    padding: 12px;
  }
  
  .driver-control-title {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    font-size: 10px;
    line-height: 24px;
    padding: 0 1px;
    display: block;
    width: 341px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.9);
  }
  
  .driver-buttons-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }
  
  .driver-btn {
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: visible;
    width: 165px;
    height: 28px;
    background: #35364F;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(228, 228, 228);
    font-size: 10px;
    text-transform: uppercase;
    transition: .2s;
  }
  
  .driver-btn:hover {
    transform: translateY(-2px);
  }
  
  .wrap_select .title_select_input {
    width: 341px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-top: 10px;
}

.wrap_select .title_select_input.active {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}

.wrap_select .title_select_input.active p {
    opacity: 1;
}

.wrap_select .title_select_input.active .fa {
    opacity: 1;
    transform: rotate(180deg)
}

.wrap_select .title_select_input:hover .fa {
    opacity: 1;
}

.wrap_select .title_select_input:hover p {
    opacity: 1;
}

.wrap_select .title_select_input p {
    margin-left: 8px;
    margin-top: 2px;
    text-align: left;
    display: block;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: rgba(240, 237, 239, 0.5);
}

.wrap_select .title_select_input .fa {
    color: white;
    position: absolute;
    top: 6px;
    opacity: .4;
    right: 15px;
    font-size: 12px;
    transition: .2s;
}

.wrap_select__options_input {
    position: absolute;
    top: 71px;
    width: 341px;
    background: #26282C;
    min-height: 50px;
    z-index: 200;
    border-top: none;
    border-radius: 0 0 4px 4px;
    display: none;
}

.wrap_select__options_input.active {
    display: block;
    overflow-y: scroll;
    height: auto;
}

.wrap_select__options_input .select_option_input {
    width: 100%;
    cursor: pointer;
    transition: .2s;
    height: 23px;
}

.wrap_select__options_input .select_option_input:hover {
    background-color: #7775D1;
    color: white;
}

.wrap_select__options_input .select_option_input:hover span {
    opacity: 1;
}

.wrap_select__options_input .select_option_input span {
    color: white;
    font-family: 'Montserrat';
    margin-left: 11px;
    margin-top: 5px;
    font-weight: bold;
    display: block;
    opacity: .4;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-align: left;
}
  

.kmbox_modale {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    backdrop-filter: blur(4px);
    background: #00000047;
}

.kmbox_modale.active {
    display: block;
}

.kmbox_modale .mainModal_kmbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    min-height: 300px;
    background: rgba(34, 36, 39, 0.98);
    border-radius: 8px;
    padding: 24px;
    display: block;
}

.kmbox_modale .close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.kmbox_modale .close:hover {
    opacity: 1;
}

.kmbox_modale .right-panele {
    margin-bottom: 24px;
}

.kmbox_modale .description span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
}

.kmbox_modale .description p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(220, 217, 219, 0.48);
}

.kmbox_modale .uvaga {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.kmbox_modale .uvaga img {
    margin-right: 12px;
}

.kmbox_modale .uvaga p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.64);
    margin: 0;
}

.kmbox_modale .input-kmbox {
    position: relative;
    margin-bottom: 16px;
}

.kmbox_modale .input-kmbox input {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.02);
    border: none;
    border-radius: 4px;
    padding: 0 40px 0 16px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.9);
}

.kmbox_modale .input-kmbox input::placeholder {
    color: rgba(240, 237, 239, 0.24);
}

.kmbox_modale .input-kmbox img {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.24;
}

.kmbox_modale .input-kmbox i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.24;
    color: rgba(240, 237, 239, 0.24) !important;
    font-size: 16px !important;
}

.kmbox_modale .save_kmbox {
    width: 100%;
    height: 40px;
    background: #7775D1;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.9);
    cursor: pointer;
    transition: 0.3s;
}

.kmbox_modale .save_kmbox:hover {
  background: #DCD9DB;
  color: #7775D1;
}

.kmbox_modale .done_kmbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none;
}

.kmbox_modale .done_kmbox.active {
    display: block;
}

.kmbox_modale #button.ready {
    display: none;
}

.kmbox_modale .done_kmbox .progress_wrap {
    margin-bottom: 16px;
}

.kmbox_modale .done_kmbox .code_key-text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: #7775D1;
    margin: 0;
}

.kmbox_modale .done_kmbox .progress {
    position: relative;
    width: 32px;
    height: 32px;
    transform: rotate(-90deg);
    margin: 0 auto;
}

.kmbox_modale .done_kmbox .progress circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #7775D1;
}

/* Модальное окно установки драйвера Razer */
.modal-wrap-razer-driver {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2010;
    display: none;
    backdrop-filter: blur(4px);
    background: #00000047;
}

.modal-wrap-razer-driver.active {
    display: block;
}

.modal-razer-driver {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    min-height: 250px;
    background: rgba(34, 36, 39, 0.98);
    border-radius: 8px;
    padding: 24px;
    display: block;
}

.modal-razer-driver .close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.modal-razer-driver .close:hover {
    opacity: 1;
}

.modal-razer-driver .right-panele {
    margin-bottom: 16px;
}

.modal-razer-driver .description span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
}

.modal-razer-driver .description p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(220, 217, 219, 0.48);
}

.modal-razer-driver .uvaga {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.modal-razer-driver .uvaga i {
    margin-right: 12px;
    font-size: 16px;
    flex-shrink: 0;
}

.modal-razer-driver .uvaga p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.64);
    margin: 0;
}

.modal-razer-driver .save_kmbox {
    width: 100%;
    height: 40px;
    background: #7775D1;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.9);
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.012em;
}

.modal-razer-driver .save_kmbox:hover {
    background: #DCD9DB;
    color: #7775D1;
}

.install-razer-driver {
    background: #7775D1;
    color: rgba(240, 237, 239, 0.9);
}

.install-razer-driver:hover {
    background: #DCD9DB;
    color: #7775D1;
}

/* Close icon unified via .modal-razer-driver .close and .modal-razer-installed .close */

/* Модальное окно после установки */
.modal-wrap-razer-installed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2010;
    display: none;
    backdrop-filter: blur(4px);
    background: #00000047;
}

.modal-wrap-razer-installed.active {
    display: block;
}

.modal-razer-installed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    min-height: auto;
    background: rgba(34, 36, 39, 0.98);
    border-radius: 8px;
    padding: 24px;
    display: block;
}

.modal-razer-installed .close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}

.modal-razer-installed .close:hover {
    opacity: 1;
}

.modal-razer-installed .right-panele {
    margin-bottom: 24px;
}

.modal-razer-installed .description span {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    color: #DCD9DB;
}

.modal-razer-installed .description p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.012em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(220, 217, 219, 0.48);
}

.modal-razer-installed .uvaga {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.modal-razer-installed .uvaga i {
    margin-right: 12px;
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 3px;
}

.modal-razer-installed .uvaga p {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.64);
    margin: 0;
}

.modal-razer-installed .save_kmbox {
    width: 100%;
    height: 40px;
    background: #7775D1;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: rgba(240, 237, 239, 0.9);
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.012em;
}

.modal-razer-installed .save_kmbox:hover {
    background: #DCD9DB;
    color: #7775D1;
}

/* Error state for preloader */
.preloader_overlay .status { display: none; color: #9aa0a6; font-size: 13px; margin-top: 12px; text-align: center; position: absolute; left: 54%; top: 58%; transform: translate(-50%, -50%); }
.preloader_overlay.active .status { display: block; color: #9aa0a6; }
.preloader_overlay.error { background-color: rgba(34,36,38,0.9); }
.preloader_overlay.error .letter-x { display: none; }
.preloader_overlay.error .status { display: block; color: #ff5c5c; }
  







.driver-status-banner {
  display:flex;align-items:center;gap:10px;margin-top:12px;
  padding:10px 12px;border-radius:8px;
  width:364px; /* align with section width */
  background:rgb(255 255 255 / 1%);
  border:1px solid rgba(255,255,255,.06);
  color:#DCD9DB;
}
.driver-status-banner .status-dot {min-width:5px;min-height:5px;border-radius:50%;
  background:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,.15);
}
.driver-status-banner.active .status-dot{background:#16c782;box-shadow:0 0 0 2px rgba(22,199,130,.2)}
.driver-status-banner .status-content{display:flex;flex-direction:column;line-height:1.2}
.driver-status-banner .status-text{    font-family: 'Montserrat';
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2px;}
.driver-status-banner .status-hint{font-size: 11px;
  opacity: .4;
  margin-top: 2px;}

/* Модальное окно выбора драйвера */
.driver_selection_overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.driver_selection_overlay.active {
  display: flex;
}

.driver_selection_modal {
  width: 420px;
  min-height: 320px;
  position: relative;
  background: rgba(34, 36, 39, 0.98);
  border: 2px solid rgba(43, 48, 64, 0.24);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.driver_selection_header {
  margin-bottom: 20px;
}

.driver_selection_header .right-panel {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.driver_selection_header .right-panel .description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.driver_selection_header .right-panel .description span {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.48);
  margin: 0;
}

.driver_selection_header .right-panel .description p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  margin: 4px 0 0 0;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #DCD9DB;
}

.driver_selection_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.driver_category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category_title {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.6);
  margin-bottom: 4px;
}

.driver_options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.driver_option {
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.012em;
  color: rgba(220, 217, 219, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.driver_option:hover {
  background: rgba(119, 117, 209, 0.15);
  border-color: rgba(119, 117, 209, 0.3);
  color: #DCD9DB;
  transform: translateX(2px);
}

.driver_option.selected {
  background: rgba(119, 117, 209, 0.25);
  border-color: #7775D1;
  color: #FFFFFF;
}

/* Подтверждение переназначения клавиши — brand1, в стиле .key_modal */
.key-bind-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.key-bind-confirm-modal.is-open {
  display: flex;
}

.key-bind-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(6px);
}

.key-bind-confirm-modal__dialog {
  position: relative;
  z-index: 1;
  width: 388px;
  max-width: calc(100vw - 48px);
  padding: 24px;
  text-align: left;
  box-sizing: border-box;
  background: rgba(34, 36, 39, 0.98);
  border: 2px solid rgba(43, 48, 64, 0.24);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.key-bind-confirm-modal.is-open .key-bind-confirm-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}

.key-bind-confirm-modal__close {
  position: absolute;
  right: 24px;
  top: 17px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s ease;
}

.key-bind-confirm-modal__close img {
  width: 18px;
  display: block;
  filter: invert(100%) sepia(92%) saturate(2%) hue-rotate(258deg) brightness(107%) contrast(100%);
  opacity: 0.5;
}

.key-bind-confirm-modal__close:hover {
  transform: scale(0.85);
}

.key-bind-confirm-modal__close:hover img {
  opacity: 0.85;
}

.key-bind-confirm-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 68px;
  padding: 0 32px 0 0;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.key-bind-confirm-modal__head::after {
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.03);
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.key-bind-confirm-modal__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.key-bind-confirm-modal__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.48);
}

.key-bind-confirm-modal__title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #DCD9DB;
}

.key-bind-confirm-modal__assign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.key-bind-confirm-modal__key-pill {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  box-sizing: border-box;
}

.key-bind-confirm-modal__key-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: #DCD9DB;
  white-space: nowrap;
}

.key-bind-confirm-modal__arrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(220, 217, 219, 0.35);
  flex-shrink: 0;
}

.key-bind-confirm-modal__action-name {
  margin: 0;
  flex: 1 1 120px;
  min-width: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.72);
  word-break: break-word;
}

.key-bind-confirm-modal__yes {
  width: 100%;
  margin-top: 0;
  margin-bottom: 12px;
}

.key-bind-confirm-modal__no {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: rgba(220, 217, 219, 0.48);
  transition: color 0.15s ease, background 0.15s ease;
}

.key-bind-confirm-modal__no:hover {
  color: rgba(220, 217, 219, 0.85);
  background: rgba(255, 255, 255, 0.06);
}