@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");

body,
h1,
h2,
h3,
h4,
h5,
h6,
.main-header,
.sidebar {
    font-family: "Nunito", sans-serif;
}

:root {
    --bs-primary: #098e8e;
    --cui-primary: #098e8e;
    --cui-link-color: #098e8e;
    --cui-link-hover-color: #0a7d7d;
    --cui-primary-rgb: 9, 142, 142;

    --cui-input-group-addon-bg: #f9fbfd;
    --cui-input-group-addon-border-color: #0028641f;
    --cui-input-border-color: #0028641f;

    --cui-form-check-input-checked-bg-color: #098e8e;
    --cui-form-check-input-checked-border-color: #098e8e;

    --cui-sidebar-1: #e4f6f5ad;
    --cui-sidebar-2: #e4f6f5;
    --bg-switch-checked-color: var(--cui-primary);
}

body {
    background-color: #f1f4f8;
    font-size: 90%;
}

.header {
    --cui-header-bg: transparent;
    --cui-header-border: transparent;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.btn-link {
    text-decoration: none;
}

.btn-primary {
    --cui-btn-bg: #098e8e;
    --cui-btn-border-color: #098e8e;
    --cui-btn-hover-bg: #0a7d7d;
    --cui-btn-hover-border-color: #0a7d7d;
    --cui-btn-active-bg: #0a7d7d;
    --cui-btn-active-border-color: #0a7d7d;
    --cui-btn-disabled-bg: #098e8e;
    --cui-btn-disabled-border-color: #098e8e;
}

.pagination {
    --cui-pagination-bg: #adb9b9;
    --cui-pagination-focus-bg: #098e8e;
    --cui-pagination-active-bg: #098e8e;
    --cui-pagination-active-border-color: #098e8e;
}

.pagination > li > span:hover {
    background: #098e8e;
}

/* Dropdown filter */
.dropdown-item:hover,
.dropdown-item:focus {
    color: #14203b;
    text-decoration: none;
    background-color: #f9fbfd;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff;
    text-decoration: none;
    background-color: #098e8e;
}

/* Datepicker and DateRangePicker */
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
    background-color: #098e8e !important;
}

.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
    background-color: #098e8e !important;
    color: #fff !important;
}

form .select2.select2-container.select2-container--focus,
form .select2.select2-container.select2-container--open {
    background-color: #fff;
    border: 1px solid var(--primary, #098e8e) !important;
    box-shadow: 0 0 0 2px #e1dcfb;
    color: #495057;
    outline: 0;
    border-radius: 4px;
}

.hwp-indoor-care {
    background: linear-gradient(90deg, #0a7d7d 0%, #099999 50%, #098e8e 100%);
}

.sidebar .nav-dropdown-items .nav-dropdown:not(.open) > a {
    font-weight: 700 !important;
}

.card-chart {
    height: 40vh;
    overflow: hidden;
}

#table-card::-webkit-scrollbar {
    width: 0.5em;
}

#table-card::-webkit-scrollbar-track {
    display: none;
}

#table-card::-webkit-scrollbar-thumb {
    background: #098e8e;
    border-radius: 100vh;
}

.table-card-default {
    height: 34vh;
    overflow: scroll;
    scrollbar-color: transparent;
}

.table-card-floor, .history-card {
    height: 26vh;
    overflow: scroll;
    scrollbar-color: transparent;
}

.table-card-floor::-webkit-scrollbar,
.history-card::-webkit-scrollbar {
    width: 0.5em;
}

.table-card-floor::-webkit-scrollbar-track,
.history-card::-webkit-scrollbar-track {
    display: none;
}

.table-card-floor::-webkit-scrollbar-thumb,
.history-card::-webkit-scrollbar-thumb {
    background: #098e8e;
    border-radius: 100vh;
}

#table-card table thead tr:nth-child(1) th {
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.table-spinner {
    width: 35px;
    height: 35px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #098e8e;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

#la-sync {
    color: #6e8192;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

@keyframes la-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.la-spin {
    animation: la-spin 1s linear infinite;
    display: inline-block;
}

.sync-button:hover {
    animation: syncSpin 0.8s linear infinite;
    text-decoration: none;
}

#floor-status-filter {
    font-size: 13px;
    font-weight: bold;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes syncSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.floor-client-filter,
.floor-slug-filter {
    width: 150px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .floor-client-filter,
    .floor-slug-filter {
        width: 150px;
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .floor-client-filter,
    .floor-slug-filter {
        width: 100%;
        font-size: 0.85rem;
    }
}

#floor-client-filter option {
    font-weight: bold;
}

.order-card {
    color: #fff;
}

.cards {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.cards .card-block {
    padding: 25px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.sidebar-logo {
    max-width: 55%;
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.sidebar-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
}

.sidebar {
    background-color: green;
}

.dt-paging .dt-paging-button:not(.disabled):not(.active) .page-link:hover {
    color: var(--bs-primary);
    text-decoration: none;
    background-color: #e4e7ea !important;
    border-color: transparent !important;
}

.nav-link,
.nav-icon,
.nav-group-toggle::after,
.simplebar-content,
.sidebar-nav {
    color: var(--bs-primary) !important;
}

.nav-group .nav-icon::after,
.nav-group > a > span {
    color: var(--bs-primary) !important;
}

.sidebar {
    --cui-sidebar-nav-group-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23098e8e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --cui-sidebar-nav-group-indicator-hover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23098e8e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --cui-sidebar-nav-group-bg: #f5f5f5d2 !important;
    --cui-sidebar-nav-link-active-bg: #b6c5c859 !important;
    --cui-sidebar-nav-link-hover-bg: #f5f5f579 !important;
    --cui-sidebar-brand-bg: #098e8ed5;
}

.nav-item{
    margin-left: 1.5rem;
}