/**                                                                       @about
@file: static.10xcss.css
@desc: css for -> http://static.10xCSS.com
***                                                                           */

/**                                                                        @root
@doc: base global root css variables
@ref: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
***                                                                           */
/* @NOTE -> css vars injected dynamically via config  */

/**                                                                      @global
@doc: Using border-box model by default for all elements to provide easier sizing
      so padding and borders are included in the element's total width and height
@ref: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
@IMP: Applied to all elements
***                                                                           */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**                                                                        @base
@doc: Basic global properties for a consistent baseline across browsers.
@ref: https://developer.mozilla.org/en-US/docs/Web/CSS/cascade
***                                                                           */
html,
body {
  /**                                                                      @base
  @doc: personal pref, most use 16px
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
  @IMP: this is the base "rem" size
  ***                                                                         */
  font-size: var(--font-size, 16px);
  /**                                                                      @base
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
  ***                                                                         */
  font-weight: var(--font-weight, normal);
  /**                                                                      @base
  @doc: monospace 4 life
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
  @use: 
      + serif: var(--font-serif, serif)
      + sans : var(--font-sans, sans-serif)
  ***                                                                         */
  font-family: var(--font-family, monospace);
  /**                                                                      @base
  @doc: whether text rendering is optimized for viewing at different sizes
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing
  @use: "none" to disable
  ***                                                                         */
  font-optical-sizing: auto;
  /**                                                                      @base
  @doc: provides a way to modify the size of lowercase letters relative to the
        size of uppercase letters, which defines the overall font-size. This
        property is useful for situations where font fallback can occur.
  @url: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
  @use:
      -ex-height  : normalize lowercase letters across fonts.
      -cap-height : normalize uppercase letters across fonts
      -ch-width   : normalize horizontal narrow pitch of fonts.
      -ic-width   : normalize horizontal wide pitch of fonts, targets CJK (Chinese, Japanese, Korean) characters.
      -ic-width   : normalize vertical wide pitch of fonts, targets CJK characters.
  ***                                                                         */
  font-size-adjust: from-font;
  /**                                                                      @base
  @doc: Prevent adjustments of font size after orientation changes in iOS.
        other browsers will ignore this property.
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
  ***                                                                         */
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /**                                                                      @base
  @doc: controls the application of anti-aliasing when fonts are rendered.
        in other words, makes fonts more smooth/prettier.
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
  @WRN: 
      - non-standard
      - various browser have diffrent values
  ***                                                                         */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: auto;
  /**                                                                      @base
  @doc: typographic features in OpenType fonts
  @ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
  ***                                                                         */
  font-feature-settings: normal;
  /* specify feat type */
  font-variant: normal;
  font-variant-ligatures: normal;
  font-variant-position: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  /**                                                                      @base
  @doc: Text resets/uniform
  ***                                                                         */
  letter-spacing: normal;
  font-stretch: normal;
  line-height: normal;
  /**                                                                      @edge
  @doc: Force a non-overlapping, non-auto-hiding scrollbar in IE11 and Edge.
  ***                                                                         */
  -ms-overflow-style: scrollbar;
  /**                                                                    @safari
  @doc: Completely removes the default tap highlight color in iOS.
  ***                                                                         */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/**                                                                 @layout/size
@doc: To retain content within the actual visible screen, we use 100dvh with
      relative position so all children fall within the devices viewport.
      This fixes the iOS bottom navbar so the bottom navbar is not covered.
@IMP: You many not want this (i've also included an older layout/hack at bottom)
***                                                                           */
html, body {
  position: relative;
  min-height: 100dvh;
}


/**                                                                      @theme
@doc: Base theme colors, and remove the tiny space around the edge of the page
***                                                                         */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  /* so table says the same width  */
  overflow-y: scroll;
  color: var(--color-forground, #3B3E3F);
  background: var(--color-background, #F6F7F9);
  /* for @ref as it doesn't work on body  */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter  */
  /* scrollbar-gutter: stable both-edges;*/
}


/**                                                                  @responsive
@doc: Specific styles for when the application is in fullscreen/standalone mode
@REV: need to investigate if actually needed anymore
***                                                                           */
@media (display-mode: fullscreen), (display-mode: standalone) {
  body {
    padding: 0;
  }
}

/**                                                                        @abbr
@doc: Standardize display for abbreviations across browsers.
    + Removes bottom border in Firefox 39 and earlier.
    + Adds correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    + Adds cursor to indicate changed behavior.
@ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
***                                                                           */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: 0;
  cursor: help;
}

/**                                                                     @address
@doc: Need to review this reset, I belive it was fo IE
***                                                                           */
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

/**                                                                     @utility
@doc: Avoid 300ms click delay on touch devices that support the `touch-action`
      CSS property. In particular, unlike most other browsers, IE11+Edge on
      Windows 10 on touch devices and IE Mobile 10-11 DON'T remove the click
      delay when `<meta name="viewport" content="width=device-width">` is
      present. However, they DO support emoving the click delay via
      `touch-action: manipulation`.
@ref:
    +  https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
    +  http://caniuse.com/#feat=css-touch-action
    +  https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
***                                                                           */
a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

/**                                                                     @summary
@doc: The disclosure triangle of <summary> blocks does not show in Firefox
      when it is set to display:block;
@ref:
    + https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d
    + https://bugzilla.mozilla.org/show_bug.cgi?id=1283989
    + https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
***                                                                           */
summary {
  display: list-item;
}

/**                                                                     @display
@doc: A personal pref, but it's typically what you what in the majority of cases
@ref:
    + https://css-tricks.com/when-do-you-use-inline-block/
***                                                                         */
output, button {
  display: inline-block;
}

/**                                                                     @details
@doc: Display as blocks in Edge, IE 10+, Firefox.
@ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
***                                                                           */
details {
  display: block;
}

/**                                                                          @hr
@doc: visual consistency (mostly for firefox)
    + Makes horizontal rules solid and thin.
    + Removes Firefox's `color: gray` styling.
    + Remove default `1px` height, and common `overflow: hidden`
***                                                                         */
hr {
  border-color: var(--color-border);
  border-width: 1px 0 0;
  margin: 0 0 0.5rem 0;
  padding: 0;
  color: inherit;
  height: 1px;
  overflow: visible;
  /*  border-style: solid;*/
  /* like'n the dotted vibs for this use-case */
  border-style: dotted;
}


/**                                                                        @misc
@doc: Remove the margin in Firefox and Safari.
***                                                                           */
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

/**                                                                    @textarea
@doc: Makes it so textarea by default only resizes vertically as to not break
      their (horizontal) containers.
***                                                                           */
textarea {
  overflow: auto;
  resize: vertical;
}

/**                                                                    @fieldset
@doc: Browsers set a default `min-width: min-content;` on fieldsets, unlike
      e.g. `<div>`s, which have `min-width: 0;` by default. This reset ensures
      it behave more like a standard block element and not affect page layout.
@ref:
    + https://github.com/twbs/bootstrap/issues/12359
    + https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
***                                                                           */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/**                                                                      @legend
@doc: Related to the above fieldset reset
***                                                                           */
legend {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 0;
  color: inherit;
  font-size: 1rem;
  line-height: inherit;
  white-space: normal;
}


/**                                                                        @form
@doc: Personal pref, but margin/padding tends to do more harm than good with
      these form elements
***                                                                           */
[type='checkbox'],
[type='radio'] {
  padding: 0;
  margin: 0;
}

/**                                                                @button/input
@doc: Show the overflow in Edge.
***                                                                           */
button,
input {
  overflow: visible;
}

/**                                                               @button/select
@doc: Remove the inheritance of text transform in Firefox. 
***                                                                           */
button,
select {
  text-transform: none;
}

/**                                                                        @form
@doc: Removes default inner focus outlines in Firefox for button elements.
***                                                                           */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**                                                                       @media
@doc: Make elements responsive by default and fixes/removes strange space-below
      elements via `vertical-align`
***                                                                           */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

/**                                                                       @audio
@doc: overrides the default to 300px, like who decided 300px, like why, idk
***                                                                           */
audio {
  width: 100%;
}

/**                                                                       @audio
@doc: Audio without `[controls]` remains hidden by default anyways
***                                                                           */
audio:not([controls]) {
  display: none;
}

/**                                                                     @picture
@doc: Display via inline by default, but that's not the expected/wanted
      behavior typically and can interfere with layout/aspect-ratio. This reset,
      removes the unnecessary wrapping `picture`, while maintaining contents 
***                                                                           */
picture {
  display: contents;
}

/**                                                                      @source
@doc: Source elements have nothing to display, so hide them entirely
***                                                                           */
source {
  display: none;
}

/**                                                                       @media
@doc: Maintain intrinsic aspect ratios when `max-width` is applied. `iframe`,
     `embed`, and `object` are also embedded, but have no intrinsic ratio, so
     their `height` needs to be set explicitly.
***                                                                           */
img,
svg,
video,
canvas {
  height: auto;
}

/**                                                                         @svg
@doc: Personal pref, I very very rarely want the overflow to be hidden
***                                                                          */
svg {
  overflow: visible;
}

/**                                                                      @webkit
@doc: Set as click-able types in iOS and Safari, and prevent a WebKit bug that
      destroys native `audio` and `video` controls in Android 4
***                                                                           */
button,
html [type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**                                                                      @webkit
@doc: Remove the default appearance of temporal inputs to avoid a Mobile
      Safari bug where setting a custom line-height prevents text from being
      vertically centered within the input.
@ref:
    + https://bugs.webkit.org/show_bug.cgi?id=139848
    + https://github.com/twbs/bootstrap/issues/11266
***                                                                           */
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}

/**                                                                      @webkit
@doc: Correct the cursor style of increment and decrement buttons in Chrome
***                                                                           */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**                                                                      @webkit
@doc: Correct the odd appearance in Chrome/Safari, plus outline style in Safari
***                                                                           */
[type='search'] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

/**                                                                      @webkit
@doc: Remove the inner padding in Chrome and Safari on macOS.
***                                                                           */
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**                                                                      @webkit
@doc: Remove the default appearance of text inputs in all browsers.
***                                                                           */
input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}

/**                                                                      @webkit
@doc: Correct the inability to style clickable types in iOS and Safari.
***                                                                           */
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

/**                                                                        @misc
@doc: Native IE icon elms (passoword eye)
***                                                                           */
input::ms-clear,
input[type='password']::ms-reveal {
  display: none;
}

/**                                                                      @hidden
@doc: Change the default `display: none;` to `display: none !important;` to
      avoid accidental `display: block !important;` overrides.
***                                                                           */
[hidden] {
  display: none !important;
}

/**                                                                    @progress
@doc: Add the correct vertical alignment in Chrome, Firefox, and Opera.
***                                                                           */
progress {
  vertical-align: baseline;
}

/**                                                                    @viewport
@doc: IE10+ doesn't honor `<meta name="viewport">` in some cases.
@TIP: Props not needed anymore.
***                                                                           */
@-ms-viewport {
  width: device-width;
}

/**                                                                    @tabindex
@doc: Suppress the focus outline on elements that cannot be accessed via keyboard
***                                                                           */
[tabindex='-1']:focus {
  outline: none !important;
}

/**                                                                   @safari
@doc: Remove gaps in links underline in iOS 8+ and Safari 8+.
***                                                                           */
a {
  cursor: pointer;
  -webkit-text-decoration-skip: objects;
}

/**                                                                        @ally
@doc: Reduced Motion/Ally related, which immediately jump any animation to the
      end point and remove transitions & fixed background attachment.
@ref: https://github.com/mozdevs/cssremedy/issues/11 
***                                                                           */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
  }
}

/**                                                                @system-emoji
@doc: standardizes emoji display across platforms via local
@TIP: if not using emoji, you should remove
***                                                                           */
@font-face {
  font-family: 'system-emoji';
  src: local('Segoe UI Emoji');    /* Edge fix & Windows 8.1+ */
  src: local('Apple Color Emoji'), /* iOS & macOS */
       local('Segoe UI Symbol'),   /* Windows 8 & earlier */
       local('Noto Color Emoji'),  /* Android & Linux */
       local('Twemoji Mozilla'),   /* Firefox on various platforms */
       local('Twemoji'),           /* General web & non-Firefox browsers */
       local('Android Emoji'),     /* Older Android devices */
       local('EmojiOne Color'),    /* Web platforms using EmojiOne */
       local('EmojiSymbols'),      /* Fallback for older systems */
       local('Symbola');           /* Fallback for older systems */
  unicode-range: U+1F300-1F5FF,    /* Misc Symbols & Pictographs */
                 U+1F600-1F64F,    /* Emoticons */
                 U+1F680-1F6FF,    /* Transport & Map Symbols */
                 U+1F900-1F9FF,    /* Supplemental Symbols & Pictographs */
                 U+1FA70-1FAFF,    /* Extended Pictographic */
                 U+2600-26FF,      /* Miscellaneous Symbols */
                 U+2700-27BF;      /* Dingbats */
}

/**                                                                 @layout/hack
@doc: The following hack is/was used to fix the iOS/chrome bottom navbar
      so its not covered/hidden on mobile. However, it causes problems in Chrome,
      but I've included it here just for ref.

      1. The fix/hack (the rest of the styles fix/revert the hack depedning)
      2. Browsers which fully support CSS Environment variables (iOS 11.2+)
      3. Browsers which partially support CSS Environment variables (iOS 11.0-11.2)
      4. Browsers which fully support CSS Environment variables (iOS 11.2+)

@supports (-webkit-touch-callout: none) {
  body {
    height: 100vh;
    max-height: -webkit-fill-available !important;
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
}

@supports (padding-top: constant(safe-area-inset-top)) {
  body {
    --safe-area-inset-top: constant(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    --safe-area-inset-top: env(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}
***                                                                           */


/*

html,
body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  width: 100%;
  background: #fdfdfd;
  font-family: iosevka, monospace;
  font-size: 14px;
  letter-spacing: normal;
  font-stretch: normal;
  line-sizing: normal;
  font-variant: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.778;
  font-weight: 400;
  font-feature-settings: 'tnum';
}

@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://static.10xcss.com/font/iosevkaweb__normal_500.woff2") format("woff2"),
       url("https://static.10xcss.com/font/iosevkaweb__normal_500.woff")  format("woff");
}

*/


/* meh, going with a js solution, this just doesn't work too swell
html {
  scroll-snap-type: y;
}
[tabindex] {
  scroll-snap-align: center;
  scroll-margin-top: 100px;
  scroll-margin-bottom: 400px;
}
*/


/* to scroll past end  */
table ~ hr {
  margin-bottom: 0vh;
  padding-bottom: 8vh;
}


.title_cont {
  width: 100%;
  max-width: min(100vw, 1283px);
  margin: 0 auto;
  height: 50px;
  padding-left: 10px;
  position: relative;
  display: flex;

}

.title_cont > h1 {
  width: calc(100% + 4px);
  max-width: calc(100% + 4px);
  overflow-x: auto;
  height: auto;
  margin-top: auto;
  margin-bottom: -8px;
  padding-bottom: 6px;
  margin-bottom: -5px;
  padding-bottom: 3px;

  /* needed for outline  */
  padding-left: 4px;
  /* offset padding + align with tr outter edge */
  margin-left: -8px;
  margin-right: 0px;
  padding-right: 20px;
  padding-top: 6px;

  letter-spacing: var(--letter-spacing-h1, -1.4px);
  font-weight: var(--font-weight);
  /* should resize when 75% of vw based on chars -> deps on font-family/letter-spacin  */
  font-size: var(--font-size-h1);
  /*  font-size: var(--font-size-h1, clamp(18px, calc(100vw / var(--char-count, 40)), 30px));*/
  /*  font-size: clamp(18px, calc(140vw / var(--char-count, 40)), 30px);*/

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
/*  --scrollbar-track: var(--color-background);*/
  --scrollbar-track: transparent;
  scrollbar-face-color: var(--scrollbar-thumb);
  scrollbar-track-color: var(--scrollbar-track);
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: var(--scrollbar-width, auto);
}
/* firefox auto scrollbar obstructs the text  */
@-moz-document url-prefix() {
  .title_cont > h1  {
    scrollbar-width: thin;
    margin-left: -6px;
  }
}

.title_cont > h1 > .sep {
  display: inline-block;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: -2px;
  line-height: 1em;
  font-size: calc(1em + 2px);
  transform: translate(1px, 1px);
  color: var(--color-border);
}


.title_cont > h1::-webkit-scrollbar {
  width: var(--scrollbar-size, 9px);
  height: var(--scrollbar-size, 9px);
}
.title_cont > h1::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
.title_cont > h1::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  cursor: -webkit-grab;
  cursor: grab;
  border-radius: 0px;
}
.title_cont > h1::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.title_cont > h1::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(136,138,145,0.65));
}
.title_cont > h1::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, rgba(136,138,145,0.85)) !important;
}


/* left horz arrow  */
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:start {
  background-size: 11px;
  background-color: var(--scrollbar-track);
  border-left: 3px solid transparent;
  background-position: 0px center;
  border-bottom: none;
  border-top: none;
  background-repeat: no-repeat;
  border-right: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2080%2080%27%3E%3Cpath%20d=%27M16%2047a8%208%200%200%201%200-14l40-22a8%208%200%200%201%2012%207v44a8%208%200%200%201-12%207L16%2047Z%27%20style=%27fill:%23a2abb3%27/%3E%3C/svg%3E");
}
/* right horz  arrow  */
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:end {
  background-size: 11px;
  background-color: var(--scrollbar-track);
  border-left: none;
  background-position: 2px center;
  border-bottom: none;
  border-top: none;
  background-repeat: no-repeat;
  border-right: 3px solid transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2080%2080%27%3E%3Cpath%20d=%27M64%2047a8%208%200%200%200%200-14L24%2011a8%208%200%200%200-12%207v44a8%208%200%200%200%2012%207l40-22Z%27%20style=%27fill:%23a2abb3%27/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2080%2080%27%3E%3Cpath%20d=%27M64%2047a8%208%200%200%200%200-14L24%2011a8%208%200%200%200-12%207v44a8%208%200%200%200%2012%207l40-22Z%27%20style=%27fill:%23fff%27/%3E%3C/svg%3E");
}

.title_cont > h1::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, #8f9aa3);
}
.title_cont > h1::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, #6e7b87) !important;
}
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:start:active {
  border-color: var(--scrollbar-btn-border-color-active, #00d1d1) !important;
}
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:start:hover {
  border-color: var(--color-forground);
}
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:end:active {
  border-color: var(--scrollbar-btn-border-color-active, #00d1d1) !important;
}
.title_cont > h1::-webkit-scrollbar-button:single-button:horizontal:end:hover {
  border-color: var(--color-forground);
}




table {
  padding: 10px 5px 15px 5px;
  margin: 0 auto;
  max-width: min(100vw, 1283px);
  position: relative;
  width: 100%;
  border-collapse: separate;
/*  border-collapse: collapse;*/
  border-spacing: 0;
  line-height: var(--table-line-height, 15px);

  --width-siex: 120px;
  --width-time: 178px;
  /* 120 + 120 + 178 = 418  */
  --width-filename: calc(100vw - 418px);
}

table tr  {
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}
tbody > tr {
  height: 27px;
  z-index: 0;
}

tbody > tr:nth-child(even) {
  background: var(--color-tr-even-bg);
}
tbody > tr:nth-child(odd) {
  background: var(--color-tr-odd-bg);
}

td {
  padding: 0px 8px 0px 21px;
  height: 27px;
  position: relative;
  text-align: left;
  font-size: var(--font-size-td, 1rem);;
}

td > a {
  text-decoration: none;
  color: var(--color-link);
  width: 100%;
  display: inline-block;
  z-index: 1;
  max-width: 99%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 25px;
  padding-top: 6px;
  white-space: pre;
  margin-left: 8px;
  padding-left: 4px;
}
/* outline on tab  */
td > a:focus-visible {
  outline: 4px auto var(--color-link-hover);
  outline-offset: calc(var(--outline-offset) - 2px);
}



td > a > .dots {
  user-select: none;
  display: inline-block;
  /* jank-tastic but it works the best  */
  transform: translateY(-1px);
}

tr > td {
  border-right: 1px dashed var(--color-border);
}
tr > td:last-child {
  border-right: none;
}

tr > td:not(:first-child) {
  color: var(--color-text-meta);
  white-space: pre;
  text-align: right;
  padding-left: 0;
  transition: color 0.15s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

tr > th:nth-child(1) {
  min-width: auto;
  width: var(--width-filename);
  max-width: var(--width-filename);
}
tr > td:nth-child(1) {
  min-width: auto;
  width: var(--width-filename);
  max-width: var(--width-filename);
}

/* ext/size width  */
tr > td:nth-child(2),
tr > td:nth-child(3) {
  width: var(--width-siex);
  min-width: var(--width-siex);
}
/* time width  */
tr > td:nth-child(4) {
  width: var(--width-time);
  min-width: var(--width-time);
}

tbody > tr.dir.root {
  /*  filter: var(--tbody-icon-filter-root);*/
  /*  --tbody-icon-filter-root: grayscale(1);*/
  /*  filter: grayscale(1);*/
  pointer-events: none;
  touch-action: none;
  user-select: none;
  font-size: calc(1em + 4px);
  line-height: calc(1em - 8px);
}
tbody > tr.dir.root > td:before {
  filter: var(--icon-filter-root, grayscale(1));
}
tbody > tr.dir.root .root-char {
  color: var(--color-root-char, var(--color-carit-asc));
}


tbody > tr::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0;
  opacity: 0;
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}



tbody > tr > td:first-child::before {
  content: "";
  position: absolute;
  top: var(--icon-top, 2px);
  height: var(--icon-height, 24px);
  width: var(--icon-width, 16px);
  z-index: -1;
  left: var(--icon-left, 8px);
  transform-origin: center;
  background-image: var(--icon-bgi-dir);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: border-box;
  background-attachment: scroll;
  background-color: transparent;
  opacity: var(--icon-opacity, 0.5);
  transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
  filter: var(--icon-filter, none);
}

tbody > tr.ukn > td:first-child::before {
  background-image: var(--icon-bgi-unk);
}
tbody > tr.file > td:first-child::before {
  top: 1px;
  --icon-opacity: 0.35;
  background-image: var(--icon-bgi-file);
}
/* purple  */
tbody > tr.file[data-link="hard"] {
  --icon-opacity: 0.8;
  --icon-filter: hue-rotate(54deg) saturate(3) brightness(1.35);
}
/* cyran  */
tbody > tr.file[data-attr="exe"] {
  --icon-opacity: 0.8;
  --icon-filter: hue-rotate(290deg) saturate(3);
  --icon-filter: hue-rotate(323deg) saturate(3.5) brightness(1.4)
}
/* orange  */
tbody > tr.file[data-link="symbolic"] {
  --icon-opacity: 0.8;
  --icon-filter: hue-rotate(60deg) saturate(2) brightness(1.2);
  --icon-bgi-file: var(--icon-bgi-unk);
}



tbody > tr:hover > td:first-child::before {
  opacity: 1;
}
tbody > tr:hover::after {
  opacity: 1;
}
tbody > tr:hover {
  --color-text-meta: var(--color-link);
  transition: color 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}


thead > tr {
  background-color: var(--color-th-bg);
  color: var(--color-th-text);
}
thead > tr > th {
  position: relative;
  cursor: pointer;
  text-align: right;
  padding-right: 10px;
  padding-top: 3px;
  letter-spacing: 0.5px;
  border-right: 1px dashed var(--color-border);
  user-select: none;
  height: 29px;
  font-size: var(--font-size-th, 1rem);
  padding-left: 16px;
  padding-right: 6px;
  /* for "bold" look  */
  text-shadow: 0 0 var(--color-forground);
  font-weight: var(--font-weight);
}
thead > tr > th:last-child {
  border-right: none;
}
thead > tr > th:first-child {
  text-align: left;
  padding-left: 7px;
  max-width: 38vw;
  min-width: 200px;
}

thead > tr > th::after {
  content: '\25B2\25BC';
  position: absolute;
  color: var(--color-carit);
  text-shadow: none;
  left: 8px;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s, color 0.18s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}

thead > tr > th:first-child::after {
  right: 8px;
  left: auto;
}

/* asc/dsc pop on hover  */
thead > tr > th:hover::after {
  opacity: 0.5;
}

/* asc/dsc arrows  */
thead > tr > th.sort-asc::after {
  content: '\25B2\00a0';
  color: var(--color-carit-asc);
  opacity: 1;
}
thead > tr > th.sort-dsc::after {
  content: '\25BC\00a0';
  color: var(--color-carit-dsc);
  opacity: 1;
}

/* kinda silly, switches the sort arrow to be the one closest to border  */
thead > tr > th.sort-asc:nth-child(1)::after {
  content: '\00a0\25B2';
}
thead > tr > th.sort-dsc:nth-child(1)::after {
  content: '\00a0\25BC';
}



a {
/*  outline: none;*/
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--color-link);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

a:hover {
  color: var(--color-link-hover);
  transition: color 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a:focus {
  color: var(--color-link-hover);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a:active {
  color: var(--color-link-active);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.bread {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  z-index: 5;
  padding-left: 1px;
  padding-right: 1px;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--color-forground, #457ab0);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.bread:hover {
  color: var(--color-link-hover);
  transition: color 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
a.bread:focus {
  color: var(--color-link-hover);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
/* outline on tab  */
a.bread:focus-visible {
  color: var(--color-link-hover);
  outline: 4px auto var(--color-link-hover);
  outline-offset: var(--outline-offset);
  transition: color 0.1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}


.source {
  position: absolute;
  bottom: 4px;
  right: 11px;
  margin-left: auto;
  margin-top: 0;
  margin-right: auto;
  display: var(--source-display, block);
}
.source > h6 {
  padding: 0;
  margin: 0;
  position: relative;
  user-select: none;
  font-weight: var(--font-weight);
  opacity: 0.94;
}
.source > h6 span {
  transition: opacity 0.18s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  opacity: 0.6;
}
.source > h6:hover span {
  opacity: 0.3;
}
.source > h6 > span {
  font-size: calc(var(--font-size-source, 11px) + 3px);
  line-height: 10px;
}
.source > h6 > a {
  display: inline-block;
  font-size: var(--font-size-source, 11px);
  text-shadow: none;
  transform: translateY(-2px);
  padding-left: 1px;
  padding-right: 1px;
  position: relative;
  text-shadow: 0 0 var(--color-forground);
}
.source > h6 > a > span {
  color: var(--color-forground) !important;
}



@media (prefers-color-scheme: dark) {
  /*
  tbody > tr.dir.root {
    filter: none !important;
  }
  tbody > tr.dir.root > td:before {
    filter: grayscale(1);
  }

  */
  tbody > tr.dir > td:first-child::before {
    opacity: 0.65;
  }
}

/* pointer:dekstop */


/* touch:mobile */
/* @NOTE -> typically I unset active for mobile/touch, but i like it for this */
/*
@media (any-hover: none) {
  a:active {
   color: var(--color-link-hover);
  }
}
*/

@media (max-width: 1300px) {
  /* for better scrollbar visiblity  */
  .title_cont > h1 {
    max-width: 100%;
    padding-right: 20px;
    padding-left: 6px;
    margin-left: 0px;
    /*  otherwise btn it hitting scroll  */
    margin-right: 1px;
  }
}
@media (max-width: 1283px) {
  table {
    --width-siex: 90px;
    --width-time: 165px;
    /* 90 + 90 + 165 = 365px (+20)  */
    --width-filename: calc(100vw - 345px);
  }

  .title_cont {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0px;
    margin-right: 0px;
  }
  table {
    padding: 10px 0px 15px 0px;
  }
  tbody > tr > td > a {
    white-space: nowrap;
  }
}


@media (max-width: 1283px) and (any-hover: none) {
  /* scrollbar sillyness for mobile  */
  .title_cont {
    padding-left: 0;
    padding-right: 0;
  }
  .title_cont > h1 {
    padding-left: 12px;
    padding-right: 10px;
    margin-right: 0px;
    --scrollbar-width: thin;
    --scrollbar-size: 6px;
    /* scroll bar should hide hr when shown   */
    margin-bottom: -6px;
    padding-bottom: 5px;
  }
}


@media (max-width: 920px) {
  .title_cont > h1 {
    padding-left: 7px;
    margin-left: 0;
  }
  table {
    --width-siex: 90px;
    --width-time: 160px;
    /* 90px + 160 = 250  */
    --width-filename: calc(100vw - 250px);
  }
  tr > th:nth-child(2) {
    width: 0;
    display: none;
  }
  tr > td:nth-child(2) {
    width: 0;
    display: none;
  }
  /* little extra breathing room, don't want the scrollbar eating our row */
  tr > th:nth-child(4),
  tr > td:nth-child(4) {
    padding-right: 8px;
  }
}

@media (max-width: 720px) {
  table {
    /* 160 = 180 (+20)  */
    --width-filename: calc(100vw - 160px);
  }
  tr > th:nth-child(2),
  tr > th:nth-child(3) {
    width: 0;
    display: none;
  }
  tr > td:nth-child(2),
  tr > td:nth-child(3) {
    width: 0;
    display: none;
  }
  .source {
    right: 6px;
  }
}

@media (max-width: 520px) {
  .title_cont > h1 {
    padding-left: 5px;
  }
  table {
    padding: 10px 0 15px 0;
  }
  ul > li > a ~ span.meta {
    display: none;
  }
  tr > th:nth-child(2),
  tr > th:nth-child(3),
  tr > th:nth-child(4) {
    width: 0;
    display: none;
  }
  tr > td:nth-child(2),
  tr > td:nth-child(3),
  tr > td:nth-child(4) {
    width: 0;
    display: none;
  }
  tr > th:nth-child(1) {
    width: 100%;
    min-width: auto;
    max-width: 100vw;
    border-right: none;
  }
  tr > td:nth-child(1) {
    width: 100%;
    min-width: auto;
    max-width: 100vw;
  }
  tr > td:first-child {
    border-right: none;
  }
}

@media (max-width: 440px) {
  table {
    padding: 10px 0px 15px 1px;
  }
}