/*Общие стили*/
:root {
  --color-bg: rgba(252, 251, 255, 1);
  --color-main-text: rgba(36, 36, 36, 1);
  --color-second-text: rgba(78, 78, 78, 1);
  --color-last-text: rgb(164, 164, 164);
  --color-lastest-text: rgb(242, 242, 242);
  --color-main: rgba(141,82,232,1);
  --color-second: rgb(236, 231, 242);
  --color-secondest: rgba(248, 245, 255, 1);
  --color-no-alert: rgba(151, 219, 112, 1);
  --color-alert: rgba(219, 112, 112, 1);
  --font-main: 'Montserrat', monospace;
  --font-weigth-500: 500;
  --font-weigth-400: 400;
  --font-weigth-300: 300;
}
.dark_style{
  --color-bg: rgba(33, 31, 35, 1);
  --color-main-text: rgba(240, 240, 240, 1);
  --color-second-text: rgba(143, 143, 143, 1);
  --color-last-text: rgb(72, 72, 72);
  --color-lastest-text: rgb(46, 46, 46);
  --color-main: rgba(141,82,232,1);
  --color-second: rgba(41, 38, 46, 1);
  --color-secondest: rgba(37, 34, 39, 1);
  --color-alert: rgba(219, 112, 112, 1);
  --color-no-alert: rgba(151, 219, 112, 1);
  --font-main: 'Montserrat', monospace;
  --font-weigth-500: 400;
  --font-weigth-400: 350;
  --font-weigth-300: 200;
}
* { /*** Убираем синий фон при нажатии на кнопки в мобильной версии ***/
  -webkit-tap-highlight-color: transparent;
}
/*** Works on common browsers ***/
::selection {
    background-color: var(--color-main);
    color: #fff;
    border-radius: 4px;
}
/*** Mozilla based browsers ***/
::-moz-selection {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
/***For Other Browsers ***/
::-o-selection {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
::-ms-selection {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
/*** For Webkit ***/
::-webkit-selection {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
::spelling-error{
  text-decoration: wavy var(--color-alert) underline;
}
.errorStyle{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  width: 100%;
  height: 40px;
  background-color: var(--color-alert);
  color: var(--color-bg);
  text-align: center;
  font-weight: normal;
}
.content{
  position: relative;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden !important;
}
.hide{
  display: none;
}
.show{
  display: block;
}
#loading{
  position: absolute;
  top: 50%;
  left: 48.5%;
  transform: translate(-50%,-50%);
  animation: rot 1s ease 0s infinite;
}
.errorSend{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--color-alert);
  top: 0;
  min-height: 80px;
  z-index: 0;
}
.errorSend_text{
  color: var(--color-bg);
  font-size: 18px;
  padding: 16px;
  text-align: center;
}
.notification{
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 6px;
  left: 50%;
  transform: translate(-50%, 0);
  box-sizing: border-box;
  border-radius: 10px;
  top: 24px;
  padding: 12px;
  background-color: var(--color-bg);
  box-shadow: 0px 0px 4px var(--color-last-text);
}
.not_icon{
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rot 1s ease 0s infinite;
}
.not_text{
  display: flex;
  align-items: center;
  font-size: 14px;
}



body{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-main-text);
  font-family: var(--font-main);
  box-sizing: border-box;
  overflow: hidden;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}




.theme_contentainer{
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: var(--color-bg);
  border: 3px solid var(--color-second);
  border-radius: 30px;
  min-height: 400px;
  height: auto;
}
.test_text_content{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 25px 25px;
  width: 65%;
}
.theme_title{
  color: var(--color-main-text);
  font-weight: var(--font-weigth-500);
  font-size: 22px;
  margin-bottom: 24px;
}
.theme_description{
  color: var(--color-main-text);
  font-weight: var(--font-weigth-300);
  font-size: 17px;
  margin-bottom: 20px;
  min-height: auto;
}
.test_attribute{
  width: 35%;
  background-color: var(--color-secondest);
  border-radius: 0 30px 30px 0;
}
.attrib_wrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
}
.attribute{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.attrib_child{
  width: 60%;
  flex-direction: column;
}
.attrib_title{
  width: 60%;
  font-size: 14px;
}
.attrib_values{
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 10px 0 0 0;
}
.attrib_img{
  position: relative;
  min-width: 31px;
  width: 31px;
  height: 31px;
  overflow: hidden;
}
.attrib_svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.anim_rotate_1{
  animation: rot 4s ease 0s infinite;
  transform-origin: 50 50;
  top: 1%;
  left: 0%;
}
@keyframes rot {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.animate_tr{
  animation: tr 3s ease 0s infinite alternate-reverse ;
  top: 50%;
  left: 50%;
}
@keyframes tr {
  0%{
    transform: translate(0%,0%);
  }
  100%{
    transform: translate(-300%,0%);
  }
}
.group_svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%,-50%);
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: auto;
  overflow: hidden;
}
.attrib_text{
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: var(--font-weigth-500);
  margin-left: 8px;
}
.attribute_line{
  height: 1px;
  width: 60%;
  background-color: var(--color-last-text);
  align-self: center;
}
.ask_type{
  color: var(--color-second-text);
  font-size: 14px;
  font-weight: normal;
}
.ch{
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--color-main);
  font-size: 14px;
  font-weight: normal;
  margin-right: 0px;
  padding: 10px 10px;;
  background-color: var(--color-second);
  border-radius: 18px;
}
.bottom_space{
  margin-bottom: 10px;
  padding-top: 0px;
}











.wrapper_ask_main{
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  overflow-y: hidden;
}
.wrapper_ask{
  position: relative;
  width: 100dvw;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.wrapper_ask::-webkit-scrollbar{width: 0px;}
.wrapper_ask::-webkit-scrollbar-thumb{
  background: var(--color-last-text);
  border-radius: 15px;
}

.wrapper_ask::-webkit-scrollbar-track{
  background: var(--color-bg);
  width: 0px;
}
.ask_wrap{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: auto;;
  border-radius: 20px;
  padding: 130px 20px 100px 20px;
  width: 50%;
}
.ask_header{
  display: flex;
  flex-direction: row;
}
.ask_number{
  color: var(--color-main);
  padding-left: 20px;
  padding-bottom: 20px;
}
.ask_length{
  color: var(--color-last-text);
  padding-left: 10px;
}
.ask_contentainer{
  background-color: var(--color-bg);
  box-shadow: 0px 0px 4px var(--color-last-text);
  border-radius: 20px;
  padding: 20px 25px;
  box-sizing: border-box;
}
.ask_title{
  color: var(--color-main-text);
  font-weight: var(--font-weigth-500);
  font-size: 22px;
  margin-bottom: 30px;
}
.ask_description{
  color: var(--color-last-text);
  font-weight: var(--font-weigth-400);
  font-size: 16px;
  margin-bottom: 20px
}
.wrapper_ask_block{
  position: relative;
  width: 100%;
  height: 100%;
}
.navigation{
  width: 52%;
  height: 6px;
  background-color: var(--color-bg);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0px);
}
.ask_btn_wr{
  position: absolute;
  bottom: 30px;
  right: 30px;
}
.ask_btn_wr_start{
  margin-top: 16px;
}
.ask_bottom{
  display: inline-block;
  padding: 17px 18px;
  background-color: var(--color-bg);
  color: var(--color-main);
  border: 1px solid var(--color-main);
  font-size: 16px;
  font-weight: normal;
  width: auto;
  border-radius: 20px;

  &:hover {
    background-color: var(--color-main);
    color: var(--color-bg);
    cursor: pointer;
  }
}
.no_main{
  display: inline-block;
  margin-left: 6px;
  background-color: var(--color-bg);
  color: var(--color-main);
  border: none;

  &:hover {
    background-color: var(--color-second);
    color: var(--color-main);
    cursor: pointer;
  }
}
.variant{
  display: flex;
  flex-direction: row;
  margin: 10px 0px;
  border-radius: 10px;
  padding: 10px 10px;

  &:hover{
    background-color: var(--color-second);
    cursor: pointer;
  }
}
.yesno_wrap{
  display: flex;
  flex-direction: row;
}
.yesno_wr{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border-radius: 10px;
  background-color: var(--color-bg);
  color: var(--color-main-text);
  width: 50%;
  margin: 10px;
  border: 2px solid var(--color-second);

  &:hover {
    background-color: var(--color-second);
    color: var(--color-main);
    cursor: pointer;
  }
  &:hover .yesno .yesno_img .yesno_svg path{
    stroke: var(--color-main);
  }
}
.yesno{
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.yesno_img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.yesno_text{
  display: flex;
  justify-content: center;
  align-items: center;
}
.yesno_wr.checked{
  background-color: var(--color-second);
  color: var(--color-main);
  font-weight: normal;
}
.yesno_wr.checked .yesno .yesno_img .yesno_svg path{
  stroke: var(--color-main);
}
.variant.checked{
  background-color: var(--color-second);
}
.variant_radio{
  height: 14px;
  width: 14px;
  margin-right: 12px;
  border-radius: 20px;
  background-color: var(--color-bg);
  border: 3px solid var(--color-last-text);
}
.variant_radio.check{
  background-color: var(--color-main);
  border: 3px solid var(--color-bg);
}
.variant_text{
  color: var(--color-second-text);
  font-weight: var(--font-weigth-400);
  font-size: 18px;
  width: 90%;
}
.variant_key{
  display: flex;
  flex-direction: row;
  margin: 10px 0px;
  padding: 2px 10px 2px 0;
}
.variant_text_key{
  display: flex;
  align-self: center;
  width: 25%;
  padding-right: 15px;
}

.variant_text_value_wrap{
  position: relative;
  width: 60%;
}
.variant_text_value_wr{
  display: flex;
  flex-direction: row;
  align-self: center;
  padding: 12px 12px 12px 12px;
  border-radius: 10px;
  background-color: var(--color-lastest-text);

  &:hover{
    background-color: var(--color-second);
    cursor: pointer;
  }
  &:hover .variant_text_switcher .svg_arrow path{
    stroke: var(--color-main);
  }
}
.variant_text_value_wr.checked{
  background-color: var(--color-second);
}
.svg_arrow.checked path{
  stroke: var(--color-main);
} 
.variant_text_value{
  width: 98%;
  height: 20px;
  overflow-y: hidden;
}
.variant_text_value_swap{
  white-space: nowrap; /* Текст не переносится */
  overflow: hidden; /* Обрезаем всё за пределами блока */
  text-overflow: ellipsis; /* Добавляем многоточие */
  transform: translateY(0%);
}
.variant_text_switcher{
  display: flex;
  justify-content: center;
  align-items: center;
  right: 10px;
  top: 10px;
  height: 20px;
  width: 20px;
  transform: rotate(0deg);
}
.select_list{
  position: absolute;
  max-height: 200px;
  height: 0;
  background-color: var(--color-bg);
  box-shadow: 0px 0px 6px var(--color-last-text);
  width: 100%;
  border-radius: 10px;
  transform: translateY(-105%);
  overflow-y: scroll;
}
.select_list::-webkit-scrollbar{width: 0px;}
.select_list::-webkit-scrollbar-thumb{
  background: var(--color-last-text);
  border-radius: 15px;
}
.select_list::-webkit-scrollbar-track{
  background: var(--color-main);
  width: 8px;
  display: none;
}
.select_list::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}
.select_list::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}
.sel{
  color: var(--color-main-text);
  padding: 10px;

  &:hover{
    background-color: var(--color-second);
    cursor: pointer;
  }
}
.sel.checked{
  background-color: var(--color-second);
}

.variant_checkbox{
  height: 14px;
  width: 14px;
  margin-right: 12px;
  border-radius: 4px;
  background-color: var(--color-bg);
  border: 3px solid var(--color-last-text);
}
.variant_checkbox.check{
  background-color: var(--color-main);
  border: 3px solid var(--color-bg);
}
.textarea_section{
  position: relative;
}
.weight_text{
  position: absolute;
  right: 0;
  top: -20px;
  color: var(--color-main);
  font-size: 12px;
  margin: 0 10px 10px 10px;
}
.textarea_inp{
  box-sizing: border-box;
    width: 100%;
    min-height: 280px;
    overflow-y: scroll;
    border-radius: 10px;
    background: var(--color-second);
    border: 1px solid var(--color-second);
    color: var(--color-main) !important;
    font-size: 20px !important;
    font-family: var(--font-main) !important;
    padding: 10px;
    resize: none;
    caret-color: var(--color-main);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;


  &::-webkit-resizer {
    display: none;
    }

  &:focus{
    outline: 2px solid var(--color-main); 
  }
  &::placeholder{
    color: var(--color-main) !important;
    font-size: 18px !important;
  }
}

.textarea_inp::-webkit-scrollbar{width: 3px;}
.textarea_inp::-webkit-scrollbar-thumb{
  background: var(--color-main);
  border-radius: 15px;
}
.textarea_inp::-webkit-scrollbar-track{
  background: var(--color-second);
  width: 8px;
  border-radius: 100px;
}
.textarea_inp::-webkit-scrollbar-track-piece:end {
  background: rgba(0, 0, 255, 0);
  margin-bottom: 6px;
}
.textarea_inp::-webkit-scrollbar-track-piece:start {
  background: rgba(0, 0, 255, 0);
  margin-top: 6px;
}
.animate_slide_front {
  animation-name: slideHide;
  animation-timing-function: ease-in-out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;  /* Это сохраняет конечное состояние анимации */
}
@keyframes slideHide {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.animate_slide_back {
  animation-name: slideShow;
  animation-timing-function: ease-in-out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;  /* Это сохраняет конечное состояние анимации */
}
@keyframes slideShow {
  0% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(70%);
  }
  100% {
    transform: translateX(100%);
  }
}

.wrapper_finish_test{
  width: 100dvw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.finish_img{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.finish_text{
  text-align: center;
  color: var(--color-main);
  font-size: 24px;
  padding: 20px;
}
.finish_btn{
  padding: 10px;
  color: var(--color-main);
  border-radius: 10px;
  text-align: center;

  &:hover{
    background-color: var(--color-second);
    color: var(--color-second-text);
    cursor: pointer;
  }
}
.success{
  opacity: 0;
}
















.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: var(--color-bg);
}
.logo_user_wrap{
  position: absolute;
  top: 40px;
  left: 40px;
  display: flex;
  flex-direction: row;
}
.logo_sg{
  height: 30px;
}
.logo_sg svg{
  height: 30px;
  width: 150px;
}
.user_container{
  display: flex;
  align-items: center;
  margin-left: 22px;
  padding: 2px 8px 2px 8px;
  height: 30px;
  font-size: 20px;
  color: var(--color-main);
  border-radius: 6px;
}
.icon_theme{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background-color: var(--color-bg);

  &:hover{
    background-color: var(--color-lastest-text);
  }
}
.icon_copyright{
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  overflow: hidden;

  &:hover .icon_copyright_svg path, circle{
    stroke: var(--color-main-text);
  }
}

.nav_btn{
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom: 30px;
  left: 30px;
  border-radius: 100px;
}

@keyframes moveAndChangeColor {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(150%);
  }
}
.nav_btn_box_up{
  background-color: var(--color-bg);
  border-radius: 100px;


  & :hover{
    background-color: var(--color-lastest-text);
    cursor: pointer;
  }
}

.nav_btn_up{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 100px;

  & :hover{
    background-color: rgba(250, 250, 250, 0);
    cursor: pointer;
  }
}
.nav_btn_down{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  margin: 4px;
  border-radius: 100px;

  & :hover{
    background-color: rgba(250, 250, 250, 0);
    cursor: pointer;
  }
}
.progress_bar{
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: var(--color-main);

  &:hover {
    background-color: var(--color-main);
    cursor: default;
  }
}
.progress_indicator{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 30px;
  right: 30px;
  height: 30px;
  width: auto;
  padding: 10px;
  border-radius: 10px;
  color: var(--color-main);
  font-size: 16px;
  background-color: var(--color-second);

  &:hover {
    background-color: var(--color-second);
    cursor: default;
  }
}




@media (min-width: 1200px) and (max-width: 1500px) {
  .ask_wrap{
    width: 60%;
  }
  .navigation{
    width: 62%;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .ask_wrap{
    width: 70%;
  }
  .navigation{
    width: 72%;
  }
}
@media (min-width: 760px) and (max-width: 900px) {
  .ask_wrap{
    width: 80%;
  }
  .navigation{
    width: 86%;
  }
}
@media (min-width: 300px) and (max-width: 760px) {
  .ask_wrap{
    width: 95%;
    padding: 86px 20px 100px 20px;
  }
  .theme_contentainer{
    flex-direction: column;
  }
  .test_text_content{
    width: 80%;
  }
  .attrib_wrap{
    flex-direction: row;
  }
  .test_attribute{
    width: 100%;
    border-radius: 0 0 20px 20px;
  }
  .attrib_wrap{
    width: 100%;
    justify-content: space-evenly;
  }
  .attribute{
    width: 50%;
  }
  .attribute_line{
    height: 60px;
    width: 1px;
  }
  .attrib_child{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ch{
    padding: 6px;
  }
  .user_main{
    display: none;
  }
  .yesno_wrap{
    flex-direction: column;
  }
  .yesno_wr{
    width: 95%;
  }
  .logo_user_wrap{
    left: 18px;
    top: 19px;
  }
  .progress_indicator{
    right: 10px;
    top: 10px;
  }
  .icon_copyright{
    position: fixed !important;
    left: 24px;
    bottom: 24px;
  }
  .navigation{
    width: 96%;
    left: 47%;
  }
  .nav_btn{
    position: absolute !important;
    left: 24px;
    bottom: 24px;
  }
  .ask_btn_wr{
    position: absolute !important; 
    bottom: 24px;
    right: 0px;
  }
  .header{
    height: 68px;
  }
  #loading{
    top: 50%;
    left: 45%;
  }
  .variant_radio{
    border: 2px solid var(--color-last-text);
  }
  .variant_radio.check{
    border: 2px solid var(--color-bg);
  }
  .variant_checkbox{
    border: 2px solid var(--color-last-text);
  }
  .variant_checkbox.check{
    border: 2px solid var(--color-bg);
  }
  .ask_title{
    font-size: 19px;
  }
  .variant_text{
    font-size: 16px;
  }
  .textarea_inp{
    font-size: 16px !important;
  }
}