body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* To prevent any horizontal scrolling */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;
    
}
.chart-container {
    width: 100%; /* Make it as wide as the container */
    height: auto; /* Let the height adjust based on the aspect ratio */
    max-height: 100vh; /* Prevent the container from exceeding the viewport height */
    aspect-ratio: 16 / 9; /* Maintain a 16:9 ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure no overflow */
}
.position-fixed {
    right: 0; /* Ensure it’s aligned to the right */
}
body {
    font-family: "Poppins", sans-serif;
}
.tooltip-inner {
    background-color: #333 !important; /* or any custom color */
    color: #fff !important;
    font-size: 0.85rem;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #333 !important;
}

.custom-btn-primary{
    background-color: #a5d9cb !important;
    border-color: #3d85c6 !important; 
    color: #02283f !important; 
}

.custom-primary {
    background-color: #02283f !important;
    color: #fff !important;

}
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #3d85c6;
    color: #fff;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s ease;
    position: relative;
    border-right: solid 0.5px #3d85c6;
}
#sidebar a {
    text-decoration: none;
}
#sidebar li {
    cursor: pointer;
}
#sidebar li:hover {
    background-color: #B0C7E8; /* Lighter blue background for hover */
    color: #02283f !important;
}
#sidebar li:hover > a {
    color: #02283f !important;
}
#sidebar li:hover svg path {
    fill: #02283f !important;
}
#sidebar .h6 {
    color: #fff;
}
/* #sidebar.active {
    margin-left: -250px;
} */
#sidebar.active .custom-menu {
    margin-right: -50px;
}

#sidebar ul li.active a.menu-heading {
    background-color: #a5d9cb; /* Background color for active state */
    color: #02283f !important; /* Dark blue text color */
    border-left: none;
    border-top-left-radius: 3px; /* Remove the vertical bar */
    border-bottom-left-radius: 3px; /* Remove the vertical bar */
}
#sidebar ul li {
    font-size: 16px;
    padding-left: 15px;
    /* padding-right: 15px; */
}
#sidebar ul li > ul {
    margin-left: 0px; /* Adjust left margin of the expanded menu */
    padding-left: 15px; /* Add padding to match the parent menu item */
}
#sidebar ul li > ul li {
    font-size: 14px;
}
#sidebar ul li a {
    padding: 10px 0;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Active item styles */
#sidebar ul li ul li.active {
    background-color: transparent; /* No background for active state */
    color: #FFFFFF !important;
    border-left: 5px solid #a5d9cb; /* Keep the border to indicate the active state */
}
#sidebar ul li.active a {
    color: #FFFFFF !important;
}
#sidebar ul li.active svg path {
    fill: #02283f !important;
}
.border-active {
    border-left: 5px solid #a5d9cb; /* Your desired color and width for the active border */

}
/* Expanded submenu styles */
#sidebar ul li.show > a {
    background-color: transparent; /* No background color for expanded menu */
    color: rgba(255, 255, 255, 0.8) !important; /* Match the sidebar link color */
}


@media (max-width: 991.98px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebar .custom-menu {
        margin-right: -50px !important;
        top: 10px !important;
    }
}
#sidebar .custom-menu {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 0;
    margin-right: -20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
    #sidebar .custom-menu {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
}

a[bs-data-toggle="collapse"] {
    position: relative;
}

@media (max-width: 991.98px) {
    #sidebarCollapse span {
        display: none;
    }
}

#content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    min-height: 100vh;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.dashboard-item {
    position: relative;
    background-color: #F1F9FF;
    flex: 1;
    margin: 30px;
    margin-left: 0px;
    height: 148px;
    align-content: center;
    padding: 50px;
    border-radius: 4px;
    border: solid 1px #a5d9cb;
}
#sidebar .footer {
    background-color: transparent;
    color: #a5d9cb;
    padding: 1rem;
    border-top: 1px solid #a5d9cb; /* Adjust to match your menu item borders */
}

#sidebarHeader{
    text-align: center; 
    margin-left: 15px; 
    margin-right: 15px; 
    padding-bottom:10px; 
    border-bottom: solid 1px;
    border-bottom-color: #a5d9cb
}

#sidebar ul li:hover > a {
    background-color: transparent; /* Remove background color change */
    color: #FFFFFF !important; /* Keep text color white */
}

/* Add specific hover effect for submenus */
#sidebar ul li > ul li:hover {
    background-color: #a5d9cb; /* Add a distinct background color for hover */
    color: #02283f !important; /* Dark text color on hover */
}

/* Ensure submenu text changes to dark on hover */
#sidebar ul li > ul li:hover a {
    color: #02283f !important; /* Dark text for submenu hover */
}

#footer{
    text-align: center; 
    margin-left: 15px; 
    margin-right: 15px; 
    padding-bottom:10px; 
    border-top: solid 1px;
    border-top-color: #a5d9cb
}

#tabsDiv .list-group-item.active {
    background-color: #a5d9cb; /* Change this to your desired active background color */
    color: #02283f; /* Change this to your desired active text color */
    border-color: #02283f; /* Optional: match border color to background color */
    border-bottom: 3px solid #a5d9cb; /* Adds a border at the bottom of the active tab */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#tabsDiv .list-group-item:not(.active):hover {
    background-color: #02283f; /* Change this to your desired hover background color */
    color: #a5d9cb; /* Change this to your desired hover text color */
}

#tabsDiv .list-group-item {
    color: #02283f; /* Change this to your desired active text color */
    border-color: #02283f; /* Optional: match border color to background color */
}

li.nav-item a.nav-link.app-nav-link {
    color: #02283f;
    transition: background-color 0.3s ease;
}

.nav-link:hover {
    color: #800000; /* Dark maroon on hover */
}

li.nav-item a.nav-link.app-nav-link.active {
    background-color: #a5d9cb; /* Change this to your desired active background color */
    color: #02283f; /* Change this to your desired active text color */
    border-color: #02283f; /* Optional: match border color to background color */
    border-bottom: none; /* Adds a border at the bottom of the active tab */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
li.nav-item a.nav-link.app-nav-link:not(.active):hover {
    background-color: #02283f; /* Change this to your desired hover background color */
    color: #a5d9cb; /* Change this to your desired hover text color */
}
#filtersBanner {
    background-color: #a5d9cb; 
    color:#02283f;
}

.table-title{
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    /* font-family: 'Lucida Grande';  */

}
.table-subtitle{
    color: #333333;
    font-size: 14px;
    /* font-weight: bold; */
    /* font-family: 'Lucida Grande';  */

}
.app-table{
    margin-top: 1em !important;
}

.app-table tr.totalRow {
    background-color: #81c0c2 !important;
    font-weight: bold !important;
}

.app-table tr td.totalRow {
    font-weight: bold !important;
}

table.app-table thead.app-table-head tr th{
    /* border-color: #76add3 !important; */
    background-color: #a5d9cb !important ;
    color: #02283f !important;
    text-align: left;
}
.traffic-light {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.traffic-light.red {
    background-color: red;
}
.traffic-light.yellow {
    background-color: yellow;
}
.traffic-light.green {
    background-color: green;
}
.card-link {
    text-decoration: none;
}
.card-text {
    font-size: 1.2em;
}

/* Styling for the Alerts */
.alert-item {
    font-size: 1em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.alert-number {
    font-weight: bold;
    color: #ffcc80; /* Pale orange color */
}

.alert-icon {
    color: #ff5722; /* Darker orange color for the icon */
    margin-right: 10px;
}

/* Styling for the Insights */
.insight-item {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.insight-link {
    color: #007bff;
    text-decoration: underline;
}

.insight-icon {
    color: #ffc107; /* Yellow color for the lightbulb icon */
    margin-right: 10px;
}
/* Card title styling with raised shadow effect */
.card-title {
    color: #02283f;
    font-size: 1.7em;
    font-weight: bold;
    background-color: #ffffff; /* White background to make it stand out */
    padding: 10px 15px;
    position: relative;
    top: -25px; /* Move it up to create a visual separation */
    z-index: 10;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Higher shadow for title */
    border-radius: 5px;
    width: fit-content;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#dailyContent .card-title, 
#endOfMonthContent .card-title {
    background-color: #a5d9cb !important; 
}
#dailyContent .card-title:hover,
#endOfMonthContent .card-title:hover {
    transform: translateY(-5px); /* More pronounced lift on hover */
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.25); /* Larger shadow on hover */
}
/* Keep the cards with their own shadow */
#dailyContent .card,
#endOfMonthContent .card{
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#dailyContent .card:hover,
#endOfMonthContent .card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* .card-body {
padding: 40px 20px 20px; 
} */

/* Optional: Style for icons to match the design */
.marker-icon {
    color: #02283f;
}

/* Make sure the text in card is larger */
.card-text {
    font-size: 1.2em;
}
.highcharts-color-0 {
    fill: #9d6c94ff !important;
    stroke: #9d6c94ff !important;
}

.highcharts-color-1 {
    fill: #ffe75cff !important;
    stroke: #ffe75cff !important;
}

.highcharts-color-2 {
    fill: #225575ff !important;
    stroke: #225575ff !important;
}

.highcharts-color-3 {
    fill: #8fbc8fff !important;
    stroke: #8fbc8fff !important;
}

.highcharts-color-4 {
    fill: #7a003dff !important;
    stroke: #7a003dff !important;
}

.highcharts-color-5 {
    fill: #f29d15ff !important;
    stroke: #f29d15ff !important;
}

.highcharts-color-6 {
    fill: #4f2669ff !important;
    stroke: #4f2669ff !important;
}

.highcharts-color-7 {
    fill: #3babbaff !important;
    stroke: #3babbaff !important;
}

.highcharts-color-8 {
    fill: #32752fff !important;
    stroke: #32752fff !important;
}

.custom-dark {
    color: #02283f
}