/**=====================
    Login css start
==========================**/
.auth-page {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 100vh;
  overflow: auto;
  background-repeat: no-repeat;
  background-size: cover;
  padding: calc(25px + (60 - 25) * ((100vw - 320px) / (1920 - 320))) 0;
  background-position: center;

  .ms-auto {
    @media (max-width: 1199px) {
      margin: 0 auto;
    }
  }

  [class*="badge-version-"] {
    &.badge {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }
  }

  .auth-card {
    border-radius: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
    position: relative;
    padding: 40px;
    background-color: $white;
    box-shadow: 0 0 35px 2px rgba(0, 0, 0, 0.05);

    .login-img {
      width: calc(96px + (120 - 96) * ((100vw - 320px) / (1920 - 320)));
    }

    .welcome {
      padding: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320))) 0 calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
      margin: calc(21px + (30 - 21) * ((100vw - 320px) / (1920 - 320))) 0 calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));

      h3 {
        font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 600;
        color: $dark-color;
        margin-bottom: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
      }

      p {
        margin-bottom: 0;
        font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
        font-weight: 400;
        line-height: 1.4;
        color: $dark-text;
      }
    }

    .main {
      svg {
        width: 22px;
        height: 22px;
        color: $tab-border;
        position: absolute;
        top: 44px;
        left: 16px;
        z-index: 1;
      }

      .submit {
        cursor: pointer;
        border-radius: 10px;
        color: $white;
        background-color: var(--primary-color);
        padding: 12px;
        width: 100%;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        align-items: center;
        margin-top: 30px;
      }

      .forgot-pass {
        padding: 10px 0 0;
        text-align: end;
        font-size: 14px;

        a {
          padding: 0;
          color: var(--primary-color);
          font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
          letter-spacing: 0.5px;
          display: flex;
          border: none;
          align-items: center;
          justify-content: end;
          gap: 6px;

          svg {
            position: static;
            color: var(--primary-color);
            transform: translateX(0px);
            transition: all 0.2s ease;
          }

          &:hover {
            svg {
              transform: translateX(calc(-2px + (-5 - -2) * ((100vw - 320px) / (1920 - 320))));
              transition: all 0.2s ease;
            }
          }
        }
      }

      .form-group {
        .position-relative {
          .toggle-password {
            i {
              position: unset;
            }
          }
        }
      }

      &:has(.forgot-pass) {
        position: relative;

        .forgot-pass {
          display: inline-block;
          position: absolute;
          bottom: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
          left: 0;
          padding: 0;
        }
      }

      .login-form {
        .forgot-pass {
          position: relative;
          inset: unset;
          display: block;
        }
      }
    }
  }

  .alert {
    &.alert-success {
      color: $success-color;
      background-color: rgba($success-color, 0.1);
      padding: 12px 16px;
      border-color: rgba($success-color, 0.5);
      border-radius: $border-radius;
    }
  }

  .auth-form {
    .tab-content {
      overflow: hidden auto;

      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px $light-gray;
      }

      &::-webkit-scrollbar {
        width: 6px;
        height: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba($primary-color, 0.1);
        border-radius: 100px;
      }
    }

    .footer {
      .btn-primary {
        &::before {
          content: none;
        }
      }
    }

    .tab2-card {
      .nav-tabs {
        .nav-link {
          &.active {
            .feather {
              color: var(--primary-color);
            }
          }

          .feather {
            position: relative;
            inset: unset;
          }
        }
      }
    }

    .phone-detail {
      .col-sm-1 {
        @media (min-width: 420px) {
          width: 25%;
        }

        @media (max-width: 420.98px) {
          width: 32%;
        }
      }

      .col-sm-11 {
        @media (min-width: 420px) {
          width: 75%;
        }

        @media (max-width: 420.98px) {
          width: 68%;
        }
      }
    }
  }
}

/* Clock styles */

.clockbox {
  background-color: #8396ab;
  border-radius: 4px;
  box-shadow: 6px 1px 13px 5px #001324;

  svg {
    width: 75px;
    height: 75px;
  }
}

.circle {
  fill: #bccfe5;
  stroke: rgb(72 90 112 / 16%);
  stroke-width: 80px;
  stroke-miterlimit: 10;
}

.mid-circle {
  fill: #000;
}

.hour-marks {
  fill: none;
  stroke: $black;
  stroke-width: 9;
  stroke-miterlimit: 10;
}

.hour-hand {
  fill: none;
  stroke: $black;
  stroke-width: 17;
  stroke-miterlimit: 10;
}

.minute-hand {
  fill: none;
  stroke: $black;
  stroke-width: 11;
  stroke-miterlimit: 10;
}

.second-hand {
  fill: none;
  stroke: $black;
  stroke-width: 15px;
  stroke-miterlimit: 10;
}

.sizing-box {
  fill: none;
}

#hour,
#minute,
#second {
  transform-origin: 300px 300px;
  transition: transform 0.5s ease-in-out;
}

.demo-credential {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  .btn {
    width: 100%;
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    line-height: 1.75;

    &:hover {
      background-color: var(--primary-color);
      color: $white;
    }
  }
}

.copy-data {
  margin-top: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: rgba(242, 242, 242, 0.1);
  border-radius: 4px;
  border: none;
  padding: 10px 13px;
  box-shadow: none;
  outline: none;
  border: 1px dashed #ffffff42;

  .copy-data-div {
    label {
      font-size: 16px;
      color: rgba($dark-color, 0.95);
    }

    p {
      color: rgba($dark-color, 0.95);
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;

      span {
        i {
          font-size: 20px;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .code-box-copy__btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
  }
}

/**=====================
    Login css end
==========================**/