.sectionTopBar {
    background: #F1F1F1;
    border-radius: 5px;
}

.dashboard-target-section {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    padding-bottom: 20px;
}

.dashboard-target-section .dashboard-target-box {
    border: 2px solid #FFCB08;
    border-radius: 20px;
    padding: 20px 20px;
    min-width: 300px;
    margin-right: 20px;
}

.dashboard-target-section::-webkit-scrollbar {
    width: 10px;
}

/* Track (background of the scrollbar) */
.dashboard-target-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle (the draggable part) */
.dashboard-target-section::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
.dashboard-target-section::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.chartSection {
    height: 80%;
}

.chartSection::-webkit-scrollbar {
    width: 10px;
}

/* Track (background of the scrollbar) */
.chartSection::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle (the draggable part) */
.chartSection::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
.chartSection::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.announcementSection {
    padding: 15px 25px;
    background: #F1F1F1;
    max-height: 50vh;
    overflow-y: auto;
}

.announcementSection::-webkit-scrollbar {
    width: 10px;
}

/* Track (background of the scrollbar) */
.announcementSection::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle (the draggable part) */
.announcementSection::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
.announcementSection::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dailyActionStatus {
    cursor: pointer;
}

.actionStatus {
    cursor: pointer;
}


.goldBgBar {
    background: #FFCB08 !important;
    border: none !important;
}

.goldText {
    color: rgba(255, 203, 8, 1) !important;
}

.table-times {
    border-collapse: separate;
    /* Prevents border merging */
    border-spacing: 10px;
    /* Adjusts the gap between cells */
}

.table-times td {
    border-radius: 5px !important;
}

.table-times th {
    border-radius: 5px !important;
}

.greyBg {
    background-color: rgba(241, 241, 241, 1) !important;
}

.accordion {
    width: 100%;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    background: #f4f4f4;
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    border: none;
    width: 100%;
    text-align: left;
    outline: none;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: #e0e0e0;
}

.accordion-content {
    padding: 15px;
    display: none;
    background: #fff;
}

.text-wrap-pre {
    white-space: pre !important;
}

.active .accordion-content {
    display: block;
}

.goldCircle {
    background: #FFCB08 !important;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.dailyCentralTable {
    display: none;
}

.actionTable {
    display: none;
}

.goldOutlineBg {
    border: 2px solid #FFCB08 !important;
    background-color: #fff !important;
}

.accordion .typcn-media-play {
    transform: rotate(90deg);
    font-size: 1.5rem;
}

.table-times-container {
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.table-times-container .table-times {
    width: 150%;
    border-collapse: separate;
    /* Prevents border merging */
    border-spacing: 10px;
    /* Adjusts the gap between cells */
}

.table-times-container .table-times th,
.table-times-container .table-times td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    white-space: nowrap;
}

/* Fix first and last columns */
.table-times-container .table-times .fixedSection,
.table-times-container .table-times td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
}

.table-times-container .table-times .fixedSection,
.table-times-container .table-times td:nth-last-child(-n+2) {
    position: sticky;
    right: 0;
    background: #2c3e50;
    z-index: 10;
}

.table-times-container .table-times thead .fixedSection:last-child {
    right: 0px;
}

.table-times-container .table-times thead .fixedSection:nth-last-child(2) {
    right: 7.5%;
}


.table-times-container .table-times td:nth-last-child(2) {
    right: 7.5%;
}

.table-times-container .table-times td:last-child {
    right: 0px;
}

/* Ensure no transparency behind sticky columns */
.table-times-container .table-times th:nth-last-child(-n+2),
.table-times-container .table-times td:nth-last-child(-n+2) {
    box-shadow: rgba(255, 255, 255) 1px 1px 0px 11px;
}

.table-times-container .table-times .fixedSection,
.table-times-container .table-times td:first-child {
    box-shadow: rgba(255, 255, 255) 1px 1px 0px 5px;
}

.table-times-container .table-responsive::-webkit-scrollbar {
    width: 10px;
}

/* Track (background of the scrollbar) */
.table-times-container .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle (the draggable part) */
.table-times-container .table-responsive::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
.table-times-container .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.table-responsive::-webkit-scrollbar {
    width: 10px;
}

/* Track (background of the scrollbar) */
.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle (the draggable part) */
.table-responsive::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

/* Handle on hover */
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.searchTextField {
    background: rgba(241, 241, 241, 1);
    border-radius: 5px;
}

.searchTextField .searchTextFieldInput {
    border: none;
    width: 100%;
    background: rgba(241, 241, 241, 1);
}

.actionAddBtn {
    background: #000;
    border-radius: 50%;
    color: #fff;
    width: fit-content;
}

.carparkListTable tr:nth-child(odd) {
    background-color: #fff;
    border: none;
}

.carparkListTable tr:nth-child(even) {
    background-color: rgba(241, 241, 241, 1);
    border: none;
}

.carparkListTable .table-bordered> :not(caption)>*>* {
    border-width: inherit !important;
}

.whitespace-preline {
    /* white-space-collapse: preserve-breaks !important; */
}

.site1Border {
    border: 2px solid rgba(2, 211, 172, 1);
}

.site2Border {
    border: 2px solid rgba(14, 132, 255, 1);
}

.site3Border {
    border: 2px solid rgba(144, 214, 127, 1);
}

.customTextBox {
    border: 1px solid rgba(203, 208, 221, 1) !important;
}

.chooseFileWidth {
    width: 25%;
}

#fileNames {
    width: 75%;
}

.sidebar {
    position: fixed;
}

.main-panel {
    margin-left: 200px;
}

.sidebar .nav .nav-item.active>.nav-link {
    background: transparent !important;
}

.menu-icon {
    margin-right: 1rem;
}

.sideBarLogo {
    width: 35%;
    transition: width 0.5s ease-in-out;
}

.collapseButton {
    position: fixed;
    bottom: calc(100% - 150px);
    right: calc(100% - 235px);
    cursor: pointer;
    z-index: 10;
}

.collapseButton .menu-icon {
    background-color: #FFCB08;
    border-radius: 50%;
}

.collapsed-sidebar .menu-title {
    display: none !important;
}

.collapsed-sidebar .nav-link {
    justify-content: center;
    padding: 10px !important;
}

.collapsed-sidebar .menu-icon {
    margin: 0 auto;
}

.collapsed-sidebar .menu-icon {
    margin-right: 0rem;
}

.collapsed-sidebar .collapseButton {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    margin-bottom: 3vh;
    transform: rotate(180deg);
}

.collapsed-sidebar {
    width: 80px;
    /* Adjust sidebar width when collapsed */
}

.modal-box {
    display: none;
    position: absolute;
    top: 26%;
    left: 110%;
    transform: translateY(-50%);
    /* Set the modal width */
    height: auto;
    background: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 40px;
    border-radius: 10px;
    z-index: 999;
}

.collapsed-sidebar .collapse {
    display: none !important;
    /* Hide dropdown when collapsed */
}

.collapsed-sidebar .menu-icon-collapse-hidden {
    display: none !important;
}

.collapsed-sidebar .nav-link {
    padding-left: 10px;
    /* Adjust padding when collapsed */
}

.collapsed-sidebar .sideBarLogo {
    width: 100%;
    transition: width 0.5s ease-in-out;
}

.rankModal-dialog {
    max-width: 95% !important;
    width: 95% !important;
}

.rankModal-dialog td {
    width: 16.67%;
    max-width: 16.67%;
    vertical-align: top !important;
    white-space: unset !important;
}

.rankModal-dialog td h5 {
    white-space: break-spaces;
}

.announcement-modal-dialog {
    max-width: 50% !important;
    width: 50% !important;
}

.dashboard iframe {
    height: 100%;
    min-height: auto;
}

.addCarPark iframe {
    height: 100%;
    min-height: 60vh;
}

.overviewMap {
    /* margin-top: -2%; */
}

.overviewMap iframe {
    height: 100%;
    min-height: 75vh;
}

.mapSearchPosTop {
    /* position: absolute;
    top: -3vh;
    left: 0;
    right: 0;
    background-color: #fff;
    width: 100%;
    height: 5vh; */
}

.mapSearchPos {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 5px;
    background-color: #fff;
    width: 80%;
}

.btn-hover-effect:focus {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn-hover-effect:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.dropdown-menu h6 {
    cursor: default;
}

.createCarPark .dropdown-menu {
    width: 100%;
}

.cursor-pointer {
    cursor: pointer;
}

.showAnnouncementBtn {
    border: none !important;
}

.carParkBtn1 {
    cursor: pointer;
}

.accordionBtn1 {
    cursor: pointer;
}

@media screen and (max-width: 991px) {
    .main-panel {
        margin-left: 0;
    }

    .navbar .navbar-menu-wrapper {
        width: 100% !important;
    }

    .collapseButton {
        display: none;
    }

    .chooseFileWidth {
        width: 35%;
    }

    #fileNames {
        width: 65%;
    }

    .rankModal-dialog {
        max-width: 100% !important;
        width: 100% !important;
    }

    .rankModal-dialog td {
        width: 25%;
        max-width: 25%;
        vertical-align: top !important;
    }

    .announcement-modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
    }

    .dashboard iframe {
        min-height: 40vh;
    }

    .addCarPark iframe {
        min-height: 50vh;
    }

    .overviewMap iframe {
        min-height: 65vh;
    }
}