.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--widget-bg);

  & .l_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 10rem;

    & .logo_img {
      width: 100%;
      height: auto;
    }

    & .logo_num {
      color: rgba(248, 255, 111, 1);
      font-size: 6rem;
      font-weight: 600;
      left: 13%;
      position: absolute;
      text-shadow: 0 3px 0 #ff9900;
    }
  }

  & .l_form_container {
    width: 100%;
    height: auto;
    min-height: 32rem;
    padding: 0 2rem;
    backdrop-filter: blur(7px);
    display: flex;
    flex-direction: column;
  }
}

.form_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  gap: .5rem;
}

.guest_btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  color: var(--header);
  font-weight: 700;
  cursor: pointer;
  user-select: none;

  box-sizing: border-box;
  border: 0.06rem solid rgba(255, 255, 255, 1);
  border-radius: 90rem;
  box-shadow: inset 0rem 0.13rem 4rem 0rem rgba(0, 0, 0, 0.1);
  background: rgba(52, 61, 68, 1);

  & .btn_label {
    font-size: 1.13rem;
    font-weight: 700;
  }
}

.guest_badge {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .2rem .5rem;
  border-radius: 1rem;
  background: #00713F;
  color: #fff;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
}

.guest_line {
  color: #818E99;
  margin: .75rem 0;
  position: relative;
  text-align: center;
  width: 100%;

  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: rgba(255,255,255,.2);
    transform: translateY(-50%);
  }

  &:before {
    left: 0;
  }

  &:after {
    right: 0;
  }
}

.l_title {
  display: flex;
  align-items: center;
  height: 1.25rem;
  line-height: 1.25rem;
  color: var(--header);
  font-size: 1rem;
  margin: 0;
  font-weight: 700;
  text-transform: capitalize;
}

.l_form {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  gap: 1rem;
}

.input_box {
  background-color: #13141B;
  border-radius: 2rem;
  height: 3.5rem;
}

.login_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  font-size: 1.5rem;
  height: 3.5rem;
  min-height: 2.75rem;
  color: #fff;
  background: linear-gradient(180.00deg, rgb(8, 201, 116), rgb(0, 149, 83) 100%);
  //background:linear-gradient(180deg,#b3b3b3,#939393);
  user-select: none;
  border-radius: 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.36, .66, .04, 1);
  text-transform: capitalize;
}

.login_btn_none {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  font-size: 1.5rem;
  height: 3.5rem;
  min-height: 2.75rem;
  color: #fff;
  //background: linear-gradient(180.00deg, rgb(8, 201, 116),rgb(0, 149, 83) 100%);
  background: linear-gradient(180deg, #b3b3b3, #939393);
  user-select: none;
  border-radius: 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.36, .66, .04, 1);
  text-transform: capitalize;
}

.l_forgot {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  & .forgot_btn {
    font-weight: 600;
    color: var(--header);
  }
}

.l_reg_new {
  display: flex;
  align-items: center;
  height: 1rem;
  color: var(--text);

  & .reg_btn {
    margin-left: .75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
  }
}

.l_type_tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;

  & .l_type_btn {
    cursor: pointer;
    width: 50%;
    height: 2.75rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      position: relative;
      z-index: 2;
      font-size: 1rem;
      line-height: 1.25rem;
      color: var(--text);
    }

    &.active {
      &:after {
        content: " ";
        width: 100%;
        height: 1.375rem;
        border-bottom: 1px solid var(--primary-color);
        background: linear-gradient(180deg, rgba(59, 193, 23, 0) 0%, rgba(59, 193, 23, 0) .01%, rgba(59, 193, 23, .2) 100%);
        position: absolute;
        left: 0;
        bottom: 0;
      }

      span {
        color: var(--header);
        font-weight: 600;
      }
    }
  }
}

.otp_btn {
  min-width: 3rem;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  color: var(--primary-color);
  text-align: right;
  font-size: 1rem;
  color: #fff;
  border-radius: 2rem;
  background: linear-gradient(180.00deg, rgb(8, 201, 116), rgb(0, 149, 83) 100%);

  &.cd_timer {
    color: var(--text);
  }
}

.area_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
  font-weight: 600;

  & .icon {
    width: 1rem;
    height: 1rem;
    fill: var(--text);
    transform: rotate(90deg);
  }

  & .flag {
    width: 1.3rem;
    height: auto;
    margin-right: 0.2rem;
  }
}

.input_box {
  background-color: #13141B;
  border-radius: 2rem;
  height: 3.5rem;
}

.login_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  font-size: 1.5rem;
  height: 3.5rem;
  min-height: 2.75rem;
  color: #fff;
  background: linear-gradient(180.00deg, rgb(8, 201, 116), rgb(0, 149, 83) 100%);
  background: linear-gradient(180deg, #b3b3b3, #939393);
  user-select: none;
  border-radius: 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.36, .66, .04, 1);
  text-transform: capitalize;
}