/*
	*******************
	Template name:  ClassOClock
	Version:        1.0
	Author:         6amtech
	Author url:     https://6amtech.com/

	NOTE:
	-----
	Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
	We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

    ******** CSS INDEX ********
    01. Base
        1.1 Typography 
        1.2 Spacing
        1.3 Color
    02. Components
        2.1 Helper
        2.2 Animation
        2.3 Social List
        2.4 Inputs
        2.5 Buttons
        2.6 Widget
        2.7 Pagination
        2.8 Customize
        2.9 Preloader
        2.10 Circular Progress
        2.11 Card
        2.12 Common
    03. Layout
        3.1 Header
        3.2 Footer
        3.3 Aside
        3.4 Main Area
        3.5 Theme Switcher
        3.6 RTL
        3.7 Filter Aside
        3.8 Login
    04. Theme
        4.1 Dark Theme
    05. Main
        5.1 Main
    ********************/
:root {
  --bs-primary: #0A52BB;
  --bs-primary-rgb: 10, 82, 187;
  --primary-light: #D9F1FE;
  --primary-light-rgb: 217, 241, 254;
  --primary-gradient: radial-gradient(93.28% 279.09% at 50% 50%, var(--bs-primary) 0%, #246AD1 31.25%, #1860C8 64.58%, var(--bs-primary) 100%);
  --title-color: #292A2B;
  --title-color-rgb: 41, 42, 43;
  --bs-body-color: #7D8584;
  --secondary-body-color: #CDCDCD;
  --absolute-dark: #292A2B;
  --absolute-white: #fff;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --grey-1: #9DA7BC;
  --grey-2: #C5C8CB;
  --bs-body-bg-rgb: 252, 252, 252;
  --bs-body-bg: #FCFCFC;
  --bs-border-rgb: 208, 219, 233;
  --bs-border-color: #D0DBE9;
  --bs-light-rgb: 241, 247, 252;
  --bs-light: #F1F7FC;
  --bs-danger-rgb: 240, 85, 67;
  --bs-danger: #F05543;
  --bs-success-rgb: 3, 157, 85;
  --bs-success: #039D55;
  --bs-info-rgb: 3, 157, 85;
  --bs-warning-rgb: 255, 163, 0;
  --bs-warning: #FFA300;
  --bs-dark-rgb: 41, 42, 43;
  --bs-dark: #292A2B;
  --bs-border-radius: .5rem;
  --dropdown-box-shadow: rgba(145, 158, 171, .24) 0px 0px 4px 0px,
        rgba(145, 158, 171, .24) -10px 10px 40px -4px;
  --bs-body-font-family: 'Inter', sans-serif;
  --title-font-family: 'Inter', sans-serif;
  --thin: 100;
  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --dark-color-bold: 900;
  --bs-body-font-size: 0.875rem;
  --h1_fs: 2rem;
  --h2_fs: 1.625rem;
  --h3_fs: 1.25rem;
  --h4_fs: 1.125rem;
  --h5_fs: 1rem;
  --h6_fs: 0.875rem;
  --bs-body-line-height: 1.4;
  --title-line-height: 1.2;
}

[theme="dark"] {
  --bs-body-color: #CCD0D3;
  --bs-white: #232325;
  --bs-white-rgb: 35, 35, 37;
  --input-bg: #3a3a3a;
  --title-color: rgba(255, 255, 255, 0.8);
  --absolute-white: rgba(255, 255, 255, .8);
  --title-color-rgb: 255, 255, 255;
  --bs-light-rgb: 47, 47, 47;
  --bs-light: #2f2f2f;
  --bs-body-bg-rgb: 24, 24, 26;
  --bs-body-bg: #18181A;
  --bs-border-rgb: 73, 73, 73;
  --bs-border-color: #494949;
  --bs-dark-rgb: 230, 230, 230;
  --dropdown-box-shadow: rgba(145, 158, 171, .1) 0px 0px 4px 0px,
            rgba(145, 158, 171, .1) -10px -10px 40px -4px;
}

/* ************************
   01.1: Reset
   ********************* */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--bs-primary);
}

body {
  --bs-body-text-align: start;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}

@media only screen and (max-width: 479px) {
  body {
    --bs-body-font-size: 0.75rem;
  }
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

label {
  text-transform: capitalize;
  color: var(--title-color);
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--bold);
  line-height: var(--title-line-height);
  font-family: var(--title-font);
  color: var(--title-color);
}

h1, .h1 {
  font-size: var(--h1_fs);
}

h2, .h2 {
  font-size: var(--h2_fs);
}

h3, .h3 {
  font-size: var(--h3_fs);
}

h4, .h4 {
  font-size: var(--h4_fs);
}

h5, .h5 {
  font-size: var(--h5_fs);
}

h6, .h6 {
  font-size: var(--h6_fs);
}

p {
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 1.25rem;
  margin-block-end: 1.25rem;
}

p:last-child {
  -webkit-margin-after: 0;
  margin-block-end: 0;
}

a {
  color: var(--title-color);
  text-decoration: none;
}

a:hover {
  color: var(--bs-primary);
}

button {
  color: var(--title-color);
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type="checkbox"] {
  -webkit-margin-end: 0.3125rem;
  margin-inline-end: 0.3125rem;
}

::-moz-selection {
  text-shadow: none;
  color: var(--absolute-white);
  background-color: var(--bs-primary) !important;
}

::selection {
  text-shadow: none;
  color: var(--absolute-white);
  background-color: var(--bs-primary) !important;
}

::-webkit-input-placeholder {
  color: var(--title-color) !important;
  opacity: 0.4 !important;
}

::-moz-placeholder {
  color: var(--title-color) !important;
  opacity: 0.4 !important;
}

:-ms-input-placeholder {
  color: var(--title-color) !important;
  opacity: 0.4 !important;
}

::-ms-input-placeholder {
  color: var(--title-color) !important;
  opacity: 0.4 !important;
}

::placeholder {
  color: var(--title-color) !important;
  opacity: 0.4 !important;
}

iframe {
  max-width: 100%;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}

img {
  max-inline-size: 100%;
  height: auto;
}

ol {
  -webkit-padding-start: 1.25rem;
  padding-inline-start: 1.25rem;
}

ol li:not(:last-child) {
  -webkit-margin-after: 0.3125rem;
  margin-block-end: 0.3125rem;
}

[data-bs-toggle="tooltip"] {
  cursor: pointer;
}

.fi {
  line-height: 1;
}

/* ************************
   01.2: Padding/Margin
   ********************* */
.mt-30 {
  -webkit-margin-before: 1.875rem;
  margin-block-start: 1.875rem;
}

.mt-10 {
  -webkit-margin-before: 0.625rem;
  margin-block-start: 0.625rem;
}

.mb-30 {
  -webkit-margin-after: 1.875rem;
  margin-block-end: 1.875rem;
}

.mb-10 {
  -webkit-margin-after: 0.625rem;
  margin-block-end: 0.625rem;
}

.gap-10 {
  gap: 0.625rem !important;
}

.gap-20 {
  gap: 1.25rem !important;
}

.gap-30 {
  gap: 1.875rem !important;
}

.mt-n1 {
  -webkit-margin-before: -0.25rem !important;
  margin-block-start: -0.25rem !important;
}

.mb-n-1 {
  -webkit-margin-after: -0.25rem !important;
  margin-block-end: -0.25rem !important;
}

.mt-n2 {
  -webkit-margin-before: -0.5rem !important;
  margin-block-start: -0.5rem !important;
}

.mb-n-2 {
  -webkit-margin-after: -0.5rem !important;
  margin-block-end: -0.5rem !important;
}

.mt-n3 {
  -webkit-margin-before: -1rem !important;
  margin-block-start: -1rem !important;
}

.mb-n-3 {
  -webkit-margin-after: -1rem !important;
  margin-block-end: -1rem !important;
}

.mt-n4 {
  -webkit-margin-before: -1.5rem !important;
  margin-block-start: -1.5rem !important;
}

.mb-n-4 {
  -webkit-margin-after: -1.5rem !important;
  margin-block-end: -1.5rem !important;
}

.mt-n5 {
  -webkit-margin-before: -3rem !important;
  margin-block-start: -3rem !important;
}

.mb-n-5 {
  -webkit-margin-after: -3rem !important;
  margin-block-end: -3rem !important;
}

.mt-n30 {
  -webkit-margin-before: -1.875rem !important;
  margin-block-start: -1.875rem !important;
}

.mb-n-30 {
  -webkit-margin-after: -1.875rem !important;
  margin-block-end: -1.875rem !important;
}

.p-30 {
  padding: 1.875rem !important;
}

@media only screen and (max-width: 479px) {
  .p-30 {
    padding: 1.25rem 1rem !important;
  }
}

.p-20 {
  padding: 1.25rem !important;
}

@media only screen and (max-width: 479px) {
  .p-20 {
    padding: 1.25rem 1rem !important;
  }
}

/* ************************
   01.3: Color
   ********************* */
.text-color {
  color: var(--bs-body-color) !important;
}

.text-color-bg {
  background-color: var(--bs-body-color) !important;
}

.text-color-bo {
  border-color: var(--bs-body-color) !important;
}

.title-color {
  color: var(--title-color) !important;
}

.title-color-bg {
  background-color: var(--title-color) !important;
}

.title-color-bo {
  border-color: var(--title-color) !important;
}

a, .dataTables_wrapper .dt-button > span, .aside-body .nav li.has-sub-item:after {
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.footer-menu, .list-inline, .list-key-value {
  -webkit-padding-start: 0 !important;
  padding-inline-start: 0 !important;
}

.count-btn .count, [type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before, [type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after, .switcher_control::after {
  border-radius: 100% !important;
}

.search-form__input_group, .pagination li:first-child > a,
.pagination li:first-child > span, .pagination li:last-child > a,
.pagination li:last-child > span, .select2-container--default .select2-selection--multiple, .aside-body .nav li > a, .aside-body .nav ul li {
  border-radius: 0.25rem !important;
}

.dropdown-menu,
.card, .user-profile, .setting-box {
  border-radius: 0.625rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice, .switcher_control, .aside-body .nav li .link-title .count {
  border-radius: 6.25rem !important;
}

.select2-dropdown,
.card, .box-shadow, .header, .settings-sidebar, .setting-box {
  -webkit-box-shadow: 0rem 0.5rem 1.5rem -0.25rem rgba(145, 158, 171, 0.05);
  box-shadow: 0rem 0.5rem 1.5rem -0.25rem rgba(145, 158, 171, 0.05);
}


.btn:hover,
.btn:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.aside-body .nav li .link-title .count {
  line-height: 1;
}

/* ************************
   02.1: Helper Classes
   ********************* */
/* Option Select */
/* Events */
/* common List */
/* Badge */
/* upload file */
/* Rating Review */
/* Analytical Data Card */
.footer-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  row-gap: 1rem;
  -webkit-column-gap: 1.875rem;
  -moz-column-gap: 1.875rem;
  column-gap: 1.875rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.footer-menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
}

/* Dark theme for Summernote */
.table-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .5rem;
}

/*dropzone*/
.drop-zone {
  --mxWidth: 100%;
  max-inline-size: var(--mxWidth);
  block-size: 140px;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  max-inline-size: 200px;
  inline-size: 100%;
  block-size: 100%;
  border-radius: .5rem;
  overflow: hidden;
  background-color: var(--bs-light);
  background-size: cover;
  background-position: center center;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  padding: .3125rem;
  color: var(--absolute-white);
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center;
  font-size: .75rem;
}

/* ************************
   02.2: Animations
   ********************* */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

@-webkit-keyframes ripple {
  from {
    width: 0.1%;
    height: 0.1%;
    opacity: 1;
  }
  to {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

@keyframes ripple {
  from {
    width: 0.1%;
    height: 0.1%;
    opacity: 1;
  }
  to {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

@-webkit-keyframes growProgressBar {
  0%,
  33% {
    --pgPercentage: 0;
  }
  100% {
    --pgPercentage: var(--value);
  }
}

@keyframes growProgressBar {
  0%,
  33% {
    --pgPercentage: 0;
  }
  100% {
    --pgPercentage: var(--value);
  }
}

/* ************************
   02.3: Social List
   ********************* */
/* ************************
   03.4: Inputs
   ********************* */
/* form control */
.form-select,
.form-control {
  background-color: var(--bs-white);
  color: var(--title-color);
  block-size: 2.8125rem;
  font-size: var(--bs-body-font-size);
}

[theme="dark"] .form-select, [theme="dark"]
.form-control {
  border-color: #505050;
}

.form-select::file-selector-button,
.form-control::file-selector-button {
  block-size: 2.6875rem;
}

[theme="dark"] .form-select::file-selector-button, [theme="dark"]
.form-control::file-selector-button {
  background-color: #959595;
}

.form-select:focus, .form-select:active,
.form-control:focus,
.form-control:active {
  border-color: var(--input-border-color-active);
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: var(--bs-white);
  color: var(--title-color);
}

textarea.form-control,
textarea.theme-input-style {
  block-size: auto;
}

.input-group > .theme-input-style {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.search-form__input_group {
  background-color: var(--input-bg);
  padding: 0rem 0.3125rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  block-size: 2rem;
}

.search-form__icon {
  border: none;
  padding: 0.3125rem;
  background-color: transparent;
  opacity: 0.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.search-form__icon .material-icons {
  font-size: 1.25rem;
}

.search-form__input {
  height: 1.375rem;
  padding: 0;
  border: none;
  background-color: transparent;
}

.search-form_style-two {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.3125rem;
}

.search-form .btn {
  block-size: 2rem;
}

/* Input Group */
.input-group_tooltip {
  position: relative;
}

.input-group_tooltip input {
  -webkit-padding-end: 2.1875rem;
  padding-inline-end: 2.1875rem;
}

.input-group_tooltip .tooltip-icon {
  position: absolute;
  inset-inline-end: 0.625rem;
  inset-block-start: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1.875rem var(--bs-white) inset !important;
  -webkit-text-fill-color: var(--title-color) !important;
}

/* ************************
   02.5: Buttons
   ********************* */
.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.375rem;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
  font-weight: var(--medium);
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: .25rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.5rem;
}

.btn:hover svg path, .btn:focus svg path {
  fill: var(--absolute-white);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #0b61df;
  --bs-btn-hover-border-color: #0b61df;
  --bs-btn-active-bg: #0b61df;
  --bs-btn-active-border-color: #0b61df;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #293231;
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
  --bs-btn-hover-bg: rgb(221, 232, 242);
  --bs-btn-hover-border-color: rgb(221, 232, 242);
  --bs-btn-hover-color: var(--bs-btn-color);
}

[theme="dark"] .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #676f75;
  --bs-btn-border-color: #676f75;
  --bs-btn-disabled-bg: #676f75;
  --bs-btn-disabled-border-color: #676f75;
  --bs-btn-hover-bg: #4b5155;
  --bs-btn-hover-border-color: #4b5155;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-link {
  border: none;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  gap: 0.3125rem;
}

.count-btn {
  position: relative;
}

.count-btn i, .count-btn .material-icons {
  font-size: 1.25rem;
}

.count-btn .count {
  position: absolute;
  inset-inline-end: -0.625rem;
  inset-block-start: -0.625rem;
  background-color: var(--bs-danger);
  color: var(--absolute-white);
  font-size: 0.625rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  display: grid;
  place-items: center;
}

.count-btn:hover {
  color: var(--title-color);
}

.btn-action {
  inline-size: 1.625rem;
  min-inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: 0.3125rem;
  padding: 0.3125rem;
  display: grid;
  place-items: center;
}

/* ************************
   02.6: Widget
   ********************* */
/* ************************
   02.7: Pagination
   ********************* */
.pagination li:first-child > a,
.pagination li:first-child > span, .pagination li:last-child > a,
.pagination li:last-child > span {
  border: 0.5px solid var(--bs-border-color);
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.25rem;
}

.pagination li:first-child {
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.pagination li:last-child {
  -webkit-margin-start: 0.5rem;
  margin-inline-start: 0.5rem;
}

.pagination li.active > a,
.pagination li.active > span {
  color: var(--title-color);
}

/* ************************
02.8: Customize Bootstrap CSS
********************* */
.select2-container {
  inline-size: 100% !important;
  min-inline-size: 9.375rem;
}

@media only screen and (max-width: 479px) {
  .select2-container {
    min-width: 6.25rem;
  }
}

[dir="rtl"] .select2-container {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow {
  right: auto;
  left: 1px;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: 0.625rem;
  margin-left: 0.625rem;
}

.select2-container--default .select2-selection--multiple {
  background-color: var(--bs-white);
  border-color: var(--input-border-color);
  cursor: text;
  min-block-size: 45px;
}

[theme=dark] .select2-container--default .select2-selection--multiple {
  border-color: #505050;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--input-border-color-active);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #F3F4F5;
  border: none;
  padding: 0.375rem 1rem 0.375rem 1.625rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border: none;
  color: var(--bs-body-color);
  font-size: 1.25rem;
  padding: 0 0.25rem 0 0.5rem;
  top: 0.0625rem;
}

.select2-container--default .select2-selection--single {
  background-color: var(--bs-white);
  border-color: var(--input-border-color);
  min-block-size: 2.8125rem;
}

[theme=dark] .select2-container--default .select2-selection--single {
  border-color: #505050;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--title-color);
}

.select2-dropdown {
  background-color: var(--bs-white);
  border-color: var(--bs-border-color);
}

.select2-container--default .select2-results__option--selected {
  background-color: rgba(255, 255, 255, 0.1);
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  border-left: 0px solid #aaa;
}

/* Nav Tabs */
.nav--tabs .nav-link {
  line-height: 1;
  padding: 0.5625rem 0.9375rem;
  border-bottom: 2px solid transparent;
}

.nav--tabs .nav-link.active {
  font-weight: var(--bold);
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.nav {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  --bs-nav-link-color: var(--title-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}

.dropdown-item {
  text-align: start;
}

.table {
  --bs-table-color: var(--title-color);
  --bs-table-hover-bg: #f9f9f9;
  --bs-table-striped-color: var(--title-color);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.01);
  --bs-table-bg: var(--bs-white);
  font-size: 0.75rem;
}

[theme=dark] .table {
  --bs-table-hover-bg: #222;
}

.table-light {
  --bs-table-color: var(--bs-primary);
  --bs-table-bg: rgba(var(--bs-primary-rgb), .1);
}

.dropdown-menu {
  --bs-dropdown-font-size: var(--bs-body-font-size);
}

.dataTables_wrapper .top, .dataTables_wrapper .bottom, .dataTables_wrapper .table {
  min-width: 700px;
}

.dataTables_wrapper .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-margin-after: 1rem;
  margin-block-end: 1rem;
}

.dataTables_wrapper .top .dataTables_filter > label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  gap: .25rem;
}

.dataTables_wrapper .top .dataTables_filter .search-btn {
  background-color: var(--bs-primary);
  border-radius: .25rem;
  padding: .25rem 1rem;
  font-size: .75rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--absolute-white);
}

.dataTables_wrapper .top .dataTables_filter input[type=search] {
  font-size: .75rem;
  height: 2rem;
}

.dataTables_wrapper .bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  -webkit-margin-before: 1rem;
  margin-block-start: 1rem;
}

.dataTables_wrapper .dataTables_length {
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  -webkit-margin-end: 1.875rem;
  margin-inline-end: 1.875rem;
}

.dataTables_wrapper .clear {
  display: none;
}

.dataTables_wrapper .dt-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .5rem;
}

.dataTables_wrapper .dt-buttons .dt-button:last-child > span {
  background-color: var(--bs-primary);
  color: var(--absolute-white);
}

.dataTables_wrapper .dt-buttons .dt-button:last-child > span:hover {
  opacity: .9;
}

.dataTables_wrapper .dt-button {
  padding: 0;
  border: none;
}

.dataTables_wrapper .dt-button,
.dataTables_wrapper .dt-button > span {
  background: transparent;
  border-color: var(--bs-border-color);
  border-radius: .25rem;
  color: var(--title-color);
  margin-bottom: 0;
}

.dataTables_wrapper .dt-button > span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .35rem;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  padding: .5rem 1rem;
}

.dataTables_wrapper .dt-button > span:hover {
  background-color: var(--bs-primary);
  color: var(--absolute-white);
}

.dataTables_wrapper .dataTables_info {
  opacity: .5;
  color: var(--title-color);
}

.dataTables_wrapper .dataTables_paginate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: .5rem;
}

table.dataTable thead th, table.dataTable thead td {
  background-color: var(--bs-light);
  border-bottom: none;
  color: var(--title-color);
}

table.dataTable thead th, table.dataTable thead td,
table.dataTable tbody th, table.dataTable tbody td {
  padding: 15px 20px;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
  top: auto;
}

table.dataTable tbody tr.selected > * {
  -webkit-box-shadow: inset 0 0 0 9999px rgba(var(--bs-light-rgb), 0.7);
  box-shadow: inset 0 0 0 9999px rgba(var(--bs-light-rgb), 0.7);
  color: var(--title-color);
}

table.dataTable.no-footer {
  border-bottom: none;
}

.dataTables_wrapper .dataTables_filter input {
  color: var(--title-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--title-color) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  border: none;
  border-radius: .25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #f5f5f5 !important;
  border: none;
  background: var(--bs-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  border: none;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
  border-color: var(--title-color);
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled), input.dt-button:hover:not(.disabled) {
  border: none;
  background: transparent;
}

.buttons-csv span {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: .125rem !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: .75rem;
  line-height: 1;
}

.dataTables_wrapper .dataTables_length select {
  border: none;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
  position: static;
  width: 1rem;
  height: 1rem;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
  content: " ";
  margin-top: -.5rem;
  margin-left: .5rem;
  border: 1px solid var(--title-color);
}

table.dataTable tr.selected td.select-checkbox:before, table.dataTable tr.selected th.select-checkbox:before {
  border: 1px solid var(--title-color);
}

table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
  content: "\f2de";
  font-family: uicons-regular-rounded !important;
  font-size: .625rem;
  margin-top: -16px;
  margin-left: 8px;
  text-shadow: none;
}

.data-table-outer-content {
  position: relative;
  min-inline-size: 700px;
}

.data-table-outer-content .positioned-content {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  -webkit-margin-after: 0.25rem;
  margin-block-end: 0.25rem;
  z-index: 1;
}

.data-table-outer-content .positioned-content .select2 {
  min-inline-size: 14rem;
}

.data-table-outer-content .positioned-content .select2-container--default .select2-selection--single {
  min-block-size: 2rem;
}

.data-table-outer-content .positioned-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2rem;
}

.data-table-outer-content .positioned-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
}

.dataTable .select2-container--default .select2-selection--single {
  min-block-size: 2rem;
}

.dataTable .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2rem;
}

.dataTable .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
}

.select-checkbox {
  max-width: 3rem;
}

/* ************************
   02.9: Preloader
   ********************* */
.preloader {
  position: fixed;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--bs-white);
  z-index: 9999999;
  display: grid;
  place-items: center;
}

.spinner-grow {
  background-color: var(--bs-primary);
}

/* ************************
   02.10: Circular Progress
   ********************* */
/* Half Progress Bar */
.circle-progress {
  --size: 5rem;
  inline-size: var(--size);
  min-inline-size: var(--size);
  block-size: var(--size);
  background: conic-gradient(var(--bs-primary) 90%, transparent 0);
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--size);
}

.circle-progress::before {
  content: "";
  position: absolute;
  inline-size: calc(100% - 10px);
  block-size: calc(100% - 10px);
  background: #1f63c2;
  border-radius: 50%;
}

.circle-progress::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.05);
}

[theme=dark] .circle-progress::after {
  border: 5px solid rgba(255, 255, 255, 0.05);
}

.circle-progress .content {
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ************************
   02.11: Card
   ********************* */
.dropdown-menu,
.card {
  background-color: var(--bs-white);
  border-color: rgba(var(--primary-light-rgb), 0.7);
  -webkit-box-shadow: 0 0.75rem 1.5rem -0.25rem rgba(145, 158, 171, 0.1);
  box-shadow: 0 0.75rem 1.5rem -0.25rem rgba(145, 158, 171, 0.1);
}

[theme=dark] .dropdown-menu, [theme=dark]
.card {
  border-color: rgba(var(--primary-light-rgb), 0.1);
}

.dropdown-menu {
  -webkit-box-shadow: var(--dropdown-box-shadow);
  box-shadow: var(--dropdown-box-shadow);
}

.bank-info-card {
  background-color: rgba(0, 106, 255, 0.05);
}

.card-header {
  background-color: var(--bs-white);
  border-color: var(--bs-border-color);
}

.card-header,
.card-body {
  padding: 1.25rem 1.25rem;
}

/* ************************
   02.12: Common
   ********************* */
.rounded-2 {
  border-radius: .5rem;
}

.overlay {
  position: relative;
  z-index: 1;
}

.overlay:after {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: -1;
  content: "";
  background-color: var(--bs-body-bg);
  opacity: 0.8;
}

.bg-input {
  background-color: var(--input-bg) !important;
}

/* Fonts */
.title-font {
  font-family: var(--title-font-family) !important;
}

.body-font {
  font-family: var(--bs-body-font-family) !important;
}

.list-key-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .75rem;
}

.list-key-value li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .5rem;
}

@media only screen and (max-width: 479px) {
  .list-key-value li {
    font-size: .75rem;
  }
}

.list-key-value li span:first-child {
  -ms-flex-preferred-size: 8.125rem;
  flex-basis: 8.125rem;
  min-inline-size: 8.125rem;
  color: var(--title-color);
}

@media only screen and (max-width: 479px) {
  .list-key-value li span:first-child {
    -ms-flex-preferred-size: 4rem;
    flex-basis: 4rem;
    min-inline-size: 4rem;
  }
}

/* Gutter 60 */
.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  text-align: start;
}

.media-body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.fs-8 {
  font-size: 0.5rem !important;
}

.fs-10 {
  font-size: 0.625rem !important;
}

.fs-12 {
  font-size: 0.75rem !important;
}

.fs-13 {
  font-size: 0.8125rem !important;
}

.fs-14 {
  font-size: 0.875rem !important;
}

.fs-16 {
  font-size: 1rem !important;
}

.fs-18 {
  font-size: 1.125rem !important;
}

.fs-20 {
  font-size: 1.25rem !important;
}

.fs-21 {
  font-size: 1.3125rem !important;
}

.fs-22 {
  font-size: 1.375rem !important;
}

.fs-27 {
  font-size: 1.6875rem !important;
}

.max-content {
  inline-size: -webkit-max-content !important;
  inline-size: -moz-max-content !important;
  inline-size: max-content !important;
}

.max-w300 {
  max-inline-size: 18.75rem !important;
}

.avatar {
  --size: 2.1875rem;
  block-size: var(--size);
  inline-size: var(--size);
  min-inline-size: var(--size);
  display: grid;
  place-items: center;
  background-color: var(--input-bg);
}

.avatar-sm {
  --size: 1.75rem;
}

.avatar-lg {
  --size: 3rem;
}

.avatar-xxl {
  --size: 5rem;
}

.bg-img {
  background-size: cover;
  background-repeat: no-repeat;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

[data-bs-toggle="modal"] {
  cursor: pointer;
}

.bg-bottom {
  background-position: left bottom;
}

.bg-contain {
  background-size: contain;
}

.text-muted {
  --bs-secondary-color: #B5B5B5;
}

.fit-object {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.fit-object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}

.text-absolute-white {
  color: var(--absolute-white) !important;
}

/* custom Radio */
.custom-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  inset-inline-start: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
  position: relative;
  -webkit-padding-start: 2rem;
  padding-inline-start: 2rem;
  cursor: pointer;
  line-height: 1.375rem;
  display: inline-block;
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border: 0.0625rem solid var(--bs-primary);
  background: var(--bs-white);
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
  content: '';
  inline-size: 1rem;
  block-size: 1rem;
  background-color: var(--bs-primary);
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  -webkit-transition: all 150ms ease;
  -o-transition: all 150ms ease;
  transition: all 150ms ease;
}

[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

[type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/* Custom checkbox */
.custom-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.25rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type=checkbox] {
  --size: 1rem;
  -webkit-appearance: none;
  min-inline-size: var(--size);
  inline-size: var(--size);
  block-size: var(--size);
  border: 1px solid var(--title-color);
  border-radius: 0.1875rem;
  outline: none;
}

input[type=checkbox]:checked {
  border-color: var(--bs-primary);
  position: relative;
}

input[type=checkbox]:checked:after {
  content: "\f2de";
  font-family: uicons-regular-rounded !important;
  font-size: .625rem;
  inline-size: var(--size);
  block-size: var(--size);
  position: absolute;
  inset-inline-start: 0.125rem;
  inset-block-start: -0.0625rem;
  background-size: calc(var(--size) * 1.9);
  background-repeat: no-repeat;
  background-position: center;
}

/* Switcher */
.switcher {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  inline-size: 2.25rem;
  block-size: 1.125rem;
}

.switcher_control {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2.25rem;
  block-size: 1.125rem;
  -webkit-transition: background-color .15s ease-in;
  -o-transition: background-color .15s ease-in;
  transition: background-color .15s ease-in;
  background-color: #CED7DD;
}

[theme="dark"] .switcher_control {
  background-color: #545454;
}

.switcher_control::after {
  content: "";
  position: absolute;
  inset-block-start: 0.0625rem;
  inset-inline-start: 0.0625rem;
  inline-size: 1rem;
  block-size: 1rem;
  -webkit-transition: left .15s ease-in;
  -o-transition: left .15s ease-in;
  transition: left .15s ease-in;
  background-color: var(--absolute-white);
}

.switcher_input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.switcher_input:checked ~ .switcher_control {
  background-color: var(--bs-primary);
}

.switcher_input:checked ~ .switcher_control:after {
  inset-inline-start: 1.1875rem;
}

/* Offcanvas Overlay */
.offcanvas-overlay {
  position: fixed;
  inline-size: 100%;
  block-size: 100%;
  inset-inline-end: 0;
  inset-block-start: 0;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-transition: opacity 150ms ease;
  -o-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
  z-index: -1;
  opacity: 0;
}

.offcanvas-overlay.active {
  opacity: 1;
  z-index: 1032;
}

.offcanvas-overlay.aside-active {
  opacity: 1;
  z-index: 1031;
}

.auto-items {
  --minWidth: 9.375rem;
  --maxWidth: 1fr;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--minWidth), var(--maxWidth)));
}

.min-input-height {
  min-block-size: 2.8125rem;
}

/* ************************
   03.1: Header
   ********************* */
.header {
  padding: 0.6875rem 0;
  -webkit-padding-start: 17.5rem;
  padding-inline-start: 17.5rem;
  block-size: 3.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-padding-end: 0.9375rem;
  padding-inline-end: 0.9375rem;
  background-color: var(--bs-white);
}

@media only screen and (max-width: 1199px) {
  .header {
    -webkit-padding-start: 0.9375rem;
    padding-inline-start: 0.9375rem;
  }
}

.toggle-search-btn {
  background-color: transparent;
  border: none;
  position: relative;
  inset-inline-end: -10px;
}

.toggle-search-btn i, .toggle-search-btn .material-icons {
  font-size: 1.5rem;
  color: var(--title-color);
}

.header-right a {
  color: var(--text-color);
}

/* ************************
   03.2: Footer
   ********************* */
.footer {
  padding: 1.125rem 0 0.5rem;
}

/* ************************
   03.3: aside
   ********************* */
.aside {
  inline-size: 16.875rem;
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  block-size: 100%;
  z-index: 1031;
  -webkit-transition: width 100ms;
  -o-transition: width 100ms;
  transition: width 100ms;
  background-color: var(--bs-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

[theme=dark] .aside {
  border-color: #505050;
}

@media only screen and (max-width: 1199px) {
  .aside {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.aside-header {
  padding: 0.6875rem 1.25rem;
  block-size: 3.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.625rem;
  position: relative;
}

.aside-body {
  padding: 0rem 1rem 1rem;
  max-block-size: calc(100vh - 60px);
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-shadow: 0px 8px 24px -4px rgba(145, 158, 171, 0.05);
  box-shadow: 0px 8px 24px -4px rgba(145, 158, 171, 0.05);
}

.aside-body .main-nav > li {
  -webkit-margin-after: 0.625rem;
  margin-block-end: 0.625rem;
}

@media only screen and (max-width: 479px) {
  .aside-body .main-nav > li {
    -webkit-margin-after: 0rem;
    margin-block-end: 0rem;
  }
}

.aside-body .nav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.aside-body .nav li.nav-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  max-inline-size: 100%;
  -webkit-padding-start: 0.6875rem;
  padding-inline-start: 0.6875rem;
}

@media only screen and (max-width: 479px) {
  .aside-body .nav li.nav-category {
    font-size: 0.625rem;
    padding-block: 0.5rem;
  }
}

.aside-body .nav li > a {
  font-size: 0.875rem;
  color: var(--bs-body-color);
  padding: 0.625rem 0.625rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (max-width: 479px) {
  .aside-body .nav li > a {
    font-size: 0.75rem;
  }
}

.aside-body .nav li .link-title {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.aside-body .nav li .link-title .count {
  background-color: var(--bs-secondary);
  color: var(--absolute-white);
  padding: 0.1875rem 0.5rem;
}

.aside-body .nav li.has-sub-item {
  position: relative;
}

.aside-body .nav li.has-sub-item:after {
  font-family: uicons-solid-rounded !important;
  content: "\f134";
  position: absolute;
  inset-inline-end: 0.625rem;
  inset-block-start: 0.625rem;
  z-index: -1;
  font-size: 0.625rem;
}

.aside-body .nav li.sub-menu-opened:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.aside-body .nav li.active > a {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.aside-body .nav li.active:not(.has-sub-item) > a {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.aside-body .nav ul {
  -webkit-padding-before: 0.625rem;
  padding-block-start: 0.625rem;
}

.aside-body .nav ul li {
  -webkit-padding-start: 1.5rem;
  padding-inline-start: 1.5rem;
}

.aside-body .nav ul.sub-menu {
  display: none;
}

a[disabled] {
  pointer-events: none;
  opacity: 0.6;
}

.user-profile {
  background-color: var(--bs-primary);
  padding: 1.25rem 0.9375rem;
  -webkit-transition: all 100ms;
  -o-transition: all 100ms;
  transition: all 100ms;
  color: var(--absolute-white);
}

@media (max-width: 1199px) {
  body .aside-header .toggle-menu-button {
    display: none;
  }
}

body.aside-open .aside {
  -webkit-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  transform: translateX(0) !important;
}

@media (min-width: 1199px) {
  body.aside-folded .aside-header {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  body.aside-folded .aside-header .toggle-menu-button i {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  body.aside-folded .main-area {
    -webkit-padding-start: 5.9375rem;
    padding-inline-start: 5.9375rem;
  }
}

@media only screen and (min-width: 1199px) and (max-width: 991px) {
  body.aside-folded .main-area {
    -webkit-margin-start: 0rem;
    margin-inline-start: 0rem;
  }
}

@media (min-width: 1199px) {
  body.aside-folded .aside {
    inline-size: 5rem;
  }
  body.aside-folded .aside .logo {
    display: none;
  }
  body.aside-folded .aside .user-profile {
    display: none;
  }
  body.aside-folded .aside-body {
    padding-inline: 0.3125rem;
    position: static;
  }
  body.aside-folded .aside-body .nav-category {
    visibility: hidden;
    max-height: 42px;
  }
  body.aside-folded .aside-body .nav-category:before {
    position: absolute;
    content: "";
    inline-size: 1.25rem;
    block-size: 0.0625rem;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--bs-border-color);
    visibility: visible;
  }
  body.aside-folded .aside-body li .material-icons {
    color: var(--title-color);
  }
  body.aside-folded .aside-body li.has-sub-item {
    position: static !important;
  }
  body.aside-folded .aside-body li.has-sub-item::after {
    display: none;
  }
  body.aside-folded .aside-body li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  body.aside-folded .aside-body li a span:not(.material-icons) {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    inline-size: 3.125rem;
    font-size: 0.625rem;
    text-align: center;
  }
  body.aside-folded .aside-body li.active i, body.aside-folded .aside-body li.active span, body.aside-folded .aside-body li:hover i, body.aside-folded .aside-body li:hover span {
    color: var(--bs-primary);
  }
  body.aside-folded .aside-body .nav ul.sub-menu {
    display: block !important;
    position: absolute;
    inset-inline-start: calc(100% - 5px);
    background-color: var(--bs-white);
    padding: 1rem;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    min-inline-size: 12.5rem;
    max-inline-size: 16.25rem;
    -webkit-box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
    box-shadow: rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px;
    visibility: hidden;
    opacity: 0;
    border-radius: 0.25rem;
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition: opacity 10ms ease-in-out, -webkit-transform 100ms ease-in-out;
    transition: opacity 10ms ease-in-out, -webkit-transform 100ms ease-in-out;
    -o-transition: transform 100ms ease-in-out, opacity 10ms ease-in-out;
    transition: transform 100ms ease-in-out, opacity 10ms ease-in-out;
    transition: transform 100ms ease-in-out, opacity 10ms ease-in-out, -webkit-transform 100ms ease-in-out;
    will-change: transform, opacity;
  }
  body.aside-folded .aside-body .nav ul.sub-menu li {
    -webkit-padding-start: 0rem;
    padding-inline-start: 0rem;
  }
  body.aside-folded .aside-body .nav ul.sub-menu a {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  body.aside-folded .aside-body .nav ul.sub-menu a span:not(.material-icons) {
    font-size: 0.875rem !important;
    inline-size: auto;
    text-align: start;
  }
  body.aside-folded .aside-body .nav li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ************************
   03.4: Main Area
   ********************* */
.main-area {
  -webkit-padding-before: 5.625rem;
  padding-block-start: 5.625rem;
  -webkit-padding-start: 18rem;
  padding-inline-start: 18rem;
  -webkit-padding-end: 0.9375rem;
  padding-inline-end: 0.9375rem;
  block-size: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

@media only screen and (max-width: 1199px) {
  .main-area {
    -webkit-padding-start: 0.9375rem;
    padding-inline-start: 0.9375rem;
  }
}

@media only screen and (max-width: 479px) {
  .main-area {
    -webkit-padding-start: 0;
    padding-inline-start: 0;
    -webkit-padding-end: 0;
    padding-inline-end: 0;
  }
}

/* ************************
   03.5: Theme Switcher
   ********************* */
.settings-sidebar {
  position: fixed;
  background-color: var(--bs-white);
  inline-size: 18.75rem;
  inset-inline-end: -18.75rem;
  inset-block-start: 0;
  z-index: 1029;
  block-size: 100vh;
  padding: 3.75rem 0rem 1.25rem;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

@media only screen and (max-width: 479px) {
  .settings-sidebar {
    inline-size: 16.25rem;
    inset-inline-end: -16.25rem;
  }
}

.settings-sidebar.active {
  inset-inline-end: 0;
}

.settings-toggle-icon {
  position: absolute;
  inline-size: 2.8125rem;
  block-size: 2.8125rem;
  inset-inline-start: -2.8125rem;
  inset-block-start: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: var(--bs-primary);
  border-start-start-radius: 5px;
  border-end-start-radius: 5px;
  padding: 0.3125rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.settings-toggle-icon i {
  font-size: 1.25rem;
  color: var(--absolute-white);
}

.settings-content h4 {
  padding: 1.25rem;
  border-bottom: 1px dashed var(--border-color);
  text-align: center;
}

.switchers-wrap {
  padding: 1.25rem;
}

.switch-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  -webkit-column-gap: 0.625rem;
  -moz-column-gap: 0.625rem;
  column-gap: 0.625rem;
  row-gap: 1.25rem;
}

.setting-box {
  background-color: var(--bs-body-bg);
  block-size: 6.25rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  padding: 0.9375rem;
  -webkit-transition: border 200ms ease;
  -o-transition: border 200ms ease;
  transition: border 200ms ease;
  cursor: pointer;
}

.setting-box.active {
  border-color: var(--bs-primary);
}

.setting-box.dark-mode {
  background-color: var(--absolute-dark);
}

.setting-box.light-mode {
  background-color: var(--absolute-white);
}

.setting-box-wrap h5 {
  text-align: center;
  -webkit-margin-before: 0.625rem;
  margin-block-start: 0.625rem;
}

/* ************************
   03.6: RTL
   ********************* */
[dir="rtl"] .nav {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
}

[dir="rtl"] .aside-header .toggle-menu-button {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

[dir="rtl"] .aside-body .nav li.has-sub-item:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

[dir="rtl"] .aside-body .nav li.sub-menu-opened:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

[dir="rtl"] .ps__rail-y {
  left: 0 !important;
  right: auto !important;
}

@media only screen and (max-width: 1199px) {
  [dir="rtl"] .aside {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
}

[dir="rtl"] .apexcharts-legend-marker {
  margin-right: 0rem;
  margin-left: 0.1875rem;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}

/* ************************
   03.7: Filter Aside
   ********************* */
/* ************************
   03.8: Login
   ********************* */
/* ************************
   04.1: Dark Theme CSS
   ********************* */
[theme="dark"] .text-muted,
[theme="dark"] .apexcharts-yaxis-label,
[theme="dark"] .apexcharts-xaxis-label,
[theme="dark"] .apexcharts-title-text,
[theme="dark"] .apexcharts-legend-text {
  color: rgba(255, 255, 255, 0.7) !important;
  fill: rgba(255, 255, 255, 0.7) !important;
}

[theme="dark"] .apexcharts-gridline {
  stroke: #4b4b4b;
}

[theme="dark"] .apexcharts-tooltip.light {
  border: 1px solid #6c6c6c;
  background-color: #39393b;
}

[theme="dark"] .apexcharts-tooltip.light .apexcharts-tooltip-title {
  background-color: #39393b;
  border-bottom: 1px solid #6c6c6c;
}

[theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #6b6b6b;
  background: transparent;
}

[theme="dark"] select {
  color: #fff;
}

[theme="dark"] select option {
  color: black;
}

[theme="dark"] .card-header {
  background-color: rgba(255, 255, 255, 0.05);
  -webkit-box-shadow: none;
  box-shadow: none;
}

[theme="dark"] .btn-close {
  background: transparent url("../img/icons/close.png") center/1em auto no-repeat;
}

[theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #838383;
}

[theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, [theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: #838383;
  color: var(--absolute-white);
}

[theme="dark"] .select2-container--default .select2-search--inline .select2-search__field {
  color: var(--absolute-white);
}

[theme="dark"] ::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(1);
  filter: invert(1);
}

[theme="dark"] .dark-support {
  -webkit-filter: brightness(0.8) contrast(1.2);
  filter: brightness(0.8) contrast(1.2);
}

body.aside-folded[theme="dark"] .aside-body .nav ul.sub-menu {
  -webkit-box-shadow: rgba(145, 158, 171, 0.1) 0px 0px 2px 0px, rgba(145, 158, 171, 0.1) -20px 20px 40px -4px;
  box-shadow: rgba(145, 158, 171, 0.1) 0px 0px 2px 0px, rgba(145, 158, 171, 0.1) -20px 20px 40px -4px;
}

/* ************************
   05.1: Main CSS
   ********************* */
.attendance-analytics {
  padding: 35px 140px 44px 50px;
  border-start-start-radius: 1rem;
  -webkit-margin-start: -14px;
  margin-inline-start: -14px;
}

@media only screen and (max-width: 1199px) {
  .attendance-analytics {
    -webkit-margin-start: 0px;
    margin-inline-start: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .attendance-analytics {
    padding: 1.25rem;
  }
}

.glass-bg, .grid-analytics > * {
  background: rgba(var(--primary-light-rgb), 0.1);
  -webkit-box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.2), 0px 12px 24px -4px rgba(145, 158, 171, 0.1);
  box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.2), 0px 12px 24px -4px rgba(145, 158, 171, 0.1);
}

.grid-analytics {
  display: grid;
  grid-gap: .5rem;
}

.grid-analytics > * {
  border-radius: .25rem;
  padding: 1.5rem;
}

.grid-analytics > * * {
  color: var(--absolute-white);
}

.grid-analytics .total-students {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

@media only screen and (max-width: 575px) {
  .grid-analytics .total-students {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }
}

.grid-analytics .total-class {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

@media only screen and (max-width: 575px) {
  .grid-analytics .total-class {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }
}

.grid-analytics .total-faculty {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

@media only screen and (max-width: 575px) {
  .grid-analytics .total-faculty {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
  }
}

/*# sourceMappingURL=style.css.map */

.dataTables_wrapper .dt-buttons .dt-button span {
  display: block !important;
}

button.btn.btn-danger.remove-link.btn-sm.custom-btn {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.3rem;
  padding-top: 0.3rem;
  border-radius: 0.5rem;
}

.icon-cloud {
  font-size: 30px;
  color: #0A52BB;
}

.icon-success {
  color: lightseagreen;
}