@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* sign in process css */

html {
  font-size: 100%;
  font-family: "Inter", sans-serif;
}
.signin-container {
  max-width: 1500px;
  margin: 0 auto;
}
.signin-header{
  padding: 36px 0px;
}
.backup-token-wraper {
    margin-bottom: 27px;
    width: 100%;
}
.backup-token-wraper p{
    color: #8F8F8F;
}
.signin-content {
  padding: 50px 20px;
  border-radius: 1.6rem;
  color: rgb(0, 0, 0);
   max-width: 600px;
   margin: 0 auto;
}
@media screen and (min-width: 566px) {
    .form-set-wraper {
        padding-left: 90px;
        padding-right: 90px;
    }
}
.form-set-wraper p{
    color: #8F8F8F;
}


.logo {
  font-size: 2rem;
}
.signin-content_header h4 {
  font-size: 32px;
  letter-spacing: -1%;
  line-height:160%;
  color: #12141D;
  font-weight: bold;
  margin-bottom:25px;
}
#id_token-otp_token::-webkit-inner-spin-button,
#id_token-otp_token::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#id_token-otp_token {
    -moz-appearance: textfield;
}


#id_generator-token::-webkit-inner-spin-button,
#id_generator-token::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#id_generator-token {
    -moz-appearance: textfield;
}

#id_validation-token{
    -moz-appearance: textfield;
}

#id_validation-token::-webkit-inner-spin-button,
#id_validation-token::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.signin-content_header p {
    margin-bottom: 22px;
    color: #8F8F8F;
    letter-spacing: -1%;
    font-size: 16px;
    text-align: left;
    line-height: 160%;
}
.signin-form  span {
  color: #D73838;
}


.signin-content_header,
.signin-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:space-between;
  margin-bottom: 1.2rem;
  margin: 0 auto;
}
.signin-form input {
  width: 100%;
  /* background-color: #ffffff40; */
  color: #3C3E4A;
  border: 2px solid #E6E6E6;
  padding: 10px;
  border-radius: 8px;
}
.font_wraper{
font-size:15px
}
input {
  font-size: 16px;
  border: none;
  margin: var(--m-8-0);
}
input::placeholder {
  color: #fff;
}
input[type="submit"] {
  border: none;
  background-color: var(--c-primary);
  color: #163020;
  font-weight: 600;
}

.btn-group {
    gap: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 25px;
}


button.button-bordered {
    padding: 11px 21px;
    border: 1px solid #1A1A18;
    font-size: 16px;
    border-radius: 4px;
    height: 49px;
    width: 176px;
}

button.button-fill {
    padding: 11px 21px;
    border: 1px solid #D73838;
    font-size: 16px;
    color: #fff;
    background-color: #D73838;
    border-radius: 4px;
    height: 49px;
    width: 176px;
}
.placeholder-text{
margin-top: 20px;
color:rgb(118,118,118);
background:rgb(243,243,243);
    border-radius: 8px;
    padding: 12px 24px;
    font-size:15px;
        line-height: 19px;
}
.signin-netoworks{
  margin: 36px 0;
}
.signin-or {
  margin: 20px 0;
}
.signin-or{
  position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-or::before{
    position: absolute;
    content: "";
    background-color: #ddd;
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.signin-or>span{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #ffffff;
  width: 50px;
  border-radius: 50%;
}



.signin-icons {
  text-align: left;
  margin: 0 auto;

}
.signin-icons li {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  border: 1px solid rgb(26,26,24,0.2);
  padding: 15.5px;
  justify-content: center;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.signin-icons li:hover {
  border: 1px solid rgb(66,133,244,0.4);
  cursor: pointer;
}

.signin-icons li > [type="logo"] {
  margin-right: 8px;
}

/* styling for the social sign-in button */
.social-signin-btn li {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(26, 26, 24, 0.2);
    padding:10px 20px;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0px;
    transition: all 0.2s ease-in-out;
}

.social-signin-btn li:hover {
  border: 1px solid rgba(66, 133, 244, 0.4);
  cursor: pointer;
}

.social-signin-btn li img {
  width: 30px;
  height: auto;
  margin-right: 4px;
}

.table-color-custom {
    background-color: #1f3864;
    color: white;
}

.signin-footer{
    background-color: #2F2F2F;
    font-size: 13px;
    color: #fff;
    font-weight: 400;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;

}

.footer-content{
  display: flex;
  justify-content: space-between;
  padding: 28px;
  line-height: 1.5;
}

@media only screen and (max-width: 560px) {
button.button-bordered,
button.button-fill {
    width: auto;
}
.signin-header{
  padding: 36px 20px;
}
}
.button-text {
    color: black;
}
.button-text:hover {
    color: black;
    text-decoration: none;
}
.footer-button{
text-decoration:none;
color: #fff;
}
/* forgot password */
.forgotpassword-container {
  max-width: 1137px;
  margin: 0 auto;
}
.forgotpassword-header{
  padding: 50px 20px;
}

.forgotpassword-content {
  padding: 50px 20px;
  border-radius: 1.6rem;
  color: rgb(0, 0, 0);
   max-width: 600px;
   margin: 0 auto;
}
.logo {
  font-size: 2rem;
}
.forgotpassword-content_header h4 {
  font-size: 32px;
  letter-spacing: -1%;
  line-height:160%;
  color: #12141D;
  font-weight: bold;
  margin-bottom:25px;
}

.forgotpassword-content_header p {
    margin-bottom: 22px;
    color: #8F8F8F;
    letter-spacing: -1%;
    font-size: 16px;
    text-align: left;
    line-height: 160%;
}
.forgotpassword-form  span {
  color: #D73838;
}
.forgotpassword-form ul li {
  color: #8F8F8F;
  padding: 3px;
}


.forgotpassword-content_header{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:center;
  margin-bottom: 1.2rem;
  margin: 0 auto;
}


.forgotpassword-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:space-between;
  margin-bottom: 1.2rem;
  margin: 0 auto;
}
.forgotpassword-form input {
  width: 100%;
  /* background-color: #ffffff40; */
  color: #3C3E4A;
  border: 2px solid #E6E6E6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.forgotpassword-form label{
    font-weight: 500;
}
button.button-fill-forgot {
    padding: 11px 32px;
    border: 1px solid #D73838;
    font-size: 16px;
    color: #fff;
    background-color: #D73838;
    border-radius: 4px;
    height: 49px;
    width: 100%;
}

@media only screen and (max-width: 560px) {
    .forgotpassword-content {
  padding: 20px;
}

.forgotpassword-content_header{
    justify-content: flex-start;
}

.forgotpassword-content_header p {
    text-align: left;
}

}

.form-container{
  max-width: 500px;
  margin: 0 auto;
}
.iti {
        width: 100%;

    }
    #id_method-method {
    max-width: 150px;
    margin: 0px auto;
}
    .radio_wraper{
    display: flex;
    color:#8F8F8F;
    }
    .signin-form .radio_wraper input{
    width:auto;
    margin-right: 8px;
    }
.forgotpassword-form ul{
list-style: disc;
margin-left:17px;
}

.forgotpassword-form .errorlist li {
    color: #8F8F8F;
    font-size: 15px;
    margin-top: -4px;
    list-style: none;
    padding-top: 9px;
}
.password-req-wraper {
    font-weight: bold;
    margin-top: 10px;
}
.forgotpassword-form .errorlist{
margin-left: 0px;
}
.errorlist_more .errorlist li{
list-style: disc;
margin-left:17px;
}
.modal-header-custom-color {
    background-color: #2D2D2D;
    color: white;
    text-align: center;
    justify-content: center; /* Center the content */
    position: relative; /* Allow absolute positioning for the close button */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.modal-header .close {
    position: absolute;
    right: 15px;
    top: 15px;
    color: white;
}
.modal-header-custom-color .modal-title {
    font-size: 22px;            /* Same font size as the label */
    font-family: Inter, sans-serif;  /* Ensure the Inter font is applied */
    font-weight: bold;          /* Bold font weight */
    line-height: 110%;          /* Line height for better spacing */
    letter-spacing: -0.1px;     /* Adjust letter spacing for consistency */
    text-align: center;         /* Center text */
}

.signin-form__override {
  display: flex;
  justify-content: center; /* Center contents horizontally */
  width: 100%;
  margin: 0 auto; /* Ensure it's centered in its parent container */
}

.custom-control-label {
  padding-top: 4px; /* Move the checkbox label down slightly for alignment */
}