/* Colors based on your palette */
:root {
    --theme-primary: #2361ce;
    --theme-secondary: #b7c0cd;
    --theme-success: #13b981;
    --theme-danger: #ff476f;
    --theme-subtle-primary: #2361ce8f;
    --theme-subtle-secondary: #b7c0cd8f;
    --theme-subtle-success: #13b9818f;
    --theme-subtle-danger: #ff476f8f;
}

/* Text color theme */
.text-theme-primary, .text-theme-primary:hover {
    color: var(--theme-primary) !important;
}

.text-theme-secondary, .text-theme-secondary:hover {
    color: var(--theme-secondary) !important;
}

.text-theme-success, .text-theme-success:hover {
    color: var(--theme-success) !important;
}

.text-theme-danger, .text-theme-danger:hover {
    color: var(--theme-danger) !important;
}

/* Background color theme */
.bg-theme-primary {
    background-color: var(--theme-primary) !important;
}

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

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

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

/* Hover text color theme */
.text-theme-primary-hover:hover {
    color: var(--theme-primary) !important;
}

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

.text-theme-success-hover:hover {
    color: var(--theme-success) !important;
}

.text-theme-danger-hover:hover {
    color: var(--theme-danger) !important;
}

/* Hover background color theme */
.bg-theme-primary-hover:hover {
    background-color: var(--theme-primary) !important;
}

.bg-theme-secondary-hover:hover {
    background-color: var(--theme-secondary) !important;
}

.bg-theme-success-hover:hover {
    background-color: var(--theme-success) !important;
}

.bg-theme-danger-hover:hover {
    background-color: var(--theme-danger) !important;
}

/*<=========================== <Custom popovers> ===========================>*/

.status-popover{
    min-width: 250px;
}

.status-popover .popover-arrow{
    display: none;
}
.status-popover .popover-header{
    color: var(--bs-white);
    font-size: 22px;
}

.status-popover .popover-header::before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    margin-right: 5px;
    content: "\f192";
}

.status-popover .popover-body{
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    border-radius: inherit;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.bg-theme-primary-popover .popover-header{
    background-color: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.bg-theme-primary-popover .popover-body{
    border: 1px solid var(--theme-primary);
}

.bg-theme-secondary-popover .popover-header{
    background-color: var(--theme-secondary);
    border: 1px solid var(--theme-secondary);
}

.bg-theme-secondary-popover .popover-body{
    border: 1px solid var(--theme-secondary);
}

.bg-theme-success-popover .popover-header{
    background-color: var(--theme-success);
    border: 1px solid var(--theme-success);
}

.bg-theme-success-popover .popover-header::before{
    content: "\f058";
}

.bg-theme-success-popover .popover-body{
    border: 1px solid var(--theme-success);
}

.bg-theme-danger-popover .popover-header{
    background-color: var(--theme-danger);
    border: 1px solid var(--theme-danger);
}

.bg-theme-danger-popover .popover-header::before{
    content: "\f057";
}

.bg-theme-danger-popover .popover-body{
    border: 1px solid var(--theme-danger);
}

.bg-info-popover .popover-header{
    background-color: var(--bs-info);
    border: 1px solid var(--bs-info);
}

.bg-info-popover .popover-body{
    border: 1px solid var(--bs-info);
}


.bg-warning-popover .popover-header{
    background-color: var(--bs-warning);
    border: 1px solid var(--bs-warning);
}

.bg-warning-popover .popover-header::before{
    content: "\f06a";
}

.bg-warning-popover .popover-body{
    border: 1px solid var(--bs-warning);
}

/*<=========================== <Sidebar> ===========================>*/


.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item:not(.no-hover) .nav-link:hover,
.dropdown-item:hover{
    color: #fff !important;
    /* background-color: #3758f9; */
    background-color: rgba(var(--bs-info-rgb, rgb(34, 96, 205)), var(--bs-bg-opacity, 1)) !important;
}


.dropdown-item:hover > .dropdown-icon,
.dropdown-item:hover > .icon,
.sidebar .nav-item:not(.no-hover) .nav-link:hover .sidebar-icon,
.sidebar .nav-item:not(.no-hover) .nav-link:hover strong.text-black,
.sidebar .nav-item.active > .nav-link .sidebar-icon{
    color: #fff !important;
}

.sidebar .nav-item .nav-link,
.dropdown-item {
    color: rgba(var(--bs-gray-500-rgb, rgb(107, 114, 128)), var(--bs-text-opacity, 1)) !important;
}

.dropdown-item.bg-danger {
    color: rgba(var(--bs-danger-rgb, rgb(225, 29, 72)), var(--bs-bg-opacity, 1)) !important;
    background-color: #fff !important;
}

.dropdown-item.bg-danger:hover {
    color: #fff !important;
    background-color: rgba(var(--bs-danger-rgb, rgb(225, 29, 72)), var(--bs-bg-opacity, 1)) !important;
}

.dropdown-item.bg-primary {
    color: rgba(var(--bs-primary-rgb, rgb(31, 41, 55)), var(--bs-bg-opacity, 1)) !important;
    background-color: #fff !important;
}

.dropdown-item.bg-primary:hover {
    color: #fff !important;
    background-color: rgba(var(--bs-primary-rgb, rgb(31, 41, 55)), var(--bs-bg-opacity, 1)) !important;
}

.sidebar .nav-item.no-hover .nav-link:hover{
    background-color: unset !important;
  }

.sidebar .custom-nav{
    height: 95vh;
    position: relative;
}

.sidebar .custom-nav li.nav-item:last-child{
    width: 100%;
    position: absolute;
    bottom: 20px;
}
@media (max-width: 576px) {
    .sidebar .custom-nav li.nav-item:last-child{
        position: unset;
    }
}
/*<=========================== </Sidebar> ===========================>*/

.table-custom{
    border-collapse: separate;
    border-spacing: 0 5px;
    background-color: transparent;
}

.table-custom tbody > tr td{
    background-color: rgba(var(--bs-white-rgb, #fff), var(--bs-bg-opacity, 1));
}

.table-custom tbody > tr td:first-child{
    border-bottom-left-radius: 0.5rem !important;
    border-top-left-radius: 0.5rem !important;
}

.table-custom tbody > tr td:last-child{
    border-bottom-right-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.bg-items-white > *{
    background-color: #fff !important;
}

.status-badge{
    min-width: 85px;
    text-align: center;
}

/*<============================ <Body Styling> ============================>*/

.page-break-before {
    page-break-before: always;
}
.page-break-after {
    page-break-after: always;
}
.page-break-avoid {
    page-break-inside: avoid;
}

.min-h-39px {
    min-height: 39px;
}

/*<Loader>*/
#loader-container,
#body-loader-container{
    z-index: 2;
    background: #ffffffbf;
}
#body-loader-container{
    position: fixed;
    z-index: 101;
    height: 100vh !important;
    width: 100% !important;
    background: #ffffffeb;
}
.loader,
.body-loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: 20% auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*</Loader>*/
.hoverable:hover{
    background-color: rgb(226, 228, 230) !important;
    cursor: pointer;
}

.pagination .page-link.active{
    color: black;
    background-color: #E5E7EB;
    border-color: #D1D5DB;
}
.highlighted {
    background-color: #f2cfcf !important;
    transition: background-color 1.5s ease-out;
}
.hoverable-progress{
    transition: min-height 0.4s ease-in-out;
    min-height: 5px;
}
.hoverable-progress .hover-text{
    display: none;
}
.hoverable-progress:hover{
    min-height: 15px;
}
.hoverable-progress:hover .hover-text{
    display: inline-block;
}
/*<============================ </Body Styling> ============================>*/