/* #region Root Styles */

:root {

  --color-safe-orange: #E69F00;
    --color-safe-skyblue: #56B4E9;
    --color-safe-bluegreen: #009E73;
    --color-safe-yellow: #F0E442;
    --color-safe-blue: #0072B2;
    --color-safe-vermillion: #D55E00;
    --color-safe-purple: #9f2b5b;

  --style-background-primary-dark: rgb(20, 20, 21);
  --style-background-primary-light: rgb(235, 235, 234);
  --style-background-secondary-dark: rgb(23, 23, 24);
  --style-background-secondary-light: rgb(225, 225, 225);
  --style-background-tertiary-dark: rgb(28, 28, 29);
  --style-background-tertiary-light: rgb(215, 215, 215);
  --style-background-quarternary-dark: rgb(32, 32, 33);
  --style-background-quarternary-light: rgb(205, 205, 205);
  --style-background-timeline-alternate-dark: rgb(25, 25, 26);
  --style-background-timeline-alternate-light: rgb(218, 218, 218);
  --style-background-accent-ultrathin-dark: rgba(120, 120, 120, 0.06);
  --style-background-accent-ultrathin-light: rgba(135, 135, 135, 0.06);
  --style-background-accent-thin-dark: rgba(120, 120, 120, 0.12);
  --style-background-accent-thin-light: rgba(135, 135, 135, 0.12);
  --style-background-accent-regular-dark: rgba(120, 120, 120, 0.26);
  --style-background-accent-regular-light: rgba(135, 135, 135, 0.26);
  --style-background-accent-selected-dark: rgba(132, 132, 132, 0.26);
  --style-background-accent-selected-light: rgba(123, 123, 123, 0.26);
  --style-background-accent-thick-dark: rgba(150, 150, 150, 0.45);
  --style-background-accent-thick-light: rgba(105, 105, 105, 0.45);
  --style-background-accent-ultrathick-dark: rgba(220, 220, 220, 0.45);
  --style-background-accent-ultrathick-light: rgba(35, 35, 35, 0.45);
  --style-background-accent-control-dark: rgba(50, 50, 50, 0.7);
  --style-background-accent-control-light: rgba(205, 205, 205, 0.7);
  --style-background-alternate-dark: rgba(120, 120, 120, 0.12);
  --style-background-alternate-light: rgba(135, 135, 135, 0.12);
  --style-text-ultra-dark: rgb(255,255,255);
  --style-text-ultra-light: rgb(255, 255, 255);
  --style-text-primary-dark: rgb(229, 229, 238);
  --style-text-primary-light: rgb(39, 39, 40);
  --style-text-secondary-dark: rgb(185, 185, 189);
  --style-text-secondary-light: rgb(69, 69, 70);
  --style-text-tertiary-dark: rgb(134, 134, 138);
  --style-text-tertiary-light: rgb(98, 98, 100);
  --style-text-quarternary-dark: rgb(108, 108, 112);
  --style-text-quarternary-light: rgb(108, 108, 112);
  --color-accent-dark: rgb(57, 111, 161);
  --color-accent-light: rgb(57, 111, 161);
  --color-accent-hover-dark: rgb(89, 154, 215);
  --color-accent-hover-light: rgb(69, 119, 167);
  --color-accent-selection-dark: rgb(59, 112, 161);
  --color-accent-selection-light: rgb(59, 112, 161);
  --color-accent-thin-dark: rgba(89, 154, 215, 0.3);
  --color-accent-thin-light: rgba(77, 120, 160, 0.3);
  --color-accent-text-dark: #fff;
  --color-accent-text-light: #ebebeb;
  --color-timeline-selection-dark: rgba(59, 112, 161, 0.322);
  --color-timeline-selection-light: rgba(196, 143, 94, 0.322);
  --alert-warning-primary-dark: rgb(179, 135, 33);
  --alert-warning-primary-light: rgb(246, 197, 91);
  --alert-warning-secondary-dark: rgb(63, 50, 20);
  --alert-warning-secondary-light: rgb(209, 160, 96);
  --alert-warning-primary-dark: rgb(179, 135, 33);
  --alert-warning-primary-light: rgb(246, 197, 91);
  --alert-error-primary-dark: rgb(179, 33, 33);
  --alert-error-secondary-dark: rgb(63, 20, 20);
  --alert-error-primary-light: rgb(179, 33, 33);
  --alert-error-secondary-light: rgb(63, 20, 20);
  --alert-info-border-color-dark: rgb(50, 122, 177);
  --alert-info-border-color-light: rgb(50, 122, 177);
  --alert-info-background-color-dark: rgb(26, 58, 84);
  --alert-info-background-color-light: rgb(107, 179, 234);
  --alert-success-border-color-dark: rgb(33, 179, 74);
  --alert-success-border-color-light: rgb(53, 123, 70);
  --alert-success-background-color-dark: rgb(47, 97, 61);
  --alert-success-background-color-light: rgb(33, 179, 74);
  --style-dialog-backdrop-light: rgba(129, 129, 129, 0.5);
  --style-dialog-backdrop-dark: rgba(19, 19, 19, 0.5);
  --style-role-destructive-background-dark: rgb(193, 47, 64);
  --style-role-destructive-accent-dark: #fff;
  --color-nationalRail-red: rgb(230,0,0);
  --color-nationalRail-white: #fff;
  --date-picker-month-cell: 38px;
  --platform-graph-label-background: rgb(207, 163, 20);
}

body.dark-mode {
  --style-background-primary: var(--style-background-primary-dark);
  --style-background-secondary: var(--style-background-secondary-dark);
  --style-background-tertiary: var(--style-background-tertiary-dark);
  --style-background-quarternary: var(--style-background-quarternary-dark);
  --style-background-timeline-alternate: var(--style-background-timeline-alternate-dark);
  --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-dark);
  --style-background-accent-thin: var(--style-background-accent-thin-dark);
  --style-background-accent-regular: var(--style-background-accent-regular-dark);
  --style-background-accent-selected: var(--style-background-accent-selected-dark);
  --style-background-accent-thick: var(--style-background-accent-thick-dark);
  --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-dark);
  --style-background-accent-control: var(--style-background-accent-control-dark);
  --style-background-alternate: var(--style-background-alternate-dark);
  --style-text-ultra: var(--style-text-ultra-dark);
  --style-text-primary: var(--style-text-primary-dark);
  --style-text-secondary: var(--style-text-secondary-dark);
  --style-text-tertiary: var(--style-text-tertiary-dark);
  --style-text-quarternary: var(--style-text-quarternary-dark);
  --color-accent: var(--color-accent-dark);
  --color-accent-hover: var(--color-accent-hover-dark);
  --color-accent-selection: var(--color-accent-selection-dark);
  --color-accent-thin: var(--color-accent-thin-dark);
  --color-accent-text: var(--color-accent-text-dark);
  --color-timeline-selection: var(--color-timeline-selection-dark);
  --alert-warning-primary: var(--alert-warning-primary-dark);
  --alert-warning-secondary: var(--alert-warning-secondary-dark);
  --alert-error-primary: var(--alert-error-primary-dark);
  --alert-error-secondary: var(--alert-error-secondary-dark);
  --alert-info-border-color: var(--alert-info-border-color-dark);
  --alert-info-background-color: var(--alert-info-background-color-dark);
  --alert-success-border-color: var(--alert-success-border-color-dark);
  --alert-success-background-color: var(--alert-success-background-color-dark);
  --style-dialog-backdrop: var(--style-dialog-backdrop-dark);
  --inactive-filter: brightness(0.5);
  --active-filter: brightness(1.2) saturate(1.5);
  --map-line-dim: rgb(51, 51, 51);
  --map-line: rgb(88, 164, 232);
  --map-line-outer: rgb(60, 117, 167);
  /* #region Dark Map Colours */
  --map-background: #0D0D0D;
  --location-outline-fill: #59477A;
  --primary-location-text-fill: #FFFFFF;
  --primary-location-text-stroke: #17181B;
  --secondary-location-text-fill: #AAAAAA;
  --secondary-location-text-stroke: #17181B;
  --tertiary-location-text-fill: #AAAAAA;
  --tertiary-location-text-stroke: #17181B;
  --track-stroke-upper: #6685A9;
  --track-stroke-lower: #273F5B;
  --line-code-text-fill: #c1cfdf;
  --line-code-text-stroke: #192128;
  --direction-arrow-fill: #192128;
  --direction-arrow-stroke: #1A3049;
  --direction-text-fill: #9EB4CD;
  --direction-text-stroke: #1A2128;
  --through-line-label-fill: #969696;
  --through-line-label-stroke: #252525;
  --through-line-track-stroke-upper: #969696;
  --through-line-track-stroke-lower: #181818;
  --siding-label-fill: #9D7859;
  --siding-label-stroke: #251F1B;
  --siding-track-stroke-upper: #9D7859;
  --siding-track-stroke-lower: #40362E;
  --platform-fill: #2E415A;
  --platform-stroke: #5C779C;
  --platform-label-background: #CFA314;
  --platform-label-text-fill: #252010;
  /* Dark Muted Theme */
  --muted-map-background: #0D0D0D;
  --muted-location-outline-fill: #2B213E;
  --muted-primary-location-text-fill: #1C1C1C;
  --muted-primary-location-text-stroke: #090909;
  --muted-secondary-location-text-fill: #1C1C1C;
  --muted-secondary-location-text-stroke: #090909;
  --muted-tertiary-location-text-fill: #1C1C1C;
  --muted-tertiary-location-text-stroke: #090909;
  --muted-track-stroke-upper: #1C2126;
  --muted-track-stroke-lower: #121517;
  --muted-line-code-text-fill: #343b41;
  --muted-line-code-text-stroke: #0f151a;
  --muted-direction-arrow-fill: #263744;
  --muted-direction-arrow-stroke: #0A1218;
  --muted-direction-text-fill: #263744;
  --muted-direction-text-stroke: #0A1218;
  --muted-through-line-label-fill: #263744;
  --muted-through-line-label-stroke: #0A1218;
  --muted-through-line-track-stroke-upper: #263744;
  --muted-through-line-track-stroke-lower: #0A1218;
  --muted-siding-label-fill: #22282D;
  --muted-siding-label-stroke: #0A1218;
  --muted-siding-track-stroke-upper: #263744;
  --muted-siding-track-stroke-lower: #0A1218;
  --muted-platform-fill: #1E2023;
  --muted-platform-stroke: #272B32;
  --muted-platform-label-background: #272B32;
  --muted-platform-label-text-fill: #6B6A66;
  /* #endregion */
}


body.light-mode {
  --style-background-primary: var(--style-background-primary-light);
  --style-background-secondary: var(--style-background-secondary-light);
  --style-background-tertiary: var(--style-background-tertiary-light);
  --style-background-quarternary: var(--style-background-quarternary-light);
  --style-background-timeline-alternate: var(--style-background-timeline-alternate-light);
  --style-background-accent-ultrathin: var(--style-background-accent-ultrathin-light);
  --style-background-accent-thin: var(--style-background-accent-thin-light);
  --style-background-accent-regular: var(--style-background-accent-regular-light);
  --style-background-accent-selected: var(--style-background-accent-selected-light);
  --style-background-accent-thick: var(--style-background-accent-thick-light);
  --style-background-accent-ultrathick: var(--style-background-accent-ultrathick-light);
  --style-background-accent-control: var(--style-background-accent-control-light);
  --style-background-alternate: var(--style-background-alternate-light);
  --style-text-ultra: var(--style-text-ultra-light);
  --style-text-primary: var(--style-text-primary-light);
  --style-text-secondary: var(--style-text-secondary-light);
  --style-text-tertiary: var(--style-text-tertiary-light);
  --style-text-quarternary: var(--style-text-quarternary-light);
  --color-accent: var(--color-accent-light);
  --color-accent-hover: var(--color-accent-hover-light);
  --color-accent-selection: var(--color-accent-selection-light);
  --color-accent-thin: var(--color-accent-thin-light);
  --color-accent-text: var(--color-accent-text-light);
  --color-timeline-selection: var(--color-timeline-selection-light);
  --alert-warning-primary: var(--alert-warning-primary-light);
  --alert-warning-secondary: var(--alert-warning-secondary-light);
  --alert-error-primary: var(--alert-error-primary-light);
  --alert-error-secondary: var(--alert-error-secondary-light);
  --alert-info-border-color: var(--alert-info-border-color-light);
  --alert-info-background-color: var(--alert-info-background-color-light);
  --alert-success-border-color: var(--alert-success-border-color-light);
  --alert-success-background-color: var(--alert-success-background-color-light);
  --style-dialog-backdrop: var(--style-dialog-backdrop-light);
  --inactive-filter: brightness(1.5);
  --active-filter: brightness(0.8) saturate(1.5);
  --map-line-dim: rgb(204, 204, 204);
  --map-line: rgb(117, 191, 255);
  --map-line-outer: rgb(99, 159, 212);
  /* #region Light Map Colours */
  /* --map-background: #eaece1; */
  --map-background: #dbdbdb;
  --location-outline-fill: #A179A9;
  --primary-location-text-fill: #41424d;
  --primary-location-text-stroke: #FFFFFF;
  --secondary-location-text-fill: #5A5C6B;
  --secondary-location-text-stroke: #FFFFFF;
  --tertiary-location-text-fill: #5A5C6B;
  --tertiary-location-text-stroke: #FFFFFF;
  --track-stroke-upper: #416B9C;
  --track-stroke-lower: #a7c7ed;
  --line-code-text-fill: #254D71;
  --line-code-text-stroke: #CEDEF0;
  --direction-arrow-fill: #CEDEF0;
  --direction-arrow-stroke: #254D71;
  --direction-text-fill: #CEDEF0;
  --direction-text-stroke: #254D71;
  --through-line-label-fill: #707070;
  --through-line-label-stroke: #cdcdcd;
  --through-line-track-stroke-upper: #cdcdcd;
  --through-line-track-stroke-lower: #808080;
  --siding-label-fill: #CAA586;
  --siding-label-stroke: #674D38;
  --siding-track-stroke-upper: #C79E7E;
  --siding-track-stroke-lower: #5a402b;
  --platform-fill: #7a98bf;
  --platform-stroke: #7a98bf;
  --platform-label-background: #FCD043;
  --platform-label-text-fill: #4D3D07;
  /* muted light */
  --muted-map-background: #F4F4F0;
  --muted-location-outline-fill: #948897;
  --muted-primary-location-text-fill: #ABABAB;
  --muted-primary-location-text-stroke: #F5F6F2;
  --muted-secondary-location-text-fill: #ABABAB;
  --muted-secondary-location-text-stroke: #F5F6F2;
  --muted-tertiary-location-text-fill: #ABABAB;
  --muted-tertiary-location-text-stroke: #F5F6F2;
  --muted-track-stroke-upper: #ABABAB;
  --muted-track-stroke-lower: #CECECE;
  --muted-line-code-text-fill: #909090;
  --muted-line-code-text-stroke: #C8C8C8;
  --muted-direction-arrow-fill: #909090;
  --muted-direction-arrow-stroke: #C8C8C8;
  --muted-direction-text-fill: #909090;
  --muted-direction-text-stroke: #C8C8C8;
  --muted-through-line-label-fill: #909090;
  --muted-through-line-label-stroke: #C8C8C8;
  --muted-through-line-track-stroke-upper: #909090;
  --muted-through-line-track-stroke-lower: #C8C8C8;
  --muted-siding-label-fill: #909090;
  --muted-siding-label-stroke: #C8C8C8;
  --muted-siding-track-stroke-upper: #909090;
  --muted-siding-track-stroke-lower: #C8C8C8;
  --muted-platform-fill: #ABABAB;
  --muted-platform-stroke: #CECECE;
  --muted-platform-label-background: #CECECE;
  --muted-platform-label-text-fill: #777671;
  /* #endregion */
}


:root, * {
  --color-loading-medium: rgba(172, 116, 11);
  --color-loading-medium-border: rgba(172, 116, 11, 0.5);
  --color-loading-medium-background: rgba(145, 97, 9, 0.5);
  --color-loading-high: rgba(193, 13, 22);
  --color-loading-high-border: rgba(193, 13, 22, 0.5);
  --color-loading-high-background: rgba(180, 18, 26, 0.5);
  --color-delay-high-border: rgba(193, 13, 22, 0.5);
  --color-delay-high-background: rgba(180, 18, 26, 0.5);
  --color-delay-medium-border: rgba(172, 116, 11, 0.5);
  --color-delay-medium-background: rgba(145, 97, 9, 0.5);
  --color-delay-low-border: rgba(248, 244, 4, 0.61);
  --color-delay-low-background: rgba(156, 148, 26, 0.5);
  --color-delay-tiny-border: rgba(55, 193, 13, 0.5);
  --color-delay-tiny-background: rgba(41, 139, 27, 0.5);
  --style-border-radius: 4px;
  --style-border-radius-tiny: calc(4px + var(--style-padding-tiny));
  --style-border-radius-small: calc(4px + var(--style-padding-small));
  --style-padding-tiny: 4px;
  --style-padding-table: 6px;
  --style-padding-small: 8px;
  --style-padding-medium: 12px;
  --style-padding-large: 18px;
  --style-padding-xlarge: 24px;
  --style-padding-xxlarge: 36px;
  --style-padding-xxxlarge: 48px;
  --style-label-height: 24px;
  --style-input-height: 32px;
  --icon-size-tiny: 16px;
  --icon-size-small: 20px;
  --icon-size-regular: 24px;
  --icon-size-large: 30px;
  --icon-size-xlarge: 36px;
  --icon-size-xxlarge: 54px;
  --icon-size-xxxlarge: 72px;
  --icon-overlap: -0.35;
  --font-size-title-large: 48px;
  --font-size-title: 32px;
  --font-size-title2: 24px;
  --font-size-title3: 18px;
  --font-size-subtitle: 15px;
  --font-size-heading: 12px;
  --font-size-body: 12px;
  --font-size-paragraph: 12px;
  --font-size-small: 11px;
  --font-size-tiny: 9px;
  --font-default: 'InterDisplay', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", system-ui;
  --font-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI", "Android Emoji","Twemoji Mozilla","Noto Color Emoji",;
  --anim-duration-ultrashort: 80ms;
  --anim-duration-short: 120ms;
  --anim-duration-medium: 240ms;
  --anim-duration-long: 480ms;
  --popover-shadow: rgba(0, 0, 0, 0.12) 0px 3px 32px, rgba(0, 0, 0, 0.1) 0px 4px 24px, rgba(0, 0, 0, 0.08) 0px 3px 10px, rgba(0, 0, 0, 0.06) 0px 2px 6px, rgba(0, 0, 0, 0.1) 0px 1px 2px;
  --date-picker-size: 28px;
  --anim-bounce: cubic-bezier(0.5, 0.05, 1, 0.5);
  --border-regular: 1px solid var(--style-background-accent-regular);
  --mud-palette-text-secondary: var(--style-text-secondary);
  --mud-palette-text-primary: var(--style-text-primary);
  --mud-palette-surface: var(--style-background-primary);
  --mud-palette-action-default-hover: rgba(255, 255, 255, 0.058823529411764705);
  --mud-palette-primary: var(--style-background-accent-regular);
  --mud-palette-action-disabled: rgba(255, 255, 255, 0.25882352941176473);
  --mud-palette-action-default: rgba(255, 255, 255, 0.5372549019607843);
  --schedule-list-row-height: 40px;
  --train-graph-y-axis-width: 160px;
  --font-largeTitle: 400 var(--font-size-title2) var(--font-default);
  --font-title: 400 var(--font-size-title3) var(--font-default);
  --font-subtitle: 400 var(--font-size-subtitle) var(--font-default);
  --font-headline: 400 var(--font-size-heading) var(--font-default);
  --map-select: rgb(174, 15, 31);
  --map-select-outer: rgb(216, 21, 21);
}

/* #endregion */

/* #region Collab Config*/

.collab-config-table {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
}


  .collab-config-table .row {
    display: contents;
  }

    .collab-config-table .row > * {
      padding-top: var(--style-padding-small);
      padding-bottom: var(--style-padding-small);
      padding-right: var(--style-padding-large);
      width: 100%;
      display: flex;
      align-items: center;
    }

      .collab-config-table .row > *:first-child {
        padding-left: var(--style-padding-large);
      }

      .collab-config-table .row > *:last-child {
        padding-right: var(--style-padding-large);
      }

    .collab-config-table .row:nth-of-type(even) > * {
      background-color: var(--style-background-accent-ultrathin);
    }

    .collab-config-table .row.header > * {
      background-color: var(--style-background-tertiary);
      border-bottom: var(--border-regular);
      padding-top: var(--style-padding-medium);
      padding-bottom: var(--style-padding-medium);
      color: var(--style-text-primary);
    }

    .collab-config-table .row .status-icon,
    .collab-config-table .row .share {
      justify-content: center;
    }



.collab-status-table {
  display: grid;
  gap: 0;
}

  .collab-status-table .col-stat-grid-row {
    display: contents;
  }

    .collab-status-table .col-stat-grid-row > * {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-top: var(--style-padding-small);
      padding-bottom: var(--style-padding-small);
    }

    .collab-status-table .col-stat-grid-row:nth-of-type(even) .background {
      background-color: var(--style-background-accent-ultrathin);
    }

  .collab-status-table .cal-title {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    gap: 0;
    line-height: 1.2;
  }

  .collab-status-table .col-stat-grid-row.section .section-title {
    height: var(--schedule-list-row-height);
    background-color: var(--style-background-accent-thin);
    padding: 0 var(--style-padding-medium);
  }

  .collab-status-table .head-col {
    padding-right: var(--style-padding-small);
  }

    .collab-status-table .head-col.brand {
      padding-left: var(--style-padding-medium);
      padding-right: var(--style-padding-medium);
    }

.collab-config-table .head-col.environment {
  padding-right: var(--style-padding-large);
}

.collab-status-table .col-stat-grid-row.header > * {
  height: 48px;
}

.collab-status-table .col-stat-grid-row.header *,
.collab-status-table .cal-title * {
  font-size: 13px;
  color: var(--style-text-primary);
}

.collab-status-table .cal-title span.ebrw {
  color: var(--style-text-tertiary);
  font-size: var(--font-size-paragraph);
}

.collab-status-cell {
  padding: 0 var(--style-padding-tiny);
}

  .collab-status-cell .bar {
    background-color: rgba(255, 166, 0, 0.381);
    border-radius: 6px;
    border: var(--border-regular);
    border-color: orange;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 var(--style-padding-tiny);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .collab-status-cell.short .background {
    justify-content: center;
  }

  .collab-status-cell .bar span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.collab-status-ltp-timeline {
  position: relative;
}

  .collab-status-ltp-timeline .collab-status-ltp {
    position: absolute;
    top: var(--style-padding-small);
    bottom: var(--style-padding-small);
    padding: 0 var(--style-padding-tiny);
  }

    .collab-status-ltp-timeline .collab-status-ltp .bar {
      width: 100%;
      height: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: cyan;
      background-color: rgba(255, 166, 0, 0.381);
      border-radius: 6px;
      border: var(--border-regular);
      border-color: orange;
      display: flex;
      align-items: center;
      padding: 0 var(--style-padding-tiny);
    }


    /* #endregion */

/* #region Depot Workings */

.dpot-diag-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.dpot-diag-section.is-stabled {
  color: var(--style-text-tertiary);
}
.dpot-diag-section.is-stabled.stabled {
  justify-content: center;
}
.dpot-diag-section.is-stabled.stabled-inbound {
  justify-content: end;
  padding-right: var(--style-padding-large);
}
.dpot-diag-section.is-stabled.stabled-outbound {
  justify-content: start;
  padding-left: var(--style-padding-large);
}

/* Mask End Workings */
.dpot-diag-section.inbound .dpot-diag-sect.dep,
.dpot-diag-section.outbound .dpot-diag-sect.arr {
  opacity: 0.4;
  transition-duration: var(--anim-duration-ultrashort);
  border-color: var(--style-background-accent-thick);
}
.dpot-diag-section.inbound .dpot-diag-sect.dep:hover,
.dpot-diag-section.outbound .dpot-diag-sect.arr:hover {
  opacity: 0.7;
}
.dpot-diag-section.inbound .dpot-diag-sect.dep *:not([popover] *, [dialog] *),
.dpot-diag-section.outbound .dpot-diag-sect.arr *:not([popover] *, [dialog] *) {
  color: var(--style-text-tertiary) !important;
  font-weight: 500;
}

.dpot-diag-sect {
  height: 24px;
  display: flex;
  gap: var(--style-padding-small);
  align-items: center;
  border: 1px solid var(--style-background-accent-thick);
  max-width: 100%;
  overflow: hidden;
  opacity: 0.7;
  transition-duration: var(--anim-duration-ultrashort);
  color: var(--style-text-primary);
}
.dpot-diag-sect:hover {
  opacity: 1;
}

.dpot-diag-sect.arr {
  border-top-right-radius: var(--style-border-radius-tiny);
  border-bottom-right-radius: var(--style-border-radius-tiny);
  padding-right: var(--style-padding-small);
  padding-left: var(--style-padding-xlarge);
  mask-image: linear-gradient(90deg, transparent 0px, black var(--style-padding-large));
  border-left: none;
}
.dpot-diag-sect.dep {
  border-top-left-radius: var(--style-border-radius-tiny);
  border-bottom-left-radius: var(--style-border-radius-tiny);
  padding-left: var(--style-padding-small);
  padding-right: var(--style-padding-xlarge);
  mask-image: linear-gradient(90deg, black calc(100% - var(--style-padding-large)), transparent 100%);
  border-right: none;
}

.dpot-diag-sect span.loc {
  min-width: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.dpot-diag-stabl {
  position: relative;
}
.dpot-diag-section.stabled .mid-diag-mark {
  position: absolute;
  top: calc(50% - 0.5px);
  left: 10px;
  right: 10px;
  height: 1px;
  display: block;
  background-color: var(--style-background-accent-regular);
  z-index: -1;
}
.dpot-diag-section.stabled::before,
.dpot-diag-section.stabled::after {
  display: block;
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background-color: var(--style-background-accent-regular);
}
.dpot-diag-section.stabled::before {
  left: 9px;
}
.dpot-diag-section.stabled::after {
  right: 9px;
}
.dpot-diag-section.stabled span {
  color: var(--style-text-primary);
}

.dpot-vehtype-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--style-padding-small);
  height: 100%;
  overflow:hidden;
}

.dpot-vehtype-row .veh-img {
  width: 120px;
}
.dpot-vehtype-row .veh-img > * {
  transform: rotateY(180deg);
}

.dpot-diag-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--style-padding-small);
  padding: 0 var(--style-padding-small);
  max-width: 100%;
}
.dpot-diag-label.inbound {
  padding-right: var(--style-padding-medium);
}
.dpot-diag-label.outbound {
  flex-direction: row-reverse;
  padding-left: var(--style-padding-medium);
}
.dpot-diag-label.outbound .dpot-diag-val {
  text-align: right;
}

.dpot-diag-val {
  flex: 1 0 auto;
}

.dpot-diag-val.diagno {
  width: 50px;
}

.dpot-diag-val.dist {
  width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dpot-diag-val.loc {
  min-width: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}


/* #endregion */

/* #region New Settings Components */

.stg-grp-content {
  background-color: var(--style-background-quarternary);
  border-radius: var(--style-border-radius-tiny);
}

.stg-grp-content:has(> .set-grp-row),
.stg-grp-content *:has(> .set-grp-row) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.stg-grp-content .set-grp-row {
  display: flex;
  flex-direction: row;
  padding: var(--style-padding-medium);
  border-bottom: var(--border-regular);
}
.stg-grp-content .set-grp-row:last-of-type {
  border-bottom: none;
}

.stg-grp-content .set-grp-row:has(> .lead, > .trail) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.stg-grp-content .set-grp-row > .lead,
.stg-grp-content .set-grp-row > .trail {
  display: flex;
  gap: var(--style-padding-tiny) var(--style-padding-small);
  flex-direction: row;
}

.stg-grp-content .set-grp-edit-item button.edit-item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--anim-duration-short);
}
.stg-grp-content .set-grp-edit-item button.edit-item > svg {
  color: orange !important;
}
.stg-grp-content .set-grp-edit-item:hover button.edit-item,
.stg-grp-content .set-grp-edit-item:focus-within button.edit-item {
  opacity: 1;
}


/* #endregion */



/* #region New Filter Design */

.fltr-tlbr-capsule {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1px;
}
.fltr-loc-ico .fltr-desc-ico {
    transform: rotateZ(-90deg);
  }

@scope (.fltr-tlbr-capsule) to ([popover], [dialog]) {
  button {
    height: auto;
    border-radius: 0;
  }

  .fltr-prt {
    background-color: var(--style-background-quarternary);
    display: flex;
    align-items: center;
    padding: 0 var(--style-padding-small);
  }
  .fltr-prt * {
    font-weight: 500;
  }
  .fltr-prt:has(> button) {
    padding: 0;
  }
  .fltr-prt:first-child {
    border-top-left-radius: var(--style-border-radius);
    border-bottom-left-radius: var(--style-border-radius);
  }
  .fltr-prt:last-child,
  .fltr-prt:last-child > button {
    border-top-right-radius: var(--style-border-radius);
    border-bottom-right-radius: var(--style-border-radius);
  }
  .fltr-prt.fltr-desc {
    gap: var(--style-padding-tiny);
  }
  .fltr-prt.fltr-desc * {
    color: var(--style-text-primary);
  }
  .fltr-prt.fltr-desc:has(> .fltr-desc-ico) {
    padding-left: var(--style-padding-tiny);
  }
  .fltr-prt.fltr-oper,
  .fltr-prt.fltr-oper button  {
    text-transform: lowercase;
  }
  .fltr-prt.fltr-oper * {
    color: var(--style-text-tertiary);
  }
  .fltr-desc-ico {
    width: 16px;
    height: 16px;
  }
}

/* #endregion */

/* #region Split Navigation */

.main-nav-split {
  display: flex;
  height: 100%;
  width: 100%;
  min-width: 100%;
}

@scope (.main-nav-split) to (> .area-body, [popover], [dialog]) {

  .nav-split-3 {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 100%;
    width: 100%;
  }
  .nav-split-3 > .nav-split-area {
    border-right: var(--border-regular);
    min-height: 100%;
    display: flex;
    min-width: none;
  }
  .nav-split-3 > .nav-split-area.detail {
    flex-grow: 1;
  }
  .nav-split-3 > .nav-split-area.inspector {
    display: none;
  }
  .nav-split-3 > .nav-split-area.detail .area-body  {
    display: flex;
    flex-grow: 1;
  }
}

/* #endregion */

/* #region Add New Item Frame */

.add-new-frame {
  display: flex;
  flex-grow: 1;
}
.light-mode .add-new-frame-body {
    box-shadow: 
    rgba(0, 0, 0, 0.05) 0px 3px 8px,
    rgba(0, 0, 0, 0.05) 0px 2px 4px,
    rgba(0, 0, 0, 0.05) 0px 2px 12px;
    background-color: var(--style-background-secondary);
  }

@scope (.add-new-frame) to ([popover], [dialog]) {
  .add-new-frame-body {
    background-color: var(--style-background-accent-ultrathin);
    border:  1px solid var(--style-background-accent-regular);
    border-radius: var(--style-border-radius-tiny);
    padding: var(--style-padding-medium);
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }
  

  .add-new-frame-body input {
    outline: none;
    border: none;
  }
  .add-new-frame-body input.text {
    border-radius: 0;
    width: 100%;
    font-weight: 500;
    height: auto;
  }
  .add-new-frame-body input.text.title {
    font-size: var(--font-size-subtitle);
  }
  .add-new-frame-body input.text.desc {
    font-size: 13px;
  }
  .add-new-frame-body .properties {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--style-padding-medium);
  }
  .add-new-frame-body .properties .lead,
  .add-new-frame-body .properties .trail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: var(--style-padding-tiny);
  }
  .add-new-frame-body .properties .lead {
    flex-grow: 1;
  }
  .add-new-frame-body .properties .trail {
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
}

/* #endregion */

/*#region validation*/
.form-control {
    padding: 0.5rem;
    border: 1px solid #ccc;
}

.border-danger {
    border-color: red !important;
}

/* #endregion */

.route-section {
    display:flex;
    gap: 10px;
}

table.section-table td {
    padding:10px;
}


.section-timeline-wrap {
    overflow-x: auto;
    max-width: 1000px;
}

.section-leg {
    background-color: var(--color-accent);
    border-radius: 4px;
    padding: 2px;
    height:100%;
}