:root {
  /* Font Families
  =================================================== */
  --font-family: Arial, monospace;
  --font-family-headihg: Arial, monospace;
  --font-family-mono: monospace, monospace;

  /* Base rhythm
  =================================================== */
  --base-font-size: 0.875rem;
  --base-line: 1.5rem;
  --base-line-cap: 0.5rem;

  /* Text sizes
  =================================================== */
  --font-size-h1: 1.875rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 1rem;

  /* Color hue list
  =================================================== */
  --hue-primary: 211;
  --hue-complementary: 200;
  --hue-accent: 15;
  --hue-secondary: 199;

  /* Root text and background colours (serves as referense point)
  =================================================== */
  --color-primary: var(--hue-primary), 22%, 20%;
  --color-complementary: var(--hue-complementary), 45%, 99%;
  --color-hover-tint: hsla(var(--hue-complementary), 45%, 20%, 0.075);
  --color-overlay-tint: var(--hue-primary), 23%, 2%;
  --color-selection: hsla(var(--hue-secondary), 65%, 70%, 0.4);

  --color-text-dark: hsla(var(--hue-primary), 23%, 27%, 0.9);
  --color-text-light: hsla(var(--hue-complementary), 45%, 99%, 0.85);

  /* Text colors (Icon counts as text)
  =================================================== */
  --color-text-primary: hsla(var(--color-primary), 0.95);
  --color-text-secondary: hsla(var(--color-primary), 0.7);
  --color-text-tretiary: hsla(var(--color-primary), 0.5);
  --color-icon: hsla(var(--color-primary), 0.7);
  --color-text-link: hsl(var(--hue-secondary), 95%, 40%);

  /* Border color
  =================================================== */
  --color-border: hsla(var(--color-primary), 0.4);
  --color-border-hover: hsla(var(--color-primary), 0.5);

  /* Background colors (elevated -> lighter, bevel -> darken)
  =================================================== */
  --color-surface: hsl(var(--hue-complementary), 35%, 96%);
  --color-bevel: hsl(var(--hue-complementary), 30%, 88%);
  --color-elevated: hsl(var(--hue-complementary), 40%, 98%);

  /* Accent colors
  =================================================== */
  --color-accent: hsl(var(--hue-accent), 79%, 50%);
  --color-accent-lt: hsl(var(--hue-accent), 79%, 65%);
  --color-accent-ltr: hsl(var(--hue-accent), 79%, 75%);

  /* Secondary colors
  =================================================== */
  --color-secondary: hsl(var(--hue-secondary), 77%, 58%);
  --color-secondary-lt: hsl(var(--hue-secondary), 75%, 83%);
  --color-secondary-ltr: hsl(var(--hue-secondary), 65%, 90%);

  /* Status colors error,warning,success,info (Darker variations for text)
  =================================================== */
  --hue-error: 0;
  --color-status-error: hsl(var(--hue-error), 94%, 52%);
  --color-status-error-bg: hsl(var(--hue-error), 78%, 86%);

  --hue-warning: 40;
  --color-status-warning: hsl(var(--hue-warning), 100%, 52%);
  --color-status-warning-bg: hsl(var(--hue-warning), 100%, 92%);

  --hue-success: 144;
  --color-status-success: hsl(var(--hue-success), 100%, 32%);
  --color-status-success-bg: hsl(var(--hue-success), 44%, 86%);

  --hue-info: 185;
  --color-status-info: hsl(var(--hue-info), 73%, 46%);
  --color-status-info-bg: hsl(var(--hue-info), 64%, 84%);

  /* Colors for feed types: facebook, twitter, rss, reddit, html
  =================================================== */
  --color-source-facebook: hsl(220, 46%, 48%);
  --color-source-twitter: hsl(203, 89%, 53%);
  --color-source-rss: hsl(31, 100%, 45%);
  --color-source-telegram: hsl(200, 73%, 50%);
  --color-source-reddit: hsl(16, 100%, 49%);
  --color-source-html: hsl(123, 43%, 39%);
  --color-source-slack: hsl(299, 56%, 19%);
  --color-source-youtube: hsl(4, 100%, 50%);

  --layout-gap-vertical: 1.5rem;
  --layout-gap-horizontal: 1.5rem;
  --layout-z-overlay: 10;

  --element-space: 0.5rem;
  --element-font-size: 0.875rem;
  --element-bdrs: 4px;
  --element-size: 2.2rem;
  --element-padding: 0.5rem;
  --element-font-size: 0.875rem;
  --element-pointer-size: 1.125rem;
  --element-line-cap: calc((var(--base-line) * 2) - var(--element-size));

  --scrollbar-size: 8px;

  --Image-fallback: none;
  --UserBadge-fallback: none;

  /* Shadow of different depth
  =================================================== */
  --shadow-depth-1: 0 2px 2px 0 rgba(0, 0, 0, 0.12),
    0 1px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 3px -2px rgba(0, 0, 0, 0.14);
  --shadow-depth-2: 0 4px 5px 0 rgba(0, 0, 0, 0.1),
    0 1px 10px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
  --shadow-depth-3: 0 6px 8px 0 rgba(0, 0, 0, 0.1),
    0 1px 14px 0 rgba(0, 0, 0, 0.08), 0 3px 5px -1px rgba(0, 0, 0, 0.12);
  --shadow-depth-4: 0 7px 28px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px 0 rgba(0, 0, 0, 0.2);
  --shadow-depth-5: 0 9px 36px 0 rgba(0, 0, 0, 0.35),
    0 5px 16px 0 rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 0 0px 2px var(--color-secondary-lt),
    0 0 3px 2px var(--color-secondary-lt);

  /* Common duration for transitions and animations (in milliseconds)
  =================================================== */
  --td: 240ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--hue-complementary), 60%, 99%;
    --color-complementary: var(--hue-primary), 18%, 27%;
    --color-selection: hsla(var(--hue-secondary), 65%, 70%, 0.25);
    --color-text-link: hsl(var(--hue-secondary), 83%, 68%, 1);

    --color-hover-tint: hsla(0, 0%, 90%, 0.1);

    --color-surface: hsl(var(--hue-primary), 18%, 29%);
    --color-bevel: hsl(var(--hue-primary), 18%, 24%);
    --color-elevated: hsl(var(--hue-primary), 18%, 34%);
  }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin !important;
  scrollbar-color: var(--color-border) transparent;
}

.nofocusvisible {
  outline: none;
}

*:not([disabled]):not(.nofocusvisible):focus {
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-focus);
}

::selection {
  background: var(--color-selection);
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: calc(var(--scrollbar-size) / 2);
  transition: all var(--td);
  background-color: var(--color-border);
}

html {
  font-size: 16px;
}
html.no-scroll {
  overflow: hidden;
}

html,
body {
  -webkit-text-size-adjust: 100%;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  line-height: var(--base-line);
  font-family: var(--font-family);
}

body {
  font-size: var(--base-font-size);
}

main {
  display: block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-family: var(--font-family-heading);
  line-height: var(--base-line);
  font-size: 1rem;
}

/* Text-level semantics
   ========================================================================== */

a {
  background-color: transparent;
  color: var(--color-text-link);
  text-decoration: underline;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

b,
strong {
  line-height: 0;
  font-weight: bolder;
}

code kbd,
samp {
  font-family: var(--font-family-mono);
  line-height: 0;
}
code.outlined {
  padding: 0 0.25em;
  border: 1px solid var(--color-border);
  background-color: var(--color-elevated);
  border-radius: var(--element-bdrs);
}

i,
em {
  line-height: 0;
}

small {
  font-size: 0.875em;
  line-height: 0;
}

p {
  margin: 0;
  padding: 0;
}

sub,
sup {
  font-size: 0.85em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Lists
   ========================================================================== */

dl {
  margin: 0;
  padding: 0;
}

dt {
  font-weight: 400;
}
dt:after {
  content: ':';
}

dd {
  position: relative;
  padding-left: 1.8em;
}
dd:before {
  display: inline-block;
  content: '—';
  position: absolute;
  left: 0.4em;
}

ul,
ol {
  padding-left: 1.1em;
}

ul ol,
ol ul,
ul ul,
ol ol {
  margin: 0;
  padding: 0;
}

ol ol {
  list-style-type: upper-alpha;
}

ul.is-inline {
  padding-left: 0;
}

ul.is-inline li {
  padding: 0;
  display: inline-block;
}

ul.is-inline li:not(:last-child) {
  margin-right: 0.75em;
}

ul.is-inline li:not(:last-child):after {
  content: ',';
}

/* Image content and emdeeds
   ========================================================================== */
img {
  border-style: none;
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  font-size: 0;
  line-height: 0;
}

svg[data-icon] {
  display: inline-block;
  vertical-align: -0.15em;
  fill: var(--color-icon);
  width: var(--icon-size, 1em);
  height: var(--icon-size, 1em);
  visibility: inherit;
  pointer-events: none;
  cursor: inherit;
}

svg[data-icon] use {
  pointer-events: none;
}

/* Grouping content
   ========================================================================== */

hr {
  height: 0;
  border: 1px solid var(--color-border);
  margin: -1px 0;
  overflow: visible;
}

pre {
  background: var(--color-elevated);
  border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-depth-1);
  font-family: var(--font-family-mono);
  overflow: auto;
  padding: calc(var(--base-line) / 2);
  font-size: var(--font-size-h6);
  line-height: var(--base-line);
}

blockquote {
  --elevation: calc(var(--base-line) / 2);
  background: var(--color-elevated);
  border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-depth-1);
  padding: var(--elevation) var(--elevation) var(--elevation)
    calc(var(--elevation) * 4);
  position: relative;
  margin-top: var(--base-line);
}
blockquote:before {
  content: '»';
  color: var(--color-accent-lt);
  opacity: 0.5;
  position: absolute;
  top: calc((1em - var(--elevation)) / 2);
  left: var(--elevation);
  font-size: 2em;
}

details {
  background: var(--color-elevated);
  border-left: 3px solid var(--color-accent);
  box-shadow: var(--shadow-depth-1);
  display: block;
  padding: 0 calc(var(--base-line) / 2);
}

details[open] {
  padding-bottom: calc(var(--base-line) / 2);
}

summary {
  --elevation: calc(var(--base-line) / 2);
  display: block;
  padding: var(--elevation);
  margin: 0 calc(var(--elevation) * -1) 0 calc((var(--elevation) * -1) - 3px);
  position: relative;
  /*&::-webkit-details-marker {
    display: none;
  }*/
  transition: box-shadow var(--td);
}

/* Simple tables
   ========================================================================== */

table {
  margin-top: var(--base-line);
  width: 100%;
  max-width: 100%;
  border-collapse: none;
  border-spacing: 0;
}

td,
th {
  padding: calc(var(--base-line-cap) * 1.5) 1.5rem
    calc(var(--base-line-cap) * 1.5 - 1px);
  border-bottom: 1px solid var(--color-border);
  /*
  &:not(:last-child) {
    border-right: 1px solid var(--color-border);
  }
  */
}

thead td {
  text-align: left;
  font-weight: normal;
  font-size: 0.875em;
  background-color: var(--color-bevel);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  /*border-bottom: 3px solid var(--color-accent-lt);*/
}

caption {
  text-align: left;
  font-size: var(--font-size-h3);
  font-family: var(--font-family-heading);
  padding-top: 0.3125rem;
  margin-bottom: calc(var(--base-line) - 0.3125rem);
}

table.is-striped tr:nth-child(even) td {
  background-color: var(--color-bevel);
}

/* Form elements basic styles and reset
   ========================================================================== */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button[disabled],
input[disabled],
optgroup[disabled],
select[disabled],
textarea[disabled] {
  --element-color: var(--color-text-tretiary);
  cursor: default;
  opacity: 0.75;
}

input,
select,
textarea {
  text-transform: none;
  padding: 0 var(--element-padding);
  color: var(--element-color, currentColor);
  background: var(--element-background, var(--color-elevated));
  border: 1px solid var(--element-border, var(--color-border));
  border-radius: var(--element-bdrs);
  font-size: var(--element-font-size, inherit);
  transition-property: color, background, border-color, box-shadow;
  transition-duration: var(--td);
}

input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--color-text-tretiary);
  font-style: italic;
  user-select: none;
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--color-text-tretiary);
  font-style: italic;
  user-select: none;
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--color-text-tretiary);
  font-style: italic;
  user-select: none;
}

input:not([data-pristine]):invalid,
select:not([data-pristine]):invalid,
textarea:not([data-pristine]):invalid {
  border-color: var(--color-status-error);
}

input.is-transparent,
input.is-transparent:hover,
select.is-transparent,
select.is-transparent:hover,
textarea.is-transparent,
textarea.is-transparent:hover {
  background: transparent;
  border-color: transparent;
}

input:not([disabled]):hover,
select:not([disabled]):hover,
textarea:not([disabled]):hover {
  border-color: var(--element-border-hover, var(--color-border-hover));
}

input,
select,
button {
  height: var(--element-size);
}

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner,
input[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
input[type='button']:-moz-focusring,
input[type='reset']:-moz-focusring,
input[type='submit']:-moz-focusring {
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-focus);
}

progress {
  vertical-align: baseline;
}

input[type='checkbox'],
input[type='radio'] {
  padding: 0;
  vertical-align: top;
  width: var(--element-pointer-size);
  height: var(--element-pointer-size);
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-position: center;
}

input[type='checkbox']:checked {
  background-size: 78%;
  background-color: var(--color-accent);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23FFFFFF" d="M8.294 16.998c-.435 0-.847-.203-1.111-.553L3.61 11.724a1.392 1.392 0 01.27-1.951 1.392 1.392 0 011.953.27l2.351 3.104 5.911-9.492a1.396 1.396 0 011.921-.445c.653.406.854 1.266.446 1.92L9.478 16.34a1.39 1.39 0 01-1.12.656c-.022.002-.042.002-.064.002z"/></svg>');
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='radio']:checked {
  background-size: 76%;
  background-color: var(--color-accent);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23FFFFFF" d="M10 3a7 7 0 10.001 13.999A7 7 0 0010 3z"/></svg>');
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}

input[type='search'] {
  -webkit-appearance: textfield;
  box-sizing: border-box;
  outline-offset: -2px;
}

input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

input::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

label,
.label-replacement {
  display: block;
  user-select: none;
  font-size: var(--base-font-size);
}

label&:after,
.label-replacement:after {
  content: ':';
}

textarea {
  --internal-line-height: calc(var(--base-line) * 0.75);
  padding-top: calc(
    (var(--element-size) - var(--internal-line-height) - 2px) / 2
  );
  padding-bottom: calc(
    (var(--element-size) - var(--internal-line-height) - 2px) / 2
  );
  min-height: var(--element-size);
  line-height: var(--internal-line-height);
  resize: none;
}

textarea:not([rows]) {
  min-height: calc(var(--element-size) * 3);
}
textarea[data-resizable] {
  resize: vertical;
}

button {
  user-select: none;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: none;
  white-space: nowrap;
}

.is-clearfix:after {
  display: block;
  content: '';
  clear: both;
}

.is-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-typography-rhythm {
  position: relative;
}

.debug-typography-rhythm:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  user-select: none;
  top: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 119, 179, 0.2) 1px, transparent 1px) left
    top / var(--base-line) var(--base-line);
}

/* Visualy distinct "solid" block with shadow
  ======================================================================== */
.layout-paper {
  background-color: var(--color-elevated);
  padding: var(--layout-gap-vertical) var(--layout-gap-horizontal);
  border-radius: var(--element-bdrs);
  box-shadow: var(--layout-paper-depth, var(--shadow-depth-1));
}
.layout-paper[data-paper-depth='0'] {
  --layout-paper-depth: none;
}
.layout-paper[data-paper-depth='2'] {
  --layout-paper-depth: var(--shadow-depth-2);
}
.layout-paper[data-paper-depth='3'] {
  --layout-paper-depth: var(--shadow-depth-3);
}
.layout-paper[data-paper-depth='4'] {
  --layout-paper-depth: var(--shadow-depth-4);
}
.layout-paper[data-paper-depth='5'] {
  --layout-paper-depth: var(--shadow-depth-5);
}

/* Row-cell one-line flex based layout
  ======================================================================== */
.layout-row {
  display: flex;
  align-items: center;
}
.layout-item {
  flex: 0 0 var(--item-size, auto);
}
.layout-item:not(:last-child) {
  margin-right: var(--row-gap, 0.5rem);
}
.layout-item[data-item-size='max'] {
  flex: 1 0 auto;
}
.layout-item[data-item-size='25'] {
  --item-size: 25%;
}
.layout-item[data-item-size='33'] {
  --item-size: 33.333%;
}
.layout-item[data-item-size='50'] {
  --item-size: 50%;
}
.layout-item[data-item-size='75'] {
  --item-size: 75%;
}
.layout-item[data-item-size='100'] {
  --item-size: 100%;
}

/* Global overlay for dialog and modal windows
   featuring centering the content
  ======================================================================== */
.layout-centered,
.layout-overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
}
.layout-centered {
  display: flex;
  z-index: var(--custom-z-index, var(--layout-z-overlay));
}
.layout-centered-container {
  margin: auto;
  position: relative;
  max-width: calc(100vw - 4rem);
  z-index: 1;
}
.layout-overlay {
  background: radial-gradient(
    ellipse,
    hsla(var(--color-overlay-tint), 0.35) 25%,
    hsla(var(--color-overlay-tint), 0.5)
  );
  box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.25);
  animation: fadeIn calc(var(--td) * 0.75);
  animation-fill-mode: forwards;
}
.layout-overlay.is-clickable {
  cursor: pointer;
}

/* Special set of rulest for differnet kind "floating"
   blocks like dropdowns and popups that exist out of page flow
  ======================================================================== */
.layout-contextmenu {
  --appearVert-start: calc(var(--element-size) * 0.5);
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-elevated);
  box-shadow: var(--shadow-depth-3);
  border-radius: var(--element-bdrs);
  animation: appearVert var(--td);
  animation-fill-mode: forwards;
  position: fixed;
  z-index: var(--layout-z-overlay);

  min-width: 180px;
  position: fixed;
  z-index: calc(var(--layout-z-overlay) + 1);
}
.layout-contextmenu .Button {
  --element-size: 2rem;
  display: block;
  font-size: 0.75rem;
  width: 100%;
  text-align: left;
  text-transform: none;
}

/* Grid-based multi-row layout
  ======================================================================== */
.layout-grid {
  --Grid-gap: var(--layout-gap-horizontal) var(--layout-gap-vertical);
  display: grid;
  grid-template-columns: repeat(12, 1fr [col-start]);
  grid-auto-rows: auto;
  grid-gap: var(--Grid-gap);
  align-content: start;
}
.layout-cell {
  grid-column-start: var(--Cell-col-start, auto);
  grid-column-end: var(--Cell-col-end, span 12);
  grid-row-end: var(--Cell-row-end, span 1);
}
.layout-cell[data-row-span='2'] {
  --Cell-row-end: span 2;
}
.layout-cell[data-row-span='3'] {
  --Cell-row-end: span 3;
}
.layout-cell[data-row-span='4'] {
  --Cell-row-end: span 4;
}
.layout-cell[data-row-span='5'] {
  --Cell-row-end: span 5;
}
.layout-cell[data-col-span='1'] {
  --Cell-col-end: span 1;
}
.layout-cell[data-col-span='2'] {
  --Cell-col-end: span 2;
}
.layout-cell[data-col-span='3'] {
  --Cell-col-end: span 3;
}
.layout-cell[data-col-span='4'] {
  --Cell-col-end: span 4;
}
.layout-cell[data-col-span='5'] {
  --Cell-col-end: span 5;
}
.layout-cell[data-col-span='6'] {
  --Cell-col-end: span 6;
}
.layout-cell[data-col-span='7'] {
  --Cell-col-end: span 7;
}
.layout-cell[data-col-span='8'] {
  --Cell-col-end: span 8;
}
.layout-cell[data-col-span='9'] {
  --Cell-col-end: span 9;
}
.layout-cell[data-col-span='10'] {
  --Cell-col-end: span 10;
}
.layout-cell[data-col-span='11'] {
  --Cell-col-end: span 11;
}
.layout-cell[data-col-span='12'] {
  --Cell-col-end: span 12;
}
.layout-cell[data-col-start='1'] {
  --Cell-col-start: 1;
}
.layout-cell[data-col-start='2'] {
  --Cell-col-start: 2;
}
.layout-cell[data-col-start='3'] {
  --Cell-col-start: 3;
}
.layout-cell[data-col-start='4'] {
  --Cell-col-start: 4;
}
.layout-cell[data-col-start='5'] {
  --Cell-col-start: 5;
}
.layout-cell[data-col-start='6'] {
  --Cell-col-start: 6;
}
.layout-cell[data-col-start='7'] {
  --Cell-col-start: 7;
}
.layout-cell[data-col-start='8'] {
  --Cell-col-start: 8;
}
.layout-cell[data-col-start='9'] {
  --Cell-col-start: 9;
}
.layout-cell[data-col-start='10'] {
  --Cell-col-start: 10;
}
.layout-cell[data-col-start='11'] {
  --Cell-col-start: 11;
}
.layout-cell[data-col-start='12'] {
  --Cell-col-start: 12;
}

@keyframes appearVert {
  from {
    opacity: 0.01;
    transform: translate3d(0, var(--appearVert-start), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideVert {
  from {
    transform: translate3d(0, var(--slideVert-start), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes rotate {
  to {
    transform: var(--rotate-end, 360deg);
  }
}

@keyframes appearHor {
  from {
    opacity: 0.01;
    transform: translate3d(var(--appearHor-start), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideHor {
  from {
    transform: translate3d(var(--slideHor-start), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Core stuff
  ======================================================================== */

@keyframes CircularProgressDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

@keyframes CircularProgressRotate {
  100% {
    transform: rotate(360deg);
  }
}

.CircularProgress {
  animation: CircularProgressRotate 2s linear infinite;
  transform-origin: center center;
}

.CircularProgress-base {
  fill: none;
  stroke: var(--CircularProgress-base-color, var(--color-border));
}
.CircularProgress-circle {
  fill: none;
  transition: stroke var(--td);
  stroke: var(--CircularProgress-color, var(--color-accent));
  stroke-dasharray: 150, 200;
  stroke-dashoffset: -10;
  animation: CircularProgressDash 1.5s ease-in-out infinite;
  stroke-linecap: round;
}

.Button {
  height: var(--element-size);
  position: relative;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--element-bdrs);
  font-size: var(--element-font-size);
  color: var(--color-text-primary);
}

.Button:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  cursor: inherit;
  visibility: hidden;
  background: var(--color-hover-tint);
}

.Button:not([disabled]):hover:after {
  visibility: visible;
}

.Button-icon,
.Button-loading {
  margin-right: 0.5rem;
}

.Button.icon-only {
  padding: 0;
  width: var(--element-size);
  border-radius: 50%;
}

.Button.icon-only .Button-icon,
.Button.icon-only .Button-loading {
  margin-right: 0;
}

.Button-loading {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.175rem;
}

.Button.is-block {
  width: 100%;
}

.Button.is-accent {
  --color-icon: var(--color-text-light);
  --CircularProgress-color: var(--color-text-light);
  color: var(--color-text-light);
  background: var(--color-accent);
}

.Button.is-solid {
  background: var(--color-elevated);
  border-color: var(--color-border);
}

a.Button {
  display: inline-block;
  line-height: calc(var(--element-size) - 2px);
  height: var(--element-size);
  text-decoration: none;
}

@keyframes LinearProgressKeyframes {
  0% {
    width: 0%;
    transform: translate3d(0, 0, 0);
  }
  50% {
    width: 75%;
    transform: translate3d(0, 0, 0);
  }
  100% {
    width: 85%;
    transform: translate3d(180%, 0, 0);
  }
}

.LinearProgress {
  --LinearProgress-size: 8px;
  display: flex;
  flex-direction: column;
}

.LinearProgress-line {
  overflow: hidden;
  height: var(--LinearProgress-size);
  background-color: var(--LinearProgress-base-color, var(--color-bevel));
}
.LinearProgress-line:after {
  content: '';
  display: block;
  width: var(--LinearProgress-value, 0);
  height: 100%;
  background-color: var(--LinearProgress-color, var(--color-accent));
  transition:
    width var(--td),
    transform var(--td),
    opacity var(--td) ease-in var(--td);
}
.LinearProgress[data-status='manual'] {
  transition-duration: var(--td);
  transition-property: width, transform;
}
.LinearProgress[data-status='auto'] .LinearProgress-line:after {
  transition: none;
  animation: LinearProgressKeyframes;
  animation-duration: var(--LinearProgress-duration, 2.25s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.LinearProgress[data-status='done'] .LinearProgress-line:after {
  width: 100%;
  opacity: 0;
}

.LinearProgress-text {
  color: var(--color-text-secondary);
  text-align: center;
}

.Image {
  display: block;
  overflow: hidden;
  height: auto;
  background-color: transparent;
  background-image: var(--Image-fallback);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.Image img {
  opacity: 1;
  object-fit: cover;
  transition: var(--td) opacity;
}

.Image[style*='--aspect-ratio'] {
  position: relative;
}

.Image[style*='--aspect-ratio']:before {
  content: '';
  width: 100%;
  display: block;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.Image[style*='--aspect-ratio'] img {
  position: absolute;
  top: 0;
  height: 100%;
}

.Dialog {
  --appearVert-start: -1rem;
  --Dialog-header-size: calc(var(--base-line) * 2.5);
  margin: auto;
  background-color: var(--color-surface);
  border-radius: var(--element-bdrs);
  box-shadow: var(--shadow-depth-5);
  width: var(--dialog-width, auto);
  height: var(--dialog-height, auto);
  animation: appearVert calc(var(--td) * 1.5) ease-out;
  animation-fill-mode: forwards;
  display: flex;
  flex-direction: column;
}

.Dialog-header {
  flex: 0 0 var(--Dialog-header-size);
  display: flex;
  align-items: center;
  padding: 0 var(--layout-gap-horizontal);
  border-radius: var(--element-bdrs) var(--element-bdrs) 0 0;
  border-bottom: 1px solid var(--color-border);
}
.Dialog-title {
  margin-top: 0;
  padding-top: 0;
  font-size: var(--font-size-h3);
  -webkit-user-select: none;
          user-select: none;
}
.Dialog-close {
  --icon-size: 1.25em;
  margin-left: auto;
  margin-right: calc(var(--layout-gap-horizontal) * -0.75);
  border-color: transparent;
  background: none;
}
.Dialog-content {
  flex: 1;
  padding: 0 var(--layout-gap-horizontal) var(--layout-gap-vertical);
  overflow: auto;
}
.Dialog-footer {
  margin-top: auto;
  padding: calc(var(--layout-gap-vertical) * 0.5) var(--layout-gap-horizontal);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.Dialog-footer .Button {
  min-width: 7rem;
}

.Dialog-footer .Button + .Button {
  margin-left: var(--layout-gap-horizontal);
}

.Dialog .LinearProgress {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--Dialog-header-size);
  z-index: 3;
}
.Dialog .Tabs {
  min-height: 0px;
  display: flex;
  flex-direction: column;
}

.Dialog .Tabs .Dialog-container {
  min-height: 0;
  overflow: auto;
}

.FormControl-holder {
  position: relative;
  margin-left: auto;
  display: flex;
  flex-basis: var(--FormControl-basis, auto);
}

.FormControl-holder .FormControl-holder .TextInput,
.FormControl-holder .TextArea,
.FormControl-holder .Select {
  flex-grow: 1;
}

.FormControl-holder .Toggler + .Toggler {
  margin-left: calc(var(--element-space) * 2);
}

.FormControl-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: var(--element-size);
  height: 100%;
  z-index: 2;
}

.FormControl-icon > .Icon {
  margin: auto;
}

.FormControl-message {
  width: 100%;
  margin-left: auto;
  flex-basis: var(--FormControl-basis, auto);
  min-height: var(--base-line);
  font-size: var(--element-font-size);
  color: var(--FormControl-message, var(--color-text-secondary));
}

.FormControl.state-error {
  --element-border: var(--color-status-error);
  --FormControl-message: var(--color-status-error);
}

.FormControl.is-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
}

.TextInput input {
  min-width: 0;
  width: 100%;
}
.TextInput input:not(:last-child) {
  padding-left: var(--element-size);
}

.TypeTag {
  display: inline-block;
  vertical-align: 0.14em;
  border-radius: var(--element-bdrs);
  white-space: nowrap;
  font-size: 0.875em;
  line-height: 1.65em;
  width: 10ch;
  text-align: center;
  color: var(--color-text-light);
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
}

.TypeTag.is-facebook {
  background: var(--color-source-facebook);
}

.TypeTag.is-twitter {
  background: var(--color-source-twitter);
}

.TypeTag.is-rss {
  background: var(--color-source-rss);
}

.TypeTag.is-reddit {
  background: var(--color-source-reddit);
}

.TypeTag.is-html {
  background: var(--color-source-html);
}

.TypeTag.is-youtube {
  background: var(--color-source-youtube);
}

.TypeTag.is-telegram {
  background: var(--color-source-telegram);
}

.Counter {
  display: inline-block;
  vertical-align: 0.14em;
  font-size: 0.75em;
  letter-spacing: 1px;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid var(--color-border);
  background-color: var(--color-elevated);
  border-radius: var(--element-bdrs);
  letter-spacing: 0px;
  line-height: 1.5em;
  padding: 0 1ch;
}

.Counter.theme-accent {
  background-color: var(--color-accent-lt);
  color: var(--color-text-light);
}
.Counter.theme-secondary {
  background-color: var(--color-secondary-lt);
}

.Indicator {
  display: flex;
  align-items: center;
  border-radius: calc(var(--base-line) / 2);
  white-space: nowrap;
  min-width: 12ch;
  text-shadow: 1px 1px 0px rgba(var(--primary-raw), 0.05);
  padding: 0 0.75em 0 0.75em;
  color: var(--color-status-error);
  background: var(--color-status-error-bg);
}

.Indicator:before {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--color-status-error);
  border-radius: 50%;
  margin-right: 0.5em;
}

.Indicator.state-active {
  color: var(--color-status-success);
  background: var(--color-status-success-bg);
}

.Indicator.state-active:before {
  background-color: var(--color-status-success);
}

.ImageUpload {
  max-width: 240px;
  padding: calc(var(--element-space) * 2);
}

.ImageUpload.state-error {
  --element-border: var(--color-status-error);
  --FormControl-message: var(--color-status-error);
}

.ImageUpload:focus-within .ImageUpload-preview {
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ImageUpload input[type='file'] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
}

.ImageUpload-preview {
  position: relative;
  width: 80%;
  margin: auto;
  border-radius: 50%;
  /* border: 0.5rem solid var(--preview-border-color, transparent); */
  margin-bottom: calc(var(--element-space) * 2);
}

.ImageUpload-image {
  border: 1px solid var(--element-border, var(--color-border));
  border-radius: 50%;
  overflow: hidden;
}

.ImageUpload-filename {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 1rem;
  text-align: center;
  color: var(--color-text-light);
  background-color: hsla(var(--color-primary), 0.75);
}

.ImageUpload-message {
  display: block;
  margin-top: -0.2em;
  color: var(--FormControl-message, var(--color-text-secondary));
  line-height: 1.25;
}

.ImageUpload.state-disabled {
  --FormControl-message: var(--color-text-tretiary);
  cursor: default;
  opacity: 0.75;
}

.ImageUpload.state-disabled input {
    cursor: default;
  }

.TextArea textarea {
  width: 100%;
}

.Notification {
  padding: 0.5rem;
  display: flex;
  background: var(--color-elevated);
  border-radius: var(--element-bdrs);
  border: 1px solid var(--Notification-border, var(--color-border));
}

.Notification-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1em;
}
.Notification-content {
  flex: 1 1 auto;
  overflow: hidden;
}
.Notification-content {
  line-height: 1.25;
  align-self: center;
}
svg.Notification-icon {
  flex: 0 0 var(--element-size);
  width: var(--element-size);
  height: var(--element-size);
  align-self: center;
  padding: 0.6rem;
  margin-left: -0.5rem;
}
.Notification.theme-info {
  --Notification-border: var(--color-status-info);
  --color-icon: var(--color-status-info);
}
.Notification.theme-success {
  --Notification-border: var(--color-status-success);
  --color-icon: var(--color-status-success);
}
.Notification.theme-warning {
  --Notification-border: var(--color-status-warning);
  --color-icon: var(--color-status-warning);
}
.Notification.theme-error {
  --Notification-border: var(--color-status-error);
  --color-icon: var(--color-status-error);
}

.Select {
  --internal-spacing: 0.25rem;
  --spinner-size: calc(var(--element-size) * 0.75);
  position: relative;
}

.Select-control {
  text-transform: none;
  padding: 0 var(--element-padding);
  color: var(--Select-value-color, currentColor);
  background: var(--element-background, var(--color-elevated));
  border: 1px solid var(--element-border, var(--color-border));
  border-radius: var(--element-bdrs);
  font-size: var(--element-font-size, inherit);
  transition-property: color, background, border-color, box-shadow;
  transition-duration: var(--td);
  display: flex;
  align-items: center;
  padding-right: 0;
  min-height: var(--element-size);
}

.Select-holder {
  flex: 1;
  list-style: none;
  padding: 0;
}

.Select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Select:not(.is-multiple) .Select-value {
  width: 100%;
}

.Select.is-multiple .Select-holder {
  display: flex;
}

.Select.is-multiple .Select-value {
  border-radius: var(--element-bdrs);
  background: var(--color-secondary-lt);
  margin-left: var(--internal-spacing);
  padding: 0 var(--internal-spacing);
  color: var(--color-text-dark);
  cursor: pointer;
}

.Select-no-value {
  color: var(--color-text-tretiary);
  font-style: italic;
  -webkit-user-select: none;
          user-select: none;
}

.Select-pointer {
  --Select-pointer: calc(var(--element-size) * 0.6);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 var(--Select-pointer);
  width: var(--Select-pointer);
  height: var(--Select-pointer);
  padding: 0;
  margin: 0 calc(var(--element-size) * 0.2);
}

.Select-list {
  position: absolute;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  min-width: 100%;
  max-height: calc(var(--element-size) * 8);
  overflow-y: auto;
}

.Select-list[data-position~='bottom'] {
  top: 100%;
}

.Select-list[data-position~='top'] {
  bottom: 100%;
}

.Select-list[data-position~='right'] {
  right: 0;
}

.Select-list[data-position~='left'] {
  left: 0;
}

.Select-option {
  cursor: pointer;
  display: block;
  padding: calc(var(--element-padding) / 2) var(--element-padding);
  transition: background-color var(--td);
}

.Select-option:hover {
  background: var(--color-hover-tint);
}

.Select-option.is-selected {
  background: var(--color-secondary-ltr);
  color: var(--color-text-dark);
}

.Select.is-disabled {
  --Select-value-color: var(--color-text-tretiary);
  --FormControl-message: var(--color-text-tretiary);
  cursor: default;
  opacity: 0.75;
}

.Select.is-disabled .Select-pointer {
  cursor: default;
}

.Select .CircularProgress {
  width: 60%;
  height: 60%;
}

.Popup {
  --slideVert-start: 1rem;
  position: relative;
}

.Popup-content {
  animation:
    slideVert var(--appearAnimation-dur, var(--td)) ease-out,
    fadeIn calc(var(--appearAnimation-dur, var(--td)) * 0.75) ease-in;
  position: absolute;
  z-index: 10;
  right: 0;
}

.Popup[data-pos~='bottom'] .Popup-content {
  top: var(--Popup-offset-vert, 100%);
}
.Popup[data-pos~='top'] .Popup-content {
  bottom: var(--Popup-offset-vert, 100%);
}
.Popup[data-pos~='right'] .Popup-content {
  right: var(--Popup-offset-hor, 0);
}
.Popup[data-pos~='left'] .Popup-content {
  left: var(--Popup-offset-hor, 0);
}

.Dropdown .Select {
  min-width: 0;
  width: 100%;
}
.Dropdown .Select:not(:last-child) .Select-control {
  padding-left: var(--element-size);
}

.RowSelector {
  --color-icon: var(--color-text-light);
  --Button-hover: var(--color-elevated);
  --Button-bg: var(--color-elevated);
  width: var(--element-pointer-size);
  height: var(--element-pointer-size);
  border-radius: var(--element-bdrs);
  border: 1px solid var(--color-border);
  padding: 0;
}

.RowSelector .Icon {
  margin: 0;
  transform: scale(1.25, 1.25);
  opacity: 0;
  transition-property: visibility, transform, opacity;
  transition-duration: var(--td);
  visibility: hidden;
}

.RowSelector.state-selected {
  background: var(--color-accent);
  border-color: transparent;
}

.RowSelector.state-selected .Icon {
  opacity: 1;
  transform: scale(1, 1);
  visibility: visible;
}

.UserBadge .Image {
  --Image-fallback: var(--UserBadge-fallback);
  width: var(--element-size);
  float: left;
  background-color: var(--color-bevel);
  margin-right: 0.5rem;
  border-radius: 50%;
  width: 2rem;
}

.UserBadge-fullname,
.UserBadge-position {
  display: block;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.UserBadge-position {
  margin-top: 0.2em;
  font-size: 0.9em;
  color: var(--color-text-secondary);
}

@keyframes DataTableplaceholderAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

.DataTable {
  --grid-gap: 0.5rem;
}

.DataTable-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-weight: normal;
  font-size: 0.875em;
  background-color: var(--color-bevel);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.DataTable-header-cell {
  display: flex;
  align-items: center;
  width: 100%;
  font-weight: normal;
  -webkit-user-select: none;
          user-select: none;
}

.DataTable-header-cell > .Icon {
  margin-left: 0.5em;
  width: 1rem;
  height: 1rem;
}

.DataTable [aria-sort] {
  cursor: pointer;
}

.DataTable-list {
  padding: 0;
  list-style: none;
  margin: 0;
}

.DataTable-row {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  overflow: visible !important;
  align-items: center;
}

.DataTable-row.state-selected {
  background-color: var(--color-secondary-ltr);
}
.DataTable-row[tabindex] {
  cursor: pointer;
}
.DataTable-row[tabindex]:hover {
  background-color: var(--color-hover-tint);
}
.DataTable-row[tabindex]:after {
  content: '';
  display: block;
  border-radius: var(--element-bdrs);
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-focus);
  position: absolute;
  pointer-events: none;
  top: 3px;
  left: 3px;
  right: 12px;
  bottom: 3px;
  visibility: hidden;
}
.DataTable-row[tabindex]:focus:after {
  visibility: visible;
}

.DataTable-cell-actions {
  --element-size: 2rem;
}
.DataTable-cell-actions,
.DataTable-cell-selector {
  display: flex;
  align-items: center;
  justify-content: center;
}

.DataTable [role='gridcell'],
.DataTable [role='columnheader'] {
  margin: 0 var(--grid-gap);
  flex: var(--list-cell-flex, 0 0 auto);
  overflow: hidden;
}

.DataTable .RowSelector {
  margin: 4px 0;
}

.DataTable.has-actions [role='gridcell']:last-child,
.ReactVirtualized__Grid__innerScrollContainer {
  overflow: visible !important;
}

.DataTable.state-loading .DataTable-loading-placeholder {
  --placeholder-bg-size: 200%;
  padding: var(--grid-gap) 0;
  background: linear-gradient(
    var(--placeholder-gradient-angle, 90deg),
    var(--color-surface),
    hsla(var(--color-primary), 0.1),
    var(--color-surface)
  );
  background-clip: content-box;
  background-size: var(--placeholder-bg-size) var(--placeholder-bg-size);
  animation: DataTableplaceholderAnimation 2s linear infinite;
  animation-fill-mode: forwards;
}
.DataTable.state-loading [role='gridcell'] {
  position: relative;
  height: 100%;
  overflow: visible !important;
}
.DataTable.state-loading [role='gridcell']:before,
.DataTable.state-loading [role='gridcell']:after {
  display: block;
  content: '';
  height: 100%;
  width: var(--grid-gap);
  position: absolute;
  top: 0;
  background-color: var(--current-background-color, var(--color-surface));
}
.DataTable.state-loading [role='gridcell']:before {
  left: calc(var(--grid-gap) * -1);
}
.DataTable.state-loading [role='gridcell']:after {
  right: calc(var(--grid-gap) * -1);
}

.DataTable-no-data {
  text-align: center;
  font-size: var(--font-size-h3);
  line-height: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: var(--layout-gap-vertical) 0;
}

.DataTable-no-data-text {
  display: block;
  width: 100%;
  margin: -12% 0 12%;
  color: var(--color-text-secondary);
  position: relative;
  background-color: var(--current-background-color, var(--color-surface));
}
.DataTable-no-data .Image {
  margin: auto;
  width: 60%;
}

.Toggler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.Toggler-label {
  cursor: pointer;
  margin-left: var(--element-space);
  font-size: var(--base-font-size);
}
.Toggler-message {
  flex: 0 0 100%;
  min-height: var(--base-line);
  padding-top: 0.4rem;
  line-height: 1.25;
  font-size: var(--element-font-size);
  color: var(--FormControl-message, var(--color-text-secondary));
}
.Toggler input:disabled + label {
  cursor: default;
}

.Toggler.state-error {
  --element-border: var(--color-status-error);
  --FormControl-message: var(--color-status-error);
}

.TogglerGroup {
  list-style: none;
  margin: 0;
  padding: 0;
}

.Switcher-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Switcher-element {
  position: relative;
  width: calc(var(--element-pointer-size) * 2);
  height: var(--element-pointer-size);
  background-color: var(--color-elevated);
  border: 1px solid var(--theme-color-border, var(--color-border));
  border-radius: var(--element-pointer-size);
}
.Switcher-element:focus-within {
  text-decoration: none;
  outline: none;
  box-shadow: var(--shadow-focus);
}
.Switcher-point {
  --size: calc(var(--element-pointer-size) - 4px);
  display: block;
  position: absolute;
  left: 2px;
  top: 1px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: var(--color-icon);
  opacity: 0.5;
  transition-duration: var(--td);
  transition-property: transform, opacity, background-color;
}
.Switcher-message {
  min-height: var(--base-line);
  font-size: var(--element-font-size);
  color: var(--theme-color-message, var(--color-text-secondary));
}
.Switcher input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.Switcher input:checked + .Switcher-point {
  background-color: var(--color-accent);
  opacity: 1;
  transform: translate3d(calc(var(--element-pointer-size) - 2px), 0, 0);
}
.Switcher:not(.state-disabled) .Switcher-element:hover {
  border-color: var(--theme-color-border, var(--color-border-hover));
}
.Switcher.state-disabled {
  --FormControl-message: var(--color-text-tretiary);
  cursor: default;
  opacity: 0.75;
}
.Switcher.state-disabled input {
    cursor: default;
  }

.Fieldset {
  position: relative;
  border-radius: var(--element-bdrs);
  border: 1px solid var(--color-border);
  padding: calc(var(--element-size) + var(--layout-gap-vertical))
    var(--layout-gap-horizontal) var(--layout-gap-vertical);
}

.Fieldset legend {
  color: inherit;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: var(--font-family-headihg);
  font-size: var(--font-size-h4);
  line-height: var(--element-size);
  height: var(--element-size);
  text-indent: var(--layout-gap-horizontal);
  border-bottom: 1px solid var(--color-border);
}

.Tabs-menu {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
}
.Tabs-button {
  flex: 1 1 auto;
  background-color: transparent;
  height: 3rem;
  border-color: transparent;
}
.Tabs-button.state-active {
  position: relative;
  color: var(--color-accent);
}
.Tabs-button.state-active:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background-color: var(--color-accent);
}
.Tabs-container {
  position: relative;
  overflow: hidden;
}
.Tabs-item {
  will-change: opacity, transform;
}
.Tabs-item.fade-in {
  opacity: 0;
  animation: appearVert var(--td);
  animation-fill-mode: forwards;
}
.Tabs-item.slide-left,
.Tabs-item.slide-right {
  animation: slideHor var(--td);
  animation-fill-mode: forwards;
}
.Tabs-item.slide-left {
  --slideHor-start: -50%;
}
.Tabs-item.slide-right {
  --slideHor-start: 50%;
}


/*# sourceMappingURL=vendor-65a1ea9e.css.map*/