/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/*----------------------------
   element      
----------------------------*/
:root {
    --blue:#3370ed;
    --blue1:#0d72b9;
    --black:#111216;
    --green:#7ec247;
    --border:#c2cfe9;
    --placeholder:#c2cfe9;
    --black:#404040;
    --red:#FF2222;
    --gray:#404654;
    --lightgray:#f5f5f5;
    --white:#ffffff;
    --body:#f2f2f2;
}

* {-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;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 14px; background:var(--body);  font-family: "Quicksand", sans-serif;line-height: 26px;color:var(--black);-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;font-weight: normal;-webkit-font-smoothing: antialiased;}



    
.auth-section {display: flex; align-items: center; height: 100vh; position: relative;} 
.auth-section .container {max-width: 35%; }
.auth-card {position: relative;padding: 2rem; background:var(--white);box-shadow: 0px 4px 70px 10px rgba(0, 0, 0, 0.08);border-radius: 20px;}
.auth-form  h2 {font-size: 24px; font-weight: 600; color: var(--black); margin: 0; padding: 0; text-align:center; }
.auth-form  p {font-size:14px; font-weight: 300; color: var(--black); margin: 0 0 1rem 0; padding: 0; text-align:center;}

.brand-logo {text-align: center; display: flex ; align-items: center; justify-content: center; margin: 0 auto 0rem auto; background: var(--purple); padding: 1rem; }
.brand-logo img{height:100px}


.auth-form .form-group {margin-bottom: 10px; }
.auth-form .form-group label {color: #fff; font-size: 14px; font-weight: 600; }
.auth-form input.form-control {background: var(--white); border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding: 0.94rem 0.94rem; outline: 0; width: 100%; display: inline-block; color: var(--black); box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.05); }
.authinput-group{position: relative;}
.authinput-group-text{position: absolute;right:10px; top: 10px;}
.auth-form select.form-control {background:var(--white); appearance: auto; border-radius: 5px;font-size: 13px;border: 1px solid var(--border);font-weight: 400;height: auto;padding: 0.94rem 0.94rem;outline: 0;width: 100%;display: inline-block;color:var(--black);box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05);}
.auth-form input.form-control:focus {border: 1px solid var(--blue); }

.auth-form input.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:var(--placeholder); }
.auth-form input.form-control::-moz-placeholder { /* Firefox 19+ */ color:var(--placeholder); }
.auth-form input.form-control:-ms-input-placeholder { /* IE 10+ */ color: var(--placeholder); }
.auth-form input.form-control:-moz-placeholder { /* Firefox 18- */ color:var(--placeholder); }
.forgotpsw-text a {font-size: 14px; color: var(--blue); }
.forgotpsw-text {font-size: 14px; color: var(--black); }

 button.auth-form-btn {outline: none;width: 100%;padding: 12px 40px;display: inline-block;color:var(--white);font-size: 14px;font-weight: 600;border-radius: 5px;border: none;background:var(--blue);box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.05);}