.LoginLayout {
  background-color: $skinColor;

  .image-component {
    flex: calc(100% / 2);
    height: 100%;

    img {
      // transform: rotateX(360deg);
      width: 100%;
      height: 100%;
    }

    @media (max-width: 992px) {
      display: none !important;
    }
  }

  .layout-login {
    flex: calc(100% / 2);
    height: 100%;
    // position: relative;
    @extend .position-relative;
    overflow-y: auto;
    @extend .overflow-x-hidden;

    &::after {
      position: absolute;
      right: 0px;
      // background-image: url('../../public/images/icons/birrd-1.svg');
      bottom: 0px;
      opacity: 0.5;
      background-position: center;
      background-size: 100% 100%;
      width: 250px;
      height: 250px;
      content: '';

      @media (max-width: 1600px) {
        z-index: -1;
      }

      @media (max-width: 600px) {
        right: 0px;
        bottom: 0px;
        opacity: 0.5;
        background-position: center;
        background-size: 100% 100%;
        width: 180px;
        height: 180px;
      }
    }

    @media (max-width: 992px) {
      h5 {
        font-size: 35px;
      }

      .loginInput {
        width: 80%;
      }
    }

    @media (max-width: 320px) {
      padding-top: 100px;
      height: 100vh;
    }
  }

  &.createProfilePage {
    .layout-login {
      @media (max-width: 320px) {
        padding-top: 10px;
      }
    }
  }
}

.loginInfo {
  @media (max-width: 600px) {
    gap: 40px;
    width: auto !important;
  }
}

.createProfileBtn {
  @media (max-width: 1600px) {
    margin-bottom: 40px;
  }
}

// AUTH LANDING PAGE
.auth-lnading-page {
  img {
    width: 250px;
    height: 250px;
  }

  h5 {
    font-weight: 400;
  }

  p {
    max-width: 55%;
  }
}

// .loginBox {
//     border: 1px solid #000;
// }

.landing-page {
  h5 {
    color: $brownColor;
    font-weight: 200;
    font-size: 50px;
  }

  h4 {
    color: $dark;
    font-weight: 400;
    font-size: 54px;
  }

  @media (max-width: 1600px) {
    h4 {
      font-size: 37px;
    }

    button {
      padding-right: 0px !important;
      padding-left: 0px !important;
      width: 30% !important;
    }
  }

  p {
    max-width: 67%;
    @extend .text-center;
  }

  label {
    color: $dark !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }

  @media (max-width: 600px) {
    padding-top: 50px !important;
    padding-bottom: 50px !important;

    h4 {
      font-size: 20px;
    }

    p {
      max-width: 100%;
    }

    button {
      padding-right: 0px !important;
      padding-left: 0px !important;
      width: 40% !important;
    }
  }
}

.loginPage {
  h5 {
    color: $dark;
    font-weight: 400;
    font-size: 54px;
    text-transform: capitalize;
  }

  label {
    color: $dark !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }

  .checkbox {
    border-radius: 50%;
    background-color: $brownColor;
    width: 25px;
    height: 25px;
  }

  a {
    color: $dark;
    font-weight: 600;
    font-size: 16px;
    text-align: right;
  }

  .dontHaveAccount {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-82%, -38%);
    h6 {
      color: $dark;
      font-weight: 400;
      font-size: 16px;
    }
  }

  @media (max-width: 1600px) {
    width: 100% !important;

    & > div {
      width: 70% !important;
    }

    h5 {
      font-size: 35px;
    }
    & > button:not(.backbtn) {
      width: 70% !important;
    }
  }

  @media (max-width: 992px) {
    & > div {
      width: 50% !important;
    }
    & > button:not(.backbtn) {
      width: 50% !important;
    }
  }

  @media (max-width: 600px) {
    & > button:not(.backbtn) {
      width: 90% !important;
    }
    & > div {
      width: 90% !important;
    }
  }
}

.socialIcon {
  border: 1px solid $dark-skin-color;
  border-radius: 10px;
  background-color: white;
  width: 85px;
  height: 85px;

  img {
    width: 60%;
  }
}

.divider {
  flex: 1;
  opacity: 0.5;
  background: linear-gradient(105deg, $dark-skin-color -0.94%, #d0bb9c 97.65%);
  height: 1px;
}

.signUP {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
  width: 90%;

  label {
    color: $dark !important;
    font-weight: 600 !important;
    font-size: 16px !important;
  }

  .dontHaveAccount {
    a {
      color: $dark-skin-color;
    }
  }

  @media (max-width: 992px) {
    // padding-top: 0px !important;
  }
}

// CREATE PROFILE
.createProfile {
  @extend .position-relative;
  top: 6%;
  left: 10%;
  max-height: 100%;
  @extend .overflow-hidden;
  @extend .overflow-y-auto;
  width: 80%;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  & {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .createProfileAvatar {
    left: 175px;
  }

  .react-datepicker-wrapper {
    border: 1px solid $dark-skin-color;
    border-radius: 10px;
    width: 100% !important;
    @extend .bg-white;

    input {
      border: 0px;
      border-radius: 10px;
      padding-left: 10px;
      width: 100%;
      height: 60px;
    }
  }

  @media (max-width: 992px) {
    top: 5%;

    .createProfileAvatar {
      left: 100px;
    }
  }
}

.calendarBox {
  img {
    top: 50%;
    right: 20px;
  }

  input {
    outline: none;
  }
}