#allocate-portal
    div[data-enrolment-scheme-period]:has(> input[type="text"]:focus) {
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(3, 124, 176, 0.2) !important;
}

#allocate-portal
    div[data-enrolment-initial-entitlement]:has(> .input-balance:focus) {
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(3, 124, 176, 0.2) !important;
}

.bootstrap-select .dropdown-menu.inner > li.disabled:hover > a {
    background-color: #BABFC6 !important;
}

.border-hover-primary {
    cursor: pointer;
    transition: all 0.15s ease;
}

.border-hover-primary:hover,
.hoverable:hover .border-hover-primary {
    border-color: #02597e !important;
    transition: all 0.15s ease;
}

.bg-policy-doc-action-button:hover {
    background-color: #e6f7ff !important;
    transition: all 0.15s ease;
}

.bg-policy-doc-action-button:active {
    background-color: #02597e !important;
    transition: all 0.15s ease;
}

.bg-policy-doc-action-button:active .svg-icon svg path {
    fill: #ffffff !important;
    transition: all 0.15s ease;
}

.btn.btn-outline-primary:hover .svg-icon svg path {
    fill: #ffffff !important;
}

.btn.btn-outline-danger:hover .svg-icon svg path {
    fill: #ffffff !important;
}

.btn.btn-light-secondary:hover .svg-icon svg path {
    fill: #ffffff !important;
}

/* Override Tab colors to follow brand/60 */
.nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .nav-link.active, .nav.nav-tabs.nav-tabs-line.nav-tabs-line-2x .show > .nav-link {
    border-bottom: 2px solid rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}

.nav .show > .nav-link .nav-text, .nav .nav-link:hover:not(.disabled) .nav-text, .nav .nav-link.active .nav-text {
    color: rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}
/* End */

/*Override Bootstrap 4 tooltip to look like Flowbite*/
.tooltip .tooltip-inner {
    --tw-text-opacity: 1;
    --tw-bg-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)); !important;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important;
    border-radius: 0.75rem !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
}

.tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before {
    border-top-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important;
}
.tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before {
    border-right-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important/*rtl:ignore*/;
}
.tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
    border-bottom-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important;
}
.tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before {
    border-left-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)) !important /*rtl:ignore*/;
}
/*End*/

/* Custom Skeleton */
.skeleton {
    overflow: hidden;
    position: relative;
}

.skeleton::before {
    content: "";
    position: absolute;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    height: 100%;
    width: 100%;
    z-index: 1;
    animation: shimmer 1s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.skeleton-text {
    background: #dddddd;
    border-radius: 4px;
    height: 20px;
    margin-bottom: 5px;
}

.skeleton-text__body {
    width: 75%;
}

.skeleton-footer {
    width: 30%;
}

.skeleton-image-wrapper {
    margin-bottom: 10px;
    position: relative;
    height: 200px;
}

.skeleton-image {
    background: #dddddd;
    border-radius: 4px;
    height: 100%;
    position: absolute;
    width: 100%;
}

.footer {
    z-index: 0 !important;
}

.border-right-2x-gray {
    border-right: 2px solid lightgrey;
}

.btn-disabled {
    background-color: #BFBFBF;
    color: white !important;
}

a.btn-disabled {
    pointer-events: none;
    cursor: not-allowed !important;
}

.btn-disabled:hover {
    color: white;
    cursor: not-allowed;
}

#kt_datatable_emp_groups table, #kt_datatable_cost_centres table, #kt_datatable_emp_cost_centre table{
    background-color: transparent;
}

.bg-light-purple {
    background-color: #F0EEF6 !important;
}

.border-primary {
    --tw-text-opacity: 1;
    border-color: rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}

.bg-primary,
.wizard .wizard-step[data-wizard-state=current] .symbol .symbol-label, 
.wizard .wizard-step[data-wizard-state=done] .symbol .symbol-label,
.btn.btn-light:not(:disabled):not(.disabled).active,
.radio > input:checked ~ span
{
    background-color: rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}

.modal .modal-content {
    border-radius: 0.75rem !important;
}

.dropdown-item.selected *,
.dropdown-item:hover * {
    color: #ffffff !important;
}

/*
    Custom classes to override the text color of the content of the custom options in boostrap-select
*/
.is-selectpicker-option .is-option-selected {
    color: #ffffff !important;
}
        
.dropdown-menu > li > a:hover,
.dropdown-menu > .dropdown-item:hover,
.bootstrap-select .dropdown-menu.inner > li.selected > a,
.bootstrap-select .dropdown-menu.inner > li.active > a
{
    color: #FFFFFF;
    background-color: rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}

.text-accent1 {
    color: rgb(219 107 99 / var(--tw-border-opacity, 1)) !important;
}

.text-purple, .text-info {
    --tw-text-opacity: 1 !important;
    color: rgb(99 87 158 / var(--tw-text-opacity, 1)) !important;
}

.text-muted {
    --tw-text-opacity: 1 !important;
    color: rgb(118 128 142 / var(--tw-text-opacity, 1)) !important;
}

.text-primary, 
.btn.btn-text-primary, 
a.text-hover-primary:hover, 
.text-hover-primary:hover, 
.btn.btn-link-primary,
.wizard .wizard-step[data-wizard-state=current] .wizard-label h5, 
.wizard .wizard-step[data-wizard-state=done] .wizard-label h5 {
    --tw-text-opacity: 1;
    color: rgb(3 122 172 / var(--tw-text-opacity, 1)) !important;
}

.text-warning {
    --tw-text-opacity: 1;
    color: rgb(255 168 0 / var(--tw-text-opacity, 1)) !important;
}

.text-danger {
    --tw-text-opacity: 1;
    color: rgb(230 58 51 / var(--tw-text-opacity, 1)) !important;
}

.text-secondary {
    --tw-text-opacity: 1;
    color: rgb(3 146 207 / var(--tw-text-opacity, 1)) !important;
}

.text-success {
    --tw-text-opacity: 1;
    color: rgb(63 157 89 / var(--tw-text-opacity, 1)) !important;
}

/*
    There is no config to overwrite the default stroke-width for the Flowbite blade icon
    Thus using custom css to solve it
    Set default stroke-width to 1.5 instead
*/
.flowbite-icon path {
    stroke-width: 1.5 !important;
}

/*
    There is no config to overwrite the default stroke for the Flowbite blade icon
    Thus using custom css to solve it
    Set default stroke to currentColor instead so that we can overwrite its text color with class
*/
.flowbite-icon path[stroke] {
    stroke: currentColor !important;
}

#employees-list .bootstrap-select .dropdown-menu li span.text {
    display: block;
}
#employees-list .bootstrap-select .dropdown-menu li small {
    float: right;
}
#employees-list .bootstrap-select .dropdown-menu.inner > li > a .text small {
    color: #a2a2af !important;
}

/* Fix tailwind conflict for Metronic icons */
svg:not(.flowbite-icon) {
    display: inline;
}

.brand .brand-white-logo {
    display: none;
}

.aside-minimize .brand .brand-white-logo {
    display: inline;
}

/* Fix tailwind conflict for Metronic icons */
svg:not(.flowbite-icon) {
    display: inline;
}

.brand .brand-white-logo {
    display: none;
}

.aside-minimize .brand .brand-white-logo {
    display: inline;
}

/* Fix tailwind conflict for Metronic */
.dropdown-menu img, .dropdown.bootstrap-select img {
    display: inline;
}

/** 
    This is a temporary fix for the tailwind class manipulation via Flowbite's JS
    Remove these after Flowbite addressed this
    NOTE: Only add the tailwind classes without prefix that used by Flowbite's JS here
*/
.block{
    display: block;
}
.inline-block{
    display: inline-block;
}
.inline{
    display: inline;
}
.flex{
    display: flex;
}
.hidden{
    display: none;
}
.opacity-0{
    opacity: 0;
}
.absolute{
    position: absolute;
}
.inset-0{
    inset: 0px;
}
.transition-transform{
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.z-10{
    z-index: 10;
}
.z-20{
    z-index: 20;
}
.z-30{
    z-index: 30;
}
.z-40{
    z-index: 40;
}
.z-50{
    z-index: 50;
}
.transition-opacity{
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.ease-in-out{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.duration-300{
    transition-duration: 300ms;
}
.rotate-180{
    transform: rotate(180deg);
}
.translate-x-full{
    transform: translateX(100%);
}
.-translate-x-full{
    transform: translateX(-100%);
}
.translate-x-0{
    transform: translateX(0px);
}
.fixed{
    position: fixed;
}
.relative{
    position: relative;
}

/*To address modal overlay conflict issue*/
.bg-gray-900\/50{
    background-color: color-mix(in oklab,#111827 50%,transparent);
}
/* --End-- */

/*
    Overwrite Metronic datatable style to follow Flowbite style
*/
.datatable {
    overflow-x: auto !important;
    border-radius: 0.75rem !important;
}

table.dataTable, .datatable-table {
    --tw-text-opacity: 1;
    color: rgb(49 64 85 / var(--tw-text-opacity, 1)) !important;
    text-align: left !important;
    width: 100% !important;
}

div.dataTables_wrapper .dataTable thead, .datatable-head {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

div.dataTables_wrapper .dataTable thead th, .datatable-head span {
    text-transform: capitalize !important;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important;
    font-weight: 700 !important;
}