.popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 20px;
  form {
    display: flex;
    flex-direction: column;
    height: 100%;
    .header {
      flex-grow: 0;
      border-radius: 24px 24px 0 0;
      padding: 14px 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #C0C0C0;
      h2 {
        margin: 0;
        font-family: PT Sans Narrow;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; /* 122.222% */
        letter-spacing: 0.36px;
        color: var(--dark-1);
      }
      .close {
        width: 24px;
        height: 24px;
        margin-left: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat;
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      overflow: auto;
      padding: 32px 24px;
      -webkit-overflow-scrolling: touch;
      row-gap: 24px;
      .field {
        display: flex;
        flex-direction: column;
        row-gap: 4px;
        position: relative;
        label {
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: normal;
        }
        input{
          &:autofill {
            background: #A1CAE5;
          }

          &:hover{
            border-color: #6C6C6C;
            outline: none;
          }
          &:focus, &:focus-visible {
            border-color: #0070BA;
            outline: none;
            
          }
          &:disabled{
            border-color: #EDEDED;
            outline: none;
          }
        }
        .eye {
          position: absolute;
          bottom: 8px;
          right: 12px;
          width: 24px;
          height: 24px;
          background-position: center;
          background-repeat: no-repeat;
          cursor: pointer;
          &.show {background-image: url("~projects/app-root/src/assets/images/icons/visibility_on_24dp.svg");}
          &.hide {background-image: url("~projects/app-root/src/assets/images/icons/visibility_off_24dp.svg");}
        }
      }
      .error {
        color: red;
      }
      .bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        row-gap: 18px;
        .remember {
          display: flex;
          flex-direction: row;
          align-items: center;
          input {
            width: 16px;
            height: 16px;
            margin-right: 8px;
            border-radius: 2px;
            border: 1px solid #86898E;
          }
        }
        .forget {
          margin-left: auto;
          cursor: pointer;
        }
      }
    }
    .footer {
      display: flex;
      flex-grow: 0;
      border-top: 1px solid #C0C0C0;
      // border-radius: 0 0 24px 24px;
      padding: 16px 24px;
      justify-content: flex-end;
      gap: 24px;
      flex-wrap: wrap;
    }
  }
}

@media screen and (max-width: 1360px) {
  .authentication {
    flex-direction: column;
    justify-content: center;
    .logo {
      width: 100%;
      height: 76px;
      margin-bottom: 50px;
      background-color: transparent;
      background-size: contain;
    }
    .block {
      width: 100%;
    }
  }
}
@media screen and (max-width: 600px) {
  .popup {
    form {
      .header, .footer {
        border-radius: 0;
      }
      .footer {
        .btn {
          width: 100%;
        }
      }
    }
  }
}
