h1{
  margin: 18px 0px;
}
p{
  margin: 2px 0px;
}
body{
    background-color: var(--color-bg);
    box-sizing: border-box;
    overflow: hidden;
    
}
.auth_page{
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    display: flex;
  justify-content: center;
  align-items: center;
}
.container_wrap{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    background-color: var(--color-lastest-text);
    border-radius: 40px;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container_auth_2{
    position: relative;
    display: inline-block;
    margin: 0;
    background-color: var(--color-bg);
    border: 3px solid var(--color-lastest-text);
    border-radius: 40px;
    box-sizing: border-box;
    padding: 16px;
    z-index: 3;
    height: 320px;
    width: 400px;
    box-sizing: border-box;
    transform-origin: center center;
}
.container_auth_1{
    display: inline-block;
    padding: 12px 18px;
    width: 400px;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
}
#fullscreen{
  position: absolute;
  padding: 0 30px;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-color: var(--color-bg);
  border: 3px solid var(--color-laste-text);
  z-index: 3;
  box-sizing: border-box;
  transform: translate(-50%,-50%);
  opacity: 0;
  display: none;
  border-radius: 40px;
}

.text_wr{
  position: absolute;
  top: 16px;
  padding: 14px 14px 0 14px;
  height: 100px;
  width: calc(100% - 32px);
  z-index: 2;
  box-sizing: border-box;
  transform: translateY(-150px);
}
.text_wr h2{
  margin-bottom: 12px;
  margin-top: 0;
}
.text_wr p{
  font-size: 14px;
  font-weight: 100;
}

.all_inputs_auth{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;  
  box-sizing: border-box;
  z-index: 5 !important;
}
.logo_wr{
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
    width: 100%;
    padding: 16px 6px 44px 6px;
    box-sizing: border-box;
}
.icon_auth{
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.icon_auth_wr{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.icon_auth_svg{
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_auth{
    position: relative;
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    border-radius: 18px;
    border: 2px solid var(--color-lastest-text);
    background-color: var(--color-lastest-text);
    color: var(--color-main-text);
    outline: none;
    outline-offset: 0;
    margin: 0 !important;
    padding-left: 18px;
    font-family: var(--font-main);
    font-weight: normal;
    font-size: 18px;
    caret-color: var(--color-main-text);
  
    &:hover{
      border: 2px solid var(--color-second);
    }
    &:hover.error{
      border: 2px solid var(--color-alert-second);
    }
    &:hover.success{
      border: 2px solid var(--color-success-second);
    }
    &:focus{
        border: 2px solid var(--color-second);
    }
    &:focus.error{
      border: 2px solid var(--color-alert-second);
    }
    &:focus.success{
      border: 2px solid var(--color-success-second);
    }
  }
  .input_auth.settings{
    margin: 0;
    padding-right: 40px;
    background-color: var(--color-bg);
  }
  .inp_icon{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inp_auth_prod_cr{
    margin-bottom: 14px;
  }
  .inp_wr{
    position: relative;
    box-sizing: border-box;
    width: 100%;
  }
  .inp_wr.settings{
    padding: 0;
  }
  .inp_wr_padd{
    padding: 0px;
  }
  .inp_wr.has-value .lbl_auth {
    scale: 0.8;
    translate: -3px -1.8em; /* Слежение стилей можно настроить */
    background: var(--color-lastest-text);
    z-index: 1;
  }
  .inp_wr.has-value-text .lbl_auth {
    color: var(--color-main);
  }
  .inp_wr.has-value-text .lbl_auth.error{
    color: var(--color-alert);
  }
  .inp_wr.has-value-text .lbl_auth.success{
    color: var(--color-success);
  }
  .inp_wr.has-value-text .inp_line {
    background-color: var(--color-main);
  }
  .inp_wr.has-value-text .inp_line.error {
    background-color: var(--color-alert);
  }
  .inp_wr.has-value-text .inp_line.success {
    background-color: var(--color-success);
  }
  .lbl_auth.error{
    color: var(--color-alert);
  }
  .lbl_auth.success{
    color: var(--color-success);
  }
  .lbl_auth{
    position: absolute;
    top: 1.3em;
    left: 18px;
    font-size: 0.80em;
    color: var(--color-second-text);
    transition-duration: 0.2s;
    padding: 0 6px;
    border-radius: 10px;
    z-index: 3;
    transform-origin: 0 0;
    white-space: nowrap; /* Текст не переносится */
    overflow: hidden; /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis; /* Добавляем многоточие */

  }
  .lbl_auth:hover + .input_auth{
    border: 2px solid var(--color-second) !important;
  }

  .inp_line{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -1px;
    width: calc(100% - 40px);
    height: 0px;
    padding: 0 2px;
    background-color: var(--color-last-text);
  }
  .right_flag{
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: 100%;
    margin-right: 20px;
  }
  .right_flag_wr{
    position: relative;
    width: auto;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 26px;
  }
  .icon_inp_1{
    position: absolute;
    height: auto;
    cursor: pointer;
    &:hover path{
      stroke: var(--color-main-text);
    }
  }
  .icon_inp_2{
    display: none;
    position: absolute;
    cursor: pointer;
    &:hover path{
      stroke: var(--color-main-text);
    }
  }
  .submit{
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: inline-block;
    padding: 16px;
    border-radius: 28px;
    width: auto;
    border: 2px solid var(--color-main);
    color: var(--color-main);
    cursor: pointer;
    transform: translateY(200%);
    font-weight: 500;
    transition: 0.2s ease-in-out;

    &:hover {
        border: 2px solid var(--color-main);
        background-color: var(--color-main);
        color: var(--color-bg);
    }
  }
  .submit.prod{
    bottom: 10px;
    margin: 20px 10px;
    background-color: var(--color-bg);
    z-index: 999999999999999999;

    &:hover {
      border: 2px solid var(--color-main);
      background-color: var(--color-main);
      color: var(--color-bg);
  }
  }
  .submit.prod.remove_rest_btn{
    position: absolute;
    left: 150px;
    border: 1px solid var(--color-lastest-text);
    color: var(--color-second-text);
    background-color: var(--color-bg);

    &:hover {
      border: 1px solid var(--color-lastest-text);
      background-color: var(--color-bg);
      color: var(--color-alert);
      background-color: var(--color-alert-second);
  }
  }
  
  
  .position_flag{
    position: relative;
    height: 0;
    box-sizing: border-box;
    z-index: -1;
  }
  .inp_pass{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .container_swich{
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    
}
  .swich_aut{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 20px;
    width: 100%;
  }
  .swich_aut_btn{
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 26px;
    margin: 4px 0px;
    border-radius: 22px;
    cursor: pointer;
    z-index: 1;

    &:hover{
      background-color: var(--color-bg);
    }
  }
  .swich_aut_btn.checked{
    background-color: var(--color-bg);
  }
 
  .pin_wr{
    position: absolute;
    padding: 0 14px;
    bottom: 0px;
    height: auto;
    width: calc(100% - 32px);
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .inp_pin{
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 30px;
    height: 100px;
    width: 22%;
    border-radius: 20px;
    border: 2px solid var(--color-bg);
    background-color: var(--color-second);
    color: var(--color-main);
    outline-color: var(--color-bg);
    outline: none;
    padding-left: 24px;
    font-family: var(--font-main);
    font-weight: normal;
    font-size: 36px;
    caret-color: var(--color-main);
    
  
    &:hover{
      border: 3px solid var(--color-second);
    }
    &:focus{
        border: 3px solid var(--color-second);
    }
  }

  .reboot_pass{
    position: absolute;
    top: 70px;
    box-sizing: border-box;    
    font-size: 12px;
    color: var(--color-second-text);
    padding: 0 20px;
    border-radius: 14px;
    cursor: pointer;

    &:hover{
      color: var(--color-main);
    }
  }
  .text_mail{
    position: absolute;
    top: 62px;
    box-sizing: border-box;    
    font-size: 13px;
    color: var(--color-second-text);
    padding: 6px;
    border-radius: 10px;
  }
  .check_box_policy{
    width: 17px;
    height: 11px;
    background-color: var(--color-bg);
    border-radius: 10px;
    border: 4px solid var(--color-bg);
    outline: 3px solid var(--color-last-text);
    cursor: pointer;
    &:hover{
      outline: 3px solid var(--color-second);
    }
  }
  .check_box_policy.checked{
    background-color: var(--color-main);
  }
  .policy_wr{
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0px 6px;
    z-index: -1;
  }
  .policy{
    width: auto;
    font-size: 11px;
    color: var(--color-second-text);
    padding-left: 10px;
    font-weight: 100;
  }
.text_link_policy{
  color: var(--color-second-text); 
  text-decoration: underline;
  cursor: pointer;
  &:hover{
    color: var(--color-main);
  }
}



.copyright_flag{
  position: relative;
  width: 100%;
}
.copyright_wrapper{
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  bottom: -50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 10px 0px 24px;
}
.text_copyright_decor{
  font-size: 10px;
  color: var(--color-second-text);
  font-family: var(--font-main);
  font-weight: lighter;
}
.ivor_logo{
  display: flex;
  justify-content: end;

  &:hover .ivor_svg path{
    fill: var(--color-second-text);
  }
}


#back_login{
  position: absolute;
  bottom: 0;
  padding: 14px;
  height: 60px;
}
.inp_wrap_auth{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: auto;
  z-index: 99999 !important;
}





.container_policy{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.container_policy_flag{
  position: relative;
  width: 100dvw;
}
#text_policy_1,
#text_policy_2{
  position: absolute;
  bottom: 0px;
  padding: 30px 20dvw;
  padding-bottom: 150px;
  height: 100dvh;
  overflow-y: scroll ;
  box-sizing: border-box;
}
.close_btn{
  position: absolute;
  top: -80px;
  right: 30px;
  width: 50px;
  height: 50px;
  transform: translateY(0px);
  background-color: var(--color-bg);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid var(--color-last-text);

  &:hover {
    border: 2px solid var(--color-second-text);
  }
  &:hover path{
    stroke: var(--color-second-text);
  }
}

#text_policy_1::-webkit-scrollbar,
#text_policy_2::-webkit-scrollbar{
  width: 6px;
  z-index: 66666666666666666666666666;
}
#text_policy_1::-webkit-scrollbar-thumb,
#text_policy_2::-webkit-scrollbar-thumb{
  background: var(--color-lastest-text);
  border-radius: 15px;
  z-index: 66666666666666666666666666;
}
#text_policy_1::-webkit-scrollbar-thumb:hover,
#text_policy_2::-webkit-scrollbar-thumb:hover{
  background: var(--color-last-text);
  z-index: 66666666666666666666666666;
}
#text_policy_1::-webkit-scrollbar-track,
#text_policy_2::-webkit-scrollbar-track{
  background: var(--color-bg);
  width: 6px;
  z-index: 66666666666666666666666666;
}

.error_auth_wr{
  position: absolute;
  bottom: 0;
  width: 100dvw;
  display: flex;
  justify-content: center;
  height: 0px;
}
.error_auth{
  position: absolute;
  top: -100px;
  padding: 16px;
  width: 300px;
  height: auto;
  background-color: var(--color-alert-second);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2px solid var(--color-alert-second);
  z-index: 999999999999999999 !important;
}
.form{
  top: -60px;
}
.error_icon{
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.error_massege{
  color: var(--color-alert);
  font-size: 13px;
}
.error_icon rect{
  stroke: var(--color-alert);
}

.loading{
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%,50%);
  z-index: 0;
  box-sizing: border-box;
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}


.loaderd{
  position: relative;
  height: 40px;
  width: 40px;
  border: 2px solid var(--color-main);
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  z-index: 1;
  opacity: 0;
}

.loader_outside{
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid;
  border-color: var(--color-main) transparent;
  z-index: 2;
}
.loader_outside.printConnect{
  width: 24px;
  height: 24px;
  top: 50%;
  border-color: var(--color-second-text) transparent;
  opacity: 0;
}


@keyframes rotation{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 




@media (max-width: 820px){
  .container_wrap{
    flex-direction: column;
  }
  .container_auth_1{
    height: 180px;
  }
  .swich_aut{
    flex-direction: row;
  }
  .auth_page{
    height: 85dvh;
  }
}

@media (max-width: 960px){
  #text_policy_1, #text_policy_2{
    padding: 15px 6dvw;
    padding-bottom: 100px;
  }
}

@media (max-width: 420px){
  .container_auth_1, .container_auth_2{
    width: 95dvw !important;
  }
  .submit.prod{
    margin: 0 !important;
    margin-bottom: 10px !important;
  }
}
@media (max-width: 400px){
  .swich_aut_btn{
    padding: 14px 20px;
  }
  .lbl_auth{
    left: 10px;
  }

}