/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 
 
 .rdy-route-detail .btn-sm { font-size: .75rem; }
 
 /* --- Route detail stop list --- */
 .rdy-stop-wrap { border: 1px solid rgba(0,0,0,.08); border-radius: .55rem; overflow: hidden; background: var(--bs-body-bg); }
 .rdy-stop-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .8rem; border-top: 1px solid rgba(0,0,0,.06); }
 .rdy-stop-row:first-child { border-top: none; }
 

 .rdy-stop-title { font-size: .8rem; font-weight: 400; line-height: 1.2; }
 .rdy-stop-right { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.rdy-stop-badge {
     min-width: 30px;
     height: 30px;
     padding: .25rem;
     border-radius: 999px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: .50rem;
     border: 1px solid var(--bs-secondary);
     border-radius: 50%;
     color: var(--bs-secondary);
     background: var(--bs-body-bg);
 }
 
 /** statuses **/
  .rdy-stop-row.is-arriving { background: rgba(var(--c-yellow-rgb), .5); }
  .rdy-stop-row.is-arriving .rdy-stop-badge { border: 1px solid rgba(var(--c-yellow-rgb), 1); }
  .rdy-stop-row.is-arriving .rdy-stop-badge i { color: rgba(var(--c-yellow-rgb), 1); }
  
  .rdy-stop-row.is-stopped { background: rgba(var(--c-lighter-green-rgb), .8); }
  .rdy-stop-row.is-departing { background: rgba(var(--c-lighter-green-rgb), .3); }
  
  .rdy-stop-row.is-active {
    background: rgba(0,0,0,.04);
    cursor: pointer;
  }
 
 .rdy-stop-time { font-size: .8rem; font-weight: 400; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
 .rdy-stop-time-secondary { font-weight: 400; font-size: .75rem; opacity: .75; margin-top: .25rem; }
 /* Offcanvas nicer width on desktop */
 .rdy-stops-canvas.offcanvas { width: min(450px, 92vw); }
 .rdy-stops-canvas .offcanvas-header { background: var(--c-blue-gradient); }
 .rdy-stops-canvas .offcanvas-header h5 { color: #ffffff; }
 
 .rdy-stops-canvas.offcanvas.offcanvas-start {
     top: 0;
     left: 0;
     width: min(450px, 92vw);
     border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
     transform: translateX(-100%);
 }
 
 /* Offcanvas panel shadow */
 .offcanvas {
   box-shadow: 0 12px 30px rgba(0,0,0,.35);
 }
 
 /* Make the Bootstrap offcanvas backdrop invisible and non-blocking */
 .offcanvas-backdrop {
   opacity: 0 !important;
   pointer-events: none !important;
 }
 
 
 
 .rdy-route-map-holder { position: relative; height: clamp(360px, 65vh, 700px); border-radius: .50rem; overflow: hidden; background: #f3f3f3; }
 .rdy-route-map--detail { width: 100%; height: 100%; }
 
.rdy-route-map-info-box { background:var(--c-yellow-gradient); padding: 10px 15px; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 100%; height: auto; position: static; top: 10px; left: 10px; bottom: auto; -webkit-box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); -moz-box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); z-index: 100;}
   
 .rdy-vehicle-status-text { font-size: .8rem; color: #ffffff; }  
 .rdy-vehicle-status-text .text-muted { color: rgba(255,255,255,.8) !important; }
 .rdy-vehicle-status-text strong { text-transform: uppercase; }
 
 
/* --- Google Maps InfoWindow close button: reset + size --- */
 .gm-style .gm-style-iw button.gm-ui-hover-effect {
   /* kill Bootstrap/button styling */
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
   padding: 0 !important;
   margin: 0 !important;
   line-height: 0 !important;
   font: inherit !important;
 
   /* size + placement */
   width: 20px !important;
   height: 20px !important;
   top: 6px !important;
   right: 6px !important;
 
   cursor: pointer !important;
   opacity: 0.7 !important;
 }
 
 .gm-style .gm-style-iw {
    padding-top: 0 !important;
     padding-right: 12px !important;
 }
 
 .gm-style .gm-style-iw button.gm-ui-hover-effect:hover {
   opacity: 1 !important;
 }
 
 /* the inner "X" container */
 .gm-style .gm-style-iw button.gm-ui-hover-effect span {
   margin: 0 !important;
   width: 20px !important;
   height: 20px !important;
   outline: none !important;
 }
 
 .gm-style .gm-style-iw button.gm-ui-hover-effect span:focus { outline: none !important; }
 
 /* if Google is using an <img> for the X in your build */
 .gm-style .gm-style-iw button.gm-ui-hover-effect img {
   width: 12px !important;
   height: 12px !important;
 }
 
 /* Remove focus outline from Google Maps InfoWindow close button */
 .gm-style .gm-style-iw button.gm-ui-hover-effect:focus,
 .gm-style .gm-style-iw button.gm-ui-hover-effect:focus-visible {
     outline: none !important;
     box-shadow: none !important;
 }
 
 /* Hide Google Maps InfoWindow close button */
 .gm-style .gm-style-iw button.gm-ui-hover-effect {
     display: none !important;
 }
 
 .btn-pdf { padding: 10px 15px !important;}
 .btn-pdf i { font-size: 1.1rem; }
 

 @media (min-width: 576px) { }
 
 @media (min-width: 768px) { 
    .rdy-route-map-info-box { width: 400px; }
    .rdy-route-map-info-box { background:var(--c-yellow-gradient); padding: 10px 15px; border-radius: 6px; width: 300px; height: auto; position: absolute; top: 10px; left: 10px; bottom: auto; -webkit-box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); -moz-box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); box-shadow: 5px 5px 8px -4px rgba(27, 27, 55, 0.45); z-index: 100;}
  }
 
 @media (min-width: 992px) { 
    .rdy-route-map-info-box { width: 500px; }
 }
 
 @media (min-width: 1200px) { }
 
 @media (min-width: 1400px) { }