/* #region Font Imports */

/* #region Inter Font */

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Thin.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-ThinItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Light.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-LightItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-MediumItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-Black.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/Inter/InterDisplay-BlackItalic.woff2") format("woff2");
}

@font-feature-values InterDisplay {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1; /* Alternate one */
        alt-3: 9; /* Flat-top three */
        open-4: 2; /* Open four */
        open-6: 3; /* Open six */
        open-9: 4; /* Open nine */
        lc-l-with-tail: 5; /* Lower-case L with tail */
        simplified-u: 6; /* Simplified u */
        alt-double-s: 7; /* Alternate German double s */
        uc-i-with-serif: 8; /* Upper-case i with serif */
        uc-g-with-spur: 10; /* Capital G with spur */
        single-story-a: 11; /* Single-story a */
        compact-lc-f: 12; /* Compact f */
        compact-lc-t: 13; /* Compact t */
    }

    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1; /* Open digits */
        disambiguation: 2; /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3; /* Round quotes & commas */
        square-punctuation: 7; /* Square punctuation */
        square-quotes: 8; /* Square quotes */
        circled-characters: 5; /* Circled characters */
        squared-characters: 6; /* Squared characters */
    }
}

/* #endregion */

/* #region IBM Plex Mono Fonts */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    src: local("IBM Plex Mono Bold"), local("IBMPlexMono-Bold"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Bold.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Bold.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 700;
    src: local("IBM Plex Mono Bold Italic"), local("IBMPlexMono-BoldItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-BoldItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-BoldItalic.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 200;
    src: local("IBM Plex Mono ExtraLight"), local("IBMPlexMono-ExtraLight"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-ExtraLight.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-ExtraLight.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 200;
    src: local("IBM Plex Mono ExtraLight Italic"), local("IBMPlexMono-ExtraLightItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-ExtraLightItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-ExtraLightItalic.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    src: local("IBM Plex Mono Italic"), local("IBMPlexMono-Italic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Italic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Italic.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 300;
    src: local("IBM Plex Mono Light"), local("IBMPlexMono-Light"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Light.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Light.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 300;
    src: local("IBM Plex Mono Light Italic"), local("IBMPlexMono-LightItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-LightItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-LightItalic.woff") format("woff");
}


@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Medium.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Medium.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 500;
    src: local("IBM Plex Mono Medium Italic"), local("IBMPlexMono-MediumItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-MediumItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-MediumItalic.woff") format("woff");
}


@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    src: local("IBM Plex Mono"), local("IBMPlexMono"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Regular.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Regular.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    src: local("IBM Plex Mono SemiBold"), local("IBMPlexMono-SemiBold"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-SemiBold.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-SemiBold.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 600;
    src: local("IBM Plex Mono SemiBold Italic"), local("IBMPlexMono-SemiBoldItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-SemiBoldItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-SemiBoldItalic.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 450;
    src: local("IBM Plex Mono Text"), local("IBMPlexMono-Text"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Text.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Text.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 450;
    src: local("IBM Plex Mono Text Italic"), local("IBMPlexMono-TextItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-TextItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-TextItalic.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 100;
    src: local("IBM Plex Mono Thin"), local("IBMPlexMono-Thin"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-Thin.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-Thin.woff") format("woff");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 100;
    src: local("IBM Plex Mono Thin Italic"), local("IBMPlexMono-ThinItalic"), url("/fonts/IBM-Plex-Mono/complete/woff2/IBMPlexMono-ThinItalic.woff2") format("woff2"), url("/fonts/IBM-Plex-Mono/complete/woff/IBMPlexMono-ThinItalic.woff") format("woff");
}

/* #endregion */

/* #endregion */

body {
    --color-back-1: rgb(14, 14, 16);
    --color-back-2: rgb(18, 18, 20);
    --color-back-3: rgb(36, 36, 38);
    --color-back-4: rgb(56, 56, 58);
    --color-back-5: rgb(72, 72, 74);
    --color-back-6: rgb(96, 96, 98);
    
    --color-text-1: rgb(253,253,255);
    --color-text-2: rgb(232,232, 234);
    --color-text-3: rgb(211, 211, 213);
    --color-text-4: rgb(174, 173, 175);
    --color-text-5: rgb(146, 146, 148);
    --color-text-6: rgb(123, 123, 125);
    --color-text-7: rgb(75, 75, 75);

    --color-table-hover: rgba(240, 242, 244, 0.05);
    --color-table-alt: rgba(240, 242, 244, 0.02);

    --color-red: #d32b18;
    --color-orange: #d46b09;
    --color-yellow: #f0c000;
    --color-green: #2fac4e;
    --color-cyan: #0fa7c9;
    --color-blue: #0778db;
    --color-cyan: #23b5c9;
    --color-purple: #a43ab1;
    --color-pink: #dc3c64;
    --color-brown: #a3704b;

    --size-font-h1: 26px;
    --size-font-h2: 20px;
    --size-font-h3: 16px;
    --size-font-h4: 14px;
    --size-font-p: 12px;
    --size-font-small: 11px;
    --font-weight-body: 500;
    --font-weight-header: 600;
}

body.light-mode {
    --color-text-1: rgb(0,0,2);
    --color-text-2: rgb(24, 24, 26);
    --color-text-3: rgb(48, 48, 50);
    --color-text-4: rgb(72, 72, 72);
    --color-text-5: rgb(96, 96, 96);
    --color-text-6: rgb(98, 98, 98);
    --color-text-7: rgb(144, 144, 144);
    --color-table-hover: rgba(0, 0, 0, 0.07);
    --color-table-alt: rgba(0, 0, 0, 0.04);
    
    --color-back-1: rgb(253,253,255);
    --color-back-2: rgb(242,242, 244);
    --color-back-3: rgb(231, 231, 233);
    --color-back-4: rgb(224, 223, 225);
    --color-back-5: rgb(216, 216, 218);
    --color-back-6: rgb(204, 204, 206);
    --color-back-7: rgb(178, 178, 180);

    --font-weight-body: 600;
}

body {
    font-family: 'InterDisplay', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: var(--font-weight-body);
    font-size: 12px;
    color: var(--color-text-4);
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
}

body.light-mode {
    letter-spacing: -0.01em;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: var(--font-weight-header) !important;
}

h1, h2, h3, h4, h5, h6, p,
.h1, .h2, .h3, .h4, .h5, .h6, .p {
    margin: 0;
    padding: 0;
    color: var(--color-text-4);
}

h1, .h1 {
    font-size: var(--size-font-h1);
}

h2, .h2 {
    font-size: var(--size-font-h2);
}

h3, .h3 {
    font-size: var(--size-font-h3);
}
h4, .h4 {
    font-size: var(--size-font-h4);
}

p, h5, h6 {
    font-size: var(--size-font-p);
}

strong, .strong {
    color: var(--color-text-2);
    font-weight: inherit;
}
.weak {
    color: var(--color-text-5);
}

.caption {
    font-size: 16px;
}

span.link {
  cursor: pointer;
}
span.link:hover {
  text-decoration: underline;
}
strong {
  color: var(--style-text-primary);
}

span.monospace {
  font-family: var(--font-mono);
  font-weight: 500;
}

a,
a *  {
  cursor: pointer !important; 
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}



/* #region Custom Formats */

.format-monospace,
.fomono {
  font-family: var(--font-mono);
  font-weight: 500;
}
.format-time-only,
.fotimo {
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01rem;
}
.format-number-only,
.fonumo {
  font-feature-settings: 'tnum' 1;
}

.format-headcode,
.fohcod,
.hcode,
.trainid {
  font-feature-settings: 'ss02' 1;
}

.format-platform,
.format-plat,
.plat-icon {
  background-color: var(--platform-label-background) !important;
  color: var(--platform-label-text-fill) !important;
  border-radius: var(--style-border-radius);
  font-weight: 600;
}
.format-platform *,
.format-plat *,
.plat-icon * {
    color: var(--platform-label-text-fill) !important;
    font-weight: 700 !important;
}

.format-linecode,
.format-line,
.line-icon {
  background-color: var(--linecode-label-background) !important;
  color: var(--linecode-label-text-fill) !important;
  border-radius: var(--style-border-radius);
  font-weight: 500 !important;
}
.format-linecode *,
.format-line *,
.line-icon * {
    color: var(--linecode-label-text-fill) !important;
    font-weight: 500 !important;
}

.fmat1,
.fmat1-all *,
.format-primary,
.color-primary {
  color: var(--style-text-primary);
}

.fmat2,
.fmat2-all *,
.format-secondary,
.color-secondary {
  color: var(--style-text-secondary);
}

.fmat3,
.fmat3-all *,
.format-tertiary,
.color-tertiary {
  color: var(--style-text-tertiary);
}

.fmat4,
.fmat4-all *,
.format-quarternary,
.color-quarternary {
  color: var(--style-text-quarternary);
}

/* #endregion */

/* #region Custom Colors  */

.color-1 {
    color: var(--color-text-1);
}
.color-2 {
    color: var(--color-text-2);
}
.color-3 {
    color: var(--color-text-3);
}
.color-4 {
    color: var(--color-text-4);
}
.color-5 {
    color: var(--color-text-5);
}
.color-6 {
    color: var(--color-text-6);
}



/* #endregion */

/* #region Cleanup */


.format-warning {
  color: var(--alert-warning-primary);
}
.format-error {
  color: var(--alert-error-primary);
}

span.text-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}
p a.external::after {
  padding-left: var(--style-padding-tiny);
  content: '\2192';
  text-decoration: none !important;
}


.text-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.h-label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: start;
  gap: var(--style-padding-small);
}

span.badge {
  color: var(--style-text-secondary) !important;
  /* background-color: var(--color-accent); */
  padding: 2px var(--style-padding-tiny);
  border-radius: var(--style-border-radius);
  border: 1px solid var(--style-text-secondary);
}

.badge-live-red {
  background-color: var(--color-red);
  color: #fff;
  padding: 2px var(--style-padding-tiny);
  border-radius: var(--style-border-radius);
}

/* #endregion */