:root { --primary: #007777; --primary-light: #e0f7fa; --accent: #34a853; --danger: #ea4335; --warning: #fbbc05; --bg: #f8f9fa; --card-bg: #fff; --border: #e0e0e0; --text: #222; --muted: #888; --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.06); --sticky-bg: #f5f5f5;
 --primary-color: #2c6eb5; --primary-color2: teal; --light-grey: #f0f2f5; --dark-grey: #65676b; --text-color: #050505; --background-color: #ffffff; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            --success-green: #34a853; --warning-orange: #fbbc05; --error-red: #ea4335; }

body {font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background: var(--bg);color: var(--text);margin:0; font-size: 16px; line-height: 1.5; }

header { position:sticky; top: -36px; z-index: 1000; background: #fff; box-shadow: 3px 2px 4px rgb(0 0 0 / 7%);    display:none;  }
header,h1,h2,h3,h4 { text-align: center; padding:0; margin:0 0 8px; text-transform:capitalize;  } h1 { font-size: 1.2rem; }  h2,h3 { font-size: 1.1rem; }
header h1 { margin: 0; font-size: 1.5rem; letter-spacing: 1px; font-weight: 600; }
a { color: var(--primary-color); text-decoration: none; } img,video,.yt { object-fit: contain; height: auto; max-width: 100%; }
.header-content { display: flex; justify-content: space-between; align-items: center; }

.main-nav { overflow: overlay hidden; white-space: nowrap; scrollbar-width: thin; padding:7px 2px; }  main>section { margin:auto }
.main-nav a { font-weight: 500; padding: 0 10px; border-right:1px solid #ccc; }

/* loading progress */
.active, button, .fdt input:checked + label, input[type="submit"], label:has(input[type="radio"]:checked) { color:white; background-color:var(--primary-color); font-weight:500; }
.loading button { pointer-events: none; background-image: linear-gradient(90deg, teal 0%,  #209dd5 100%) !important;background-repeat: no-repeat  !important; background-color:teal !important; animation-timing-function: ease-out; }
button.loading, input[type="submit"].loading, .loading button { animation: hLoading 7s infinite; } li.loading { animation: vLoading 3s infinite;  }
@keyframes hLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } }
@keyframes vLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } }


#app-container>section {max-width: 700px; margin-bottom:10px; padding:12px;background-color: white;}
form {  * {padding:5px;margin-bottom:10px;}  #trainSuggestions { display:none; } 
  label { padding: 8px 20px; cursor: pointer; background: #f5f5f5; } label>input { display:none }
  #date-container { overflow-x: overlay; scrollbar-width:thin; display: flex; column-gap: 5px; text-wrap:nowrap; flex-direction: row-reverse; justify-content:space-between; }
} #input button {cursor:pointer;color: white;background-color: var(--primary-color);font-weight:bold; width:98%; font-size:16px; border:0; padding: 10px 20px !important;}

.history-items {display: flex;gap: 20px;white-space: nowrap;overflow-x: overlay;scrollbar-width: thin; padding-bottom: 5px;}
.card {border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 12px; margin-bottom: 10px; border: 1px solid var(--border); }

table { max-height:60vh; border-spacing:0; border-width: 1px 0 0 1px; margin: 0 0 1.5em; display:block; overflow:overlay; scrollbar-width:thin; padding-bottom:7px; white-space: nowrap; border-collapse: collapse;background-color: #f0f0f0;}

#output {
  table th, table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ddd; padding: 4px 8px; text-align: center; }
  table td.transition-occupied-onboard { border-top: 2px solid #aaa; }
  table td.occupied.transition-from-empty { background: linear-gradient(to bottom, #fff 50%, #e0e0e0 50%); }
  table td.empty.transition-from-occupied { background: linear-gradient(to bottom, #eee 25%, #fff 50%); }
  table td.empty { background: #fff; }  table td:first-child { text-align:left; }
  table thead th, table tbody td:first-child { position: sticky; border: 1px solid #ddd; top: 0; left: 0; z-index: 3; background-color: #eee; }
  .chart-table { th, td { border-bottom-color: #f5f5f5; } }
}

/* CP page first 2; CV page: coach-btn only  */
.coach-layout {display: flex;row-gap: 14px; flex-wrap: wrap; justify-content: space-between; list-style-type: none; margin:0; padding:0; }
.coach-layout>*, .coach {text-align:center;padding: 8px 0px;border-radius: 4px;border: 1px solid #ccc;background: #fafafa;cursor: pointer;color: black;min-width: 23%;box-sizing: border-box;}
.coach-layout button, .coach-btn { width: calc(20% - 22px); text-align:center; margin: 4px; padding: 6px 12px; border-radius: 4px; border: 1px solid #ccc;background: #fafafa;cursor: pointer;color: black;}

/* homepage */
.feature-card { text-align:center; display:flex; flex-direction: row-reverse; gap:12px;}
.feature-card p { margin: 0 } .feature-card img, #meta img { width:100px; min-width: 100px; min-height: 100px;}
#input a h3,#input a h2 { color: var(--primary-color); }
.feature-card a { display: block; color: var(--primary-color); font-size: 1.1em; font-weight: bold; margin: 0 0 8px; }


/* Pages */
#meta { display: flex; flex-wrap: wrap; align-items: center; } #meta h1, #meta h2 { flex-basis: 100%; margin: 0; } 
#meta img { margin-right: 20px; } #meta p { flex: 1 1 0; margin: 0; }


/*   TrainChart.in   customization        */

h1 { border-bottom: 1px solid #eee; padding-bottom: 5px; }  .ads { min-height:30px !important; } span.ezoic-ad { min-height: 25px !important; }
#input+div:after{ content: ""; clear: both; display: table; }
#trainNumber { min-width:78%; }
div,section { scrollbar-width: none !important; -ms-overflow-style: none; }  div::-webkit-scrollbar, section::-webkit-scrollbar { width: 0; height: 0; display: none; }

#history { min-height:30px; max-width: 93vw; overflow: overlay;   }

ul.slinks, nav.slinks, .slinks>ul, .slinks>div, .slinks nav {
  display: flex; overflow-x: overlay; align-items: center; justify-content: space-around; list-style-type:none; padding:0; margin:0;
  span { display: block; } a { min-width:60px; margin:0; text-align: center; text-transform: capitalize; } img { display:block; width:130px; height:100px; }
}

#popup {
    position: fixed; top: 10px; left: 10px; right: 10px; height: 99vh;  padding: 10px; overflow: overlay;
    background-color: #fff;  box-shadow: 0 0 10px #ccc;  z-index: 1000;
    table { max-height:unset;  } button { float:right; }
}

footer button, #output .collapse-btn, #live-eta-refresh  {border-width: 0;padding: 4px 12px;margin: 0 12px;font-weight: bold; }

.pnr-chart-links { display:none; }










/* The Blue User GPS Pulsar */
.gps-pulsar .dot {
    width: 12px; height: 12px;
    background: #2196F3;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(33, 150, 243, 0.4);
    animation: pulse-gps 2s infinite;
}

@keyframes pulse-gps {
    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

/* The Next Station Orange Glow */
.next-stn-glow {
    filter: drop-shadow(0 0 8px rgba(255, 171, 0, 0.8));
    animation: glow-next 1.5s ease-in-out infinite alternate;
}

@keyframes glow-next {
    from { filter: drop-shadow(0 0 4px rgba(255, 171, 0, 0.6)); transform: scale(1); }
    to { filter: drop-shadow(0 0 12px rgba(255, 171, 0, 1)); transform: scale(1.1); }
}

/* Station Tooltip Labels */
.stn-label {
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
}


/* https://unpkg.com/leaflet/dist/leaflet.css  */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0;}
.leaflet-container{overflow:hidden;}
.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;}
.leaflet-tile::selection{background:transparent;}
.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast;}
.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0;}
.leaflet-marker-icon,.leaflet-marker-shadow{display:block;}
.leaflet-container .leaflet-overlay-pane svg{max-width:none!important;max-height:none!important;}
.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none!important;max-height:none!important;width:auto;padding:0;}
.leaflet-container img.leaflet-tile{mix-blend-mode:plus-lighter;}
.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y;}
.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom;}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none;}
.leaflet-container{-webkit-tap-highlight-color:transparent;}
.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,0.4);}
.leaflet-tile{filter:inherit;visibility:hidden;}
.leaflet-tile-loaded{visibility:inherit;}
.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800;}
.leaflet-overlay-pane svg{-moz-user-select:none;}
.leaflet-pane{z-index:400;}
.leaflet-tile-pane{z-index:200;}
.leaflet-overlay-pane{z-index:400;}
.leaflet-shadow-pane{z-index:500;}
.leaflet-marker-pane{z-index:600;}
.leaflet-tooltip-pane{z-index:650;}
.leaflet-popup-pane{z-index:700;}
.leaflet-map-pane canvas{z-index:100;}
.leaflet-map-pane svg{z-index:200;}
.leaflet-vml-shape{width:1px;height:1px;}
.lvml{behavior:url(#default#VML);display:inline-block;position:absolute;}
.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto;}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none;}
.leaflet-top{top:0;}
.leaflet-right{right:0;}
.leaflet-bottom{bottom:0;}
.leaflet-left{left:0;}
.leaflet-control{float:left;clear:both;}
.leaflet-right .leaflet-control{float:right;}
.leaflet-top .leaflet-control{margin-top:10px;}
.leaflet-bottom .leaflet-control{margin-bottom:10px;}
.leaflet-left .leaflet-control{margin-left:10px;}
.leaflet-right .leaflet-control{margin-right:10px;}
.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear;}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1;}
.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;}
svg.leaflet-zoom-animated{will-change:transform;}
.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1);}
.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none;}
.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden;}
.leaflet-interactive{cursor:pointer;}
.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}
.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair;}
.leaflet-popup-pane,.leaflet-control{cursor:auto;}
.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}
.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none;}
.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto;}
.leaflet-container{background:#ddd;outline-offset:1px;}
.leaflet-container a{color:#0078A8;}
.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5);}
.leaflet-container{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:12px;font-size:.75rem;line-height:1.5;}
.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px;}
.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black;}
.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block;}
.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4;}
.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px;}
.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none;}
.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb;}
.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px;}
.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px;}
.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px;}
.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px;}
.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px;}
.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px;}
.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px;}
.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px;}
.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px;}
.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none;}
.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative;}
.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff;}
.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px;}
.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px;}
.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em;}
.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px;}
.leaflet-default-icon-path{background-image:url(images/marker-icon.png);}
.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,0.8);margin:0;}
.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4;}
.leaflet-control-attribution a{text-decoration:none;}
.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline;}
.leaflet-attribution-flag{display:inline!important;vertical-align:baseline!important;width:1em;height:.6669em;}
.leaflet-left .leaflet-control-scale{margin-left:5px;}
.leaflet-bottom .leaflet-control-scale{margin-bottom:5px;}
.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;-moz-box-sizing:border-box;box-sizing:border-box;background:rgba(255,255,255,0.8);text-shadow:1px 1px #fff;}
.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px;}
.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777;}
.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none;}
.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box;}
.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px;}
.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px;}
.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px;}
.leaflet-popup-content p{margin:17px 0;margin:1.3em 0;}
.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none;}
.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4);}
.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma,Verdana,sans-serif;color:#757575;text-decoration:none;background:transparent;}
.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858;}
.leaflet-popup-scrolled{overflow:auto;}
.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1;}
.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);}
.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999;}
.leaflet-div-icon{background:#fff;border:1px solid #666;}
.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4);}
.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto;}
.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:"";}
.leaflet-tooltip-bottom{margin-top:6px;}
.leaflet-tooltip-top{margin-top:-6px;}
.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px;}
.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff;}
.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff;}
.leaflet-tooltip-left{margin-left:-6px;}
.leaflet-tooltip-right{margin-left:6px;}
.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px;}
.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff;}
.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff;}