:root {
    --bg: 0 0% 100%;
    --fg: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-fg: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-fg: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-fg: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --navbar-bg: 220 14% 96%;
    --navbar-fg: 222.2 47.4% 11.2%;
    --input-bg: 0 0% 100%;
    --shadow: rgba(0, 0, 0, 0.08);
}

.dark {
    --bg: 229 84% 5%;
    --fg: 210 40% 98%;
    --card: 0 0% 3%;
    --card-fg: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-fg: 222.2 47.4% 11.2%;
    --muted: 0 0% 7%;
    --muted-fg: 215 20.2% 65.1%;
    --border: 0 0% 12%;
    --navbar-bg: 222.2 47.4% 11.2%;
    --navbar-fg: 210 40% 98%;
    --input-bg: 0 0% 5%;
    --shadow: rgba(0, 0, 0, 0.4);
}

html.dark body,
html.dark .bgcontainer,
html.dark #content-wrapper,
html.dark #content {
    background: hsl(var(--bg)) !important;
}

#root>div.text-gray-800 {
    background: transparent !important;
    color: hsl(var(--fg)) !important;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

.g-navbar .logo-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.g-navbar .logo-wrapper img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

html {
    font-size: 16px;
}

.bgcontainer {
    width: 100%;
    min-height: 100vh;
}

.topnav1 {
    margin-left: 30px;
    margin-right: 30px;
}

#container-item {
    display: flex;
    justify-content: start;
    align-items: center;
}

#image-item {
    width: 30px;
    height: 30px;
    margin: 8px 8px 8px 0;
}

.twitter-typeahead {
    width: 100%;
}

.twitter-typeahead,
.tt-hint,
.tt-input,
.tt-menu {
    width: 100%;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu {
    width: 100%;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

.typeadhead-fix {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
}

.typeadhead-fix:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

table {
    animation: fadeInAnimation ease .3s;
    animation-iteration-count: 1;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: #24829d;
}

::-webkit-scrollbar-thumb {
    background: #80c1ab;
    border-radius: 10px;
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
    }

    .bgcontainer,
    .topnav1 {
        margin-left: 0;
        margin-right: 0;
    }
}

.modal.show,
.modal.in,
#uploadModal.show,
#uploadModal.in {
    display: block !important;
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal.show .modal-dialog,
.modal.in .modal-dialog,
#uploadModal.show .modal-dialog,
#uploadModal.in .modal-dialog {
    transform: translate(0, 0) !important;
}

#uploadModal .modal-dialog {
    max-width: 560px !important;
    margin: 1.75rem auto !important;
}

#uploadModal .modal-content {
    border-radius: 20px !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    background-color: #ffffff !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    width: 100% !important;
}

#uploadModal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 0 !important;
}

#uploadModal .modal-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

#uploadModal .close,
#uploadModal .btn-close,
#uploadModal .upload-modal-close {
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

#uploadModal .close:hover,
#uploadModal .btn-close:hover,
#uploadModal .upload-modal-close:hover {
    color: #475569 !important;
}

#uploadModal .modal-body {
    padding: 24px !important;
}

#uploadModal .drag-drop-zone,
#uploadModal .csv-drop-zone {
    border: 2px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 40px 24px !important;
    text-align: center !important;
    background-color: #f8fafc !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#uploadModal .drag-drop-zone:hover,
#uploadModal .csv-drop-zone:hover {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.04) !important;
}

#uploadModal .drag-drop-zone i,
#uploadModal .csv-drop-zone i {
    font-size: 48px !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
}

#uploadModal .drag-drop-zone p:first-of-type,
#uploadModal .csv-drop-zone p:first-of-type {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
}

#uploadModal .drag-drop-zone p:last-of-type,
#uploadModal .csv-drop-zone p:last-of-type {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 0 !important;
}

#uploadModal .modal-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px 20px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
}

#uploadModal .btn-template-download {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 0 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#uploadModal .btn-template-download:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

#uploadModal .footer-action-btns {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

#uploadModal .btn-upload-cancel {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#uploadModal .btn-upload-cancel:hover {
    background-color: #e2e8f0 !important;
}

#uploadModal .btn-upload-submit {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    height: 42px !important;
    padding: 0 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25) !important;
}

#uploadModal .btn-upload-submit:hover {
    background-color: #1d4ed8 !important;
}

html.dark #uploadModal .modal-content,
.dark #uploadModal .modal-content,
:root.dark #uploadModal .modal-content {
    background-color: #111927 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
}

html.dark #uploadModal .modal-header,
.dark #uploadModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark #uploadModal .modal-title,
.dark #uploadModal .modal-title {
    color: #ffffff !important;
}

html.dark #uploadModal .close,
.dark #uploadModal .close,
html.dark #uploadModal .btn-close,
.dark #uploadModal .btn-close,
html.dark #uploadModal .upload-modal-close,
.dark #uploadModal .upload-modal-close {
    color: #94a3b8 !important;
}

html.dark #uploadModal .close:hover,
.dark #uploadModal .close:hover,
html.dark #uploadModal .btn-close:hover,
.dark #uploadModal .btn-close:hover {
    color: #ffffff !important;
}

html.dark #uploadModal .drag-drop-zone,
.dark #uploadModal .drag-drop-zone,
html.dark #uploadModal .csv-drop-zone,
.dark #uploadModal .csv-drop-zone {
    border: 2px dashed #28374d !important;
    background-color: #0b121e !important;
}

html.dark #uploadModal .drag-drop-zone:hover,
.dark #uploadModal .drag-drop-zone:hover {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}

html.dark #uploadModal .drag-drop-zone i,
.dark #uploadModal .drag-drop-zone i {
    color: #4b5d78 !important;
}

html.dark #uploadModal .drag-drop-zone p:first-of-type,
.dark #uploadModal .drag-drop-zone p:first-of-type {
    color: #ffffff !important;
}

html.dark #uploadModal .drag-drop-zone p:last-of-type,
.dark #uploadModal .drag-drop-zone p:last-of-type {
    color: #64748b !important;
}

html.dark #uploadModal .modal-footer,
.dark #uploadModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark #uploadModal .btn-template-download,
.dark #uploadModal .btn-template-download {
    background-color: #172437 !important;
    color: #cbd5e1 !important;
    border: 1px solid #28374d !important;
}

html.dark #uploadModal .btn-template-download:hover,
.dark #uploadModal .btn-template-download:hover {
    background-color: #1e304a !important;
    color: #ffffff !important;
}

html.dark #uploadModal .btn-upload-cancel,
.dark #uploadModal .btn-upload-cancel {
    background-color: #172437 !important;
    color: #cbd5e1 !important;
    border: 1px solid #28374d !important;
}

html.dark #uploadModal .btn-upload-cancel:hover,
.dark #uploadModal .btn-upload-cancel:hover {
    background-color: #1e304a !important;
    color: #ffffff !important;
}

html.dark #uploadModal .btn-upload-submit,
.dark #uploadModal .btn-upload-submit {
    background-color: #1d68c4 !important;
    color: #ffffff !important;
}

html.dark #uploadModal .btn-upload-submit:hover,
.dark #uploadModal .btn-upload-submit:hover {
    background-color: #2563eb !important;
}

html.dark .daterangepicker,
.dark .daterangepicker {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

html.dark .daterangepicker:before,
.dark .daterangepicker:before {
    border-bottom-color: #1e293b !important;
}

html.dark .daterangepicker:after,
.dark .daterangepicker:after {
    border-bottom-color: #0f172a !important;
}

html.dark .daterangepicker .ranges li,
.dark .daterangepicker .ranges li {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
}

html.dark .daterangepicker .ranges li:hover,
.dark .daterangepicker .ranges li:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

html.dark .daterangepicker .ranges li.active,
.dark .daterangepicker .ranges li.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark .daterangepicker .calendar-table,
.dark .daterangepicker .calendar-table {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html.dark .daterangepicker td.available:hover,
html.dark .daterangepicker th.available:hover,
.dark .daterangepicker td.available:hover,
.dark .daterangepicker th.available:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

html.dark .daterangepicker td.off,
html.dark .daterangepicker td.off.in-range,
html.dark .daterangepicker td.off.start-date,
html.dark .daterangepicker td.off.end-date,
.dark .daterangepicker td.off,
.dark .daterangepicker td.off.in-range,
.dark .daterangepicker td.off.start-date,
.dark .daterangepicker td.off.end-date {
    background-color: #0f172a !important;
    color: #475569 !important;
}

html.dark .daterangepicker td.in-range,
.dark .daterangepicker td.in-range {
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #f8fafc !important;
}

html.dark .daterangepicker td.active,
html.dark .daterangepicker td.active:hover,
.dark .daterangepicker td.active,
.dark .daterangepicker td.active:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.dark .daterangepicker th,
html.dark .daterangepicker td,
.dark .daterangepicker th,
.dark .daterangepicker td {
    color: #cbd5e1 !important;
}

html.dark .daterangepicker select.hourselect,
html.dark .daterangepicker select.minuteselect,
html.dark .daterangepicker select.secondselect,
html.dark .daterangepicker select.ampmselect,
html.dark .daterangepicker select.monthselect,
html.dark .daterangepicker select.yearselect,
.dark .daterangepicker select.hourselect,
.dark .daterangepicker select.minuteselect,
.dark .daterangepicker select.secondselect,
.dark .daterangepicker select.ampmselect,
.dark .daterangepicker select.monthselect,
.dark .daterangepicker select.yearselect {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
}

html.dark .daterangepicker .drp-buttons,
.dark .daterangepicker .drp-buttons {
    border-top-color: #1e293b !important;
}

html.dark .daterangepicker .drp-selected,
.dark .daterangepicker .drp-selected {
    color: #94a3b8 !important;
}

html.dark .daterangepicker .btn-default,
html.dark .daterangepicker .cancelBtn,
.dark .daterangepicker .btn-default,
.dark .daterangepicker .cancelBtn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark .daterangepicker .btn-primary,
html.dark .daterangepicker .applyBtn,
.dark .daterangepicker .btn-primary,
.dark .daterangepicker .applyBtn {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.form-control::placeholder,
.modern-input::placeholder {
    color: #64748b !important;
    opacity: 0.85 !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .form-control,
html.dark .modern-input,
.dark input,
.dark select,
.dark textarea,
.dark .form-control,
.dark .modern-input {
    color: #ffffff !important;
    /* background-color: #1A1D24 !important; */
    border-color: #2a3854 !important;
}

html.dark input::placeholder,
html.dark select::placeholder,
html.dark textarea::placeholder,
html.dark .form-control::placeholder,
html.dark .modern-input::placeholder,
.dark input::placeholder,
.dark select::placeholder,
.dark textarea::placeholder,
.dark .form-control::placeholder,
.dark .modern-input::placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus,
html.dark .form-control:focus,
html.dark .modern-input:focus,
.dark input:focus,
.dark select:focus,
.dark textarea:focus,
.dark .form-control:focus,
.dark .modern-input:focus {
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}