/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import '../plugins/line-awesome/css/line-awesome.css';
@import url(fonts/recoleta/recoleta.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*----------------------------
   element      
----------------------------*/

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
*{margin:0; padding:0}
a{ text-decoration:none; color: #1A46AB;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 12px; background:#F6F3EC/*#F8F8F8*/;font-family: 'Roboto', sans-serif;line-height: 26px;color:#455A64;-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #455A64;-webkit-font-smoothing: antialiased;}
:-ms-input-placeholder{color: #000;}
/*----------------------------
   content      
----------------------------*/
.auth-height{height: 100vh;}
.rmt-1{margin-top: 1rem;}
.rmt-2{margin-top: 2rem;}
.rmt-3{margin-top: 3rem;}
.rmt-4{margin-top: 4rem;}
.rmt-5{margin-top: 5rem;}

.auth-section {width: 100%; position: relative; }
.auth-content-info {height: 100%;width: 100%;display: flex;align-items: center;}

.auth-logo {margin-bottom: 1rem;text-align: center;}
.auth-logo img {height: 90px;}

.auth-media {padding: 2rem;width: 100%;position: relative;text-align: center;} 
.auth-media img {height: 385px;}


.auth-form-info {background: #ffffff;border-bottom: 3px solid #f28520;box-shadow: 0px 2px 50px rgb(152 144 136 / 5%);border-radius: 14px;margin: 1.75rem auto;/* max-width: 580px; */width: 85%;padding: 50px;}

.auth-form-info h2 {font-size: 30px; line-height: 1.09em; font-family: Recoleta; font-weight: 400; margin: 0; padding: 0; }
.auth-form-info p {font-weight: 300; font-size: 16px; line-height: 32px; margin: 0; padding-top: 0; }
.email-text {font-weight: 300; font-size: 16px; line-height: 32px; color: #f28520; }

.auth-form {margin-top: 1rem;position: relative;}
.auth-form .form-group {margin-bottom: 1rem; } 
.auth-form .form-group label{font-weight: 300;font-size: 16px;line-height: 32px;margin: 0;} 
.auth-form .form-group .form-control {border: 1px solid #e8eae9; height: 55px; line-height: 55px; padding:14px; font-size: 14px; color: #20292f; z-index: 2; position: relative; transition: all 0.3s; background: #FFFFFF; box-shadow: 0px 4px 10px rgba(223, 221, 221, 0.05); border-radius: 5px; }
.action_btn {background: #F28520; box-shadow: 0px 18px 24px rgb(0 0 0 / 10%); border-radius: 5px; font-weight: 700; font-size: 14px; line-height: 24px; text-align: center; color: #FDFDFD; text-shadow: 0px 18px 24px rgb(0 0 0 / 25%); padding: 15px; width: 100%; display: inline-block; border: none; }
.form-footer-text{font-weight: 300; font-size: 16px; line-height: 32px; margin: 0; padding-top: 0; }
.form-footer-text a{color: #F28520;}

.form-otp-text{font-weight: 300; text-align: center;margin-bottom: 1rem; font-size: 16px; line-height: 32px;  }
.form-otp-text a{color: #F28520;}

.account-option-text {font-size: 14px; line-height: 20px; margin-top: 5px; font-family: Recoleta; font-weight: 400; }

.ReCheckbox label {position: relative;display: inline-block;height: auto;cursor: pointer;margin-bottom: 0;width: 100%;border-radius: 15px;padding: 20px 10px;box-shadow: 0px 8px 13px rgb(0 0 0 / 5%);background: #fff;text-align: center;}
.ReCheckbox label::before, 
.ReCheckbox label::after {position: absolute;top: 0;border-radius: 15px;left: 0;display: block;right: 0;bottom: 0;}
.ReCheckbox label::before {content: " ";border: 1px solid #E2EBF2;}
.ReCheckbox input[type="checkbox"]{position: absolute; opacity: 0; z-index: -1; margin: 0; }
.ReCheckbox input[type="checkbox"] + label::after {content: ""; color: #FFC107; font-size: 15px; height: 15px; width: 15px; margin: 0 auto; text-align: center; left: 5px; top: 5px; }
.ReCheckbox input[type="checkbox"]:checked + label::before {border-color: #f28520;}
.ReCheckbox input[type="checkbox"] + label::after{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
.ReCheckbox input[type="checkbox"]:checked + label::after{-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.ReCheckbox input[type="checkbox"]:checked + label .checkbox-circle-mark:before {border: 2px solid #f28520;} 
.ReCheckbox input[type="checkbox"]:checked + label .checkbox-circle-mark:after {display: block; }
.ReCheckbox input[type="checkbox"]:checked + label .account-option-text{color: #f28520;}
.ReCheckbox .checkbox-circle-mark{top: 5px;right: 25px;position: absolute;display: block;}
.ReCheckbox .checkbox-circle-mark:before {content: "\f00c"; font-family: 'Line Awesome Free'; font-weight: 900; width: 20px; height: 20px; border-radius: 100%; position: absolute; border: 2px solid #e9e9e9; background: #fff; font-size: 10px; line-height: 16px; color: #e9e9e9; }
.ReCheckbox .checkbox-circle-mark:after {content: "\f00c";font-family: 'Line Awesome Free';font-weight: 900;display: none;width: 20px;height: 20px;border-radius: 100%;position: absolute;border: 2px solid #f28520;background: #f28520;font-size: 10px;line-height: 16px;color: #fff;}
/*.ReCheckbox .checkbox-circle-mark:after{top: 4px;left: 4px;width: 12px;content: "";display: none;height: 12px;position: absolute;border-radius: 100%;background-color: #f28520;} 
*/

.auth-otp-success-section {background: #ffffff; border-bottom: 3px solid #f28520; box-shadow: 0px 2px 50px rgb(56 123 201 / 20%); border-radius: 14px; margin: 1.75rem auto; /* max-width: 580px; */ width: 85%; padding: 50px; }
.auth-otp-success-box h2 {font-size: 30px;line-height: 1.09em;font-family: Recoleta;font-weight: 400;margin: 0;padding: 0;text-align: center;}
.auth-otp-success-box p {font-weight: 300;font-size: 16px;line-height: 32px;margin: 0 0 1rem 0;padding-top: 0;}
.success-image {text-align: center; margin-bottom: 1rem; }
.Continue-btn{background: #F28520; box-shadow: 0px 18px 24px rgb(0 0 0 / 10%); border-radius: 5px; font-weight: 700; font-size: 14px; line-height: 24px; text-align: center; color: #FDFDFD; text-shadow: 0px 18px 24px rgb(0 0 0 / 25%); padding: 15px; width: 100%; display: inline-block; border: none; }

.grow {animation: grow 2s ease ; } 
@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.pulse {animation: pulse 1s infinite ease-in-out alternate; }
@keyframes pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}

a.Continue-btn:hover {
    color: white;
}