:root,
[data-bs-theme=light] {
    --bs-info-rgb: 255, 255, 255;
    --bs-body-font-size: 1em;
    --lte-sidebar-width: 275px;
}

[data-bs-theme=dark].app-sidebar,
[data-bs-theme=dark] .app-sidebar {
    --lte-sidebar-menu-active-bg: rgb(238 133 6);
    --lte-sidebar-submenu-active-bg: rgb(238 133 6);
}

.nowrap {
    white-space: nowrap;
}

hr {
    border-top: none !important;
    height: 1px
}

hr.vertical {
    position: absolute;
    background-color: transparent;
    height: 100%;
    right: 0;
    top: 0;
    width: 1px
}

hr.vertical.light {
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0))
}

hr.vertical.dark {
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .4), transparent)
}

hr.vertical.gray-light {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent)
}

hr.horizontal {
    background-color: transparent
}

hr.horizontal.light {
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0))
}

hr.horizontal.dark {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4), transparent)
}

hr.horizontal.gray-light {
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent)
}

.offcanvas,
.offcanvas-xxl,
.offcanvas-xl,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm {
    --bs-offcanvas-width: 500px;
}

.popover {
    --bs-popover-bg: #000;
    --bs-popover-border-radius: var(--bs-border-radius-xl);
}

 .popover-body {
     color: #fff;
 }

a {
    text-decoration: none;
}

.font-outfit {
    font-family: Outfit,sans-serif;
}

.font-poppins {
    font-family: Poppins, sans-serif;
}

.font-quicksand {
    font-family: Quicksand, sans-serif;
}

.font-nunito {
    font-family: Nunito, sans-serif;
}

.login-page {
    min-height: 96vh;
}

.login-card-body {
    border-radius : 1.5rem;
}

.bg-gradient-primary {
    background-image: linear-gradient(195deg, #40acec 0%, #1b46d8 100%);
}

.bg-gradient-success {
    background-image: linear-gradient(195deg, #66BB6A 0%, #43A047 100%);
}

.bg-gradient-warning {
    background-image: linear-gradient(195deg, #FFA726 0%, #FB8C00 100%);
}

.bg-gradient-secondary {
    background-image: linear-gradient(195deg, #747b8a 0%, #495361 100%);
}

.bg-gradient-danger {
    background-image: linear-gradient(195deg, #EF5350 0%, #E53935 100%);
}

.bg-gradient-info {
    background-image: linear-gradient(195deg, #49a3f1 0%, #1A73E8 100%);
}

.modal {
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - (var(--bs-border-width)));
}

.pagination {
    --bs-pagination-border-radius: var(--bs-border-radius-xl);
}

.page-item .page-link {
    width: 34px;
    height: 34px;
    line-height: 20px;
    text-align: center;
}

.accordion {
    --bs-accordion-border-radius: var(--bs-border-radius-xl);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-xl) - (var(--bs-border-width)));
}

.bg-gray-100 {
    background-color: #f5f5f5 !important;
}

.bg-gray-200 {
    background-color: #e5e5e5 !important;
}

.sidebar-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-wrapper .nav-icon {
    justify-content: right;
    font-size: 1.15rem;
}

.sidebar-brand {
    height: 6.6rem;
}

.sidebar-mini.sidebar-collapse .sidebar-menu .nav-link {
    width: 4.6rem;
}

.sidebar-brand .brand-link .brand-image {
    max-height: 60px;
}

.sidebar-menu .nav-item>.nav-link {
    margin-bottom: 0;
}

.sidebar-menu .nav-link {
    border-radius: 0;
}

.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link.active:not(:hover) {
    background-color: #f1f3f5;
    border-right: 4px solid #86b7fe;
    border-radius: 0;
}

.sidebar-wrapper .sidebar-menu>.nav-item.menu-open .nav-link.active:not(:hover) {
    --lte-sidebar-menu-active-bg: rgb(6, 114, 238);
    font-weight: 500;
}

.sidebar-wrapper .nav-treeview>.nav-item>.nav-link.active,
.sidebar-wrapper .nav-treeview>.nav-item>.nav-link.active:hover,
.sidebar-wrapper .nav-treeview>.nav-item>.nav-link.active:focus {
    font-weight: 500;
    border-right: 4px solid #000;
}

.sidebar-brand .brand-text p {
    font-size: 15px;
    color: #6c757d;
    font-weight: 300;
}

.fixed-header .app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.app-header .nav-link {
    height: auto;
}

.app-header .nav-link i {
    font-size: 1.75em;
    line-height: 1;
}

.app-header .nav-link i.ph-bell {
    top: 5px;
    position: relative;
}

.navbar-expand .navbar-nav .dropdown-menu {
    overflow: hidden;
}

.navbar-badge {
    top: 15px;
    right: 10px;
    padding: 5px;
}

.navbar-nav>.user-menu {
    border: 1px solid #ddd;
    border-radius: 0.75rem;
}

.navbar-expand .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.card {
    border-radius: var(--bs-border-radius-xl) !important;
    box-shadow: none;
    border-width: 0;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-xl) - (var(--bs-border-width)));
}

.card-footer {
    background-color: 1px solid var(--bs-border-color-translucent);
}

.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn.btn-default {
    border: 2px solid #E2E8F0;
}

.btn.btn-default:hover {
    background-color: #f4f4f4;
    border: 2px solid #c2d8f5;
}

.btn.btn-default i.ph {
    position: relative;
    top: 2px;
    margin-right: 3px;
    font-size: 1.25em;
    font-weight: 500;
    color: #45556C;
}

.btn-sm,
.btn-group-sm>.btn {
    --bs-btn-padding-x: 0.5rem !important;
}

.btn-dark {
    --bs-btn-bg: unset;
    background-image: linear-gradient(195deg, #42424a 0%, #191919 100%);
}

.btn-warning {
    --bs-btn-bg: #ffa807;
    --bs-btn-border-color: #ffa807;
    --bs-btn-disabled-bg: #ffa807;
    --bs-btn-disabled-border-color: #ffa807;
    color: #fff;
}

.btn-info {
    --bs-btn-bg: #0da3f0;
    --bs-btn-border-color: #0da3f0;
    --bs-btn-disabled-bg: #0da3f0;
    --bs-btn-disabled-border-color: #0da3f0;
    color: #fff;
}

.btn-social {
    position: relative;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-social span {
    padding-right: 5px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.badge {
    --bs-badge-padding-x: 0.9em;
    --bs-badge-padding-y: 0.55em;
    text-transform: uppercase;
    font-weight: 500;
    min-width: 20px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
}

.form-control {
    border-radius: var(--bs-border-radius-lg);
    font-size: 14px;
    padding: 0.5rem 0.75rem;
}

.form-select {
    border-radius: var(--bs-border-radius-lg);
    font-size: 14px;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #e0e3e694;
    opacity: 1;
}

.form-control::placeholder {
    color: #a2aab1;
}

.input-group-text {
    background-color: #fff;
    border-right: 0;
    padding: 0.375rem 0.5rem;
    font-size: 1.2em;
    color: #555;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-left: 0;
    padding-left: 0.25rem;
}

.input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

select+.select2-container--bootstrap-5 {
    width: 100% !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: 0.75rem !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--bs-border-radius-lg) !important;
    font-size: 14px !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: 14px !important;
}

.input-group .btn.btn-danger {
    background-color: #dc3545 !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.tox .tox-statusbar {
    height: 30px !important;
}

.table-shadow {
    box-shadow: 0px 0px 1px rgb(0 0 0 / 61%) !important;
}

.table thead th {
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

th {
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

table.thead tr,th {
    text-transform: uppercase;
    font-size: 14px;
}

table.dataTable thead th {
    text-align: center !important;
    text-transform: uppercase;
    font-size: 12px;
}

table.dataTable tbody td {
    font-size: 14px;
}

.info-box {
    border-radius: 1rem;
    box-shadow: none;
    border: 1px solid #ddd;
    padding: 1rem;
}

.info-box .info-box-icon {
    border-radius: 0.75rem;
    height: 70px;
}

.info-box .info-box-icon {
    width: 70px;
    font-size: 3rem;
    opacity: 0.5;
}

.info-box .info-box-text {
    font-size: 14px;
}

.info-box .info-box-number {
    margin-top: 0;
    font-size: 1.5em;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

.navbar-nav>.user-menu>.dropdown-menu,
.navbar-nav>.user-menu>.dropdown-menu>.user-body {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.navbar-nav>.user-menu>.dropdown-menu {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.progress,
.progress-stacked {
    --bs-progress-height: auto;
    border-radius: 1rem;
}

.progress .progress-bar {
    border-radius: 2rem;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    border-radius: 1.5rem !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    border-radius: 1.5rem !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-deny {
    border-radius: 1.5rem !important;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel {
    border-radius: 1.5rem !important;
}

.toast {
    --bs-toast-border-radius: 0.65rem;
}

.toast-custom {
    background-color: #fff !important;
}

.toast-custom .toast-body {
    color: #212529;
    font-size: 0.9em;
}

.toast-custom.bg-success .toast-body {
    color: #198754;
}

.toast-custom.bg-success .toast-header .bi {
    color: #198754;
}

.toast-custom.bg-warning .toast-body {
    color: #f77a05;
}

.toast-custom.bg-warning .toast-header .bi {
    color: #f77a05;
}

.toast-custom.bg-danger .toast-body {
    color: #dc3545;
}

.toast-custom.bg-danger .toast-header .bi {
    color: #dc3545;
}

.toast-custom.bg-info .toast-body {
    color: #35bbdc;
}

.toast-custom.bg-info .toast-header .bi {
    color: #35bbdc;
}

img.img-thumbnails {
    max-width: 100px;
}

.avatar {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: .5rem;
    width: 48px;
    height: auto;
    transition: all .2s ease-in-out;
}

.f-panzoom__viewport>.f-panzoom__content {
    border-radius: 1rem !important;
}

.modal-footer {
    justify-content: space-between;
}

.fit-content {
    width: fit-content;
}

.pagination {
    margin-bottom: 0;
}

.dropdown-menu {
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
}

.dropdown-item {
    white-space: normal;
    display: flow-root;
}

.notification-item i.ph {
    font-size: 1.05em;
    top: 1px;
    position: relative;
}

@media (min-width: 992px) {
    .sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
        height: calc(100vh - (calc(6.6rem + 1px)));
    }
}

@media (max-width: 640px) {
    .btn-block {
        width: 100%;
    }

   .pagination {
       margin-bottom: 1rem;
   }
}

@media (min-width: 576px) {
    .navbar-nav>.user-menu .user-image {
        margin-top: 0
    }
}