/***Start: Add checkbox to virtual columns selection**/

div.dataTables_wrapper div.dt-buttons {
    padding: 1rem 0;
}

.buttons-colvis {
    background: none!important;
}

.dt-button.buttons-columnVisibility{
    text-align:left;
}

.dt-button.buttons-columnVisibility:before {
    font-family: "FontAwesome";
    content: "\f096";
    display: inline-block;
    padding-right: 3px;
}

.dt-button.buttons-columnVisibility.active:before {
    font-family: "FontAwesome";
    content: "\f046";
    display: inline-block;
    padding-right: 3px;
}

.dt-buttons .dt-button {
    background: none!important;
}

.object-fit-contain{
    object-fit: contain;
}
/***End: Add checkbox to virtual columns selection**/

.switch-input  {
    --_switch-bg-clr: #70a9c5;
    --_switch-padding: 4px;
    --_slider-bg-clr: rgba(12, 74, 110, 0.65);
    --_slider-bg-clr-on: rgba(12, 74, 110, 1);
    --_slider-txt-clr: #ffffff;
    --_label-padding: 1rem 2rem;
    --_switch-easing: cubic-bezier(
            0.47,
            1.64,
            0.41,
            0.8
    );
    color: white;
    width: fit-content;
    justify-content: center;
    position: relative;
    border-radius: 9999px;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    z-index: 0;
}

.switch-input .form-check-input-custom[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.switch-input > .form-check-label-custom {
    display: grid;
    align-content: center;
    transition: opacity 300ms ease-in-out 150ms;
    padding: var(--_label-padding);
}
.switch-input::before,
.switch-input::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    transition: inset 150ms ease-in-out;
}

.switch-input::before {
    background-color: var(--_slider-bg-clr);
    position: absolute;
    top: var(--_switch-padding);
    right: 50%;
    bottom: var(--_switch-padding);
    left: var(--_switch-padding);

    transition:
            inset 500ms var(--_switch-easing),
            background-color 500ms ease-in-out;
    z-index: -1;
    box-shadow:
            inset 0 1px 1px rgba(0, 0, 0, 0.3),
            0 1px rgba(255, 255, 255, 0.3);
}

.switch-input::after {
    background-color: var(--_switch-bg-clr);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}

.switch-input:focus-within::after {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    bottom: -0.25rem;
    left: -0.25rem;
}

.switch-input:has(.form-check-input-custom:checked):hover > .form-check-label-custom:first-of-type,
.switch-input:has(.form-check-input-custom:not(:checked)):hover > .form-check-label-custom:last-of-type {
    opacity: 1;
    transition-delay: 0ms;
    transition-duration: 100ms;
}

.switch-input:has(.form-check-input-custom:checked):hover::before {
    position: absolute;
    top: var(--_switch-padding);
    right: var(--_switch-padding);
    bottom: var(--_switch-padding);
    left: 45%;
}

.switch-input:has(.form-check-input-custom:not(:checked)):hover::before {
    position: absolute;
    top: var(--_switch-padding);
    right: 45%;
    bottom: var(--_switch-padding);
    left: var(--_switch-padding);
}

.switch-input:has(.form-check-input-custom:checked)::before {
    background-color: var(--_slider-bg-clr-on);
    position: absolute;
    top: var(--_switch-padding);
    right: var(--_switch-padding);
    bottom: var(--_switch-padding);
    left: 50%;
}

.switch-input > .form-check-label-custom:last-of-type,
.switch-input > .form-check-input-custom + .form-check-label-custom:first-of-type {
    opacity: 0.75;
}

.switch-input > .form-check-input-custom:checked ~ .form-check-label-custom:last-of-type {
    opacity: 1;
}