/*----------------------------
         Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.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      
----------------------------*/

:root {
  --black:#000;
  --white:#ffffff;
  --yellow: #FDE67E;
  --darkbrown:#684314;
  --cardheadbg:#2C2C2C;
  --cardbg: #252424;
  --body:#000;
  --scrollbarBG:#261313;
  --thumbBG:#FDE67E;
  --border:#898993;
}


::-webkit-scrollbar {width:5px;  }
::-webkit-scrollbar-track {background: var(--scrollbarBG); } 
::-webkit-scrollbar-thumb {background-color: var(--thumbBG) ; border-radius: 6px; border: 3px solid var(--scrollbarBG); }


* {-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: var(--brown);}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-family: "Roboto", sans-serif;background: radial-gradient(circle, rgba(55,55,55,1) 0%, rgba(0,0,0,1) 100%);-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #fff;-webkit-font-smoothing: antialiased;}
:-ms-input-placeholder{color: #000;}
.wd10{width: 10%;}
.wd20{width: 20%;}
.wd30{width: 30%;}
.wd40{width: 40%;}
.wd50{width: 50%;}
.wd60{width: 60%;}
.wd70{width: 70%;}
.wd80{width: 80%;}
.wd90{width: 90%;}
.wd100{width:100%;} 
/*----------------------------
   Auth      
----------------------------*/

.auth-section {display: flex; align-items: center; height: 100vh;    justify-content: center; width: 100% }
.auth-height {height: 100vh; }
.auth-content-card {width: 38%; }

.auth-form h2 {font-size: 24px; font-weight: 600; color: var(--yellow); margin: 0; padding: 0; }
.auth-form p {font-size: 14px; font-weight: 300; color: var(--white); margin: 0; padding: 0; }
.auth-card {position: relative; background: rgb(47 46 46 / 63%); box-shadow: 0px 4px 70px 10px rgba(0, 0, 0, 0.08); border-radius: 5px; backdrop-filter: blur(10px); }
.brand-logo{margin-bottom: 1rem;}
.brand-logo img{height: 100px}
.forgotpsw-text a {font-size: 14px; color:var(--white); }

.auth-content {padding: 4rem 2rem; position: relative; text-align: center; border-radius: 15px 0 0 15px; }
.auth-form-info {margin: 0px; padding: 0px; display: flex; align-items: center; flex-wrap: wrap; background: var(--white); }
.auth-form {padding: 55px; width: 100%; min-height: 450px; max-width: 580px; text-align: center; }
.auth-form .form-group {margin-bottom: 1rem; }
.auth-form .form-group label {color: #fff; font-size: 14px; font-weight: 600; }
.auth-form input.form-control {background: transparent; 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(--white); box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); }
.auth-form input.form-control:focus {border: 1px solid var(--yellow); }
.auth-form input.form-control::-ms-input-placeholder { /* Edge 12-18 */ color: var(--border); }
.auth-form input.form-control::placeholder {color: var(--border); }
button.auth-form-btn {outline: none; width: 100%; padding: 15px 40px; display: inline-block; color: var(--darkbrown); font-size: 14px; font-weight: 600; border-radius: 5px; border: none; box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.05); background: linear-gradient(180deg, rgba(183, 126, 43, 1) 0%, rgba(254, 239, 146, 1) 50%, rgba(183, 126, 43, 1) 100%); }