.btn-setting-top-0 {
    padding: 0.5rem;
    z-index: 1000;
    top: 10%;
}

.btn-setting-top-10{
    padding: 0.5rem;
    z-index: 1000;
    top: 10%;
}

.btn-setting-top-20 {
    padding: 0.5rem;
    z-index: 1000;
    top: 20%;
}

.btn-setting-top-30 {
    padding: 0.5rem;
    z-index: 1000;
    top: 30%;
}

/* Ensure the parent wrapper is relatively positioned */
.search-wrapper {
    position: relative;
}

/* Style the dropdown container */
.search-dropdown {
    position: absolute;
    top: 100%; /* Positions the dropdown right below the search input */
    left: 29px; /* Aligns the dropdown to the left edge of the search wrapper */
    width: 56vw; /* Makes the dropdown span the full viewport width */
    max-width: none; /* Overrides any max-width if set elsewhere */
    z-index: 1000; /* Ensures the dropdown is above other elements */
    display: none; /* Hidden by default; shown when needed */
}

    /* Optional: Style the dropdown content */
    .search-dropdown ul {
        list-style: none;
        margin: 0;
        padding: 10px;
    }

    .search-dropdown li {
        padding: 8px 12px;
        cursor: pointer;
    }

        .search-dropdown li:hover {
            background-color: #f0f0f0;
        }

/* Print-specific styles */
@media print {
    /* Remove margins and paddings to utilize full page width */
    body {
        margin: 10mm;
        padding: 0;
    }

    /* Style the header */
    .modal {
        display: none !important; /* Hide modals during print */
    }

    /* Adjust the custom table header */
    h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
    }

    /* Style the table to fit within the page */
    table.print-table {
        width: 100% !important;
        border-collapse: collapse;
        font-size: 12px; /* Adjust font size for readability */
    }

        /* Ensure table headers have a background color */
        table.print-table thead th {
            background-color: #f2f2f2;
            border: 1px solid #ddd;
        }

        /* Add borders to table cells */
        table.print-table tbody td {
            border: 1px solid #ddd;
        }

    /* Handle table overflow */
    .dataTables_wrapper {
        overflow: visible !important;
    }

    /* Hide the Download button in print view */
    .download-button {
        display: none !important;
    }
}

.chart {
    width: 100%;
    height: 400px;
}

.bg-blue {
    --bs-bg-opacity: 1;
    background-color: #007aff !important;
}

.modal-md {
    --bs-modal-width: 800px !important;
}

.modal-lg {
    --bs-modal-width: 1200px !important;
}


.renderedMarkdown code{
    color: #212529 !important;
}

/* Default State: Sidebar is NOT mini */

/* Show the normal logo */
.sidebar .logo-normal {
    display: block;
}

/* Hide the mini logo */
.sidebar .logo-mini {
    display: none;
}

/* Mini State: Sidebar has the 'sidebar-mini' class */

/* When sidebar is mini, hide the normal logo */
.sidebar.sidebar-mini .logo-normal {
    display: none;
}

/* When sidebar is mini, show the mini logo */
.sidebar.sidebar-mini .logo-mini {
    display: block;
}

.json-viewer {
    background-color: #313437;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    overflow: auto;
    /*height: 100%;*/
}

.full-height {
    height: 100%;
}


/* HTML: <div class="loader"></div> */
.cleanloader {
    width: 150px;
    aspect-ratio: 1;
    display: grid;
    border: 8px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}

    .cleanloader::before,
    .cleanloader::after {
        content: "";
        grid-area: 1/1;
        margin: 2px;
        border: inherit;
        border-radius: 50%;
    }

    .cleanloader::before {
        border-color: var(--bs-primary) #0000;
        animation: inherit;
        animation-duration: .5s;
        animation-direction: reverse;
    }

    .cleanloader::after {
        margin: 8px;
    }

@keyframes l16 {
    100% {
        transform: rotate(1turn)
    }
}

:root {
            --skeleton-bg: hsl(200, 20%, 99%);
            --skeleton-bg-alt: hsl(200, 20%, 80%);
            --skeleton-animation-duration: 1s;
        }

.skeleton {
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    background-color: #a5a5a530;
    opacity:0.5;
}

@keyframes skeleton-loading {
    0% {
        background-color: var(--skeleton-bg);
    }

    100% {
        background-color: var(--skeleton-bg-alt);
    }
}

/* Table Skeleton Styles */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

    .skeleton-table th,
    .skeleton-table td {
        padding: 0.75rem;
        border: 1px solid #8080801f;
    }

        .skeleton-table th .skeleton-cell,
        .skeleton-table td .skeleton-cell {
            height: 1rem;
            border-radius: 0.25rem;
        }

        .skeleton-table th .skeleton-cell {
            width: 60%;
        }

        .skeleton-table td .skeleton-cell {
            width: 80%;
        }

/* Button Skeleton Styles */
.skeleton-button {
    display: inline-block;
    width: 100px;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: var(--skeleton-bg);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 0.5rem 0;
    border: none;
    opacity: 0.5;
}

/* Avatar Skeleton Styles */
.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--skeleton-bg);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 1rem 0;
    opacity: 0.5;
}

.skeleton-avatarsmall {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--skeleton-bg);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 1rem 0;
    opacity: 0.5;
}

/* Avatar Skeleton Styles */
.skeleton-progressround {
    width: 10rem;
    height: 10rem;
    margin-left:auto !important;
    margin-right:auto !important;
    border-radius: 50%;
    background-color: var(--skeleton-bg);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 1rem 0;
    opacity: 0.5;
}

/* Card Skeleton Styles */
.skeleton-card {
    padding: 1rem;
    border: 1px solid hsl(200, 20%, 85%);
    border-radius: 0.5rem;
    background-color: hsl(200, 20%, 90%);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 1rem 0;
}

    .skeleton-card .skeleton-cell {
        height: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        background-color: var(--skeleton-bg);
        animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    }

    .skeleton-card .skeleton-title {
        width: 60%;
        height: 1.5rem;
        margin-bottom: 1rem;
    }

    .skeleton-card .skeleton-content {
        width: 100%;
        height: 1rem;
    }

/* Image Skeleton Styles */
.skeleton-image {
    width: 150px;
    height: 150px;
    background-color: var(--skeleton-bg);
    border-radius: 0.5rem;
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin: 1rem 0;
    opacity: 0.5;
}

.skeleton-text {
    width: 100%;
    height: 0.7rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--skeleton-bg);
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    opacity: 0.5;
}

.skeleton-input {
    width: 100%;
    height: 2rem;
    border-radius: 0.25rem;
    border-color: var(--skeleton-bg);
    opacity: 0.5;
    background-color:transparent;
    animation: skeleton-loading var(--skeleton-animation-duration) linear infinite alternate;
    margin-bottom: 0.5rem;
}

#l2 {
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #393939;
    box-shadow: 0 0 0 0 #676767;
    animation: l2 1.5s infinite linear;
    position: relative;
}

    #l2:before,
    #l2:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 #676767;
        animation: inherit;
        animation-delay: -0.5s;
    }

    #l2:after {
        animation-delay: -1s;
    }

@keyframes l2 {
    100% {
        box-shadow: 0 0 0 40px #0000
    }
}

#l4 {
    width: 65px;
    aspect-ratio: 1;
    position: relative;
}

    #l4:before,
    #l4:after {
        content: "";
        position: absolute;
        border-radius: 50px;
        box-shadow: 0 0 0 3px inset #676767;
        animation: l4 2.5s infinite;
    }

    #l4:after {
        animation-delay: -1.25s;
    }

@keyframes l4 {
    0% {
        inset: 0 35px 35px 0;
    }

    12.5% {
        inset: 0 35px 0 0;
    }

    25% {
        inset: 35px 35px 0 0;
    }

    37.5% {
        inset: 35px 0 0 0;
    }

    50% {
        inset: 35px 0 0 35px;
    }

    62.5% {
        inset: 0 0 0 35px;
    }

    75% {
        inset: 0 0 35px 35px;
    }

    87.5% {
        inset: 0 0 35px 0;
    }

    100% {
        inset: 0 35px 35px 0;
    }
}

.dark .iq-media-group .iq-icon-box-3 {
    background: #222738;
}

.dark .datepicker-picker {
    background-color: #222738;
}

    .dark .datepicker-picker .datepicker-title {
        background-color: #222738;
    }

    .dark .datepicker-picker .datepicker-controls .button {
        background-color: #222738;
        color: #8A92A6;
    }

.dark .offcanvas {
    background-color: #212529 !important;
    color: #8A92A6;
}

.dark .custom-accordion .accordion-item {
    background: #222738;
}

.dark .sidebar {
    background-color: #212529 !important;
}

.dark .footer {
    background-color: #212529 !important;
}

.dark .nav {
    background: transparent !important;
}

.dark .iq-navbar {
    border-color: #212529 !important;
    background-color: #212529 !important;
}

@media (max-width: 991.98px) {
    .dark .iq-navbar .navbar-collapse:not(.offcanvas-collapse) {
        background: #212529 !important;
    }
}

.dark .card {
    background: #212529 !important;
}

    .dark .card .card-header, .dark .card .card-footer {
        background-color: #212529 !important;
        border-bottom-color: #30384f;
    }

.dark .apexcharts-theme-light .apexcharts-tooltip {
    background: #222738;
    border: 1px solid #30384f;
}

    .dark .apexcharts-theme-light .apexcharts-tooltip .apexcharts-tooltip-title {
        background: #222738;
        border: 1px solid #30384f;
    }

.dark .apexcharts-theme-light .apexcharts-xaxistooltip {
    background: #222738;
    border: 1px solid #30384f;
}

.dark .form-control {
    color: #8A92A6;
    background-color: #3a3f45 !important;
    border-color: #212529;
}

.dark .form-check-input {
    color: #8A92A6;
    background-color: #212529 !important;
    border-color: #30384f;
}

.dark .form-select {
    color: #8A92A6;
    background-color: #3a3f45 !important;
}

.dark .input-group-text {
    background-color: #222738;
    border-color: #30384f;
}

.dark .custom-form-floating > .form-control:focus ~ label,
.dark .custom-form-floating > .form-control:not(:placeholder-shown) ~ label,
.dark .custom-form-floating > .form-select ~ label {
    background-color: #212529 !important;
}

.dark #top-tab-list li a {
    color: #212529 !important;
    background: #151824;
}

    .dark #top-tab-list li a .iq-icon {
        background: #212529 !important;
    }

.dark .profile-dots-pills {
    background-color: #222738;
}

.dark .page-item .page-link {
    background-color: #3a3f45;
    border-color: #3a3f45;
    color: #8A92A6;
}

.dark .popover-header {
    background-color: #222738;
}

.dark .toast .toast-header {
    background-color: #222738;
}

.dark .login-content .bg-white {
    background: #222738 !important;
}


.dark thead, .dark tbody, .dark tfoot, .dark tr, .dark td, .dark th {
    border-color: #30384f;
    color: #8A92A6;
}

.dark .table thead tr th {
    background-color: #212529 !important;
}

.dark .input-group-text {
    background-color: #3a3f45 !important;
}

.dark .dropdown > .dropdown-menu {
    background-color: #3a3f45 !important;
    color:#fff !important;
}

.dark .dropdown-menu .dropdown-item {
    color: #fff !important;
}

.dark .nav-link {
    color: #676767;
}

.dark .accordion-body {
    background: #121212 !important;
}

.dark .accordion-button {
    background: #1c1c1c !important;
}

#l6 {
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 #fff;
    position: relative;
    display: grid;
    clip-path: inset(-60px 0 -5px)
}

    #l6:after {
        content: "";
        position: relative;
        background: repeating-linear-gradient(90deg,#0000 0 calc(50% - 8px), #ccc 0 calc(50% + 8px), #0000 0 100%) 0 0/calc(100%/3) 100%;
        animation: l6-1 1s infinite;
    }

    #l6:before {
        content: "";
        position: absolute;
        width: 14px;
        aspect-ratio: 1;
        left: calc(50% - 7px);
        bottom: 0;
        border-radius: 50%;
        background: lightblue;
        animation: l6-2 1s infinite;
    }

@keyframes l6-1 {
    50%,100% {
        background-position: calc(100%/2) 0
    }
}

@keyframes l6-2 {
    0%,50% {
        transform: translateY(-80px)
    }
}


/* Skeleton Timeline Styles */
.skeleton-timeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 40px; /* Space for circles and lines */
}

    .skeleton-timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--skeleton-bg);
        border-radius: 1px;
    }

.skeleton-timeline-item {
    position: relative;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
}

    .skeleton-timeline-item::before {
        content: '';
        position: absolute;
        left: -40px; /* Positioning relative to timeline */
        top: 0;
        width: 20px;
        height: 20px;
        background: var(--skeleton-bg);
        border-radius: 50%;
    }

.skeleton-timeline-text {
    flex: 1;
}

    .skeleton-timeline-text .skeleton-text {
        width: 90%;
        height: 1rem;
        margin-bottom: 0.5rem;
    }

        .skeleton-timeline-text .skeleton-text.small {
            width: 60%;
        }




#splitContainer {
    display: flex; /* Use flex layout */
    height: 100vh; /* Example: full viewport height */
    overflow: hidden; /* Optional: prevent scroll if you want */
}

#leftPanel {
    /* Default width; can be overridden by localStorage on load */
    width: 300px;
    min-width: 150px; /* A minimal width to avoid collapsing too small */
    overflow: auto; /* Scroll if needed */
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

    #leftPanel::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
    }

#splitter {
    width: 5px; /* Thickness of the draggable splitter */
    cursor: col-resize; /* Show horizontal resize cursor */
    background-color: transparent;
}

    #splitter:hover {
        background-color: #aaa;
    }

#rightPanel {
    flex-grow: 1; /* Takes the remaining space */
    overflow: auto;
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
}

    #rightPanel::-webkit-scrollbar {
        display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
    }


/* General tree structure */
.tree-container {
    width: 600px;
    margin: 20px auto;
    font-family: sans-serif;
}

.tree-root,
.tree-children {
    list-style-type: none;
    padding-left: 1em; /* indent children */
    margin: 0;
}

.tree-item {
    margin-bottom: 10px;
}

/* Header that toggles children */
.tree-item-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bold;
    background-color: #f2f2f2;
    padding: 6px 10px;
    border-radius: 4px;
    user-select: none; /* so text isn’t highlighted on click */
    margin-bottom: 4px;
}

/* Arrow icon */
.arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* The content (card) underneath the header */
.tree-item-content {
    margin-left: 20px; /* or padding to visually offset under header */
}

/* Collapsed states */
.tree-item.collapsed > .tree-children {
    display: none;
}

/* Rotate the arrow when expanded */
.tree-item.expanded > .tree-item-header .arrow {
    transform: rotate(90deg);
}

/* If an item is collapsed, keep arrow pointing right */
.tree-item.collapsed > .tree-item-header .arrow {
    transform: rotate(0deg);
}


/* Timeline container */
.timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
}

    /* The horizontal line behind the timeline items */
    .timeline::before {
        content: "";
        position: absolute;
        top: 11%;
        left: 0;
        width: 100%;
        height: 4px;
        background: #ccc;
        z-index: 0;
        transform: translateY(-50%);
    }

/* Individual timeline items */
.timeline-item {
    position: relative;
    text-align: center;
    flex: 1;
    padding: 0 10px;
    z-index: 1;
}

    /* Circle marker for each timeline event */
    .timeline-item::before {
        content: "";
        position: absolute;
        top: 11%;
        left: 50%;
        width: 20px;
        height: 20px;
        background: #fff;
        border: 4px solid #4CAF50;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    /* Event date styling */
    .timeline-item .date {
        margin-top: 18px;
        font-weight: bold;
    }

    /* Event description styling */
    .timeline-item .description {
        margin-top: -5px;
        font-size: 0.9em;
        color: currentColor;
    }

.fc-button {
    padding: 0.1em 0.15em !important;
}

.fc-button-active {
    font-weight:800 !important;
}

/* Initially hide the dropdown menu */
.custom-dropdown-menu {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    padding-top:0px;
}

    /* When visible, allow enough max-height and full opacity */
    .custom-dropdown-menu.show {
        opacity: 1;
        max-height: 500px; /* adjust as needed to cover the menu's height */
        padding-top: 15px;
    }

.fc-day-sat,
.fc-day-sun {
    background-color: #f2f2f2; /* Your desired weekend color */
}

/* For header cells (if needed) */
.fc-col-header-cell.fc-day-sat,
.fc-col-header-cell.fc-day-sun {
    background-color: #f9c2c2;
}

.fc-widget-header.fc-sun {
    background-color: rgba(207, 207, 207, 0.23) !important;
}
.fc-widget-header.fc-sat {
    background-color: rgba(207, 207, 207, 0.23) !important;
}

.fullscreen-div {
    position: fixed; /* or absolute, depending on context */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* 100% of the viewport height */
    z-index: 9999; /* Ensure it's on top of other content if necessary */
}

.highlight {
    background-color: yellow;
}

/* For Firefox */
.custom-scroll {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: var(--bs-gray-shade-20) #f1f1f1; /* thumb and track colors */
}

    /* For Chrome, Safari, and Edge */
    .custom-scroll::-webkit-scrollbar {
        width: 8px; /* width of the vertical scrollbar */
        height: 8px; /* height of the horizontal scrollbar */
    }

    .custom-scroll::-webkit-scrollbar-track {
        background: #f1f1f1; /* background of the scrollbar track */
        border-radius: 10px;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background-color: #888; /* color of the scroll thumb */
        border-radius: 10px;
        border: 3px solid #f1f1f1; /* creates padding around thumb */
    }

        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* darker on hover */
        }



.avatar-20 {
    height: 20px;
    width: 20px;
    min-width: 20px;
    -webkit-border-radius: 0.25rem;
    border-radius: 0.25rem;
}


.CodeMirror {
    border: 1px solid #ccc;
    width: 100%; /* Ensures it takes full width of the container */
    box-sizing: border-box; /* Prevents padding/margin from affecting total width */
    border-radius: 10px;
    margin-top: 15px;
}

.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {
    color: #762;
}

.cm-s-elegant span.cm-comment {
    color: #262;
    font-style: italic;
    line-height: 1em;
}

.cm-s-elegant span.cm-meta {
    color: #555;
    font-style: italic;
    line-height: 1em;
}

.cm-s-elegant span.cm-variable {
    color: black;
}

.cm-s-elegant span.cm-variable-2 {
    color: #b11;
}

.cm-s-elegant span.cm-qualifier {
    color: #555;
}

.cm-s-elegant span.cm-keyword {
    color: #730;
}

.cm-s-elegant span.cm-builtin {
    color: #30a;
}

.cm-s-elegant span.cm-link {
    color: #762;
}

.cm-s-elegant span.cm-error {
    background-color: #fdd;
}

.cm-s-elegant .CodeMirror-activeline-background {
    background: #e8f2ff;
}

.cm-s-elegant .CodeMirror-matchingbracket {
    outline: 1px solid grey;
    color: black !important;
}

.cm-s-colorforth.CodeMirror {
    background: #212529;
    color: #f8f8f8;
}

.cm-s-colorforth .CodeMirror-gutters {
    background: #0a001f;
    border-right: 1px solid #aaa;
}

.cm-s-colorforth .CodeMirror-guttermarker {
    color: #FFBD40;
}

.cm-s-colorforth .CodeMirror-guttermarker-subtle {
    color: #78846f;
}

.cm-s-colorforth .CodeMirror-linenumber {
    color: #bababa;
}

.cm-s-colorforth .CodeMirror-cursor {
    border-left: 1px solid white;
}

.cm-s-colorforth span.cm-comment {
    color: #ededed;
}

.cm-s-colorforth span.cm-def {
    color: #ff1c1c;
    font-weight: bold;
}

.cm-s-colorforth span.cm-keyword {
    color: #ffd900;
}

.cm-s-colorforth span.cm-builtin {
    color: #00d95a;
}

.cm-s-colorforth span.cm-variable {
    color: #23A0DB;
}

.cm-s-colorforth span.cm-string {
    color: #31F031;
}

.cm-s-colorforth span.cm-number {
    color: #00c4ff;
}

.cm-s-colorforth span.cm-atom {
    color: #606060;
}

.cm-s-colorforth span.cm-variable-2 {
    color: #EEE;
}

.cm-s-colorforth span.cm-variable-3, .cm-s-colorforth span.cm-type {
    color: #DDD;
}

.cm-s-colorforth span.cm-property {
}

.cm-s-colorforth span.cm-operator {
}

.cm-s-colorforth span.cm-meta {
    color: yellow;
}

.cm-s-colorforth span.cm-qualifier {
    color: #FFF700;
}

.cm-s-colorforth span.cm-bracket {
    color: #cc7;
}

.cm-s-colorforth span.cm-tag {
    color: #FFBD40;
}

.cm-s-colorforth span.cm-attribute {
    color: #FFF700;
}

.cm-s-colorforth span.cm-error {
    color: #f00;
}

.cm-s-colorforth div.CodeMirror-selected {
    background: #333d53;
}

.cm-s-colorforth span.cm-compilation {
    background: rgba(255, 255, 255, 0.12);
}

.cm-s-colorforth .CodeMirror-activeline-background {
    background: #253540;
}

.driver-popover {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

    .driver-popover .driver-popover-title {
        color: #000 !important;
        font-weight: bold;
        font-size: 1.2em;
    }

    .driver-popover .driver-popover-description {
        color: #000 !important;
        font-size: 1em;
    }

.driver-highlight {
    overflow: visible !important;
    background: transparent !important;
}

    /* Make sure child elements aren’t inadvertently hidden */
    .driver-highlight * {
        visibility: visible !important;
        z-index: 99999; /* Ensure children are on top of the overlay if needed */
    }

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Creates the 3D effect */
    margin: 20px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Trigger the flip on hover */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* For Safari */
    backface-visibility: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
}

.flip-card-front {
}

.flip-card-back {
    transform: rotateY(180deg);
}

.terminal-window {
    background: #2e2e2e;
    color: #f1f1f1;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    font-size: 12px;
}

.terminal-header {
    background: #1b1b1b;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-dots span,
.right-dot span {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

    .left-dots span:last-child {
        margin-right: 0;
    }

/* Dot colors */
.red {
    background: #ff5f56;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #27c93f;
}

.extra {
    background: #007aff; /* Customize the extra dot's color as desired */
}

.terminal-body {
    padding: 15px;
    background: #2e2e2e;
    min-height: 300px; /* Set a minimum height */
    max-height: 550px;
    overflow: auto;
}

/* Container simulating an Android device screen */
.android-screen {
    background-color: #fff;
    max-width: 360px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

/* Input style similar to Material Design text fields */
.android-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

    .android-input:focus {
        outline: none;
        border-color: #6200ee;
    }

/* Button style that reflects Android Material Design buttons */
.android-button {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    background-color: #6200ee;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-right: 10px;
}

    .android-button:hover {
        background-color: #3700b3;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    /* Optional secondary button style with an accent color */
    .android-button.accent {
        background-color: #03dac5;
    }

        .android-button.accent:hover {
            background-color: #018786;
        }

/* Popup keyboard styles */
.keyboard-popup {
    position: absolute;
    left: 17px;
    bottom: 61px;
    padding: 10px;
    display: none;
    z-index: 1000;
    width: 220px;
}

.keyboard-display {
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    background: #eee;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.keyboard-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

    .keyboard-keys button {
        padding: 15px;
        font-size: 18px;
        border: none;
        border-radius: 4px;
        background-color: #dfdfdf;
        color: #646464;
        cursor: pointer;
        transition: background 0.3s ease;
    }

        .keyboard-keys button:hover {
            background-color: #828282;
            color: #fff;
        }

        .keyboard-keys button.special {
            background-color: #9f9f9f;
            color: #fff;
        }

            .keyboard-keys button.special:hover {
                background-color: #828282;
                color: #fff;
            }

    .keyboard-keys button {
        padding: 8px;
    }

/* Container styling */
#printSlipContainer {
}
/* Remove default list styling */
#printLineList {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Each print line styling */
.print-line {
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: #fff;
}

    .print-line img.line-image {
        max-width: 100%;
        display: block;
    }
/* Options toolbar initially hidden */
.options {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
    z-index: 1;
}
/* Show options on hover */
.print-line:hover .options {
    display: flex;
    gap: 5px;
    align-items: center;
}
/* Toolbar for text-only options */
.text-options select {
    margin-right: 5px;
    padding: 2px;
    font-size: 12px;
}
/* Delete button styling */
.delete-btn {
    background-color: #ff5252;
    color: #fff;
    border: none;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}

#chatContainer {
    overflow-y: auto;
    padding: 15px;
}
/* Chat message bubble styles */
.message {
    margin: 40px 0;
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
    word-wrap: break-word;
}

.user-message {
    background-color: #dcf8c6; /* Light green background for user's messages */
    margin-left: auto; /* Aligns the bubble to the right */
}

.ai-message {
    background-color: #f1f0f0; /* Light gray background for AI's messages */
    margin-right: auto; /* Aligns the bubble to the left */
    max-width: 100%;
}

.dark .ai-message {
    background-color: rgb(48, 48, 48);
}

.dark .user-message {
    background-color: #a7a7a7;
    color: #fff;
}

.dark code {
    color:#33c7d6 ;
}

.sm-tbl{
    font-size:11px;
    max-width:320px;

}

    .sm-tbl td {
    padding: 0.5rem 1rem;
}

.md-tbl {
    font-size: 14px;
}

    .md-tbl td {
        padding: 0.5rem 1rem;
    }


.editor-toolbar {
    background-color: #f5f6fa;
    border-bottom: 1px solid #ced4da;
    margin-bottom:-21px;
}

.dark .editor-toolbar {
    background-color: #1c1c1c !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.editor-toolbar button {
    color: currentColor;
}




.dark .table.dataTable tr.dtrg-group th {
    background-color: #1c1c1c !important;
    text-align: left;
}



.table > :not(caption) > * > * {
    padding: 0.61rem 1.5rem;
}

.tiny-text{
    font-size:11px;
}

.gantt_tree_content
{
    font-size:11px;
}

.gantt_row.odd,
.gantt_task_row.odd {
    background-color:transparent !important;
    background:none;
}

.card-wrapper {
    display: grid;
    grid-template-columns: 100px auto; /* left column fixed, right flexible */
    max-width: 90%;
    margin: 20px auto;
    border: 1px solid #ccc;
    overflow: hidden;
}

.card-left {
    background: #e0e0e0;
    height: 100px; /* full height for left section */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-right {
    background: #e0e0e0;
    height: 50px; /* shorter right section */
    display: flex;
    align-items: center;
    justify-content: center;
}


.switch {
    position: relative;
    height: 32px;
    width: 300px;
    background: #F2F2F2;
    border-radius: 32px;
}

.dark .switch {
    background: #151515;
}

.switch-label {
    font-weight: bold;
    position: relative;
    z-index: 2;
    float: left;
    width: 100px;
    line-height: 32px;
    font-size: 11px;
    color: #676a6c;
    text-align: center;
    cursor: pointer;
}

.switch-input {
    display: none;
}

    .switch-input:checked + .switch-label {
        color: #FFF;
        transition: 0.15s ease-out;
        transition-property: color, text-shadow;
    }

    .switch-input:checked + .switch-label-y ~ .switch-selector {
        transform: translateX(0%);
        background-color: var(--bs-primary);
    }

    .switch-input:checked + .switch-label-i ~ .switch-selector {
        transform: translateX(100%);
        background-color: var(--bs-primary);
    }

    .switch-input:checked + .switch-label-n ~ .switch-selector {
        transform: translateX(200%);
        background-color: var(--bs-primary);
    }


.switch-selector {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    display: block;
    width: 100px;
    height: 32px;
    border-radius: 32px;
    background-color: #1ab394;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.card-selected {
    box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.23);
    -webkit-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.23);
}

.dark .card-selected {
    box-shadow: 0px 0px 0px 1px rgba(255,255,255);
    -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255);
    -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255);
}

.text-danger-glow {
    color: #ff4141;
    text-shadow: 0 0 3px #f00, 0 0 4px #f00, 0 0 5px #f00, 0 0 6px #f00, 0 0 7px #f00, 0 0 8px #f00, 0 0 9px #f00;
    width:5px;
}

.blink {
    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

[data-after-text],
[data-before-text] {
	--badge-offset-x: calc(0px - var(--badge-size) / 3);
	--badge-offset-y: calc(0px - var(--badge-size) / 3);
	--badge-size: 1.5rem;
	--circle-size: 2rem;
	--dot-offset: 0.5rem;
	--dot-size: 0.5rem;
		
	--b: initial;
	--bgc: hsl(195, 100%, 30%);
	--bdrs: 0;
	--c: hsl(195, 100%, 99%);
	--d: inline-flex;
	--fz: 0.625rem;
	--fw: 700;
	--h: auto;
	--l: initial;
	--m: 0.4rem;
	--p: 0;
	--pos: static;
	--r: initial;
	--t: initial;
	--tt: uppercase;
	--w: initial;
	
	position: relative;
}

[data-after-text]:not([data-after-text=""])::after {
	content: attr(data-after-text);
}
[data-before-text]:not([data-before-text=""])::before {
	content: attr(data-before-text);
}

[data-after-text]:not([data-after-text=""])::after,
[data-before-text]:not([data-before-text=""])::before {
	align-items: center;
	background: var(--bgc);
	border-radius: var(--bdrs);
	bottom: var(--b);
	box-shadow: var(--bxsh);
	box-sizing: border-box;
	color: var(--c);
	display: var(--d);
	font-size: var(--fz);
	font-weight: var(--fw);
	height: var(--h);
	justify-content: center;
	left: var(--l);
	padding: var(--p);
	position: var(--pos);
	right: var(--r);
	text-decoration: none;
	text-transform: var(--tt);
	top: var(--t);
	width: var(--w);
}

/* MODIFIERS */
[data-after-type*="badge"]::after,
[data-before-type*="badge"]::before {
	--bdrs: var(--badge-size);
	--bxsh: 0 0 0 2px rgba(255, 255, 255, 0.5);
	--h: var(--badge-size);
	--p: 0;
	--pos: absolute;
	--w: var(--badge-size);
}
[data-after-type*="circle"],
[data-before-type*="circle"]{
	align-items: center;
	display: flex;
}
[data-after-type*="circle"]::after,
[data-before-type*="circle"]::before {
	--bdrs: 50%;
	--fw: 400;
	--h: var(--circle-size);
	// --pos: relative;
	// --t: -0.75em;
	--tt: initial;
	--w: var(--circle-size);
}
[data-after-type*="circle"]::after,
[data-after-type*="pill"]::after {
	margin-inline-start: 1ch;
}
[data-before-type*="circle"]::before,
[data-before-type*="dot"]::before,
[data-before-type*="pill"]::before {
	margin-inline-end: 1ch;
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
	--bdrs: 50%;
	--d: inline-block;
	--fz: 50%;
	--h: var(--dot-size);
	--p: 0;
	--pos: relative;
	--t: -1px;
	--w: var(--dot-size);
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
	content: "" !important;
}
[data-after-type*="pill"]::after,
[data-before-type*="pil"]::before {
	--bdrs: 1rem;
	--p: 0.25rem 0.75rem;
	--pos: relative;
	--t: -1px;
}

/* COLORS */
[data-after-type*="blue"]::after,
[data-before-type*="blue"]::before {
	--bgc: #007acc;
}
[data-after-type*="darkgray"]::after,
[data-before-type*="darkgray"]::before {
	--bgc: #706e6b;
	--c: #fff;
}
[data-after-type*="green"]::after,
[data-before-type*="green"]::before {
	--bgc: #04844b;
}
[data-after-type*="lightgray"]::after,
[data-before-type*="lightgray"]::before {
	--bgc: #ecebea;
	--c: #080707;
}
[data-after-type*="orange"]::after,
[data-before-type*="orange"]::before {
	--bgc: #ffb75d;
	--c: #080707;
}

[data-after-type*="red"]::after,
[data-before-type*="red"]::before {
	--bgc: #c23934;
}

/* POSITION */
[data-after-type*="top"]::after,
[data-before-type*="top"]::before {
	--b: auto;
	--pos: absolute;
	--t: var(--dot-offset);
}
[data-after-type*="right"]::after,
[data-before-type*="right"]::before {
	--l: auto;
	--pos: absolute;
	--r: var(--dot-offset);
}
[data-after-type*="bottom"]::after,
[data-before-type*="bottom"]::before {
	--b: var(--dot-offset);
	--pos: absolute;
	--t: auto;
}
[data-after-type*="left"]::after,
[data-before-type*="left"]::before {
	--pos: absolute;
	--r: auto;
	--l: var(--dot-offset);
}
[data-after-type*="badge"][data-after-type*="top"]::after,
[data-before-type*="badge"][data-before-type*="top"]::before {
	--m: 0;
	--t: var(--badge-offset-y);
}
[data-after-type*="badge"][data-after-type*="right"]::after,
[data-before-type*="badge"][data-before-type*="right"]::before {
	--m: 0;
	--r: var(--badge-offset-x);
}
[data-after-type*="badge"][data-after-type*="bottom"]::after,
[data-before-type*="badge"][data-before-type*="bottom"]::before {
	--b: var(--badge-offset-y);
	--m: 0;
}
[data-after-type*="badge"][data-after-type*="left"]::after,
[data-before-type*="badge"][data-before-type*="left"]::before {
	--l: var(--badge-offset-x);
	--m: 0;
}


/*div.track, div.bar {
    box-sizing: border-box;
    position: relative;
}

div.progress {
    width: 84px;
    padding-left: 1px;
    padding-right: 1px;
    height: 11px;
    border-radius: 0px;
    border: solid 1px #c8c7c7;
    background-color: #fff;
}

div.track {
    position: relative;
    width: 100%;
    height: 7px;
    overflow: hidden;
}

div.bar {
    height: 7px;
    width: 6px;
    background-color: #62ea6b;
    position: relative;
    border-radius: 0px;
    margin-left: 1px;
    margin-right: 1px;
    float: left;
}*/

.dark .dropdown-menu {
    background-color: #121212;
    color: #8a92a6;
}

/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        border: 5px solid #2980b9;
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 0;
        background-color: #3498db;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
        text-align: center;
    }

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

    .ribbon-top-left::before,
    .ribbon-top-left::after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-top-left::before {
        top: 0;
        right: 0;
    }

    .ribbon-top-left::after {
        bottom: 0;
        left: 0;
    }

    .ribbon-top-left span {
        right: -25px;
        top: 30px;
        transform: rotate(-45deg);
    }

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }

    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }

    .ribbon-top-right span {
        left: -25px;
        top: 30px;
        transform: rotate(45deg);
    }

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

    .ribbon-bottom-left::before,
    .ribbon-bottom-left::after {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-bottom-left::before {
        bottom: 0;
        right: 0;
    }

    .ribbon-bottom-left::after {
        top: 0;
        left: 0;
    }

    .ribbon-bottom-left span {
        right: -25px;
        bottom: 30px;
        transform: rotate(225deg);
    }

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

    .ribbon-bottom-right::before,
    .ribbon-bottom-right::after {
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-bottom-right::before {
        bottom: 0;
        left: 0;
    }

    .ribbon-bottom-right::after {
        top: 0;
        right: 0;
    }

    .ribbon-bottom-right span {
        left: -25px;
        bottom: 30px;
        transform: rotate(-225deg);
    }


.circle {
    position: absolute;
    border-radius: 50%;
    background: white;
    animation: ripple 15s infinite;
    box-shadow: 0px 0px 1px 0px #508fb9;
}

.small {
    width: 200px;
    height: 200px;
    left: -100px;
    bottom: -100px;
}

.medium {
    width: 400px;
    height: 400px;
    left: -200px;
    bottom: -200px;
}

.large {
    width: 600px;
    height: 600px;
    left: -300px;
    bottom: -300px;
}

.xlarge {
    width: 800px;
    height: 800px;
    left: -400px;
    bottom: -400px;
}

.xxlarge {
    width: 1000px;
    height: 1000px;
    left: -500px;
    bottom: -500px;
}

.shade1 {
    opacity: 0.2;
}

.shade2 {
    opacity: 0.5;
}

.shade3 {
    opacity: 0.7;
}

.shade4 {
    opacity: 0.8;
}

.shade5 {
    opacity: 0.9;
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.8);
    }
}


.list-group-item-action:not(.active):active {
    background-color: #cecece !important;
    color:#616161;
}

.dataTables_info
{
    font-size:11px;
}

.dataTables_length
{
    zoom:0.7;
}

.dataTables_filter{
    float:right;
}

.dataTables_filter label.input{
    margin-right:15px;
}

.dark .profile-img img {
    border: 1px solid #212529 !important;
    background-color: #212529 !important;
}

.profile-img img {
    border: 1px solid #fff;
    background-color: #fff;
}

.site-icon-no-img {
    width: 100px;
    height: 100px;
    display: block;
    background-color: #fff;
}

.dark .site-icon-no-img {
    width: 100px;
    height: 100px;
    display: block;
    background-color: #212529 !important;
}

.upload-icone {
    position: absolute;
    top: auto;
    left: 69px;
    bottom: 0px;
    -webkit-transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    -o-transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    border: 1px solid #fff;
}

.form-label{
    font-size:13px;
}

.card-top-btn
{
    margin-right:0px;
    background-color: #fff;
    float:right;
    cursor:pointer;
}

.dark .card-top-btn {
    margin-right: 0px;
    background-color: #212529 !important;
    float: right;
    cursor: pointer;
}

.card-top-btn:hover {
    background-color: var(--bs-primary);
    color:#fff;
}

.dark .card-top-btn:hover {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.card-top-container{
    margin-bottom:-24px;
    z-index:9;
}

.hidden-scrollbar {
    /* Enable scrolling */
    overflow-y: scroll;
    /* For older versions of IE/Edge */
    -ms-overflow-style: none;
    /* For Firefox */
    scrollbar-width: none;
}

    /* For Chrome, Safari, and newer Edge (Blink engine) */
    .hidden-scrollbar::-webkit-scrollbar {
        display: none;
    }

.tbl-sm-text{
    font-size:13px;
}
.dataTables_wrapper .dataTables_scrollHead table,
.dataTables_wrapper .dataTables_scrollBody table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important; /* Let the browser size columns naturally */
}

/* 2) No text wrapping. This ensures wide text stays on one line
   and triggers horizontal scrolling if it overflows. */
.dataTables_scrollBody td {
    white-space: nowrap;
}

.dataTables_scrollHeadInner
{
    min-width: 100%;
}

.dt-filter-inner::after
{
    margin-left:0px !important;
}

.driver-popover-footer
{
    margin-top:60px;
    margin-bottom:30px;
}

.offcanvas.offcanvas-bottom
{
    height:100vh;
}

.fade-in-log {
    opacity: 0;
    animation: fadein 0.4s forwards;
}

@keyframes fadein {
    to {
        opacity: 1;
    }
}

@media (max-width: 1200px) {
    .sidebar.sidebar-mini {
        -webkit-transform: translateX(-250%);
        -ms-transform: translateX(-250%);
        transform: translateX(-250%);
    }
}