body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    scrollbar-color: #88858b #0f120f !important;
}

body.bg-gray-200 {
    background-color: #111726 !important;
}

#main-content.bg-gray-50 {
    background-color: #37393b !important;
}

div .bg-white.shadow {
    background-color: #232734 !important;
}

h1,
h2,
h3,
h4,
h5 {
    color: #fff !important;
}

thead {
    background-color: #1e1e1e !important;
}

tbody {
    background-color: #1e1e1e !important;
}

tbody tr {
    background-color: #313139 !important;
    color: #fff !important;
}

tr td {
    color: #fff !important;
}

/* Handsontable */
.ht_master:not(.innerBorderInlineStart):not(.emptyColumns) tbody tr th,
.ht_master:not(.innerBorderInlineStart):not(.emptyColumns) thead tr th:first-child,
.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.htGhostTable) tbody tr th,
.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top):not(.htGhostTable) thead tr th:first-child {
    border-left: 1px solid #444 !important;
}

.handsontable tr:first-child td,
.handsontable tr:first-child th {
    border-top: 1px solid #444 !important;
}

.handsontable.htRowHeaders thead tr th:nth-child(2) {
    border-left: 1px solid #444 !important;
}

.handsontable tr th {
    background-color: #1e1e1e !important;
    color: #fff !important;
}

.handsontable td,
.handsontable th {
    background-color: #313139 !important;
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
    border-right: 1px solid #444 !important;
    line-height: 30px !important;
}

.handsontable td:first-of-type,
.handsontable th:first-child {
    border-left: 1px solid #444 !important;
}

.handsontable td:hover,
.handsontable .ht__row_odd td:hover,
.handsontable .ht__row_even td:hover,
.handsontable tr:hover,
.handsontable .ht__row_odd tr:hover,
.handsontable .ht__row_even tr:hover {
    background-color: #565656 !important;
}

.handsontable .ht__row_odd td {
    background-color: #24242c !important;
}

.handsontable .changeType {
    background-color: #565656 !important;
}

.handsontable a {
    color: #90a9e1 !important;
}

.ht_master .wtHolder {
    scrollbar-color: #88858b #0f120f !important;
}

/* Datatables */
.dataTable thead {
    background-color: #212529 !important;
    color: white !important;
    font-size: 14px;
}

.dataTable tbody {

    color: white !important;
    font-size: 13px;
}

/* table.dataTable tbody tr:nth-child(odd) {
    background-color: #f9f9f9!important; 
} */

#data-table_wrapper {
    color: white !important;
    overflow-x: auto !important;
}

table.dataTable tbody tr:nth-child(even) {
    background-color: #212529 !important;
    /* Color for even rows */
}

.data-table-container {
    width: 100%;
    overflow-x: auto;
}

table.dataTable {
    width: 100% !important;
    /* min-width: 1000px; */
    /* Forces the table to stay at least as wide as content */
}

table.dataTable thead {
    border: none !important;
}


label.text-gray-700,
label.text-gray-600 {
    color: #374151 !important;
}

html[data-theme="dark"] label.text-gray-700,
html[data-theme="dark"] label.text-gray-600 {
    color: #e5e7eb !important;
}


@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

@keyframes auto-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    position: relative;
}

.stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg,
            rgba(255, 255, 255, .15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .15) 50%,
            rgba(255, 255, 255, .15) 75%,
            transparent 75%,
            transparent);
}

.stripes.animated {
    animation: animate-stripes 0.6s linear infinite;
}

.stripes.animated.slower {
    animation-duration: 1.25s;
}

.stripes.reverse {
    animation-direction: reverse;
}

.progress-bar-inner {
    display: block;
    height: 25px;
    width: 0%;
    background-color: #34c2e3;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    position: relative;
    /* animation: auto-progress 10s infinite linear; */
}

.progress-bar>p {
    color: #1f2937;
    font-size: 15px;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translate(-50%, -50%);
}

html[data-theme="dark"] .progress-bar>p {
    color: #f8fafc;
}