:root {
    --bs-font-primary: "DB Helvethaica X", sans-serif;
    --bs-font-secondary: "Poppins", sans-serif;
    --global-color-primary: #08376B;
    --global-color-secondary: #118ED1;
    --global-color-lightgreen: #7accc8;
    --global-color-green: #3cb878;
    --global-color-lightblue: #6dcff6;
    --global-color-blue: #7da7d9;
    --global-color-purple: #8560a8;
    --global-color-violet: #5674b9;
    --global-color-orange: #f26c4f;
    --global-color-bg-lightgreen: rgb(122 204 200 / 15%);
    --global-color-bg-green: rgb(122 204 200 / 15%);
    --global-color-bg-lightblue: rgb(109 207 246 / 15%);
    --global-color-bg-blue: rgb(125 167 217 / 15%);
    --global-color-bg-purple: rgb(133 96 168 / 15%);
    --global-color-bg-violet: rgb(86 116 185 / 15%);
    --global-color-bg-orange: rgb(242 108 79 / 15%);
    /* 	Size is a variable for both - height and width dimensions of the circle  */
    --size: 300px;
    /* 	First Color Value */
    --clrFirstSpin: #7da7d9;
    /* 	Second Color Value */
    --clrSecondSpin: #7da7d9;
    /* 	Third Color Value */
    --clrThirdSpin: #c7d8eb;
    /* 	Duration for text blinking animation  */
    --displayingTextTime: 2500ms;
    --spinnerFont: calc(var(--size)/18);
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/db helvethaica x ulli v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/db helvethaica x ulli it v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/db helvethaica x thin v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/db helvethaica x thin it v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/db helvethaica x v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/db helvethaica x it v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/db helvethaica x bd v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/db helvethaica x bd it v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/db helvethaica x blk v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'DB Helvethaica X';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/db helvethaica x blk it v3.2.ttf') format('truetype');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/fontawesome/fa-regular-400.ttf') format('truetype'), url('../fonts/fontawesome/fa-regular-400.woff2') format('woff2');
}

.far,
.fa-regular {
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
}


@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../fonts/fontawesome/fa-solid-900.ttf') format('truetype'), url('../fonts/fontawesome/fa-solid-900.woff2') format('woff2');
}

.fas,
.fa-solid {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/fontawesome/fa-brands-400.ttf') format('truetype'), url('../fonts/fontawesome/fa-brands-400.woff2') format('woff2');
}

.fab,
.fa-brands {
    font-family: 'Font Awesome 6 Brands';
    font-weight: 400;
}

html,
body {
    overflow-x: hidden;
}

body {
    font-family: var(--bs-font-primary);
    font-size: 1.25rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.form-control,
.form-select {
    font-size: 1.25rem;
}

.tooltip {
    font-size: 1em !important;
}

.btn {
    font-size: 1.25rem;
}

.btn:hover {
    filter: brightness(0.9);
}

.text-primary {
    color: var(--global-color-primary) !important;
}

.text-secondary {
    color: var(--global-color-secondary) !important;
}

.text-lightgreen {
    color: var(--global-color-lightgreen) !important;
}

.text-lightblue {
    color: var(--global-color-lightblue) !important;
}

.text-blue {
    color: var(--global-color-blue) !important;
}

.text-purple {
    color: var(--global-color-purple) !important;
}

.text-violet {
    color: var(--global-color-violet) !important;
}

.text-green {
    color: var(--global-color-green) !important;
}

.text-orange {
    color: var(--global-color-orange) !important;
}

.bg-grey {
    background-color: #f9f9f9 !important;
}

/* Login */
.layout-login-container .login.section .form-title {
    font-size: 1.68rem;
    font-weight: 500;
    border-bottom: 1px solid #cbdfff;
    margin: 1.5rem 0 1rem;
}

.layout-login-container .login.section .layout-login-form {
    background-image: url('../images/ischeduling/login-form-bg.jpg');
    background-color: var(--bs-primary);
    padding: 1.5em;
    color: white;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.layout-login-container .login.section .layout-login-form button {
    background-color: #336699
}

.layout-login-container .login.section .form-label {
    color: white;
}

.layout-login-container .login.section .layout-login-page {
    position: relative;
}

.layout-login-container .login.section .layout-login-page svg {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: -100px;
    opacity: 0.35;
}

.layout-login-container .login.section .layout-login-page .site-name .site-title {
    font-family: var(--bs-font-secondary);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--bs-primary);
}

.layout-login-container .login.section .layout-login-page .site-name .site-description {
    font-size: 1.35em;
    color: var(--bs-secondary);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
}

.layout-login-container .login.section .layout-login-page .site-logo-icon img {
    position: relative;
    z-index: 9;
    width: 120px;
}

.layout-login-container .login.section .layout-login-page .login-banner img {
    position: relative;
    bottom: -2rem;
    right: -1rem;
}

/* End Login */

/* intro */
.layout-intro-container .intro.section .form-title {
    font-size: 1.68rem;
    font-weight: 500;
    border-bottom: 1px solid #cbdfff;
    margin: 1.5rem 0 1rem;
}

.layout-intro-container .intro.section .layout-intro-form {
    background-image: url('../images/ischeduling/login-form-bg.jpg');
    background-color: var(--bs-primary);   
    padding: 1.5em;
    color: white;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.layout-intro-container .intro.section .layout-intro-form button {
    background-color: #336699
}

.layout-intro-container .intro.section .form-label {
    color: white;
}

.layout-intro-container .intro.section .layout-intro-page {
    position: relative;
}

.layout-intro-container .intro.section .layout-intro-page svg {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: -100px;
    opacity: 0.35;
}

.layout-intro-container .intro.section .layout-intro-page .site-name .site-title {
    font-family: var(--bs-font-secondary);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--bs-primary);
}

.layout-intro-container .intro.section .layout-intro-page .site-name .site-description {
    font-size: 1.35em;
    color: var(--bs-secondary);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
}

.layout-intro-container .intro.section .layout-intro-page .site-logo-icon img {
    position: relative;
    z-index: 9;
    width: 120px;
}

.layout-intro-container .intro.section .layout-intro-page .intro-banner img {
    position: relative;
    bottom: -2rem;
    right: -1rem;
}

/* End intro */
/* Content */
.layout-wrapper.layout-content-navbar>.layout-container {
    display: blog;
}

.layout-wrapper.layout-content-navbar aside.layout-menu {
    box-shadow: 8px -1px 5rem 0 rgb(157 157 157 / 43%);
    background-image: url('../images/bg/bgsidebar.jpg');
    background-color: #fff;
    background-position: 100% 100%;
    background-size: 150%;
    background-repeat: no-repeat;
}

.layout-wrapper .site-logo img {
    width: 21em;
    margin: auto;
}

.layout-wrapper.layout-content-navbar .app-brand {
    padding: 1.5em
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li button,
.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1em;
    color: var(--bs-dark);
    width: 100%;
    padding: 0.5em 1.5em;
    transition-duration: 0.3s;
    transition-property: color, background-color;
    border-radius: 0 !important;
    box-shadow: unset !important;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li button:hover,
.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li a:hover {
    background-color: #e3e7ed;
    border-right: 5px solid var(--bs-primary);
    cursor: pointer;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li button img,
.layout-wrapper.layout-content-navbar aside.layout-menu .nav>li a img {
    max-width: 18px;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav .sub-menu li>a {
    font-size: 1.1em;
    text-decoration: none;
    padding-left: 15% !important;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav .btn-toggle {
    position: relative;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav .btn-toggle:after {
    content: '\f068';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.layout-wrapper.layout-content-navbar aside.layout-menu .nav .btn-toggle.collapsed:after {
    content: '\2b';
}

.layout-wrapper.layout-content-navbar .layout-page {
    padding: 1.5em 0.75em 1.5em !important;
    overflow: hidden;
}

.layout-wrapper.layout-content-navbar .layout-page .header-bar-inner {
    border-bottom: 2px solid #e9e9e9;
}

.header-bar-inner .admin-organizationName>* {
    font-size: 2rem;
    font-weight: 700;
    color: var(--global-color-primary);
}

.header-bar-inner .admin-site-user-item {
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.header-bar-inner .admin-site-user-item i {
    font-size: 1.75em;
    color: var(--global-color-primary);
}

.box-dashboard-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1.25em;
    margin: 1.5em 0;
}

.box-dashboard-wrapper .box-item {
    padding: 1em 1.5em 1.25em;
    background-color: #efefef;
    border-radius: 0.5em;
}

.box-dashboard-wrapper .box-item .box-header {
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
    align-items: center;
}

.box-dashboard-wrapper .box-item.box-icon-left .box-header {
    justify-content: left;
    flex-direction: row-reverse;
}

.box-dashboard-wrapper .box-item .box-title {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.box-dashboard-wrapper .box-item .box-sub-title {
    font-weight: 700;
    line-height: 1;
}

.box-dashboard-wrapper .box-item .box-header>i {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 1.5em;
    line-height: 60px;
    text-align: center;
}

.box-dashboard-wrapper .box-item .box-description {
    line-height: 1.25;
    margin: 1em 0;
}

.box-dashboard-wrapper .box-item .btn,
.btn.bt-icon-right {
    position: relative;
    padding: 0.5em 3em 0.5em 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    border-radius: 0.35em;
    min-width: 8em;
}

.box-dashboard-wrapper .box-item .btn i,
.btn.bt-icon-right i {
    position: absolute;
    display: flex;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    align-items: center;
    padding: 0.25em 0.5em;
    background-color: #0000001a;
    border-radius: 0 0.35em 0.35em 0;
}

.bt-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.35em;
    min-width: 8em;
    line-height: 1;
    border: 1px solid;
}

.bt-wrap:hover {
    filter: brightness(0.9);
}

.bt-wrap input[type="button"],
.bt-wrap input[type="submit"] {
    width: 100%;
    text-align: left;
    padding: 0.25em 0 0.25em 1em;
    background: inherit;
    border: 0;
    color: inherit;
}

.bt-wrap i {
    height: 100%;
    padding: 0.375em 0.5em;
    background-color: #0000001a;
    line-height: 1.2;
    border-radius: 0 0.35em 0.35em 0;
}

.btn.bt-no-icon {
    min-width: 8em;
    text-align: center;
}

.box-dashboard-wrapper .box-item.theme-lightgreen,
.theme-lightgreen {
    background-color: var(--global-color-bg-lightgreen);
}

.box-dashboard-wrapper .box-item.theme-lightgreen .box-title,
.box-dashboard-wrapper .box-item.theme-lightgreen .box-header>i,
.theme-lightgreen .box-title,
.theme-lightgreen .box-header i {
    color: var(--global-color-lightgreen);
}

.box-dashboard-wrapper .box-item.theme-lightgreen .btn:not([class*=btn-]),
.theme-lightgreen .btn:not([class*=btn-]),
.theme-lightgreen .bt-wrap {
    background-color: var(--global-color-lightgreen);
    border: var(--global-color-lightgreen);
    color: #fff;
}

.theme-lightgreen .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-lightgreen);
    border: var(--global-color-lightgreen);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-lightblue,
.theme-lightblue {
    background-color: var(--global-color-bg-lightblue);
}

.box-dashboard-wrapper .box-item.theme-lightblue .box-title,
.box-dashboard-wrapper .box-item.theme-lightblue .box-header>i,
.theme-lightblue .box-title,
.theme-lightblue .box-header i {
    color: var(--global-color-lightblue);
}

.box-dashboard-wrapper .box-item.theme-lightblue .btn:not([class*=btn-]),
.theme-lightblue .btn:not([class*=btn-]),
.theme-lightblue .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-lightblue);
    border: var(--global-color-lightblue);
    color: #fff;
}

.theme-lightblue .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-lightblue);
    border: var(--global-color-lightblue);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-purple,
.theme-purple {
    background-color: var(--global-color-bg-purple);
}

.box-dashboard-wrapper .box-item.theme-purple .box-title,
.box-dashboard-wrapper .box-item.theme-purple .box-header>i,
.theme-purple .box-title,
.theme-purple .box-header i {
    color: var(--global-color-purple);
}

.box-dashboard-wrapper .box-item.theme-purple .btn:not([class*=btn-]),
.theme-purple .btn:not([class*=btn-]),
.theme-purple .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-purple);
    border: var(--global-color-purple);
    color: #fff;
}

.theme-purple .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-purple);
    border: var(--global-color-purple);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-violet,
.theme-violet {
    background-color: var(--global-color-bg-violet);
}

.box-dashboard-wrapper .box-item.theme-violet .box-title,
.box-dashboard-wrapper .box-item.theme-violet .box-header>i,
.theme-violet .box-title,
.theme-violet .box-header i {
    color: var(--global-color-violet);
}

.box-dashboard-wrapper .box-item.theme-violet .btn:not([class*=btn-]),
.theme-violet .btn:not([class*=btn-]),
.theme-violet .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-violet);
    border: var(--global-color-violet);
    color: #fff;
}

.theme-violet .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-violet);
    border: var(--global-color-violet);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-blue,
.theme-blue {
    background-color: var(--global-color-bg-blue);
}

.box-dashboard-wrapper .box-item.theme-blue .box-title,
.box-dashboard-wrapper .box-item.theme-blue .box-header>i,
.theme-blue .box-title,
.theme-blue .box-header i {
    color: var(--global-color-blue);
}

.box-dashboard-wrapper .box-item.theme-blue .btn:not([class*=btn-]),
.theme-blue .btn:not([class*=btn-]),
.theme-blue .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-blue);
    border: var(--global-color-blue);
    color: #fff
}

.theme-blue .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-blue);
    border: var(--global-color-blue);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-green,
.theme-green {
    background-color: var(--global-color-bg-green);
}

.box-dashboard-wrapper .box-item.theme-green .box-title,
.box-dashboard-wrapper .box-item.theme-green .box-header>i,
.theme-green .box-title,
.theme-green .box-header i {
    color: var(--global-color-green);
}

.box-dashboard-wrapper .box-item.theme-green .btn:not([class*=btn-]),
.theme-green .btn:not([class*=btn-]),
.theme-green .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-green);
    border: var(--global-color-green);
    color: #fff;
}

.theme-green .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-green);
    border: var(--global-color-green);
    color: #fff;
}

.box-dashboard-wrapper .box-item.theme-orange,
.theme-orange {
    background-color: var(--global-color-bg-orange);
}

.box-dashboard-wrapper .box-item.theme-orange .box-title,
.box-dashboard-wrapper .box-item.theme-orange .box-header>i,
.theme-orange .box-title,
.theme-orange .box-header i {
    color: var(--global-color-orange);
}

.box-dashboard-wrapper .box-item.theme-orange .btn:not([class*=btn-]),
.theme-orange .btn:not([class*=btn-]),
.theme-orange .bt-wrap:not([class*=btn-]) {
    background-color: var(--global-color-orange);
    border: var(--global-color-orange);
    color: #fff;
}

.theme-orange .dataTables_paginate .pagination .paginate_button.active a {
    background-color: var(--global-color-orange);
    border: var(--global-color-orange);
    color: #fff;
}

.box-page-wrapper {
    padding: 1em 0.5em 1.25em;
    border-radius: 0.5em;
    height: 100%;
}

.box-page-wrapper .box-top-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75em;
}

.box-page-wrapper .box-top-header .box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
}

.box-page-wrapper .box-top-header .box-icon i {
    font-size: 1.75em;
    width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
}

.box-page-wrapper .box-top-header .box-title .title {
    font-size: 1.68em;
    line-height: 1;
    margin-bottom: 0;
}

.box-page-wrapper .box-top-header .box-title .sub-title {
    font-size: 1.25em;
    font-weight: 700;
    color: #000;
    margin-bottom: 0;
    line-height: 1;
}

.box-page-wrapper .box-content {
    margin-top: 1.5em;
}

.box-page-wrapper .box-content-white {
    background: #fff;
    padding: 2em 1em 1em;
    text-align: center;
    border-radius: 8px;
}

.box-page-wrapper .box-content .dropdown .btn {
    min-width: 10em;
}

.box-page-wrapper .box-content .dropdown .dropdown-menu {
    min-width: 10em;
    font-size: 1em;
}

.section-border {
    border: 1px solid;
    border-radius: 10px;
    padding: 1em;
}

.section-border.section-border-lightgreen {
    border-color: var(--global-color-lightgreen);
}

.section-border.section-border-green {
    border-color: var(--global-color-green);
}

.section-border.section-border-blue {
    border-color: var(--global-color-blue);
}

.section-border.section-border-lightblue {
    border-color: var(--global-color-lightblue);
}

.section-border.section-border-purple {
    border-color: var(--global-color-purple);
}

.section-border.section-border-violet {
    border-color: var(--global-color-violet);
}

.section-border.section-border-orange {
    border-color: var(--global-color-orange);
}

/*
.layout-bg-lightgreen {
    background-image: url(../images/bg/bg-lightgreen.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-purple {
    background-image: url(../images/bg/bg-purple.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-orange {
    background-image: url(../images/bg/bg-orange.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-blue {
    background-image: url(../images/bg/bg-blue.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-lightblue {
    background-image: url(../images/bg/bg-lightblue.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-violet {
    background-image: url(../images/bg/bg-violet.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

.layout-bg-green {
    background-image: url(../images/bg/bg-green.svg);
    background-size: 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
}
*/
.table {
    border-collapse: separate;
    border-spacing: 0 0.75em;
}

.table>thead>tr>th {
    position: relative;
    text-align: center;
    border: 0;
    padding: 0.675em 0.25em;
    line-height: 1;
    vertical-align: middle;
}

.table:not(.table-style-2)>thead>tr>th:first-child {
    border-radius: 9px 0 0 9px;
}

.table:not(.table-style-2)>thead>tr>th:last-child {
    border-radius: 0 9px 9px 0;
}

.table:not(.table-style-2)>thead>tr>th:not(:last-child):before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 25px;
    width: 2px;
    background-color: #fff;
    transform: translateY(-50%);
}

.table>tbody>tr>td {
    position: relative;
    text-align: center;
    background-color: #fff;
    border: 0;
    padding: 0.675em 0.25em;
    vertical-align: middle;
    line-height: 1;
}

.table>tbody>tr.status-unused>td {
    background-color: #f2f2f2;
    opacity: 0.8;
}

.table:not(.table-style-2)>tbody>tr>td:not(:last-child):before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 25px;
    width: 2px;
    background-color: #e7e7e7;
    transform: translateY(-50%);
}

.table:not(.table-style-2)>tbody>tr:not(.row-style-2)>td:first-child {
    border-radius: 9px 0 0 9px;
}

.table:not(.table-style-2)>tbody>tr>td:last-child {
    border-radius: 0 9px 9px 0;
}

.table tbody tr td i {
    font-size: 1em;
    margin-right: 0.5em;
}

.table.table-lightgreen thead tr th {
    background-color: var(--global-color-lightgreen);
    color: #fff;
}

.table.table-lightblue thead tr th {
    background-color: var(--global-color-lightblue);
    color: #fff;
}

.table.table-green thead tr th {
    background-color: var(--global-color-green);
    color: #fff;
}

.table.table-purple thead tr th {
    background-color: var(--global-color-purple);
    color: #fff;
}

.table.table-orange thead tr th {
    background-color: var(--global-color-orange);
    color: #fff;
}

.table.table-blue thead tr th {
    background-color: var(--global-color-blue);
    color: #fff;
}

.table.table-violet thead tr th {
    background-color: var(--global-color-violet);
    color: #fff;
}

.table tbody tr td .form-control {
    padding: .25rem .75rem;
    line-height: 1;
}

.table.table-style-1>tbody>tr>td {
    border-radius: 9px 9px 9px 9px !important;
}

.table.table-style-2 {
    border-collapse: collapse;
}

.table.table-style-2 tr th {
    border: 8px solid transparent;
    border-bottom-color: transparent !important;
}

.table.table-style-2 tr td {
    border: 8px solid transparent;
    border-bottom-color: transparent !important;
}

.table.table-style-2 thead tr:first-child>th:first-child {
    border-radius: 28px 0 0 0;
}

.table.table-style-2 thead tr:first-child>th:last-child {
    border-radius: 0 28px 0 0;
}

.table-in-row {
    width: 100%;
}

.table-in-row tr>td {
    padding: 0.25em;
}

.dataTables_paginate .pagination {
    justify-content: flex-end;
}

.dataTables_paginate .pagination .paginate_button a {
    color: #4c4c4c;
}

.dataTables_info {
    text-align: left;
}

.carousel .tb-control {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 15px;
    z-index: 9;
}

.carousel .tb-control button {
    border: 1px solid var(--global-color-blue);
    background: #fff;
    color: var(--global-color-blue);
    padding: 6px 30px 3px;
    font-size: 15px;
    line-height: 1;
    margin-right: 0;
}

table.table-calendar {
    width: 100%;
    box-shadow: 0 0 7px #b7b7b7;
}

table.table-calendar tr th,
table.table-calendar tr td {
    padding: 5px;
}

table.table-calendar thead tr.table-month-row th {
    font-size: 2em;
    font-weight: 300;
    padding: 5px 15px;
}

table.table-calendar thead tr.table-weekdays-row th {
    background-color: #7da7d9;
    color: #fff;
    font-weight: 700;
    text-align: center;
    width: calc(100% / 7);
}

table.table-calendar>tbody>tr>td {
    border: 1px solid #e7e7e7;
}

table.table-calendar>tbody>tr>td .date-month {
    display: block;
    text-align: right;
    margin-bottom: 0.25em;
}

table.table-calendar tbody .holiday-request.status-normal {
    border: 1px solid #e7e7e7;
    padding: 5px;
    border-radius: 5px;
}

table.table-in-calendar {
    width: 100%;
    font-size: 16px;
    border: 1px solid #e7e7e7;
    margin-bottom: 0.25em;
}

table.table-calendar-2 {
    width: 100%;
    box-shadow: 0 0 7px #ededed;
}

table.table-calendar-2 tr th,
table.table-calendar-2 tr td {
    padding: 10px;
}

table.table-calendar-2 tr.table-month-row th {
    font-size: 2em;
    font-weight: 300;
    padding: 5px 15px;
}

table.table-calendar-2 tr.table-weekdays-row th {
    background-color: var(--global-color-blue);
    color: #fff;
    font-weight: 700;
    text-align: center;
    width: calc(100% / 7);
}

table.table-calendar-2>tbody>tr>td .date-month {
    display: block;
    text-align: right;
    margin-bottom: 0.75em;
}

table.table-calendar-2>tbody>tr>td {
    border: 1px solid #e7e7e7;
}

table.table-horizontal-calendar {
    width: 100%;
    table-layout: fixed;
}

table.table-horizontal-inner-right {
    width: 100%;
    border-collapse: collapse;
}

table.table-horizontal-inner-right tr th,
table.table-horizontal-inner-right tr td {
    padding: 5px;
    line-height: 1;
    border: 1px solid #d9d9d9;
}

table.table-horizontal-inner-right tr th {
    background-color: var(--global-color-blue);
    color: #fff;
    font-weight: 400;
    padding: 10px 5px;
}

table.table-horizontal-inner-right tr td>div {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.table-horizontal-inner-left {
    width: 100%;
    border-collapse: collapse;
}

.table-horizontal-inner-left thead {
    height: 123px;
}

.table-horizontal-inner-left thead {
    background-color: var(--global-color-blue);
    color: #fff;
    font-weight: 400;
    padding: 10px 5px;
}

table.table-horizontal-inner-left tr th,
table.table-horizontal-inner-left tr td {
    padding: 5px;
    line-height: 1;
    border: 1px solid #d9d9d9;
    width: 40px;
    height: 51px;
}

.table-horizontal-calendar-col-left {
    width: 150px;
}

table.table-horizontal-inner-right-2 {
    width: 100%;
    border-collapse: collapse;
}

table.table-horizontal-inner-right-2 tr th,
table.table-horizontal-inner-right-2 tr td {
    padding: 5px;
    line-height: 1;
    border: 1px solid #e3e3e3;
    white-space: nowrap;
}

table.table-horizontal-inner-right-2 tr th {
    background-color: var(--global-color-blue);
    color: #fff;
    font-weight: 400;
    padding: 10px 5px;
}

table.table-horizontal-inner-right-2 tr td {
    height: 36px;
    background-color: #FFF;
}

table.table-horizontal-inner-right-2 tr td.cell-null {
    /*color: #F2F2F2;*/
}

.table-horizontal-inner-left-2 {
    width: 100%;
    border-collapse: collapse;
}

.table-horizontal-inner-left-2 thead {
    background-color: var(--global-color-blue);
    color: #fff;
    font-weight: 400;
    padding: 10px 5px;
    height: 123px;
}

table.table-horizontal-inner-left-2 tr th {
    padding: 5px;
    line-height: 1;
    border: 1px solid #e3e3e3;
    width: 40px;
    height: 36px;
}

table.table-horizontal-inner-left-2 tr td {
    padding: 5px;
    line-height: 1;
    border: 1px solid #e3e3e3;
    background-color: #F2F2F2;
    width: 40px;
    height: 36px;
}

table.table-horizontal-inner-left-2.col-height tr td {
    height: 53px;
}

.table-horizontal-calendar-col-left-2 {
    width: 100px;
}

.form-check-input {
    border-radius: 50% !important;
}

.theme-lightgreen .form-check-input:checked {
    background-color: var(--global-color-lightgreen);
    border-color: var(--global-color-lightgreen);
}

.theme-purple .form-check-input:checked {
    background-color: var(--global-color-purple);
    border-color: var(--global-color-purple);
}

.table-inner tr td {
    width: 33.33%;
}

.rounded-4 {
    border-radius: 0.6rem !important;
}

.rounded-5 {
    border-radius: 1rem !important;
}

.w-20-px {
    width: 20px;
}

img.status-img-icon {
    max-width: 15px;
}

.overflow-x-auto {
    overflow-x: auto;
    position: relative;
    scrollbar-color: #7da7d9 #fde9e5;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.overflow-x-auto::-webkit-scrollbar {
    height: 10px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    height: 5px;
    background-color: var(--global-color-blue);
}

.form-check-table {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25em;
    gap: 0.5em;
}

.form-check-table i {
    position: relative;
    top: 2px;
}

.form-check-table .form-check-input {
    margin-top: 0;
}

.user-role-icon {
    display: inline-flex;
    justify-content: center;
    gap: 0.15em;
    align-items: center;
    flex-direction: column;
    color: var(--global-color-blue);
    border: 2px solid var(--global-color-blue);
    padding: 0.75em 0.5em 0.5em;
    min-width: 6em;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.25s ease-out;
}

.user-role-icon:hover {
    filter: unset;
    background-color: var(--global-color-blue);
    color: #fff;
}

.user-role-icon i {
    color: inherit;
    font-size: 1.68em;
}

/* End Content */
/* Footer */
footer#site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dae1e9;
    min-height: 23vh;
    padding: 1.5em 0;
}

footer#site-footer .container {
    max-width: 992px;
}

footer#site-footer .footer-title {
    text-align: center;
    font-size: 1.5em;
    font-weight: 900;
    color: var(--bs-primary);
}

footer#site-footer a.contact-details {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.25rem;
    color: #000;
    text-decoration: none;
}

footer#site-footer a.contact-details i {
    color: var(--bs-secondary);
}

/* End Footer */

@media (min-width: 560px) {

    table.table-responsive-style>tbody>tr>td .table-col-label {
        display: none;
    }

    .table-horizontal-calendar-col-left {
        width: 210px;
    }

    .table-horizontal-calendar-col-left-2 {
        width: 120px;
    }
}

@media (min-width: 768px) {
    .layout-login-container .login.section {
        display: grid;
        grid-template-columns: 19em 1fr;
    }

    .layout-login-container .login.section {
        min-height: 77vh;
    }

    .layout-login-container .login.section .layout-login-page svg {
        position: absolute;
        z-index: 1;
        width: 100%;
        top: -6vw;
        opacity: 0.35;
    }

    .layout-intro-container .intro.section {
        display: grid;
        grid-template-columns: 19em 1fr;
    }

    .layout-intro-container .intro.section {
        min-height: 77vh;
    }

    .layout-intro-container .intro.section .layout-intro-page svg {
        position: absolute;
        z-index: 1;
        width: 100%;
        top: -6vw;
        opacity: 0.35;
    }

    .box-dashboard-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .box-dashboard-wrapper.box-wrapper-col-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .box-dashboard-wrapper .box-col-2 {
        grid-column: span 2
    }

    .box-page-wrapper .box-top-header {
        justify-content: space-between;
    }

    .box-page-wrapper {
        padding: 1em 1.5em 1.25em;
    }

    .table-responsive {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 1024px) {

    .layout-wrapper.layout-content-navbar>.layout-container {
        display: grid;
        grid-template-columns: 14em 1fr;
        grid-gap: 0;
        min-height: 80vh;
    }

    .layout-login-container .login.section .layout-login-page .login-banner img {
        width: 1000px;
    }

    .layout-intro-container .intro.section .layout-intro-page .intro-banner img {
        width: 1000px;
    }
    .layout-wrapper.layout-content-navbar .layout-page {
        padding: 1.5em 1.75em 1.5em !important;
    }

    .d-lg-menu-none {
        display: none !important;
    }

}

@media (min-width: 1280px) {
    .layout-login-container .login.section .layout-login-page .site-name .site-title {
        font-size: 1.35em;
    }

    .layout-login-container .login.section .layout-login-page .site-name .site-description {
        font-size: 1.75em;
    }

    .layout-intro-container .intro.section .layout-intro-page .site-name .site-title {
        font-size: 1.35em;
    }

    .layout-intro-container .intro.section .layout-intro-page .site-name .site-description {
        font-size: 1.75em;
    }
}

@media (min-width: 1368px) {
    .layout-wrapper.layout-content-navbar>.layout-container {
        grid-template-columns: 19em 1fr;
    }

}

@media (min-width: 1500px) {

    .box-dashboard-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .box-dashboard-wrapper.box-wrapper-col-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .box-dashboard-wrapper.box-wrapper-col-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .box-dashboard-wrapper.box-wrapper-col-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .box-dashboard-wrapper.box-wrapper-col-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Max width */
@media (max-width: 767px) {

    .dataTables_paginate .pagination {
        justify-content: center;
    }

    .dataTables_info {
        text-align: center;
    }
}

@media (max-width: 559px) {

    /*table.table-responsive-style {
        border-spacing: 0;
        margin: 0;
    }

    table.table-responsive-style > thead {
        display: none;
    }

    table.table-responsive-style > tbody > tr > td.col-no {
        display: none;
    }

    table.table-responsive-style > tbody > tr {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        justify-content: center;
        margin-bottom: 1em;
        padding: 0 0.25em 0;
        background-color: #fff;
        box-shadow: 0 0 5px #d3d3d3;
    }

    table.table-responsive-style > tbody > tr > td {
        width: 100%;
        padding: 0.25em 0;
    }

    table.table-responsive-style > tbody > tr > td:before {
        display: none !important;
    }

    table.table-responsive-style > tbody > tr > td .table-col-label {
        display: block;
        width: 100%;
        background-color: #f5f5f5;
        font-weight: 700;
        padding: 0.25em;
        margin: 0 0 0.5em;
    }*/

    table.table-responsive-style>thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.table-responsive-style tr {
        display: block;
        margin-bottom: .625em;
    }

    table.table-responsive-style td {
        display: block;
        font-size: .85em;
        padding: 0.5em 0.75em !important;
        text-align: right !important;
        width: 100%;
        border-radius: 0 !important;
    }

    table.table-responsive-style td::before {
        content: attr(data-label) !important;
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        position: relative !important;
        width: unset !important;
        height: unset !important;
        background: unset !important;
        top: unset !important;
        height: 100% !important;
        padding: 0.25em 0.5em;
        transform: unset !important;
    }

    table.table-responsive-style td:last-child {
        border-bottom: 0;
    }

    table.table-responsive-style .table-inner tr {
        display: flex;
    }

    table.table-responsive-style .table-inner tr td {
        text-align: center !important;
        padding: 0 !important;
    }

    table.table-calendar>tbody>tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    table.table-calendar>tbody>tr>td:nth-child(7n) {
        grid-column: span 2;
    }

    table.table-calendar thead tr.table-weekdays-row {
        display: none;
    }

    table.table-calendar>tbody>tr>td.day-null {
        display: none;
    }

    table.table-calendar>tbody>tr>td:not(.day-null):before {
        content: attr(data-label) !important;
        float: left;
        font-weight: 400;
        color: var(--global-color-blue);
    }

    table.table-calendar-2>tbody>tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    table.table-calendar-2>tbody>tr>td:nth-child(7n) {
        grid-column: span 2;
    }

    table.table-calendar-2 tr.table-weekdays-row {
        display: none;
    }

    table.table-calendar-2>tbody>tr>td.day-null {
        display: none;
    }

    table.table-calendar-2>tbody>tr>td:not(.day-null):before {
        content: attr(data-label) !important;
        float: left;
        font-weight: 400;
        color: var(--global-color-blue);
    }

    .carousel .tb-control {
        display: block;
        position: relative;
        top: 10px;
        right: 0;
        z-index: 9;
        text-align: center;
    }
}

/* Start spinner loading animation */

.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    position: relative;
}

.spinner-area {
    border: 15px solid transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotate var(--duration) var(--timing) infinite;
    mix-blend-mode: normal;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-third {
    border-top-color: var(--clrThirdSpin);
    --duration: 1.5s;
    --timing: ease-in;
}

.spinner-second {
    border-left-color: var(--clrSecondSpin);
    --duration: 2s;
    --timing: ease-in
}

.spinner-first {
    border-bottom-color: var(--clrFirstSpin);
    --duration: 3s;
    --timing: ease-in-out
}

.spinner p {
    font-size: var(--spinnerFont);
    text-transform: none;
    animation: displaying-text var(--displayingTextTime) ease-in-out infinite;
    color: #000;
}

@keyframes displaying-text {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes displayMessage {
    0 {
        opacity: 0;
    }

    100% {
        opacity: 0.85;
        transform: rotate(15deg);
    }
}

/* End spinner loading animation */