:root {
    --v-timeline-scale-width: 64px;
    --v-timeline-column-width: 300px;
}
/* #region Timelines */

/* #region Timeline Structure */

.tmln-container {
    width: 100%;
    min-height: 100%;
    overflow: auto;
    position: relative;
}

.noscroll-animation,
.noscroll-animation * {
    transition: none !important;
    scroll-behavior: auto;
}

.tmln-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    height: auto;
    background-color: var(--style-background-secondary);
}

.tmln-body .tmln-rows {
    flex-direction: column;
    flex-wrap: nowrap;
    width: max-content;
    background-color: var(--style-background-secondary);
    position: relative;
    border-bottom: var(--border-regular);
}
.tmln-body .tmln-labels {
    flex-direction: column;
    flex-wrap: nowrap;
    position: sticky;
    left: 0;
    top: 0;
    justify-self: start;
    box-shadow: 0 0 18px 6px rgba(0,0,0,0.15);
    z-index: 19;
}

.tmln-body .tmln-row-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
}
.tmln-body .tmln-row {
    pointer-events: none;
}
.tmln-body .tmln-row-background:nth-of-type(even) {
    background-color: var(--style-background-timeline-alternate);
}
.tmln-body .tmln-row-background:nth-of-type(odd) {
    background-color: var(--style-background-secondary);
}

.tmln-row-label {
    max-width: 240px;
    transition: width var(--anim-duration-short);
    border-right: 1.5px solid var(--style-background-accent-thin);
    position: relative;
    z-index: 20;
}


.tmln-row-label:nth-of-type(even) {
    background-color: var(--style-background-timeline-alternate);
}
.tmln-row-label:nth-of-type(odd) {
    background-color: var(--style-background-secondary);
}


.tmln-body {
    position: relative;
}
.tmln-body .tmln-row {
    position: relative;
    transition-duration: var(--anim-duration-medium);
    transition-property: opacity;

    @starting-style {
        opacity: 0;
    }
}

.tmln-body .tmln-row .tmln-leg {
    position: absolute;
    height: 100%;
    transition: left 1s, width 1s;
    position: absolute;
    top: 0;
}

.tmln-leg {
    z-index: 2;
}

.tmln-leg .bg {
    position: relative;
    z-index: 5;
}
.tmln-leg:not(.leg-join) {
    z-index: 9;
}
.tmln-leg .cont {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;

    z-index: 10;
}

.tmln-turn {
    background: var(--style-background-accent-thin);
    transition: left 1s, width 1s;
    position: absolute;
    opacity:0.6;
}
.tmln-leg.leg-join .bg {
    border-left-width: 0px;
    border-right-width: 0px;
    border-radius: 0 !important;
    opacity: 0.4;
}

.tmln-leg-body {
    background-color: var(--style-background-tertiary);
    transition: background-color var(--anim-duration-short), border-color var(--anim-duration-short), opacity var(--anim-duration-short);
    position: absolute;
    width: 100%;
    border-radius: 6px;
    pointer-events: all;
    cursor: pointer;
}
.tmln-leg-body * {
    cursor: pointer;
}

.tmln-leg-body:focus {
    outline: 1.5px solid var(--color-accent);
    outline-offset: 1.5px;
    z-index: 2;
}
.tmln-leg-body:focus:not(:focus-visible) {
    outline: none;
}

/* #endregion */

/* #region Timeline Sign On Off */

.tmln-allow-time {
    position: absolute;
    background-color: var(--style-background-accent-ultrathin);
    border-radius: var(--style-border-radius-tiny);
    border: 1px dotted var(--style-background-accent-thick);
    top: 1px;
    bottom: 1px;
    opacity: 1;
}

.tmln-allow-time .tmln-sig-on,
.tmln-allow-time .tmln-sig-off {
    position: absolute;
    height: 100%;
    opacity: 0.5;
    display: flex;
    align-items: center;
}
.tmln-allow-time .tmln-sig-on {
    right: 100%;
    padding-right: var(--style-padding-small);
}
.tmln-allow-time .tmln-sig-off {
    left: 100%;
    padding-left: var(--style-padding-small);
}

/* #endregion */

/* #region Timeline Background Config */

.tmln-leg-body > .bg {
    opacity: 1;
    position: absolute;
    border-radius: 4.5px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-back-3);
    border: var(--timeline-capsule-border-width) solid var(--style-background-accent-regular);
    transition: 
    background-color var(--anim-duration-short),
    border-color var(--anim-duration-short),
    opacity var(--anim-duration-short);
    opacity: 0.7;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.8), rgba(0,0,0,1));
}
.tmln-leg-body.selected > .bg {
    background-color: var(--style-background-quarternary);
    border-color: var(--style-background-accent-ultrathick);
    opacity: 0.9;
}
.tmln-leg-body.highlighted > .bg {
    background-color: var(--style-background-quarternary);
    border-color: var(--style-background-accent-thick);
    opacity: 0.8;
}

.tmln-leg-body.muted > .bg {
    background-color: var(--style-background-quarternary);
    border-color: var(--style-background-accent-thick);
    opacity: 0.1;
}
.tmln-leg-body.selected,
.tmln-leg-body:hover {
    background-color: var(--style-background-quarternary);
}
.tmln-leg-body:hover > .bg {
    opacity: 1;
}

.tmln-leg-body.cont-before,
.tmln-leg-body.cont-before > .bg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tmln-leg-body.cont-after,
.tmln-leg-body.cont-after > .bg {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.tmln-leg-body.above,
.tmln-leg-body.aboveIndirect,
.tmln-leg-body.above > .bg,
.tmln-leg-body.aboveIndirect > .bg {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.tmln-leg-body.below,
.tmln-leg-body.belowIndirect,
.tmln-leg-body.below > .bg,
.tmln-leg-body.belowIndirect > .bg {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.tmln-leg-body.above:not(:hover, .selected),
.tmln-leg-body.above:not(:hover, .selected) > .bg {
    border-top-color: transparent !important;
    border-top-width: 0;
}
.tmln-leg-body.below:not(:hover, .selected),
.tmln-leg-body.below:not(:hover, .selected) > .bg {
    border-bottom-color: transparent !important;
    border-bottom-width: 0;
}
.tmln-leg-body.aboveIndirect > .bg {
    border-top-style: dashed;
    border-top-width: var(--timeline-capsule-border-width);
}
.tmln-leg-body.belowIndirect > .bg {
    border-bottom-style: dashed;
    border-bottom-width: var(--timeline-capsule-border-width);
}

.tmln-leg-body .bg.act-static,
.tmln-leg-body .bg.act-pass,
.tmln-leg-body .bg.act-taxi,
.tmln-leg-body .bg.act-walk,
.tmln-leg-body .bg.act-pre-journey,
.tmln-leg-body .bg.act-post-journey {
    border-style: dashed;
    border-width: 1.5px;
}

/* Train, Static, Taxi, Pass, PreJourney, PostJourney, SignOn, SignOff */

/* #endregion */

/*#region Timeline Turn*/

.tmln-leg-body.turn {
    background-color: var(--style-background-quinary);
    border: 1px dotted var(--style-background-accent-thick);
    border-radius: 4px;
}
.tmln-leg-body.turn.tu-b {
    border-right: none;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.tmln-leg-body.turn.tu-a {
    border-left: none;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.tmln-leg-body.turn.above {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none;
}
.tmln-leg-body.turn.below {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none;
}
.tmln-leg-body.turn.muted {
    opacity: 0.8;
    border-color: var(--style-background-accent-thin);
}

/*#endregion*/

/* #region Timeline Leg Train Detail */


.tmln-leg-body .tmln-leg-content.train-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 var(--style-padding-tiny);
    gap: var(--style-padding-tiny);
    overflow: hidden;
    position: relative;
}

.tmln-leg-content .ldg,
.tmln-leg-content .cntr,
.tmln-leg-content .trl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--style-padding-tiny);
}
.tmln-leg-content .cntr {
    flex-grow: 1;
    justify-content: center;
}
.tmln-leg-content .ldg {
    justify-content: start;
}
.tmln-leg-content .trl {
    justify-content: end;
}

.tmln-leg-body.above .tmln-leg-content.train-detail {
    display: none;
}
.tmln-leg-body.muted:not(:hover, .selected, .highlighted) .tmln-leg-content.train-detail {
    opacity: 0.5;
}

.tmln-leg-body .tmln-leg-content.train-detail .trainid,
.tmln-leg-body .tmln-leg-content.train-detail .act-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tmln-leg-body .tmln-leg-content.train-detail .arr,
.tmln-leg-body .tmln-leg-content.train-detail .dep {
    /* flex-shrink: 1;
    flex-grow: 1; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tmln-leg-body .tmln-leg-content.train-detail .arr {
    text-align: right;
}

.tmln-leg-body .tmln-leg-content.train-detail {
    color: var(--style-text-secondary);
    transition: color var(--anim-duration-short);
}
.tmln-leg-body.selected .tmln-leg-content.train-detail ,
.tmln-leg-body.highlighted .tmln-leg-content.train-detail {
    color: var(--style-text-secondary);
}
.tmln-leg-body:hover .tmln-leg-content.train-detail {
    color: var(--style-text-primary);
}
.tmln-leg-body.selected:hover .tmln-leg-content.train-detail,
.tmln-leg-body.highlighted:hover .tmln-leg-content.train-detail {
    color: var(--style-text-primary);
}

.tmln-leg-body .tmln-leg-content.train-detail .arr,
.tmln-leg-body .tmln-leg-content.train-detail .dep {
    opacity: 0.65;
}

/* #endregion */

/* #region Timeline Connection SVG */
svg.tmln-connection {
    position: absolute;
    transition: left 1s, width 1s;
    pointer-events: none;
    content-visibility: visible;
    opacity: 1;
    transition-property: opacity, display, content-visibility;
    transition-duration: var(--anim-duration-medium);
    transition-delay: 0s;
    transition-behavior: allow-discrete;
    z-index: 6;
}

.tmln-body:not(.delayed) svg.tmln-connection {
    content-visibility: hidden;
    opacity: 0;
}

svg.tmln-connection path.hvr {
    pointer-events: stroke;
    stroke-width: 10px;
    stroke: transparent;
}
svg.tmln-connection path.disp {
    stroke-width: 1.5px;
    stroke: var(--style-text-quarternary);
    stroke-dashoffset: 0;
    transition: 1s;
    stroke-linecap: round;
    stroke-dasharray: 1 3;
}

svg.tmln-connection .hvr-group:has(> path.hvr:hover) path.disp,
path.disp.anim  {
    stroke-dashoffset: 0;
    animation-name: tmln-connection-stroke-anim;
    animation-iteration-count: infinite;
    animation-duration: 30s;
    animation-timing-function: linear;
}

svg.tmln-connection:has(> .hvr-group > path.anim) {
    z-index: 15;
}

svg.tmln-connection path.disp.muted {
    opacity: 0.2;
}
/* svg.tmln-connection path.vehicle-on-vehicle {
    stroke-dasharray: 1 3;
}
svg.tmln-connection path.vehicle-on-crew {
    stroke-dasharray: 1 3;
}
svg.tmln-connection path.crew-on-crew {
    stroke-dasharray: 3 4;
}
svg.tmln-connection path.crew-on-vehicle {
    stroke-dasharray: 3 4;
} */
@keyframes tmln-connection-stroke-anim {
    from {
    stroke-dashoffset: 80;
  }
  to {
    stroke-dashoffset: -280;
  }
}

/* #endregion */

/* #region Timeline Scale */

.tmlm-row-scale-label,
.tmlm-row-bg-scale-spacer,
.tmlm-row-scale {
    height: 22px;
}

.tmlm-row-scale-label {
    background-color: var(--style-background-tertiary);
    border-right: var(--border-regular);
    border-bottom: var(--border-regular);
    position: sticky;
    top: 0;
    z-index: 19;
}
.tmlm-row-bg-scale-spacer {
}
.tmlm-row-scale {
    background-color: var(--style-background-tertiary);
    border-bottom: var(--border-regular);
    position: relative;
    position: sticky;
    top: 0;
    z-index: 21;
}
.tmlm-row-scale::before {
    content: '';
    height: 100%;
    width: 800px;
    right: 100%;
    background-color: var(--style-background-tertiary);
    border-bottom: var(--border-regular);
    display: block;
    position: absolute;
}
.tmlm-row-scale .scl-tim {
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -21px;
    position: absolute;
    top: 0;
    text-align: center;
}
/* #endregion */

/* #region Timeline DateTimeScale  */

.tmlm-datim-row-scale {
    height: 22px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 21;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: var(--style-background-tertiary);
    border-bottom: var(--border-regular);
}
.tmlm-datim-row-scale-lbl {
    display: flex;
    background-color: green;
    height: 100%;
}
.tmln-datim-scale-content {
    position: relative;
    height: auto;
}
.tmln-datim-scale-content .scl-tim {
    width: 42px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -21px;
    position: absolute;
    top: 0;
    text-align: center;
}

.tmln-datim-date-content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: 100%;
    height: 100%;
}
.tmln-datim-scale-content .scl-date {
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    margin-left: calc(var(--style-padding-small) * -1);
}
.tmln-datim-scale-content .scl-date .label {
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    background-color: crimson;
    padding-left: var(--style-padding-small);
    padding-right: var(--style-padding-large);
    color: var(--style-text-primary);
    background: linear-gradient(90deg,
    var(--style-background-tertiary) calc(100% - var(--style-padding-medium)), 
    color-mix(in srgb, var(--style-background-tertiary) 0%, transparent) 100%);
}
.tmln-datim-scale-content .scl-date::before {
    content: '';
    background: linear-gradient(90deg,
    color-mix(in srgb, var(--style-background-tertiary) 0%, transparent) 0%,
    var(--style-background-tertiary) calc(var(--style-padding-small)));
    width: var(--style-padding-large);
    position: absolute;
    top: 0;
    right: calc(100% - 1px);
    height: 100%;
    display: block;
}

/* #endregion */

/* #region Timeline Delay Styling */

/* #region Timeline Delay Label */

.tmln-delay-diag-lbl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    padding-right: var(--style-padding-small);
    gap: var(--style-padding-medium);
}
.tmln-delay-diag-lbl .leading,
.tmln-delay-diag-lbl .trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--style-padding-small);
}


.tmln-delay-diag-lbl .kind {
    width: 56px;
    max-width: 56px;
    min-width: 56px;
    position: relative;
    overflow: hidden;
}
.tmln-delay-diag-lbl .kind .veh {
    transform: rotateY(180deg);
}
.tmln-delay-diag-lbl .kind .crew {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tmln-delay-diag-lbl .detail {
    width: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tmln-delay-diag-lbl .info {
    display: flex;
    
}

/* #endregion */

/* #endregion */

/* #region Timeline DateTime  */

.tmln-body.datim {
    min-width: 100%;
    background-color: rebeccapurple;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.tmln-body.datim .tmln-rows {
    min-width: 100%;
}
.tmln-datim-row {
    display: flex;
    flex-direction: row;
    position: relative;
    background-color: var(--style-background-secondary);
}
.tmln-datim-row:nth-child(even) {
    background-color: var(--style-background-timeline-alternate);
}
.tmln-datim-sect {
    position: relative;
    border-bottom: var(--border-regular);
}
.tmln-datim-sect:last-of-type {
    border-bottom: none;
}
.tmln-datim-sect-head {
    border-bottom: var(--border-regular);
    z-index: 3;
    background-color: var(--style-background-secondary);
    width: 100%;
    display: flex;
    position: sticky;
    top: 22px;
}
.tmln-datim-sect-head .content {
    position: relative;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    width: 100%;
}
.tmln-datim-sect-head .tmln-sec-lead {
    height: 100%;
    display: flex;
    position: sticky;
    align-items: center;
    left: 0;
    flex-shrink: 1;
    gap: var(--style-padding-small);
}

.tmln-datim-sect-head .tmln-sec-trail {
    display: flex;
    position: sticky;
    right: 0;
    flex-shrink: 1;
    height: 100%;
    width: 400px;
    align-items: center;
    justify-content: end;
    gap: var(--style-padding-small);
}
.tmln-datim-sect-head .tmln-sec-trail .collapse {
    margin-right: var(--style-padding-small);
}

.tmln-datim-row .tmln-datim-row-lbl {
    background-color: var(--style-background-secondary);
}
.tmln-datim-row .tmln-datim-row-lbl.lead {
    position: sticky;
    left: 0;
    border-right: var(--border-regular);
    z-index: 2;
}
.tmln-datim-row .tmln-datim-row-lbl.trail {
    position: sticky;
    right: 0;
    border-left: var(--border-regular);
    z-index: 2;
}
.tmln-datim-row:nth-child(even) .tmln-datim-row-lbl {
    background-color: var(--style-background-timeline-alternate);
}

.tmln-datim-row .tmln-datim-row-lbl .content  {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--style-padding-tiny);
    background-color: var(--style-background-accent-ultrathin);
}
.tmln-datim-row .tmln-datim-row-lbl.trail .content {
    justify-content: end;
}

.tmln-datim-row .tmln-datim-row-lbl .resize-target {
    position: absolute;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    transition-duration: var(--anim-duration-short);
    background-color: transparent;
}
.tmln-datim-row .tmln-datim-row-lbl.lead .resize-target {
    right: -2px;
}
.tmln-datim-row .tmln-datim-row-lbl.trail .resize-target {
    left: -2px;
}
.tmln-datim-row .tmln-datim-row-lbl .resize-target::after {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: transparent;
    z-index: 9999;
}
.tmln-datim-row .tmln-datim-row-lbl.lead .resize-target::after {
    right: 1px;
}
.tmln-datim-row .tmln-datim-row-lbl.trail .resize-target::after {
    left: 0px;
}

.tmln-body.datim .tmln-rows:has(.tmln-datim-row-lbl.lead .resize-target:hover) .tmln-datim-row-lbl.lead .resize-target::after {
    background-color: var(--style-background-accent-thick);
}
.tmln-body.datim .tmln-rows:has(.tmln-datim-row-lbl.trail .resize-target:hover) .tmln-datim-row-lbl.trail .resize-target::after {
    background-color: var(--style-background-accent-thick);
}




.tmln-datim-row .tmln-datim-row-legs {
    position: relative;
    z-index: 1;
}
.tmln-datim-row:nth-child(even) .tmln-datim-row-legs {
    background-color: var(--style-background-timeline-alternate);
}

.tmln-datim-leg {
    position: absolute;
    max-height: 100%;
}

.tmln-datim-row-grow {
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
}

/* #endregion */

/* #endregion */


/* #region New Generic Timing List/Table */

table.gen-timing {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  position: relative;
  margin: var(--style-padding-medium) 0;
}


@scope (table.gen-timing) to ([dialog],[popover]) {

  tr {
    height: auto;
  }
  th {
    padding: 0 var(--style-padding-tiny) var(--style-padding-tiny);
    font-weight: 500;
  }
  td {
    height: 32px;
    padding: 0 var(--style-padding-tiny);
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  td:last-child {
    padding-right: 8px;
  }

  td.grow {
    width: 100%;
  }

  .align-left {
    text-align: left;
  }
  .align-right {
    text-align: right;
  }
  td > span.time {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-wrap: nowrap;
    gap: 0;
  }

  tr:nth-of-type(odd) td {
    background-color: var(--style-background-accent-ultrathin);
  }
  tr:nth-of-type(odd) td:first-child {
    border-top-left-radius: var(--style-border-radius);
    border-bottom-left-radius: var(--style-border-radius);
  }
  tr:nth-of-type(odd) td:last-child {
    border-top-right-radius: var(--style-border-radius);
    border-bottom-right-radius: var(--style-border-radius);
  }

  /* #region Text Coloring */

  tr.stop strong,
  tr.stop .strong {
    color: var(--color-text-1);
  }
  tr.stop {
    color: var(--color-text-2);
  }
  tr.stop .weak,
  tr.stop :has(.strong, strong)  {
    color: var(--color-text-4);
  }

  tr.pass strong,
  tr.pass .strong {
    color: var(--color-text-5);
  }
  tr.pass {
    color: var(--color-text-6);
  }
  tr.pass .weak,
  tr.pass :has(.strong, strong)  {
    color: var(--color-text-7);
  }
  a {
    color: inherit;
  }
  a:hover {
    text-decoration: underline;
  }

  

  /* #endregion */

  /* #region Location */

  th.loc {
    padding-left: 0;
  }
  td.loc {
    position: relative;
  }
  td.loc .loc-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    bottom: 0;
    overflow: hidden;
  }
  td.loc .loc-text > * {
    min-width: 0;
    max-width: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* #endregion */

  /* #region Platform Line Codes */

  td .gen-lbl-pl {
    padding: 0 3px;
    min-height: 0;
    min-width: 0;
    font-size: var(--size-font-small);
  }
  /* #endregion */

  /* #region Timing Marker Icon */

  td.tim-row-marker {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 100%;
    padding: 0 !important;
  }
  td.tim-row-marker + td {
    padding-left: 0 !important;
  }
  td.tim-row-marker figure {
    overflow: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
  td.tim-row-marker svg {
    position: absolute;
    top: calc(50% - 100px);
  }

  /* #endregion */
}


/* #endregion */

/* #region Vertical Timeline */

.vertical-timeline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    height: 100%;
    position: relative;
    overflow-x: auto;
        overflow-y: auto;
}

@scope (.vertical-timeline) to ([popover], [dialog]) {

    /* #region Main Structure */
    .v-tl-scroll {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        min-height: 100%;
        max-height: 100%;
        height: 100%;
        
        z-index: 10;
    }
    .v-tl-content {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        z-index: 10;
        flex-grow: 1;
    }
    
    .v-tl-scale {
        position: sticky;
        left: 0;
        z-index: 20;
    }
    .v-tl-body.border-top {
        border-top: var(--border-regular);
    }
    .v-tl-body.border-right {
        border-top: var(--border-regular);
    }
    .v-tl-column-body {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex-grow: 1;
    }

    .v-tl-zoom-control {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 2px;
        height: 100%;
    }

    /* #endregion */
    
    /* #region Column */

    .v-tl-column {
        width: var(--v-timeline-column-width);
        position: relative;
        border-right: var(--border-regular);
    }
    .v-tl-column:last-child {
        border-right: none;
    }
    .v-tl-column.spacer {
        width: auto;
        flex-grow: 1;
        flex-shrink: 0;
    }
    .v-tl-column.spacer .v-tl-header-content {
        width: 100%;
        border-bottom: var(--border-regular);
    }

    .v-tl-column header {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: var(--border-regular);
        background-color: var(--color-back-2);
    }
    /* #endregion */

    /* #region Capsule */
    
    .v-tl-leg-content {
        position: relative;
        
    }

    .v-tl-capsule {
        position: absolute;
        left: 0;
        right: 0;
    }

    /* #endregion */
    

    /* #region Vertical Scale */

    .v-tl-scale-body {
        position: relative;
    }

    .v-tl-scale-body.times {
        width: var(--v-timeline-scale-width);
        background-color: var(--color-back-2);
    }
    .v-tl-scale-body.markers {
        width: 100%;
        top: 0;
    }

    .v-tl-column-markers {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 100%;
    }
    @scope (.v-tl-scale-body) {
        .v-tl-scale.header {
            border-right: var(--border-regular);
        }
        .v-tl-scale.elements:not(.markers) {
            position: relative;
            border-right: var(--border-regular);
        }
        .v-tl-scale .v-tl-scale-label {
            position: absolute;
        }
    }
    /* border-right: var(--border-regular); */
    @scope (.v-tl-scale-body.times) {
        .v-tl-scale.header {
            border-bottom: var(--border-regular);
            background-color: var(--color-back-2);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .v-tl-scale-label:first-child {
            display: none;
        }
        .v-tl-scale-label {
            width: 100%;
            text-align: center;
            transform: translateY(-48%);
        }
    }

    @scope (.v-tl-scale-body.markers) {
        
        .v-tl-scale-label:first-child {
            display: none;
        }
        .v-tl-scale-label {
            left: 0;
            right: 0;
            height: 2px;
            border-top: 1px dashed var(--style-background-accent-regular);
        }
    }

    /* #endregion */


}

/* #endregion */

/* #region Vertical Timeline Diagram */

@scope (.v-tl-diagram-header-wrap) to ([popover], [dialog]) {
    
    .v-tl-diagram-header,
    .v-tl-diagram-header .leading,
    .v-tl-diagram-header .trailing {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--style-padding-small);
        height: 100%;
        min-height: 40px;
    }
    .v-tl-diagram-header .leading,
    .v-tl-diagram-header .trailing {
        gap: var(--style-padding-small);
    }

    .v-tl-diagram-header.stock {
        display: flex;
        align-items: end;
    }
    .v-tl-diagram-header {
        padding: 0 var(--style-padding-medium);
    }
    .v-tl-diagram-header:has(.veh) {
        padding-left: 0;
    }
    .v-tl-diagram-header .veh {
        display: flex;
    }
}

@scope (.v-tl-content) to ([popover], [dialog]) {

    .v-tl-diagram-caps .hstack.label {
        width: 100%;
    }
    .v-tl-diagram-caps:hover {
        z-index: 40 !important;
    }
    .v-tl-diagram-caps .body {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
        align-items: start;
    }
    .v-tl-diagram-caps a:hover {
        text-decoration: underline;
    }

    .v-tl-diagram-caps.train,
    .v-tl-diagram-caps.activity {
        background-color: var(--style-background-accent-ultrathin);
        backdrop-filter: blur(8px);
        border: var(--border-regular);
        max-height: 100%;
        height: 100%;
        border-radius: var(--style-border-radius);
        overflow: hidden;
        margin-right: var(--style-padding-medium);
        margin-left: var(--style-padding-medium);
        padding: var(--style-padding-tiny) 6px;
    }
    .v-tl-diagram-caps.tiny {
        padding-top: 0;
        padding-bottom: 0;
    }

    .v-tl-diagram-caps.train.coupled-right {
        margin-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }
    .v-tl-diagram-caps.train.coupled-left {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
    }
    .v-tl-diagram-caps.train.coupled-indirect-right {
        margin-right: var(--style-padding-small);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right-style: dashed;
    }
    .v-tl-diagram-caps.train.coupled-indirect-left {
        margin-left: var(--style-padding-small);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-style: dashed;
    }
    .v-tl-diagram-caps.tiny {
        padding-top: 0;
        padding-bottom: 0;
    }



    .v-tl-diagram-caps.activity {
        position: relative;
        height: 100%;
        z-index: 18;
        border-style: dashed;
    }

    .v-tl-diagram-caps.instant-activity .marker {
        height: 100%;
        min-height: 100%;
        background-color: var(--style-background-accent-regular);
        border: var(--border-regular);
        border-radius: 2px;
        margin-left: var(--style-padding-medium);
        margin-right: var(--style-padding-medium);
    }
    .v-tl-diagram-caps.instant-activity .icon {
        position: absolute;
        right: 4px;
        top: 0;
        background-color: var(--color-back-2);
        backdrop-filter: blur(8px);
        transform: translateY(-48%);
        padding: 3px;
        border: var(--border-regular);
        border-radius: var(--style-padding-tiny);
        z-index: 30;
    }

    .v-tl-diagram-caps.highlighted {
        background-color: var(--style-background-accent-regular);
    }

    .v-tl-diagram-caps.selected {
        outline: 2px solid var(--style-background-accent-thick);
    }
}
    


/* #endregion */