@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     list-style: none;
     text-decoration: none;
     /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
     font-family: 'Poppins', sans-serif;
}

.form-body {
     width: 100%;
     min-height: calc(100vh - 68px);
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     /* border: 1px solid #000; */
}

form {
     width: 320px;
     /* width: 100%; */
     /* background: #fff; */
     border-radius: 3px;
     /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
     padding: 30px 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 15px;
     position: relative;
     margin-bottom: 68px;
}

.form-group {
     width: 100%;
     border-radius: 3px;
     position: relative;
}

.form-group label {
     position: absolute;
     top: 50%;
     left: 12px;
     transform: translateY(-55%);
     font-size: 15px;
     font-weight: 500;
     background: transparent;
     color: #555;
     transition: top 350ms ease-in, font-size 350ms ease-in;

}

.form-group input,
.form-group select,
.submit-btn {
     width: 100%;
     height: 42px;
     outline: 0;
     border: 0;
     padding: 0 10px;
     font-size: 15px;
     font-weight: 500;
     border-radius: 4px;
     border: 1px solid #d3d3d3;

}

.form-group input:valid,
.form-group input:focus {
     border: 1px solid #22c32a;
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
     box-shadow: 0 0 0 30px white inset;
}

.form-group input:valid~label,
.form-group input:focus~label {
     top: 0;
     font-size: 12px;
     background: #fff;
     padding: 0 2px 2px;
     transform: translateY(-50%);
}
.form-group input::placeholder{
     visibility: hidden;
}
.form-group input:focus::placeholder{
     visibility: visible;
}
.submit-btn {
     display: flex;
     max-width: 320px;
     min-width: 300px;    
     height: 45px;
     border-radius: 45px;
     color: #fff;
     background: #22c32a;
     text-transform: uppercase;
}

.options-01 {
     width: 100%;
     height: 20x;
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* border: 1px solid #000; */
}

.options-01 input {
     width: 16px;
     height: 16px;
     background: #000;
     margin: 5px;
}

.options-01 label {
     display: flex;
     height: 20px;
     align-items: center;
}

.options-01 span,
.options-01 a {
     font-size: 14px;
     font-weight: 450;
     margin-bottom: 3px;
}


.options-02 p {
     text-align: center;
     font-size: 12px;
     font-weight: 400;
     color: #333;
     margin-bottom: 5px;
}

.options-01 a,
.options-02 a {
     color: #22c32a;
}





/* Brand Logo  /  form header */
.brand-logo a {
     display: flex;
     height: 36px;
}

.brand-logo img {
     width: 36px;
     height: 36px;
     margin-right: .5rem;
}

.logo-text {
     height: 100%;
     display: flex;
     align-items: flex-start;
     justify-content: center;
     flex-direction: column;
     padding-bottom: 2.5px;
}

.logo-text h3,
.logo-text span {
     text-transform: uppercase;
     color: #18cd5e;
     margin: 0;
     padding: 0;
}

.logo-text h3 {
     letter-spacing: 3.4px;
     line-height: 20px;
}

.logo-text span {
     font-size: 12px;
     letter-spacing: .8px;
     line-height: 12px;
     padding-left: .5px;

}

.form-header {
     width: 100%;
     background: #fff;
     padding: 1rem;
     position: sticky;
     top: 0;
     left: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
}
.login-btn{
     color: #fff;
     background: #22c32a;
     padding: 8px 20px;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 500;
}




/* Error  */

.content {
     width: 100%;
     /* padding: 0; */
     /* position: absolute;
     top: 0;
     left: 0; */
     display: none;
}

.close {
     float: right;
     font-weight: bold;
     line-height: 1;
     color: #000;
     text-shadow: 0 1px 0 #fff;
     opacity: .2;
     border: none;
     margin-top: 3px;
}

.close:hover,
.close:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
     opacity: .5;
}

button.close {
     padding: 0;
     cursor: pointer;
     background: transparent;
     /* -webkit-appearance: none; */
}

button.close i {
     font-size: 15px;
}

.alert {
     width: 100%;
     padding: 5px;
     /* margin-bottom: 20px; */
     border: 1px solid transparent;
     border-radius: 4px;

}

.alert-dismissable .close {
     position: relative;
     top: -2px;
     right: -21px;
     color: inherit;
}

.alert-success {
     background: #dff0d8;
     border-color: #d6e9c6;
     color: #22c32a;
}

.alert-info {
     background: #d9edf7;
     border-color: #bce8f1;
     color: #31708f;
}

.alert-warning {
     background: #fcf8e3;
     border-color: #faebcc;
     color: #8a6d3b;
}

.alert-danger {

     background: #f2dede;
     border-color: #ebccd1;
     /* color: #a94442; */
     color: red;
}

.alert {
     padding: 10px;
     border-radius: 0;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
}

.alert-white {
     padding-left: 61px;
     position: relative;
}

.alert-white .icon {
     text-align: center;
     width: 45px;
     height: 104%;
     position: absolute;
     top: -1px;
     left: -1px;
     border: 1px solid #bdbdbd;
}

.alert-white .icon::after {
     transform: rotate(45deg);
     display: block;
     content: '';
     width: 10px;
     height: 10px;
     border: 1px solid #bdbdbd;
     position: absolute;
     border-left: 0;
     border-bottom: 0;
     top: 50%;
     right: -6px;
     margin-top: -5px;
     background: white;
}

.alert-white.rounded {
     border-radius: 3px;
}

.alert-white.rounded .icon {
     border-radius: 3px 0 0 3px;
}

.alert-white .icon i {
     font-size: 20px;
     color: #fff;
     position: absolute;
     left: 10px;
     top: 50%;
     margin-top: -10px;
}

.alert-white.alert-danger .icon,
.alert-white.alert-danger .icon::after {
     background: red;
     color: red;
     /* background: #ca452e;
     color: #da4932; */
}

.alert-white.alert-info .icon,
.alert-white.alert-info .icon:after {
     background: #3a8ace;
     color: #4d90fd;
}

.alert-white.alert-warning .icon,
.alert-white.alert-warning .icon::after {
     background: #d68000;
     color: #fc9700;
}

.alert-white.alert-success .icon,
.alert-white.alert-success .icon::after {
     background: #22c32a;

     /* background: #54a754;
     color: #60c060; */
}
/* 
.error-message {
     display: flex;
     /* text-wrap: nowrap; 
} */
strong{
     margin-right: 10px;
}
.incorrect {
     border-color: red;
}





.container {
     position: relative;
     max-width: 460px;
     width: 100%;
     background: #fff;
     border-radius: 4px;
     padding: 30px;
     margin: 0 20px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .input-box {
     position: relative;
}

.form-group .show_hide {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #A6A6A6;
     padding: 5px;
     cursor: pointer;
}

.indicator {
     display: none;
}

.indicator.active {
     display: block;
     margin-top: 14px;
}

.indicator .icon-text {
     display: flex;
     align-items: center;
}

.icon-text .error_icon {
     margin-right: 8px;
}

.icon-text .text {
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 1px;
}






#modal {
     width: min(90vw, 500px);
     background-color: #ffffff;
     padding: 3.5rem 2rem 2.5rem;
     border-radius: 10px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     display: none;
     z-index: 102;
     /* Above Overlay */
     transition: all .5s;
}

#modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: none;
     z-index: 101;
}

.heading h1 {
     text-align: center;
     font-size: 25px;
     margin-bottom: 20px;
     color: #22c32a;
}

.btn-div {
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin-top: 30px;
}

button {
     border: none;
     color: #ffffff;
}

#close-btn-1 {
     position: absolute;
     color: #555;
     background: transparent;
     height: 30px;
     width: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     top: 1rem;
     right: 1rem;
}

.btn {
     width: 40%;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     background: #22c32a;
     font-size: 15px;
     font-weight: 500;
     text-decoration: none;
     color: #ffffff;
}

p {
     color: #555;
     text-align: center;
     margin-bottom: 15px;
}

#Opn-modal-btn {
     background-color: #22c32a;
     width: 300px;
     padding: 30px;
     font-size: 20px;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
}

.icon {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     width: 100%;
     margin-bottom: 30px;
}

.icon-ok {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: #22c32a;
     font-size: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
}

@media screen and (max-width: 480px) {
     #modal {
          padding: 3rem 1rem 2rem;
     }
}