.header,
.footer,
.footer-only-mobile-show {
  display: none;
}

main:has(.profile-login) {
  padding: 0;
  background: #000000;
  position: relative;
  z-index: 0;
}

/*main:has(.profile-login)::after {
  content: "";
  width: 100%;
  height: 50%;
  background: url("/v2/images/profile-login-pic.png") no-repeat center center / cover;
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}*/

/*.profile-login-container::before,*/
.profile-login-logo {
  content: "";
  width: 170px;
  height: 35px;
  background: url("/v2/images/white-logo.svg") no-repeat center center / cover;
  position: absolute;
  top: 24px;
  left: 24px;
  cursor: pointer;
  z-index: 100;
}

.profile-login-container {
  height: 100%;
}

.authorization-container {
  height: 100vh;
}

.profile-login {
  height: 100%;
  z-index: 0;
}

.profile-oath-container .k-listview {
  background: unset;
}

.profile-login .container {
  align-content: center;
  padding: 130px 200px 40px 200px;
  height: 100%;

  position: relative;
  z-index: 10;
}

.profile-login .container.reset-container,
.profile-login .container.email-confirm-container {
  padding: 300px 200px 40px 200px;
}

.profile-login .reset-container h3 {
  width: 100%;
}

.profile-login h3 {
  width: 97%;
  margin-left: auto;
  text-align: center;
}

.login-navigation {
  width: fit-content;
  justify-self: center;
  margin-top: 8px;
}

.login-nav-list {
  border-radius: var(--Standart-xs, 6px);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  padding: 4px;
}

.login-nav-list .list-item {
  padding: 12px 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: #FFF;
}

.login-nav-list .list-item:hover {
  background: #474747;
}

.login-nav-list .list-item.active {
  background: #FFF;
  color: #000;
}

.form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 100%;

  height: fit-content;
}

.form-wrapper .form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  min-width: 20%;
  max-width: 530px;
  overflow: auto;
}

.form-wrapper .form .form-image {
  margin-bottom: 30px;
  display: block;
  text-align: center;
}

.form-wrapper .form .auth-title {
  margin-bottom: 30px;
  text-align: center;
  font-family: "MontserratSemiBold", sans-serif;
  font-size: 1.125rem;
  color: #404040;
}

.form-wrapper .form .auth-subtitle {
  margin-bottom: 15px;
  text-align: center;
  font-family: "MontserratSemiBold", sans-serif;
  font-size: 0.90rem;
  color: #404040;
}

.form-wrapper .form .k-input-solid.k-input {
  border-radius: 6px;
  position: relative;
  border: none;
  border-bottom: none;
  height: 46px;
  background-color: #FFFFFF;
}

.form-wrapper .form .k-input-solid.k-input.k-invalid {
  border: 1px solid #EA2311;
}

.form-wrapper .form .k-input-solid.k-input .k-input-inner {
  padding: 12px 16px;
}

.k-checkbox {
  border: 1px solid var(--Default-black-100, rgba(11, 11, 11, 0.10));
}

.k-checkbox:checked, .k-checkbox.k-checked {
  border: 3px solid #ffffff;
  background-image: none;
  background-color: #d8e800;
}

a {
  color: #ffffff;
}

.k-form, .k-form-inline {
  color: #000000;
}

.k-form-md .k-form-field {
  margin-top: 8px;
}

.k-form-md .k-form-field.label-register {
  margin-top: 16px;
}

.k-form-md .k-form-buttons {
  margin: 0;
}

.form-wrapper .form .k-input-solid.k-input.k-focus,
.form-wrapper .form .k-input-solid.k-input:focus {
  box-shadow: none;
}

.form-wrapper .form .k-input-solid.k-input input::placeholder,
.form-wrapper .form .k-input-solid.k-input input::-webkit-input-placeholder {
  color: #d9d9d9;
}

.form-wrapper .form .k-form.telerik-blazor.k-form-md {
  width: 100%;
}

.profile-login .form-wrapper .form .k-form-buttons {
  margin-top: 16px;
  margin-bottom: 8px;
  flex-direction: column;
  align-items: center;
  gap: 30px;

  position: unset;
  background: unset;
  padding: unset;
}

.profile-login .reset-container .form-wrapper .form .k-form-buttons {
  gap: 20px;
}

.form-wrapper .form .k-form-buttons .passforgot-link {
  color: #ffffff;
  cursor: pointer;
}

.form-wrapper .form .k-form-buttons .passforgot-link:hover {
  text-decoration: underline;
}

.form-wrapper .form .k-form-buttons .buttons-group {
  align-items: center;
}

.form-wrapper .form .buttons-group .button.registration-link {
  border-color: #64ad29;
  background-color: #ffffff;
  color: #64ad29;
}

.form-wrapper .form .buttons-group .button[disabled] {
  background-color: #86ddcf;
}

.password-wrapper {
  position: relative;
  display: flex;
}

.password-validation-message {
  margin-top: 14px;
  display: block;
}

.register-tooltip {
  text-decoration: underline;
  cursor: pointer;
}

input::-webkit-passman-key {
  display: none;
}

.k-button.mask,
.k-button.unmask {
  position: absolute;
  top: 50%;
  right: 0;
  border: none;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  z-index: 10;
}

.k-button.mask:hover,
.k-button.unmask:hover {
  box-shadow: none;
}

.k-button.mask {
  background-image: url(/images/buttons/visible-icon.svg);
  height: 16px;
  width: 16px;
  margin-right: 8px;
  filter: invert(1);
}

.k-button.unmask {
  background-image: url(/images/buttons/invisible-icon.svg);
  height: 16px;
  width: 16px;
  margin-right: 8px;
  filter: invert(1);
}

.login-additional-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.buttons-group-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.register-buttons {
  display: flex;
  align-items: center;
  gap: 8.3px;
}

.login-go-to-main {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 20px 0;
}

.home-link-text {
  font-family: "Onest", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  color: #FFFFFF;
  width: 100px;
  text-align: center;

  flex-shrink: 0;
}

.login-divider {
  background: rgba(255, 255, 255, 0.10);
  height: 1px;
  width: 40%;
}

.reg-on-platform {
  text-align: center;
}

.reset-container .k-textbox.k-input.telerik-blazor.k-input-solid.k-rounded-md.k-input-md {
  width: 100%;
}

/* css for requed pseudo element */

.k-textbox.k-input.telerik-blazor.k-input-solid.k-rounded-md.k-input-md {
  width: 97%;
  display: flex;
  margin-left: auto;
}

.k-form-field.label-register.form-item {
  width: 97%;
  display: flex;
  flex-direction: column;
  margin-left: auto;
}

.k-form-field.label-register.form-item label {
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reset-container .k-form-buttons.k-actions-start {
  width: 100%;
}

.reset-container .k-form-buttons.k-actions-start .k-button.master-btn-disabled {
  background: white;
}

.k-form-buttons.k-actions-start {
  width: 97%;
  margin-left: auto;
}

.login-additional-container {
  width: 97%;
  justify-content: center;
  margin-left: auto;
}

a.login-go-to-main.active {
  width: 97%;
  margin-left: auto;
}

.reg-on-platform {
  width: 97%;
  margin-left: auto;
}

.login-nav-list {
  width: fit-content;
}

nav.login-navigation {
  width: 97%;
  margin-left: auto;
  justify-content: center;
  display: flex;
}

span.body-extra-large-500 {
  width: 97%;
  text-align: center;
  margin-left: auto;
}

.k-form-field.form-item.required {
  position: relative;
}

.k-form-field.form-item.required::before {
  position: absolute;
  content: "";
  width: 6px;
  top: calc(50% - 6px);
  border-radius: 30px;
  height: 6px;
  background: #f31700;
}

.k-form-field.k-form-field-error.form-item.required::before {
  position: absolute;
  content: "";
  width: 6px;
  top: 18px;
  border-radius: 30px;
  height: 6px;
  background: #f31700;
}

.profile-login .k-form-error.k-invalid-msg,
.profile-login .password-validation-message {
  width: 97%;
  margin-left: auto;
}

.profile-login .k-form-field-error.label-register .k-form-error.k-invalid-msg {
  width: calc(97% - 10px);
}

.terms-of-service-text a:hover {
  text-decoration: underline;
}

.form-wrapper .form .dark-mode .k-input-solid.k-input {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(25px);
}

.form-wrapper .form .dark-mode .k-input-inner {
  color: #ffffff;
}

.profile-oath-container {
  padding-top: 180px;
}

.choose-user-auth {
  cursor: pointer;
  padding: 10px 10px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(25px);
  border-radius: 6px;
  transition: .2s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 450px;
}

.choose-user-auth:hover {
  background: rgba(255, 255, 255, 0.09);
}

.reset-psw-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reset-help-text {
  text-align: center;
}

.user-selection {
  width: 100%;
}

@media (max-width: 1440px) {
  .form-wrapper .form {
    min-width: 20%;
    max-width: 50%;
  }

  .k-form, .k-form-inline {
    font-size: 14px;
  }

  .choose-user-auth {
    min-width: auto;
    width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1100px) {
  .form-wrapper .form {
    min-width: 20%;
    max-width: 60%;
  }
}

@media (max-width: 1024px) {
  main:has(.profile-login)::after {
    background: none;
  }

  .profile-login .container {
    padding: 130px 130px;
  }

  .profile-login .container.reset-container,
  .profile-login .container.email-confirm-container {
    padding:  130px 130px;
  }

  .form-wrapper .form {
    min-width: 60%;
    max-width: 100%;
  }
}

@media (max-width: 650px) {
  .profile-login .container {
    padding: 130px 60px;
  }

  .profile-login .container.reset-container,
  .profile-login .container.email-confirm-container {
    padding: 130px 60px;
  }

  .form-wrapper .form {
    min-width: 60%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  main:has(.profile-login)::before {
    content: "";
    width: 170px;
    height: 35px;
    background: url("/v2/images/h-logo.svg") no-repeat center center / cover;
    position: absolute;
    top: 16px;
    left: 16px;
    pointer-events: none;
    z-index: -1;
  }

  .profile-login .container {
    padding: 100px 16px 64px 16px;
  }

  .profile-login .container.reset-container,
  .profile-login .container.email-confirm-container {
    padding: 100px 16px 64px 16px;
  }

  .form-wrapper .form {
    min-width: 60%;
    max-width: 100%;
  }

  .k-form-field.form-item.required::before {
    display: none;
  }

  .k-textbox.k-input.telerik-blazor.k-input-solid.k-rounded-md.k-input-md {
    width: 100%;
  }

  .k-form-field.label-register.form-item {
    width: 100%;
  }

  .k-form-buttons.k-actions-start {
    width: 100%;
  }

  .login-additional-container {
    width: 100%;
  }

  a.login-go-to-main.active {
    width: 100%;
  }

  .reg-on-platform {
    width: 100%;
  }

  nav.login-navigation {
    width: 100%;
  }

  span.body-extra-large-500 {
    width: 100%;
  }

  .k-form-field.form-item.required .k-textbox.k-input.telerik-blazor.k-input-solid.k-rounded-md.k-input-md::before {
    position: absolute;
    content: "";
    width: 6px;
    top: calc(50% - 6px);
    right: 16px;
    border-radius: 30px;
    height: 6px;
    background: #f31700;
  }

  .form-wrapper .form .k-input-solid.k-input .k-input-inner {
    padding: 12px 38px 12px 16px;
  }

  .login-nav-list .list-item {
    padding: 12px 24px;
  }
}