body {
   background-color: #f5f5f5;
   /* font-family: 'Roboto', sans-serif; */
   /* font-size: 16px; */
   color: #333;
   /* padding: 0;
  margin: 0; */
   /* margin: 0;
   padding: 0;
   box-sizing: border-box; */
   /* margin-bottom: 50px; */
}

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

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

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

/* Top header */

.top-header {
   /* background-color: #ffffff; */
   background-color: #2d2f32;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.top-header-text {
   font-size: 1.5rem;
   color: #fff;
}

/* -------------------------------------
   Centered logos above navbar
   ------------------------------------- */

/* hover highlight for interactivity */
.top-header a:hover img {
   transform: scale(1.03);
   filter: brightness(1.05);
}

/* responsive layout and spacing */
.top-header .d-flex {
   gap: 2rem; /* spacing between logos */
   flex-wrap: wrap; /* allows stacking on smaller screens */
   justify-content: center; /* ensures perfect centering */
   align-items: center;
}

/* Navbar top right buttons on dark */
.navbar {
   background-color: #fff;
   border-color: #fff;
}

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

.nav-link {
   font-weight: 600;
   color: #000 !important;
}

.navbar-nav .nav-link {
   font-family: 'Heebo', Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: 600;
   line-height: 1.5;
   padding: 1rem 1.875rem !important;

   transition: color 0.2s ease, background-color 0.2s ease;
   text-align: center;
}

/* Optional: adjust dropdown links for better alignment */
.dropdown-menu .dropdown-item {
   text-align: center;
}

/* Buttons */
.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;
}

.info-btn {
   /* width: 70px;
   height: 70px;
   padding: 10px 16px;
   border-radius: 35px; */
   font-size: 24px;
   /* line-height: 1.33; */
}

/* 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;
}

/* Image based calc links */
.a-img {
   display: inline-block;
   transition: all 0.3s ease;
}

.a-img img {
   display: block; /* remove the default bottom space of img */
}

.flip-img {
   transform: scaleX(-1);
}

.a-img:hover {
   padding: 10px;
   border: 2px solid #000;
}

.coming-soon {
   position: relative;
   display: inline-block;
}

.coming-soon::after {
   content: '';
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.6);
}

.coming-soon:hover::after {
   content: 'Coming Soon';
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-size: 24px;
   font-weight: bold;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Forms */

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

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

.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-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;
}

.dataTables_info {
   font-size: 1em;
}

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

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

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

.bold {
   font-weight: bold;
}

.highlight-change {
   border: 1px solid #d65504 !important;
   transition: border-color 1s;
}

.highlight-text {
   color: #d65504;
   transition: color 1s;
}

.highlight-text-red {
   color: red !important;
   transition: color 1s;
}
/* Tri drive gradient */

.calcResult {
   display: inline-block;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-weight: bold;
}

.calcResult #max-gradient,
.calcResult #max-load {
   color: #ff5722;
}

.gradientInfo {
   display: inline-block;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-weight: normal;
}

.gradientInfo #info-vehicle {
   font-style: italic;
   font-weight: 600;
}

/* ESA */

.form-border {
   border: 1px solid grey;
   border-radius: 10px;
   padding: 10px;
}

.axle-group {
   padding: 0px;
}

.axle-group-head {
   color: #1561a2;
   background-color: #c8e0f4;
   font-weight: bold;
   padding: 10px;
   padding-bottom: 4px;
   border-radius: 10px 10px 0 0;
   /* display: flex; */
   /* padding: 41px 50px 31px; */
   /* position: relative;
   z-index: 99; */
}

.axle-group-body {
   padding: 10px;
   /* margin-left: 22px;
   padding-top: 17px; */
}

.axle-option {
   padding: 4px;
   font-size: 31px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Not-selected (default) state */
.axle-option {
   --fa-primary-color: gray;
   --fa-secondary-color: gray;
   --fa-primary-opacity: 1;
   --fa-secondary-opacity: 0.5;
}

/* Selected state */
.axle-option.selected {
   --fa-primary-color: #1561a2;
   --fa-secondary-color: #1561a2;
   --fa-primary-opacity: 0.5;
   --fa-secondary-opacity: 1;
}
/* disable axles outside of allowed vehicle range */
.axle-option.disabled {
   /* opacity: 0.5; */
   pointer-events: none;
}

.axle-group .group-info {
   font-size: 0.8em;
}

.axle-group .max-load-info {
   font-size: 0.8em;
   /* color: #0d6efd; */
   text-decoration: none;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
}

.form-text-sm {
   font-size: 0.8em !important;
}

.max-load-icon {
   font-size: 0.8em;
   color: #f69730;
}

.badge-hover:hover {
   text-decoration: none; /* remove underline */
   cursor: pointer;
}

.badge-hover:hover .badge {
   background-color: #1561a2 !important; /* darker blue */
}

/* .max-load-info:hover {
   color: #0a58ca;
   text-decoration: underline;
   cursor: pointer;
} */

.esa-card {
   border-radius: 10px;
}

.card-text-small {
   font-size: 0.8em;
   line-height: 1.2; /* adjust as necessary */
   margin-bottom: 0; /* removes the default margin-bottom */
}
.card-text-medium {
   color: #1561a2 !important;
   font-size: 1.2em;
   font-weight: bold;
}

.total-row td {
   border-top: 2px solid darkgray;
   color: #1561a2 !important;
   font-weight: bold;
}

.per-group-row td {
   font-size: 0.8rem;
   padding: 0.25rem;
}

/* Styling the parent rows of compareTable */
#compareTable tbody tr > td[colspan='4'] {
   background-color: #c8e0f4; /* A light grey background */
   /*font-weight: bold;  Bold text */
   border-top: 2px solid darkgray; /* Top border to separate sections */
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
}

/* Styling the child rows of compareTable */
#compareTable tbody tr:not(:first-child) > td:not([colspan='4']) {
   padding: 6px;
   font-weight: 300;
}
#compareTable tbody tr:not(:first-child) > td:not([colspan='4']):first-child {
   padding-left: 20px; /* Adding a left padding for a hierarchical look */
   font-weight: 500;
}

/* Intersection tool styles */
.up-down-arrow {
   font-size: 1rem;
}
.side-arrow {
   font-size: 1.7rem;
   color: #b3b3b0;
}

.carriageway {
   display: flex; /* instead of d-flex to enable show/hide */
   width: 100%;
   height: 40px;
   background: #eee;
}

#divMedian {
   width: 100%;
   height: 40px; /* Adjust this as per the desired total height of the container */
   background: #eee;
}
#divNoMedian {
   width: 100%;
   height: 10px; /* Adjust this as per the desired total height of the container */
   background: #eee;
   width: 100%;
}
.median {
   height: 40px;
}

.truck-row {
   width: 100%;
   background: #eee;
}

.truck-img {
   width: 30px;
   margin-top: 20px;
   margin-bottom: 10px;
   padding-top: 5px;
   border-top: dashed 2px #000;
}

#carriageway-top {
   width: 100%;
   height: 5px;
   background: #eee;
   border-bottom: 3px solid #000;
}

.dotted-bott-border {
   border-bottom: 1px dotted #000;
}
.dotted-top-border {
   border-top: 1px dotted #000;
}
.solid-top-border {
   border-top: 3px solid #000;
}
.solid-bott-border {
   border-bottom: 3px solid #000;
}
.solid-left-border {
   border-left: 3px solid #000;
}
.solid-right-border {
   border-right: 3px solid #000;
}

.dashed-line {
   border-top: 3px dashed #000; /* Style, height, and color of the line */
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

.intersection-table {
   width: 100%;
   color: #212529;
}

.intersection-table th,
.intersection-table td {
   padding: 0.3rem;
}

/* Accordion buttons - initial and collapsed state */
.accordion-button,
.accordion-button.collapsed {
   background-color: #c8e0f4;
   color: #1561a2;
   font-weight: bold;
   box-shadow: none;
}

/* Accordion button - expanded state */
.accordion-button:not(.collapsed) {
   color: #1561a2;
   background-color: #c8e0f4;
}

.accordion-button:focus {
   box-shadow: none;
}

.definition {
   display: flex;
   align-items: center; /* Vertically aligns flex items */
   line-height: 1.6;
   font-size: 0.9rem;
}

.definition-label {
   color: #333;
   margin-right: 20px; /* Spacing between label and fraction */
}

.fraction {
   display: inline-flex;
   flex-direction: column; /* Stacks numerator and denominator vertically */
   text-align: center;
}

.numerator,
.denominator {
   padding: 3px;
}

.denominator {
   border-top: 1px solid #666;
}

.warning-icon {
   color: #ffa500;
   vertical-align: middle;
   margin-left: 5px;
   font-size: 0.8em;
}
.turn-heading {
   color: #1561a2;
}

.small-text {
   font-size: 0.85em;
}

@media print {
   /* Hide elements not needed for printing */
   .top-header,
   .navbar,
   .footer,
   .sidebar,
   .nav-tabs,
   .non-printable {
      display: none;
   }

   body {
      margin: 10mm; /* Adjust as needed */
   }
   .container {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0 !important;
      padding-right: 0 !important;
      /* max-width: unset !important; */
   }
   thead {
      display: table-header-group;
   }
}

.tight-table-headers th {
   padding-bottom: 0; /* Removes padding at the bottom of each th in the first row */
   padding-top: 0; /* Removes padding at the top of each th in the second row */
}

.padded-top-row td {
   padding-top: 20px; /* Adds extra padding to the top of the first row */
}

.glossary-entry-title {
   font-weight: bold;
   color: #1561a2;
}

.glossary-img {
   padding: 5px;
   max-height: 400px;
}

/* ----------------------------
     Custom layout for tool tiles
  -----------------------------*/
.tool-card {
   display: flex;
   flex-direction: column; /* stack image, then text */
   align-items: center;
   justify-content: flex-start; /* start content from top */
   height: 100%; /* equal height across row */
   padding: 1rem;
   text-align: center;
}

/* Ensure all images occupy same visual zone */
.tool-card img {
   width: 100%;
   height: 180px; /* fixed display height */
   object-fit: contain; /* preserve aspect ratio */
   object-position: center;
   margin-bottom: 1rem;
}

.tool-card h3 {
   font-size: 1.25rem;
   margin-top: 0.5rem;
   margin-bottom: 0.75rem;
}

.tool-card p {
   flex-grow: 1; /* pushes footer edge for equal height cards */
}

/* -------------------------------------
    hover effect for tool images
   ------------------------------------- */
.tool-card a {
   display: inline-block;
   position: relative;
   padding: 6px;
   border-radius: 0.5rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-card a::after {
   content: '';
   position: absolute;
   inset: 0;
   border: 2px solid rgba(0, 0, 0, 0.25); /* subtle border tone */
   border-radius: 0.5rem;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.tool-card a:hover {
   transform: scale(1.03); /* gentle pop-up */
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-card a:hover::after {
   opacity: 1; /* fade in soft border */
}