.preloader {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  top: 0;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  background: white;
  flex-direction: column;
}
.preloader img {
width: 64px;
}
body {
  background-color: #22282b;
  overflow: hidden;
  background-image: url(/public/images/auth-back-1.png);

  background-size: contain;
  background-repeat: no-repeat;
}
.session-success {
  position: absolute;
  width: 250px;
  height: 80px;
  background: #4caf50;
  top: 0;
  right: 24px;
  border-radius: 0 0 8px 8px;
}
.session-success h3{
  font-size: 14px;
  padding: 10px;
  text-align: center;
  z-index: 1;
  color: #3a3b4b;
  /* border-radius: 10px; */
}
.session-error {
  position: absolute;
  width: 250px;
  height: 80px;
  background: #F15353;
  top: 0;
  right: 24px;
  border-radius: 0 0 8px 8px;
}

.session-error h3{
  font-size: 14px;
  padding: 10px;
  text-align: center;
  z-index: 1;
  color: #3a3b4b;
  /* border-radius: 10px; */
}

#close, #close-reset {
  position: absolute;
  top: 52px;
  right: 52px;
  color: #ffffff;
  display: flex;
  align-items: center;
  /* width: 100%;
  justify-content: flex-end;
    padding-right: 52px;
    margin-top: 52px; */
  min-height: 28px;
}

#close i, #close-reset i {
  min-width: 28px;
  font-size: 20px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;

}

#close:hover i, #close-reset:hover i {
  font-size: 26px;
}

#close-reset {
  position: absolute;
  top: 52px;
  right: 52px;
  color: #ffffff;
  display: flex;
  align-items: center;
  /* width: 100%;
  justify-content: flex-end;
    padding-right: 52px;
    margin-top: 52px; */
}

.h2_reset {
  line-height: 100%;
  padding-bottom: 36px;
  margin-bottom: 0;
}

p.desc_reset {
  /* font-family: Roboto; */
  /* font-style: normal; */
  /* font-weight: 500; */
  /* font-size: 18px; */
  /* line-height: 150%; */
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 150%;
  display: flex;
  align-items: center;
  text-align: center;
  color: #757B8F;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 0;
  margin-bottom: 20px;
}
.input-field.col.s12{
  margin-top: 0;
}
a#back_reset {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 125%;
  color: #6E729B;
  display: flex;
  justify-content: center;
  align-items: center;
}

#back_reset i {
  font-size: 20px;
  min-height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#back_reset:hover i {
  font-size: 26px;
}

i.fa.fa-spinner.fa-spin.b_load {
  display: none;
}

#license {
  position: absolute;
  right: 52px;
  bottom: 28px;
  margin-bottom: 0;
  color: #ffffff;
}

#pass-input {
  margin-bottom: 0;
}

.registration {
  display: flex;
  justify-content: flex-end;
  height: 100vh;
}

.l_description {
  width: 667px;
  height: 314px;
  position: absolute;
  left: 0;
  top: 25vw;
  /* margin-top: 282px; */
  /* margin-left: 112px; */
  margin-left: 6.25%;
}

.l_description>.body1 {
  margin: 0;
  /* margin-top: 206px; */
  width: 365px;
  color: #ffffff;
}

.registration-form {
  width: 1084px;
  height: 1084px;
  /* width: 60%;
    height: 60vw; */
  background: #ffffff;
  /* float: left; */
  /* position: unset; */
  margin-right: 20px;
  margin-top: -53px;
  border-radius: 50%;
  margin-left: 55px;
}

.form {
  width: 380px;
  height: 487px;
  margin-top: 247px;
  margin-left: 334px;
  /* display: flex; */
  text-align: center;
  /*    display: none; */
}

.form-login {
  width: 380px;
  height: 487px;
  margin-top: 247px;
  /* margin-left: 334px; */
  margin-left: auto;
  margin-right: auto;
  /* display: flex; */
  text-align: center;
}

.reset-pass, .reset-pass-thanks {
  width: 380px;
  height: 487px;
  margin-top: 347px;
  margin-left: 334px;
  /* display: flex; */
  text-align: center;
}
.thanks-text {
  width: 380px;
  height: 126px;
  margin-bottom: 52px;
}
p.desc_reset-thanks {
  margin: 0;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  display: flex;
  align-items: center;
  text-align: center;
  color: #757B8F;
}
p.desc_reset-thanks:first-child {
  margin-bottom: 14px;
}
/* .reset-pass-thanks {
  width: 380px;
  height: 487px; */
  
  /* display: flex; */
  /* text-align: center;
  display: none;
} */
a#back_reset-thanks {
  background: #6874E8;
  border-radius: 4px;
  color: white;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  padding: 12px 40px;
}
a#back_reset-thanks:hover{
  background: #ffd35c;
    color: #4b4e6d;
}
a.back_thanks {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 125%;
  color: #6E729B;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}

.form, .form-login, h2 {
  padding-bottom: 28px;
  color: #3A3B4B;
  /* color: #F15353; */
}

.form>.body2, .form-login>.body2 {
  color: #AEB0C7;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 28px;
  padding-bottom: 13px;
}

.form>.body3, .form-login>.body3 {
  padding-left: 8px;
  color: #6874E8;
}

.row {
  margin: 0;
}

.visible {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  width: 80px;
  z-index: 10;
  cursor: pointer;
  margin-top: 25px;
  margin-left: 310px;
  padding-right: 16px;
}

.visible i {
  width: 26px;
  color: #D1CFD7;
}
.visible {
  margin-top: 0;
  height: 44px;
  align-items: center;
}
.input-field .helper-text {
  padding-left: 20px;
  color: #9295B4
}

#signup {
  width: max-content;
  padding: 12px 40px;
  height: 51px;
  background-color: #4b4e6d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff;
  margin: auto;
  /* margin-left: 62.5px; */
  margin-bottom: 28px;
  margin-top: 52px;
  border: none;
  cursor: pointer;
}

#signup:hover {
  background: #ffd35c;
  color: #4b4e6d;
}

#reg {
  display: block;
}

.input-field.col.s12 {
  /* margin-bottom: 0; */
  margin-bottom: 12px;
}

.input-field>.caption1 {
  display: flex;
  /* justify-content: flex-end; */
  margin-top: 0px;
  color: #757B8F;
  height: 16px;
}

.input-field>.reset {
  /* display: flex;
  justify-content: flex-end; */
  margin-top: 16px;
  color: #757B8F;
  width: fit-content;
    float: right;
}

.auth {
  width: 667px;
  height: 314px;
  position: absolute;
  top: 187px;
  right: 26px;
  color: white;
}

.auth p {
  text-align: center;
}

.error {
  margin-top: -20px;
  background: #ffd35c;
  border-radius: 20px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #3a3b4b;
}

.google {
  /* width: fit-content; */
  /* width: max-content; */
  /*  width: -moz-fit-content; */
  /*  width: -moz-max-content; */
  width: auto;
  min-width: min-content;
  max-width: max-content;
  height: 40px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  /* border: 1px solid; */
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.084), 0px 1px 1px rgba(0, 0, 0, 0.168);
  padding-left: 1px;
  padding-right: 24px;
  margin: auto;
}

.google a {
  padding-left: 24px;
  color: #757575;
  white-space: nowrap;
}

.google:hover {
  background: #4285F4;
}

.google:hover a {
  color: #ffffff;
}

.google img {
  /* width: 18px; */
  height: 38px;
  background: #ffffff;
  /* padding: 15px; */
  padding: 9.87px;
  border-radius: 4px;
}


/* #google {
    padding: 9.5px 8px 9.5px 65.5px;
    border: 1px solid;
    border-radius: 4px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.084), 0px 1px 1px rgba(0, 0, 0, 0.168);
} */

input#email, input#remail, input#resetmail {
  width: 380px;
  border: 1px solid #D1D2DF;
  box-sizing: border-box;
  border-radius: 4px;
  height: 44px;
  padding-left: 20px;
  margin: auto;
  margin-bottom: 0;
  color: #4b4e6d;
  font-family: 'Roboto';
}

input#email:hover, input#remail:hover, input#resetmail:hover {
  border: 1px solid #9295b4;
  /* color: #9295b4; */

}

input#password, input#rpassword {
  width: 380px;
  border: 1px solid #D1D2DF;
  box-sizing: border-box;
  border-radius: 4px;
  height: 44px;
  padding-left: 20px;
  margin-bottom: 0;
  color: #4b4e6d;
  font-family: 'Roboto';
}

input#password:hover, input#rpassword:hover {
  border: 1px solid #9295b4;
  /* color: #9295b4; */

}


label {
  padding-left: 20px;
}

input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
  /* width: -moz-max-content;
  width: -webkit-max-content;
  width: -o-max-content; */
  width: auto;
  padding-top: 5px;
  margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  background: #ffffff;
  color: #6874E8;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500
}

input.invalid[type=email]:not(.browser-default), input.invalid[type=password]:not(.browser-default), input.invalid[type=text]:not(.browser-default) {
  border: 2px solid #F15353 !important;
  ;
  box-shadow: 0 0 0 0 #F15353 !important;
}

input.invalid[type=email]:not(.browser-default):focus, input.invalid[type=password]:not(.browser-default):focus, input.invalid[type=text]:not(.browser-default) {
  border: 2px solid #6874E8 !important;
  ;
  box-shadow: 0 0 0 0 #6874E8 !important;
}

input.valid[type=email]:not(.browser-default), input.valid[type=password]:not(.browser-default), input.valid[type=text]:not(.browser-default) {
  border: 1px solid #9295B4 !important;
  ;
  box-shadow: 0 0 0 0 #9295B4 !important;
}

input.valid[type=email]:not(.browser-default):focus, input.valid[type=password]:not(.browser-default):focus, input.valid[type=text]:not(.browser-default) {
  border: 2px solid #6874E8 !important;
  ;
  box-shadow: 0 0 0 0 #6874E8 !important;
}

input.invalid[type=email]:not(.browser-default)+label.active {
  color: #F15353;
  width: max-content;
  padding-top: 5px;
  margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  background: #ffffff;

}

input.invalid[type=email]:not(.browser-default)+label {
  color: #F15353;
  width: max-content;
  padding-top: 0;
  /* margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  background: #ffffff; */

}

input.valid[type=text]:not(.browser-default)+label {
  color: #6874e8 !important;
}

input.valid[type=email]:not(.browser-default)+label, input.valid[type=password]:not(.browser-default)+label, input.valid[type=text]:not(.browser-default)+label {
  color: #9295B4;
  width: max-content;
  padding-top: 5px;
  margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  background: #ffffff;
}

.invalid:focus {
  border-bottom: 2px solid #6874E8 !important;
  border-top: 2px solid #6874E8 !important;
  border: 2px solid #6874E8 !important;
  box-shadow: 0 0 0 0 #6874E8 !important;
}

input:focus {
  border-bottom: 2px solid #6874E8 !important;
  border-top: 2px solid #6874E8 !important;
  border: 2px solid #6874E8 !important;
  ;
  box-shadow: 0 0 0 0 #6874E8 !important;
}

textarea:focus {
  border-bottom: 2px solid #6874E8 !important;
  border-top: 2px solid #6874E8 !important;
  border: 2px solid #6874E8 !important;
  ;
  box-shadow: 0 0 0 0 #6874E8 !important;
}

.input-field>label:not(.label-icon).active {
  color: #9295B4;
  width: max-content;
  padding-top: 5px;
  margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  background: #ffffff;
}

label.invalid_pass {
  color: #6874E8 !important;
}

.reset-pass {
  display: none;
}

/* VALIDATION*/
.invalid_email {
  border: 2px solid #F15353 !important;
}

.invalid_email+label {
  color: #F15353;
}

.invalid_email+label.active {
  color: #F15353 !important;
  width: auto;
  padding-top: 5px;
  margin-left: 20px;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 16px;
  font-family: Roboto;
  font-weight: 500;
}

.invalid_email:focus+label.active {
  color: #6874E8 !important;
}

/* END VALIDATION */

@media(max-width:1700px) {
  .reset-pass, .reset-pass-thanks {
    width: 380px;
    height: 487px;
    margin-top: 0;
    margin-left: 0;
    /* display: flex; */
    text-align: center;
  }
  .reset-pass-thanks{
    display: none;
  }

  .registration {
    align-items: center;
    /* transition-timing-function: linear;
    transition-duration: 50s; */
  }

  .registration-form {
    width: 60%;
    height: 60vw;
    margin-top: 0;
    /* margin-top: auto;
    margin-bottom: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .form {
    margin-top: 0;
    margin-left: 0;
  }

  .form h2, .form-login h2 {
    margin-top: 0;
  }

  .form-login {
    margin-top: 0;
    margin-left: auto;
  }

  .auth {
    width: 34.75%;
    height: auto;
    top: 9.75vw;
  }

  .auth img {
    width: 100%;
  }

  #pass-input {
    margin-top: 0;
  }

  #pass-input {
    margin-top: 0;
  }

  .row .col.s12 {
    margin-bottom: 12px;
  }

  .visible {
    margin-top: 0;
    height: 44px;
    align-items: center;
  }
}

@media(max-width:1279px) {
  .l_description>.body1 {
    width: 316px;
  }
}

@media(max-width:1151px) {
  body {
    background-color: #ffffff;
    background-image: url("/public/images/adaptive/bottom.png");
    background-position-x: center;
    background-position-y: bottom;
    background-size: unset;
  }

  .registration {
    justify-content: center;
  }

  .registration-form {
    margin-right: 0;
    margin-left: 0;
    background: unset;
  }

  #close {
    color: #AEB0C7;
    top: 27px;
  }

  #close-reset {
    color: #AEB0C7;
    top: 27px;
  }

  .form h2, .form-login h2 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .auth {
    display: none;
  }
}

@media(max-width:768px) {
  #license {
    right: 0;
    width: 100%;
    text-align: center;
  }

  #close, #close-reset {
    right: 24px;
  }
}

@media(max-width:428px) {
  body {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .registration-form {
    width: 100%;
  }

  form#log {
    width: 100%;
  }

  .col .row {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  input#email, input#remail, input#resetmail {
    width: 100%;
  }

  input#password, input#rpassword {
    width: 100%;
  }

  .row .col.s12 {
    padding-left: 0;
    padding-right: 0;
  }

  .visible {
    right: 30px;
    margin-left: 0;
    padding-right: 16px;
  }

  .input-field.col label {
    left: 0;
  }

  #close {
    right: 24px;
    padding-right: 0;
  }

  #close-reset {
    right: 24px;
    padding-right: 0;
  }

  .google {
    width: auto;
    min-width: min-content;
    max-width: max-content;
    padding-right: 20px;
  }

  .google a {
    padding-left: 20px;
    width: auto;
    min-width: min-content;
    max-width: max-content;
  }

  /* #license {
    right: 24px;
  } */
}

@media(max-width:320px) {
  body {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  #close {
    right: 20px;
  }

  #close-reset {
    right: 20px;
  }

  #license {
    right: 20px;
  }
}

@media(max-height:731px) {
  html {
    height: 100%;
  }

  body {
    height: 100%;
    padding-top: 102px;
    background: unset;
    overflow: auto;
  }

  .authorization {
    /* margin-top: -24px; */
    height: 93%;
  }

  #close {
    position: absolute;
    justify-content: flex-end;
    color: #AEB0C7;
    top: 27px;
    /*  margin-top: 20px; */
  }

  #close-reset {
    position: absolute;
    justify-content: flex-end;
    /*  margin-top: 20px; */
  }

  .registration {
    height: 100%;
  }

  .form, .form-login {
    padding-bottom: 0;
  }
   .form-login h2 {
    margin-bottom: 0;
  }

  .registration-form {
    border-radius: unset;
    height: fit-content;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  

  p#license {
    position: unset;
    margin-top: 0;
    width: 100%;
    text-align: center;
    margin-top: 0;
    color: #AEB0C7;
  }

  #signup {
    margin-top: 28px;
  }
  #auth-logo{
    display:none;
  }
}

/* @media(max-height:720px) {
  #auth-logo{
    display: none;
  }
  } */
@media(max-height:590px) {
  #license {
    display: none;
  }
}