body {
   background-color: #ffffff;
   font-family: 'Lato', sans-serif;
   font-size: 17px;
   color: #4c5456;
   /* padding: 0;
  margin: 0; */
   /* margin: 0;
   padding: 0;
   box-sizing: border-box; */
   /* margin-bottom: 50px; */
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Raleway', sans-serif;
   font-weight: 700;
   color: #e84c22;
}

.dark-heading {
   color: #1d5a8c !important;
}

/* Links */
a {
   color: #007bff;
   text-decoration: none;
}

a:hover {
   color: #0056b3;
   text-decoration: underline;
}

.dark-link {
   color: #11a8ff;
}

/* Top header */

.top-header {
   padding-top: 8px;
   padding-bottom: 8px;
   background-color: #4c5456;
   /* background-color: #ffffff; */
   /* background-color: #313538; */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   /* 4C5456 */
}
.top-header-text {
   font-family: 'Lato', sans-serif;
   font-size: 1.5rem;
   /* color: #4c5456; */
   color: #fff;
}

.navbar {
   background-color: #d9d9d9;
}
/* Navbar top right buttons on dark */
.navbar-dark .navbar-nav .btn-dark:hover {
   background-color: #ffffff;
   border-color: #ffffff;
}

.select-fleet-dropdown {
   max-width: 100px;
   /* padding: 0.375rem 0.75rem;  */
   border-radius: 0.25rem; /* Matches button border-radius */
   background-color: #1d5a8c;
   color: #fff; /* White text for contrast */
   border: 1px solid #1d5a8c;
   cursor: pointer;
   text-align: center; /* Centers placeholder text in some browsers */
   width: auto;
}
/* Keeps background color consistent when focused */
.select-fleet-dropdown:focus,
.select-fleet-dropdown:focus-visible {
   background-color: #1d5a8c;
   outline: none; /* Removes the default focus outline */
   color: #fff;
}

/* Buttons */

/*Button font style */
.btn {
   font-family: 'Arial', sans-serif;
}

/* Button primary color */
.btn-primary {
   background-color: #38aadd;
   border-color: #38aadd;
}

/* Button primary hover effect */
.btn-primary:hover {
   background-color: #2c82b5;
   border-color: #2c82b5;
}

/* Button primary active state */
.btn-primary.active {
   background-color: #1d5a8c;
   color: white;
   border-color: #1d5a8c;
}

/* Button secondary color */
/* .btn-secondary {
   background-color: #ed5565;
   border-color: #ed5565;
} */

/* Button secondary hover effect */
/* .btn-secondary:hover {
   background-color: #d03f51;
   border-color: #d03f51;
} */

/* Button secondary active state */
/* .btn-secondary.active {
   background-color: #b32e3a;
   color: white;
   border-color: #b32e3a;
} */

/* Top nav elements*/
.nav-top {
   font-size: 1em;
   font-weight: 600;
   color: #4c5456;
}

/* Tabs */
/* Tab link colors */
.nav-tabs .nav-link {
   color: #1d5a8c;
   font-weight: 700;
}

/* Tab link hover effect */
.nav-tabs .nav-link:hover {
   color: #2c82b5;
   background-color: transparent;
   border-color: transparent;
}

/* Tab link active state */
/* .nav-tabs .nav-link.active {
   background-color: #1d5a8c;
   color: white;
   border-color: #1d5a8c #1d5a8c transparent;
} */

/* Tab link focus state */
.nav-tabs .nav-link:focus {
   outline: none;
   box-shadow: none;
}

.index-header {
   margin-top: 10px;
}
.index-body {
   margin-top: 30px;
}

/* Forms */

.alert {
   padding: 0rem 2rem;
   margin-bottom: 1rem;
}

.form-control:invalid {
   border-color: #d65504;
}

.form-control:invalid ~ .invalid-feedback {
   display: block;
}

.form-control:invalid ~ .invalid-feedback::before {
   content: '⚠️ ';
   padding-right: 4px;
}

.form-control {
   font-family: 'Roboto', sans-serif;
}

.forgot-password {
   font-size: 14px;
   color: #6c757d;
   text-decoration: none;
}

.forgot-password:hover {
   color: #0d6efd;
   text-decoration: underline;
}

/* Checkbox */
.form-check-label {
   font-size: 12px;
}

.form-check-input:checked {
   background-color: #1d5a8c;
   border-color: #1d5a8c;
}

/* Datatables  - paging buttons to match */
/* DataTables paginate button colors */
.dataTables_wrapper .dataTables_paginate .page-link {
   background-color: #38aadd;
   color: white;
   border: 1px solid #38aadd;
}

/* DataTables paginate button hover effect */
.dataTables_wrapper .dataTables_paginate .page-link:hover {
   background-color: #2c82b5;
   color: white;
   border-color: #2c82b5;
}

/* DataTables paginate button active state */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
   background-color: #1d5a8c;
   color: white;
   border-color: #1d5a8c;
}

table.dataTable td {
   font-size: 80%;
   line-height: 1.15em;
   color: #333;
}

tbody tr:hover .trip-icon {
   /* display: inline-block; Show icons when hovering over a row */
   visibility: visible;
}

/* Change the background color of a row on hover */
table.dataTable tbody tr:not(.child-row):hover {
   background-color: #bde4f6;
}

.invalid-date {
   border-color: red;
   background-color: #ffdddd;
}

.child-row-content {
   padding-left: 20px;
}

.selected-row {
   background-color: #d0e9f5 !important;
}

/* Borderless child row */
.table-borderless tbody tr {
   border-bottom: 1px solid #dee2e6;
}

.table-borderless tbody tr:last-child {
   border-bottom: none;
}

.table-borderless tbody td {
   padding: 0.5rem;
   vertical-align: middle;
   font-size: 90%;
   line-height: 1em;
}

.table-borderless tbody td:nth-child(2n + 1) {
   font-weight: bold; /* 1st and 3rd columns bold */
}

.dataTables_info {
   font-size: 1em;
}

/* Make sure asset id is fully visible then truncate */
td.trips-asset-id {
   max-width: 75px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.alert-icons {
   text-align: center;
}
.alert-icon {
   margin-right: 4px;
}

.fa-icon-orange {
   --fa-primary-color: #f69730;
   --fa-secondary-color: #1e3050;
   color: #f69730;
}

.container-icons {
   text-align: center;
}
.fa-icon-blue {
   --fa-primary-color: #2c82b5;
   color: #2c82b5;
}

/* Hover on cell row in dailys table to apply filter */

/* #dailysTable tbody tr td:first-child:hover {
   border: 2px solid #0f75db;
   cursor: pointer;
} */
.date-cell:hover {
   border: 2px solid #0f75db;
   cursor: pointer;
}

/* Datatable trip buttons */
/* .trip-icon {
   visibility: hidden;
   width: 18px;
   height: 18px;
   margin: 0 5px;
   cursor: pointer;
} */

/* .icon-container {
   position: relative;
   display: inline-block;
}

.icon-exclamation {
   position: absolute;
   top: 0;
   right: -5px;
   font-size: 0.8em;

} */

.dashreport-title {
   color: gray;
   text-transform: uppercase;
   font-size: 0.9rem; /* Smaller title */
   margin-bottom: 10px;
}

.dashreport-subtitle {
   color: gray;
   text-transform: uppercase;
   font-size: 0.8rem; /* Smaller subtitle */
   margin-top: 10px;
}

.dashreport-value {
   color: black;
   margin: 0;
}

/*  
   Reports Page 
*/
.reports-wrapper {
   padding: 5px;
   /* background-color: lightgray; */
}

.report-card {
   background-color: #ffffff; /* Clean white background */
   border-radius: 20px; /* Softly rounded corners */
   transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Smooth animations */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for a subtle depth */
   padding: 20px; /* Adds space inside the card */
   overflow: hidden; /* Ensures content stays within rounded corners */
}

.report-card:hover {
   transform: translateY(-10px); /* Slight upward lift on hover */
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
   background-color: #f8f9fa; /* Very light grey background on hover */
}

.report-title {
   color: gray;
   text-transform: uppercase;
}

.report-value {
   color: black;
   font-weight: bold;
}

.progress-container {
   width: 60%;
   margin: 0 auto;
   position: relative; /* this allows us to use absolute positioning for the text */
}

/* Benchmarks table */
.table-section-header {
   background-color: #f8f9fa; /* Light gray background for header rows */
   margin-top: 1rem; /* Additional margin above the row */
   border-top: 2px solid #dee2e6; /* Top border to separate sections */
}

.table-section-header td {
   padding-top: 1.2rem; /* Add padding inside the cell for spacing */
}

/* Other */
.rounded-corners {
   border-radius: 6px;
}

.blurry {
   filter: blur(3px);
}

/* Landing */

.hero-overlay {
   background-color: rgba(0, 0, 0, 0.5);
}

.hero-content h1,
.hero-content p {
   color: #fff;
}

.container h2,
.container h3 {
   font-weight: bold;
}

/* .container-fluid.bg-light {
   padding: 50px 0;
} */

img.img-fluid {
   max-height: 280px;
}
.key-features img:hover {
   transform: scale(1.05);
   transition: transform 0.3s ease;
}

@media (max-width: 768px) {
   .hero-section h1 {
      font-size: 2.5rem;
   }
   .hero-section p {
      font-size: 1rem;
   }
}

/* .container-fluid p.lead {
   margin-top: 20px;
} */

/* footer {
   background-color: #ffffff;
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
   padding: 20px;
} */

/* footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;
} */

/* new summary cards */
/* General card body styling for spacing */
/* General card body styling for spacing */
.report-body {
   padding: 1rem;
   height: 100%; /* Ensures consistent height for cards */
   display: flex;
   flex-direction: column;
   justify-content: space-between; /* Distribute content evenly */
}

/* Dash report title: Two lines of space */
.dashreport-title {
   line-height: 1.2; /* Adjust line height for better readability */
   min-height: 2.4em; /* Space for two lines (1.2 line-height × 2 lines) */
   overflow: hidden; /* Prevent overflow */
   white-space: normal; /* Allow wrapping if text is long */
   text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

/* Subtitle truncation and spacing */
.dashreport-subtitle {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .dashreport-title,
   .dashreport-subtitle {
      font-size: 0.9rem; /* Reduce font size on smaller screens */
   }

   .card-title.dashreport-value {
      font-size: 1.2rem; /* Adjust value font size for readability */
   }
}

/* Fullscreen button support */

.leaflet-bar.fullscreen-btn {
   background: white;
   border: 1px solid #ccc;
   cursor: pointer;
   font-size: 26px;
   line-height: 1;
   /* padding: 5px;
   
    */
}
.leaflet-bar.fullscreen-btn:hover {
   background: #f4f4f4;
}

/* Right pane animation */
#right-pane {
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
   transform: translateX(0); /* Default position */
   min-width: 0 !important;
   overflow: hidden;
}

#right-pane.hidden-pane {
   flex: 0 0 0 !important; /* Fully collapse the right pane */
}

#left-pane.fullscreen-map {
   flex: 1 1 auto !important; /* Expand the left pane */
}

/* Hidden (slid-out) state */
.hidden-pane {
   transform: translateX(100%); /* Move right pane offscreen */
   opacity: 0; /* Optional: fade out */
}

/* Adjust left pane to fullscreen */
.fullscreen-map {
   transition: width 0.3s ease-in-out;
   width: 100% !important;
}