/* MARK:Main Section */
/* Navbar styling */
.navbar {
    background-color: #1e293b !important;
    /* dark slate */
    padding: 0.75rem 1rem;
}

.navbar-brand {
    font-weight: 700;
    font-size: 18px;
    color: #ffffff !important;
}

/* Links (buttons in top navbar) */
.navbar .navbar-button {
    color: #cbd5e1;
    /* light gray text */
    margin-left: 1rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
}

/* Hover state */
.navbar .navbar-button:hover {
    color: #ffffff;
    border-bottom: 2px solid #3b82f6;
    /* blue underline */
}

/* Active state */
.navbar .navbar-button.active {
    color: #ffffff;
    border-bottom: 2px solid #3b82f6;
    /* highlight with blue */
}

/* Logout / Auth buttons */
.navbar .btn-outline-danger {
    border-color: #f87171;
    color: #f87171;
    transition: background 0.2s ease, color 0.2s ease;
}

.navbar .btn-outline-danger:hover {
    background: #f87171;
    color: #fff;
}

.navbar .btn-outline-primary {
    border-color: #3b82f6;
    color: #3b82f6;
    transition: background 0.2s ease, color 0.2s ease;
}

.navbar .btn-outline-primary:hover {
    background: #3b82f6;
    color: #fff;
}


.page-content {
    padding: 0 10px 0 10px;
    width: 100%;

}


#chartContainerByDay,
#chartContainerByMin,
#chartContainercountsByStatus {
    /* max-width: 80%; */
    /*  margin: 10px auto;
    padding: 20px; */
    width: 100%;
    height: 100%;
}

.charts-row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.title-container {
    display: flex;
    max-width: 30%;
}

.title-container #dashboardDate {
    margin-left: 10px;
    max-height: 40px;
    margin-top: auto;
    margin-bottom: auto;
    max-width: 140px;
}

.contentLeftSidebar {
    display: flex;
}

.subsidebar {
    background-color: #f8fafc;
    /* soft neutral background */
    height: 100vh;
    width: 220px;
    padding-top: 1rem;
    border-right: 1px solid #e2e8f0;
    /* subtle divider */
}

/* Active item */
.subsidebar .nav-item.active {
    background: #2563eb;
    /* primary blue highlight */
    border-radius: 6px;
    margin: 2px 8px;
}

.subsidebar .nav-item.active .nav-link {
    color: #ffffff;
    /* white text for contrast */
}

/* Default links */
.subsidebar .nav-item .nav-link {
    display: block;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 15px;
    color: #334155;
    /* dark slate for readability */
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.subsidebar .nav-item .nav-link:hover {
    background: #e2e8f0;
    /* light gray hover */
    color: #1e40af;
    /* darker blue on hover */
}


.content-area {
    flex: 1;
    padding: 20px;
}

.anpr-content-area {
    flex: 1;
    padding: 20px;
}

/* MARK:LicensesSection */


#licensesSection #siteSelector {
    display: flex;
}

#licensesSection #siteSelector #siteTitle {
    font-size: 25px;
    font-weight: 600;
    align-self: center;
}

#licensesSection #siteSelector #siteId {
    width: 200px;
    margin-left: 10px;
}

#licensesSection .tableTitle {
    font-size: 25px;
    font-weight: 600;
    align-self: center;
}

#licensesSection #containerTitle {
    display: flex;
}

#licensesSection .btn-account {
    margin-left: 20px;
}

#licensesSection #activeLicensesTable {
    display: none;
}

#licensesSection #licensesHistoryContainer {
    display: none;
}


#licensesSection .dt-length,
#licensesSection .dt-search,
#licensesSection .dt-info {
    display: none;
}

#licensesSection .table-expired {
    background-color: #ff3b3b83 !important;
    /* light red */
}

/* MARK: Sites Section */

.sitesSection .leftDiv {
    width: 50%;
}

.sitesSection .rightDiv {
    display: none;
    width: 50%;
    padding-left: 10px;
}

.sitesSection #siteDetailsTable {
    width: 100% !important;
}

.sitesSection #addAccBtn {
    margin-left: auto;
}

#siteDetailsTable th:nth-child(1),
#siteDetailsTable td:nth-child(1) {
    width: 80%;
}

#sitesTable th:nth-child(1),
#sitesTable td:nth-child(1) {
    width: 80%;
}

.sitesSection .header {
    height: 40px;
}

.sitesSection .flexContainer {
    display: flex;
}

.sitesSection .header {
    display: flex;
}

.sitesSection #addSiteBtn {
    margin-left: auto;
}



/* MARK: Badge */

.badge.bg-success.assigned {
    background-color: rgba(236, 253, 243, 1) !important;
    border: 1px solid rgba(199, 245, 217, 1)
}

.bg-warning,
.bg-secondary,
.bg-danger,
.bg-info,
.bg-success,
.bg-neutral {
    background-color: rgba(255, 255, 255, 1) !important;
    color: rgba(61, 72, 91, 1);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid rgba(225, 229, 234, 1);
    border-radius: 6px;
    vertical-align: text-bottom;
}

span.badgeDot {
    margin-right: 4px;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: baseline;
}

.bg-success span.badgeDot {
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%2317B26A'/%3E%3C/svg%3E%0A");
}

.bg-warning span.badgeDot {
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%23FDB022'/%3E%3C/svg%3E%0A");
}

.bg-info span.badgeDot {
    color: gray;
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%23808080'/%3E%3C/svg%3E%0A");
}

.bg-danger span.badgeDot {
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%23FF0000'/%3E%3C/svg%3E%0A");
}

.bg-secondary span.badgeDot {
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%231E88E5'/%3E%3C/svg%3E%0A")
}

.bg-neutral span.badgeDot {
    content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 7.33268C3.53921 7.33268 3.10588 7.24518 2.70033 7.07018C2.29477 6.89518 1.94199 6.65768 1.64199 6.35768C1.34199 6.05768 1.10449 5.7049 0.929492 5.29935C0.754492 4.89379 0.666992 4.46046 0.666992 3.99935C0.666992 3.53824 0.754492 3.1049 0.929492 2.69935C1.10449 2.29379 1.34199 1.94102 1.64199 1.64102C1.94199 1.34102 2.29477 1.10352 2.70033 0.928516C3.10588 0.753516 3.53921 0.666016 4.00033 0.666016C4.46144 0.666016 4.89477 0.753516 5.30033 0.928516C5.70588 1.10352 6.05866 1.34102 6.35866 1.64102C6.65866 1.94102 6.89616 2.29379 7.07116 2.69935C7.24616 3.1049 7.33366 3.53824 7.33366 3.99935C7.33366 4.46046 7.24616 4.89379 7.07116 5.29935C6.89616 5.7049 6.65866 6.05768 6.35866 6.35768C6.05866 6.65768 5.70588 6.89518 5.30033 7.07018C4.89477 7.24518 4.46144 7.33268 4.00033 7.33268Z' fill='%23A3ABB3'/%3E%3C/svg%3E%0A")
}

.badge.bg-success.final {
    color: rgba(61, 72, 91, 1);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    border-radius: 6px;
    vertical-align: text-bottom;
    background-color: rgba(236, 253, 243, 1) !important;
    border: 1px solid rgba(199, 245, 217, 1)
}

.bg-warning {
    background-color: rgba(255, 193, 7, 1) !important;
}

.bg-success {
    background-color: rgba(25, 135, 84, 0.6) !important;
}

.badge.bg-success.final {
    color: rgba(61, 72, 91, 1);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    border-radius: 6px;
    vertical-align: text-bottom;
    background-color: rgba(236, 253, 243, 1) !important;
    border: 1px solid rgba(199, 245, 217, 1)
}

/* MARK: Sandbox Section */
.json-output {
        margin-top: 10px;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background-color: #f9f9f9;
        font-family: monospace;
        white-space: pre-wrap;
        word-wrap: break-word;
    }