html {
  font-size: 16px;
}

/* Disable the main scrollbar */
html, body {
    overflow: hidden; /* Prevent scrolling on the page */
}

body {
    --vtk-background: #222222;
    --vtk-primary: rgb(87, 78, 185);
    --vtk-primary-lighter-5: rgb(106, 100, 195);
    --vtk-primary-lighter-10: rgb(125, 118, 205);
    --vtk-primary-lighter-20: rgb(163, 158, 225);
    --vtk-primary-darker-5: rgb(73, 64, 175);
    --vtk-primary-darker-10: rgb(59, 50, 165);
    --vtk-primary-darker-20: rgb(35, 26, 125);
    --vtk-secondary: #444444;
    --vtk-light: #CCCCCC;
    --vtk-badge-background: #444444;
    --vtk-badge-color: #FFFFFF;
    --vtk-badge-border: 0;
    --vtk-input-color: #FFFFFF;
    --vtk-input-background: #444444;
    --vtk-input-border: 0;
    --vtk-select-color: #FFFFFF;
    --vtk-select-background: #444444;
    --vtk-select-border: 0;
    --vtk-scroll-color: var(--bs-light);
    --vtk-scroll-background: var(--bs-dark);
    --vtk-textarea-background: #222222;
    --vtk-understate-color: #777777;
    --vtk-daterow-color: #999999;
    --vtk-contrast-color: #FFFFFF;
    --vtk-outputsection-background: transparent;
    --vtk-outputsection-border: 1px solid #444444;
    --vtk-outputsection-color: #FFFFFF;
    --vtk-outputsection-copyicon-color: #CCCCCC;
    --vtk-selecteditem-background: #444444;
    --vtk-selecteditem-color: #FFFFFF;
}

    body.theme-flatly {
        background-color: #EEEEEE;
        --vtk-background: #EEEEEE;
        --vtk-primary: rgb(106, 100, 195);
        --vtk-primary-lighter-5: rgb(122, 117, 205);
        --vtk-primary-lighter-10: rgb(138, 134, 215);
        --vtk-primary-lighter-20: rgb(170, 168, 230);
        --vtk-primary-darker-5: rgb(90, 83, 185);
        --vtk-primary-darker-10: rgb(74, 66, 165);
        --vtk-primary-darker-20: rgb(42, 34, 125);
        --vtk-secondary: #777777;
        --vtk-light: #999999;
        --vtk-badge-background: #FFFFFF;
        --vtk-badge-color: #000000;
        --vtk-badge-border: 1px solid #888888;
        --vtk-input-color: #000000;
        --vtk-input-background: #FFFFFF;
        --vtk-input-border: 1px solid #888888;
        --vtk-select-color: #000000;
        --vtk-select-background: #FFFFFF;
        --vtk-select-border: 1px solid #888888;
        --vtk-scroll-color: var(--bs-light);
        --vtk-scroll-background: #CCCCCC;
        --vtk-textarea-background: #FFFFFF;
        --vtk-understate-color: #666666;
        --vtk-daterow-color: #444444;
        --vtk-contrast-color: #000000;
        --vtk-outputsection-background: #FFFFFF;
        --vtk-outputsection-border: 1px solid #888888;
        --vtk-outputsection-color: #000000;
        --vtk-outputsection-copyicon-color: #777777;
        --vtk-selecteditem-background: #888888;
        --vtk-selecteditem-color: #FFFFFF;
    }

        body.theme-flatly .navbar {
            --bs-dark: #555555;
            --bs-dark-rgb: 85, 85, 85;
        }

        body.theme-flatly .btn-secondary {
            --bs-btn-bg: var(--vtk-secondary);
            --bs-btn-border-color: var(--vtk-secondary);
            --bs-btn-hover-bg: #666666;
            --bs-btn-hover-border-color: #777777;
            --bs-btn-active-bg: var(--vtk-secondary);
            --bs-btn-active-border-color: var(--vtk-secondary);
        }

        body.theme-flatly .form-check-input {
            border: 1px solid var(--vtk-secondary);
        }

.vertical-separator-5 {
    height: 5px;
    min-height: 5px;
}

.vertical-separator-10 {
    height: 10px;
    min-height: 10px;
}

.horizontal-separator-3 {
    width: 3px;
    min-width: 3px;
}

.horizontal-separator-5 {
    width: 5px;
    min-width: 5px;
}

.horizontal-separator-10 {
    width: 10px;
    min-width: 10px;
}

.padding-10px {
    padding: 10px;
}

.saved-indicator {
    color: var(--bs-success);
    font-size: 13px;
    opacity: 0.8;
    font-family: "Arial", sans-serif; /* Use a consistent font */
    transition: opacity 0.5s ease; /* Smooth fade */
}

.unsaved-indicator {
    color: var(--bs-warning);
    font-family: "Arial", sans-serif; /* Use a consistent font */
    font-size: 13px;
    opacity: 0.8;
}

/* Custom form-check-input with a purple background when checked */
.form-check-input.form-check-input-primary:checked {
    background-color: var(--vtk-primary);
}

.form-floating:focus {
    background: red !important;
}

/* Remove autofill (light blue) background color caused by web browser's autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: black !important; /* Ensures text remains black */
    transition: background-color 5000s ease-in-out 0s; /* Prevents future color changes */
}

.nav-pills .nav-link {
    color: var(--vtk-contrast-color);
}

/* Active navigation item styling */
    .nav-pills .nav-link.active {
        background-color: var(--vtk-selecteditem-background);
        color: var(--vtk-selecteditem-color);
    }
/*.nav-pills .nav-link.active {
    background-color: var(--vtk-secondary);
    color: white;
}*/

/* Extra large button */
.btn-lg.extra-height {
    padding: 1rem 2rem; /* Adjust padding for height and width */
    font-size: 1.25rem; /* Adjust font size if necessary */
}

/* Ensure label items stay on the same row */
.single-row-label {
    white-space: nowrap; /* Prevent text from wrapping */
    display: inline-flex; /* Use inline-flex to keep items on the same line */
    align-items: center; /* Vertically center the items */
}

/* Make dialog appear at center of screen */
.modal {
    align-items: center;
    justify-content: center;
}

/* Set the width of the form container */
.fixed-width-form {
    width: 500px; /* Set a fixed width of 500px */
    max-width: 100%; /* Ensure the form doesn't overflow on smaller screens */
}

/* checkbox switch */
.form-check-input:checked {
    background-color: var(--vtk-secondary);
    border-color: var(--vtk-secondary);
}
    .form-check-input:checked:focus {
        box-shadow: none;
    }
    .form-check-input:not(:checked):focus {
        box-shadow: none;
    }

/* select control */
select.form-control {
    background-color: var(--vtk-select-background);
    color: var(--vtk-contrast-color);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    border: var(--vtk-select-border);
    box-shadow: none;
    -webkit-appearance: menulist; /* Restore default dropdown arrow in WebKit browsers */
    -moz-appearance: none; /* Restore default dropdown arrow in Firefox */
    appearance: menulist; /* Restore default dropdown arrow in modern browsers */
}

    /* select control options */
    select.form-control option {
        background-color: var(--vtk-select-background);
        color: var(--vtk-select-color);
        padding-top: 0;
        padding-bottom: 0;
    }

    /* select control when focused */
    select.form-control:focus {
        background-color: var(--vtk-select-background);
        color: var(--vtk-select-color);
        border: var(--vtk-select-border);
        box-shadow: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* select control when disabled */
    select.form-control:disabled {
        background-color: var(--vtk-select-background);
        color: var(--vtk-select-color);
        opacity: 0.65; /* Slight opacity to indicate it's disabled */
    }

/* textarea control */
textarea.form-control {
    background-color: var(--vtk-textarea-background);
    color: var(--bs-body);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    border: none;
    box-shadow: none;
    scrollbar-color: var(--vtk-scroll-color) var(--vtk-scroll-background); /* Thumb and track colors */
}

    /* textarea control when focused */
    textarea.form-control:focus {
        background-color: var(--vtk-textarea-background);
        color: var(--bs-body);
        border: none;
        box-shadow: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* textarea control when disabled */
    textarea.form-control:disabled {
        background-color: var(--vtk-textarea-background);
        opacity: 0.65; /* Slight opacity to indicate it's disabled */
    }


.hover-border-off:not(.active):hover {
    border: 1px solid transparent !important;
}

button:disabled {
    color: var(--bs-dark);
    cursor: default;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vtk-primary);
    --bs-btn-border-color: var(--vtk-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vtk-primary-darker-5);
    --bs-btn-hover-border-color: var(--vtk-primary-darker-5);
    --bs-btn-focus-shadow-rgb: var(--vtk-primary-lighter-20);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vtk-primary-darker-10);
    --bs-btn-active-border-color: var(--vtk-primary-darker-10);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--vtk-primary);
    --bs-btn-disabled-border-color: var(--vtk-primary);
}

.btn-outline-selected {
    --bs-btn-color: var(--vtk-selecteditem-background);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--vtk-selecteditem-background);
    --bs-btn-active-color: var(--vtk-selecteditem-color);
    --bs-btn-active-bg: var(--vtk-selecteditem-background);
    --bs-btn-active-border-color: var(--vtk-selecteditem-background);
}

.table {
    background-color: transparent; /* Set your desired background color */
}

    .table td,
    .table th {
        background-color: inherit; /* Inherit from table */
    }



/* Loader */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.box {
    width: 20px;
    height: 20px;
    margin: 0 8px;
    border-radius: 50%;
    animation: jump_4123 1s ease-in-out infinite;
}

    .box:nth-child(1) {
        background-color: #4e4e4e;
        animation-delay: 0.2s;
    }

    .box:nth-child(2) {
        background-color: #bdbdbd;
        animation-delay: 0.4s;
    }

    .box:nth-child(3) {
        background-color: #4e4e4e;
        animation-delay: 0.6s;
    }

    .box:nth-child(4) {
        background-color: #bdbdbd;
        animation-delay: 0.8s;
    }

@keyframes jump_4123 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}
/* Loader */