/*  ====== Fonts Include ====== */
@import url('fonts.css');

/* ====== Common Css Start ====== */
:root {
  --transparent: #0000;
  --white: #FFFFFF;
  --white-64: rgba(255, 255, 255, 0.64);
  --white-24: rgba(255, 255, 255, 0.64);
  --dark: #000000;
  --dark-87: #1E201F;
  --dark-64: rgba(0, 0, 0, 0.64);
  --dark-40: rgba(0, 0, 0, 0.40);
  --dark-32: rgba(0, 0, 0, 0.32);
  --dark-24: rgba(0, 0, 0, 0.24);
  --dark-21: #C0C2C3;
  --dark-08: rgba(0, 0, 0, 0.08);
  --primary: #00B2FF;
  --hover-primary: #00a3e9;
  --secondary: #D2DADE;
  --secondary-48: #EAEEF0;
  --secondary-24: #F4F6F7;
  --danger: #E94040;
  --dark-danger: #AC2626;
  --success: #2ACC61;
  --light-success: #E5F8EC;
  --warning: #FF9900;
  --light: #E9EDEF;
  --light-50: rgba(233, 237, 239, 0.50);
  --box-shadow: 0px 2px 3px 0px var(--dark-08);
}

.row > * {
  padding: 0 8px !important;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'robotoregular', sans-serif; font-weight: normal; background-color: var(--light); height: 100vh; overflow: hidden; }
a { text-decoration: none !important; }
ul { list-style: none; padding-left: 0 !important; }

/* ====== Scroll ====== */
/* width */
::-webkit-scrollbar { width: 6px; height: 6px; }
/* Track */
::-webkit-scrollbar-track { background: var(--white); }
/* Handle */
::-webkit-scrollbar-thumb { background: #85919e; border-radius: 4px; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #00c0ef;}
/* Works on Firefox */
* { scrollbar-width: thin; scrollbar-color: #85919e var(--transparent); }
/* Works on Chrome, Edge, and Safari */
/* width */
*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: var(--white); }
/* Handle */
*::-webkit-scrollbar-thumb { background-color: #85919e; border-radius: 4px; border: none; }
/* Handle on hover */
*::-webkit-scrollbar-thumb:hover { background-color: #00c0ef; }

:focus { outline: 0; box-shadow: none !important; }
.row { padding: 0 4px; }
.max-width { max-width: 1440px; }
.card { border-radius: 16px; border: 0; box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.04);  }
.card-body { padding: 64px; }
/* ====== Common Css End ====== */

/* ====== Button ====== */
.btn { border-radius: 6px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.08);  }
.btn:focus, .btn:active { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.08) !important;  }
.btn-primary { background-color: var(--primary); border: 1px solid var(--primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--hover-primary) !important; border: 1px solid var(--hover-primary) !important; }

/* ====== Checkbox ====== */
.form-check .form-check-input { background-color: transparent !important; border: 0; }
.form-check .form-check-input[type="checkbox"] { background-image: url('../images/checkbox-uncheck.svg') !important; width: 18px; height: 18px; }
.form-check .form-check-input:checked[type="checkbox"] { background-image: url('../images/checkbox-check.svg') !important; width: 18px; height: 18px; }
.form-check .form-check-label { font-size: 14px; color: var(--dark-87); }

/* ====== Forms ====== */
.form-group { margin-bottom: 16px; }
.form-label { font-size: 13px; color: var(--dark-64); margin-bottom: 10px; }
.form-control { border-radius: 6px; font-size: 14px; color: var(--dark-87); }
.form-control:focus { border-color: var(--secondary); }

/* ====== Custom Alerts Start ====== */
.danger-error { font-size: 13px; color: var(--danger); font-family: 'robotomedium', sans-serif; font-weight: normal; display: flex; align-items: center; padding: 2px 0; }
.success-error { font-size: 13px; color: var(--success); font-family: 'robotomedium', sans-serif; font-weight: normal; display: flex; align-items: center; padding: 2px 0; }
.danger-error i, .success-error i { font-size: 15px; margin-right: 6px; }
/* ====== Custom Alerts End ====== */

/* ====== Jquery Error Css Start ====== */
.error-container { font-size: 13px; color: var(--danger); font-family: 'robotomedium', sans-serif; font-weight: normal; display: flex; align-items: center; padding: 2px 0; }
.error-container i { font-size: 15px; margin-right: 6px; }
/* ====== Jquery Error Css End ====== */

/* ====== Login Page ====== */
.page-wrapper { height: 100vh; display: flex; align-items: center; background: url('../images/login/login-bg.webp') no-repeat left; background-size: auto 100%; }
.page-logo { margin-bottom: 64px; }
.login-btn { margin-top: 20px; width: 100%; }
.login-clock { position: absolute; top: 80px; left: 80px; }
#clock { font-size: 45px; color: #fff; }
#clock .clock-slesh { opacity: 0.24; }
.powered-by { position: absolute; bottom: 60px; right: 60px; }