/*
Copyright (C) 2019 Apple Inc. All rights reserved.

 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions
 are met:
 1.  Redistributions of source code must retain the above copyright
     notice, this list of conditions and the following disclaimer.
 2.  Redistributions in binary form must reproduce the above copyright
     notice, this list of conditions and the following disclaimer in the
     documentation and/or other materials provided with the distribution.

 THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS "AS IS" AND
 ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS BE LIABLE FOR
 ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/* colors */
:root {
  --white: #fff;
  --blueDarker: #0262ca;
  --blueDark: #066ee0;
  --blue: #0070c9;
  --blueLight: #36C5F0;
  --blueLighter: #9dccfe;
  --blueLightest: #f5f9fe;
  --blueHighLight: #aed4fd;
  --greenDarker: #43c359;
  --greenDark: #3dce56;
  --green: #4cd964;
  --greenLight: #79df8f;
  --greenLighter: #bcefc7;
  --greenLightest: #f8fdf9;
  --orangeDarker: #d77900;
  --orangeDark: #e68200;
  --orange: #ff9500;
  --orangeLight: #f7ad45;
  --orangeLighter: #fbd6a2;
  --orangeLightest: #fefaf5;
  --redDarker: #dc3229;
  --redDark: #f32d22;
  --red: #ff3b30;
  --redLight: #fc6e61;
  --redLighter: #fdb6b0;
  --redLightest: #fef7f7;
  --purpleDarker: #884ac5;
  --purpleDark: #9748e4;
  --purple: #a45aec;
  --purpleLight: #b375eb;
  --purpleLighter: #d9baf5;
  --purpleLightest: #fbf8fe;
  --greyDarker: #6d727c;
  --greyDark: #a4aaad;
  --grey: #c1c4c6;
  --greyLight: #d4d7d9;
  --greyLighter: #f0f1f1;
  --greyLightest: #f9fafa;
  --blackDarker: #232323;
  --blackDark: #363636;
  --black: #484848;
  --mainBodyType: var(--black);
  --headerType: var(--grey);
  --labelType: var(--black);
  --messageFailureType: #b4251e;
  --messageInfoType: #6e35a7;
  --messageSuccessType: #33a046;
  --messageWarningType: #a45c00;
  --blurBackgroundColor: rgba(255,255,255,0.74902);
  --blurBackgroundColorGrey: rgba(245,245,245,0.74902);
  --blurBackgroundColorDark: rgba(22,22,22, 0.74902);
  --linkColor: var(--blue);
  --linkColorDarker: #0062cc;
  --borderColorSubtle: var(--greyLightest);
  --borderColorInlineElement: var(--greyLighter);
  --borderColorSection: var(--greyLight);
  --borderColorHard: var(--grey);
  --tinySize: 10px;
  --smallSize: 18px;
  --mediumSize: 24px;
  --largeSize: 28px;
  --hugeSize: 36px;
  --fontWeight: 200;
  --contentPaddingSize: 4px;
  --colPaddingSize: 4px;
  --sectionPaddingSize: 12px 24px;
  --formLabelPadding: 14px;
  --middleZIndex: 50;
  --topZIndex: 100;
  --inverseColor: var(--black);
}

@media screen and (min-width: 600px) {
  :root {
    --tinySize: 11px;
    --fontWeight: 200;
    --contentPaddingSize: 20px;
    --colPaddingSize: 6px;
    --sectionPaddingSize: 16px 32px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --tinySize: 12px;
    --fontWeight: 100;
    --contentPaddingSize: 40px;
    --colPaddingSize: 8px;
    --sectionPaddingSize: 19px 38px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --mainBodyType: var(--black);
    --headerType: var(--blackDarker);
    --linkColor: var(--blueLighter);
    --borderColorSubtle: var(--black);
    --borderColorInlineElement: var(--greyDarker);
    --borderColorSection: var(--blackDark);
    --borderColorHard: var(--blackDarker);
    --inverseColor: var(--white);
  }
}


/* animations */

@keyframes blink-background {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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


/* basics */
body {
  margin: 0;
  padding: 0;
  text-align: start;
  text-rendering: optimizeLegibility;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  letter-spacing: normal;
  line-break: auto;
  font-weight: var(--fontWeight);
  background-color: var(--greyLightest);
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--blackDarker);
    color: var(--greyLightest);
  }
}

h1, h2, h3, h4, h5, h6, p, span, pre {
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
  font-weight: var(--fontWeight);
}

a {
  color: var(--linkColor);
}

a:link, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

.divider, hr {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--borderColorSection);
  color: var(--borderColorSection);
  background-color: var(--borderColorSection);
  width: 100%;
}

.header, .topbar {
  margin: 0;
  margin-bottom: 18px;
  border: 1px solid var(--headerType);
  display: flex;
  flex-direction: column;
}

.header>.title, .topbar>.title {
  padding: 12px;
  padding-left: var(--contentPaddingSize);
  font-size: var(--largeSize);
  font-weight: 400;
  flex: auto;
  overflow: hidden;
}

.header>.title>.logo, .topbar>.title>.logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.header>.title>.logo>img, .topbar>.title>.logo>img {
  padding: 0;
  margin: 0;
  height: var(--hugeSize);
  vertical-align: middle;
}

.header>.actions, .topbar>.actions {
  flex: initial;
  vertical-align: baseline;
  border-top: 1px solid  var(--borderColorSection);
  padding: 12px;
  padding-left: 29px;
  box-sizing: border-box;
}

.header>.actions>.list, .topbar>.actions>.list {
  display: flex;
  flex-direction: row;
  border: none;
  height: 100%;
  align-items: center;
}

.header>.actions>.list>.item, .topbar>.actions>.list>.item {
  border: none;
  display: flex;
  padding: 0 var(--colPaddingSize);
  align-self: center;
}

.header>.actions>.list>.item *, .topbar>.actions>.list>.item * {
  align-self: center;
}

.header.fixed,.topbar.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--blurBackgroundColor);
  margin-bottom: 0px;
  z-index: 12345;
  -webkit-backdrop-filter: blur(3px);
  min-height: calc(var(--largeSize) * 1.3 + 12px * 2);
}

.header.fixed>.actions, .topbar.fixed>.actions {
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(3px);
}

.header.fixed+.content, .topbar.fixed+.content {
  margin-top: 130px;
}

@media (prefers-color-scheme: dark) {
  .header.fixed, .topbar.fixed {
    background-color: var(--blurBackgroundColorDark);
    -webkit-backdrop-filter: blur(3px) brightness(150%);
  }

  .header.fixed>.actions, .topbar.fixed>.actions {
    background: none;
  }
}

@media screen and (min-width: 600px) {
  .header, .topbar {
    flex-direction: row;
  }

  .header>.actions, .topbar>.actions {
    border-top: none;
  }

  .header.fixed+.content, .topbar.fixed+.content {
    margin-top: 80px;
  }

  .header.fixed>.actions, .topbar.fixed>.actions {
    background: none;
  }
}

.content {
  padding: 0 var(--contentPaddingSize);
}

.row {
  display: flex;
  flex-direction: column;
}
/* size xs */
[class*="col-"] {
  width: 100%;
  padding: var(--colPaddingSize) 0;
}

[class*="input col-"] {
  padding: 0;
}

[class*="button col-"] {
  padding: 0;
}

/* size s */
@media screen and (min-width: 600px) {
  .row {
    display: flex;
    flex-direction: row;
  }

  .col-s-1 {
    width: 8.33%;
  }

  .col-s-2 {
    width: 16.66%;
  }

  .col-s-3 {
    width: 25%;
  }

  .col-s-4 {
    width: 33.33%;
  }

  .col-s-5 {
    width: 41.66%;
  }

  .col-s-6 {
    width: 50%;
  }

  .col-s-7 {
    width: 58.33%;
  }

  .col-s-8 {
    width: 66.66%;
  }

  .col-s-9 {
    width: 75%;
  }

  .col-s-10 {
    width: 83.33%;
  }

  .col-s-11 {
    width: 91.66%;
  }

  .col-s-12 {
    width: 100%;
  }
}

/* size m */
@media screen and (min-width: 768px) {
  .row {
    display: flex;
    flex-direction: row;
  }

  .col-1 {
    width: 8.33%;
  }

  .col-2 {
    width: 16.66%;
  }

  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.33%;
  }

  .col-5 {
    width: 41.66%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 58.33%;
  }

  .col-8 {
    width: 66.66%;
  }

  .col-9 {
    width: 75%;
  }

  .col-10 {
    width: 83.33%;
  }

  .col-11 {
    width: 91.66%;
  }

  .col-12 {
    width: 100%;
  }
}

.hide-for-xs {
  display: none;
}

.hide-for-s {
  display: none;
}

@media screen and (min-width: 600px) {
  .hide-for-xs {
    display: block;
  }

  .hide-for-s {
    display: none;
  }
}

/* text */
.text, body, div, p, span, li, a, h4 {
  font-family: -apple-system, system, HelveticaNeue, LucidaGrande;
  font-size: var(--smallSize);
  font-weight: var(--fontWeight);
  font-stretch: normal;
  font-style: normal;
  font-variant-caps: normal;
  line-height: 1.3;
}

xmp {
  margin: 0;
  padding: 0;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

pre {
  border: 1px solid var(--borderColorInlineElement);
  background-color: var(--greyLightest);
  font-size: calc(var(--tinySize) + 1px);
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  padding: 10px;
  margin: 0;
  color: var(--greyDarker);
  overflow: auto;
}

@media (prefers-color-scheme: dark) {
  pre {
    background-color: var(--black);
    color: var(--greyDark);
  }
}

.text.tiny, h5, .text.tiny  * {
  font-size: var(--tinySize);
}

.text.medium, h3, .text.medium  * {
  font-size: var(--mediumSize);
}

.text.large, h2, .text.large  * {
  font-size: var(--largeSize);
}

.text.huge, h1, .text.huge  * {
  font-size: var(--hugeSize);
}

.text.block {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.1;
}

.text.success, .text.success * {
  color: var(--greenDarker);
}

.text.failed, .text.failed * {
  color: var(--redDarker);
}

.text.error, .text.error * {
  color: var(--orangeDarker);
}


/* table */
.table {
  padding: 0;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  margin: 12px 0;
}

.table.full-width {
  width: 100%;
  overflow: auto;
}

.table.stripped>tbody>tr:nth-child(odd) {
  background-color: var(--greyLightest);
}

@media (prefers-color-scheme: dark) {
  .table.stripped>tbody>tr:nth-child(odd) {
    background-color: var(--black);
  }
}

.table>thead>tr {
  padding: 0;
}

.table>thead>tr>th {
  padding: 12px;
  border-bottom: 1px solid;
  border-color: var(--borderColorInlineElement);
  line-height: 1;
  font-weight: 100;
  text-align: left;
}

.table>tbody>tr>td {
  line-height: 1;
}

.table>tbody>tr>td {
  padding: 12px;
}

/* Dot */
.dot {
  display: inline-block;
  font-size: var(--tinySize);
  width: var(--mediumSize);
  height: var(--mediumSize);
  border-radius: var(--mediumSize);
  vertical-align: middle;
  text-align: center;
  padding: 0;
  margin: 0 8px;
  background-color: var(--greyDark);
  position: relative;
}

.dot.blink {
  -webkit-animation: blink-background 1s infinite;
  /* Safari 4+ */
  -moz-animation: blink-background 1s infinite;
  /* Fx 5+ */
  -o-animation: blink-background 1s infinite;
  /* Opera 12+ */
  animation: blink-background 1s infinite;
  /* IE 10+, Fx 29+ */;
}

.dot * {
  color: var(--greyLightest);
  line-height: 1;
}

.dot img, .dot .text {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  width: var(--smallSize);
  height: var(--smallSize);
  font-size: var(--smallSize);
  display: block;
}

.dot>img, .dot>.text{
  position: absolute;
  top: calc((var(--mediumSize) - var(--smallSize)) / 2);
  left: calc((var(--mediumSize) - var(--smallSize)) / 2);
}

.dot.tiny {
  font-size: calc(var(--tinySize) - 2px);
  width: var(--tinySize);
  height: var(--tinySize);
  border-radius: var(--tinySize);
}

.dot.tiny img, .dot.tiny .text {
  width: calc(var(--tinySize) - 2px);
  height: calc(var(--tinySize) - 2px);
  font-size: calc(var(--tinySize) - 2px);
}

.dot.tiny>img, .dot.tiny>.text {
  position: absolute;
  top: 1px;
  left: 1px;
}

.dot.small {
  font-size: var(--tinySize);
  width: var(--smallSize);
  height: var(--smallSize);
  border-radius: var(--smallSize);
}

.dot.small img, .dot.small .text {
  width: var(--tinySize);
  height: var(--tinySize);
  font-size: var(--tinySize);
} 

 .dot.small>img, .dot.small>.text {
  position: absolute;
  top: calc((var(--smallSize) - var(--tinySize)) / 2);
  left: calc((var(--smallSize) - var(--tinySize)) / 2);
}

.dot.medium {
  font-size: var(--smallSize)
  width: var(--mediumSize);
  height: var(--mediumSize);
  border-radius: var(--mediumSize);
}

.dot.medium img, .dot.medium .text{
  width: var(--smallSize);
  height: var(--smallSize);
  font-size: var(--smallSize)
}

.dot.medium>img, .dot.medium>.text{
  position: absolute;
  top: calc((var(--mediumSize) - var(--smallSize)) / 2);
  left: calc((var(--mediumSize) - var(--smallSize)) / 2);
}

.dot.large {
  font-size: var(--mediumSize);
  width: var(--largeSize);
  height: var(--largeSize);
  border-radius: var(--largeSize);
}

.dot.large img, .dot.large .text{
  width: var(--mediumSize);
  height: var(--mediumSize);
  font-size: var(--mediumSize);
}

.dot.large>img, .dot.large>.text{
  position: absolute;
  top: calc((var(--largeSize) - var(--mediumSize)) / 2);
  left: calc((var(--largeSize) - var(--mediumSize)) / 2);
}

.dot.success {
  background-color: var(--greenLight);
}

.dot.failed {
  background-color: var(--redLight);
}

.dot.image {
  background-color: var(--blueLight);
}

.dot.error {
  background-color: var(--orangeLight);
}

.dot.clickable {
  cursor: pointer;
  border: 1px solid var(--greyDark);
}

.dot.clickable:hover {
  border: 1px solid var(--greyDarker);
}

.dot.clickable:focus-within {
  border: none;
  background-color: var(--greyDarker);
}

.dot.clickable.success {
  border: 1px solid var(--greenLight);
}

.dot.clickable.success:hover {
  border: 1px solid var(--greenDark);
}

.dot.clickable.success:focus-within {
  border: none;
  background-color: var(--greenDark);
}

.dot.clickable.error {
  border: 1px solid var(--orangeLight);
}

.dot.clickable.error:hover {
  border: 1px solid var(--orangeDark);
}

.dot.clickable.error:focus-within {
  border: none;
  background-color: var(--orangeDark);
}

.dot.clickable.failed {
  border: 1px solid var(--redLight);
}

.dot.clickable.failed:hover {
  border: 1px solid var(--redDark);
}

.dot.clickable.failed:focus-within {
  border: none;
  background-color: var(--redDark);
}

.dot.selector {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: none;
  border: none;
  width: auto;
  height: auto;
  margin: auto;
}

.dot.selector input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.dot.selector label {
  margin: 0px;
  padding: 2px;
  display: flex;
}

.dot.selector .dot {
  margin: 0px;
  padding: 0px;
}

.dot.selector input:checked + .dot {
  box-shadow: 0px 0px 5px 1px var(--grey);
}

.dot.selector input:checked + .dot.success {
  box-shadow: 0px 0px 5px 1px var(--greenLight);
}

.dot.selector input:checked + .dot.failed {
  box-shadow: 0px 0px 5px 1px var(--redLight);
}

.dot.selector input:checked + .dot.image {
  box-shadow: 0px 0px 5px 1px var(--blueLight);
}

.dot.selector input:checked + .dot.error {
  box-shadow: 0px 0px 5px 1px var(--orangeLight);
}

/* icon */
.icon {
  display: inline-block;
  width: var(--mediumSize);
  height: var(--mediumSize);
  vertical-align: middle;
}

.icon.tiny {
  width: var(--tinySize);
  height: var(--tinySize);
}

.icon.small {
  width: var(--smallSize);
  height: var(--smallSize);
}

.icon.large {
  width: var(--largeSize);
  height: var(--largeSize);
}

.icon.huge {
  width: var(--hugeSize);
  height: var(--hugeSize);
}

/* section */
.section {
  display: block;
  border: 1px;
  border-style: solid;
  border-color: var(--borderColorSection);
  border-radius: 11px;
  margin-bottom: 15px;
  background-color: var(--white);
}

@media (prefers-color-scheme: dark) {
  .section .section {
    border-color: var(--greyDarker);
  }
}

@media (prefers-color-scheme: dark) {
  .section {
    background-color: var(--blackDark);
  }
}

.section.article {
  border: none;
  margin-bottom: 0;
}

.section>.header {
  display: flex;
  flex-direction: column;
  border: none;
  margin-bottom: 0px;
}

.section>.header>.title {
  padding: var(--sectionPaddingSize);
  font-size: var(--mediumSize);
  flex: auto;
  padding-bottom: 0;
}

.section>.header>.title.small {
  font-size: var(--smallSize);
}

.section>.content {
  padding: var(--sectionPaddingSize);
}

.section>.content>.list {
  width: 100%;
}

.section>.actions {
  padding: var(--sectionPaddingSize);
  padding-top: 0;
  width: 100%;
}

@media screen and (min-width: 600px) {
  .section>.header {
    flex-direction: row;
  }
}

/* list */
.list {
  /*border-top: 1px solid var(--borderColorSection);*/;
}

.list>.item {
  /*border-bottom: 1px solid var(--borderColorSection);*/
  padding: var(--colPaddingSize);
}

.list>.item.sub {
  color: var(--greyDarker);
  font-size: calc(var(--smallSize) - 2px);
}

.list>.item>.list {
  padding-left: var(--colPaddingSize);
}

/* sidebar */
.sidebar {
  display: none;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--blurBackgroundColor);
  position: fixed;
  border-right: 1px solid var(--borderColorSection);
  overflow-y: auto;
  min-width: 250px;
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(5px) brightness(88%);
  backdrop-filter: blur(5px) brightness(88%);
  z-index: var(--middleZIndex);
  right: 0;
}
.sidebar.hidden {
  display: none;
}

.sidebar>.header {
  margin-bottom: 0;
  background-color: var(--white);
  border: none;
  border-bottom: 1px solid var(--borderColorSection);
}

.sidebar>.header>.title {
  padding-left: var(--colPaddingSize);
}

@media (prefers-color-scheme: dark) {
  .sidebar {
    background-color: var(--blurBackgroundColorDark);
  }

  .sidebar>.header {
    background-color: var(--black);
  }
}

.sidebar.under-topbar {
  height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
}

.sidebar.under-topbar-with-actions {
  height: calc(100% - 12px * 2  - var(--largeSize) * 1.3 - var(--smallSize) * 1.3 - 12px * 2 );
  bottom: 0;
}

.main {
  margin: auto;
  height: 100%;
  overflow: auto;
}

.main.under-topbar-with-actions {
  margin-top: calc(12px * 2  + var(--largeSize) * 1.3 + var(--smallSize) * 1.3 + 12px * 2);
}

.sidebar.right {
  left: unset;
  right: 0;
}

.sidebar>.list {
  width: 100%;
}

.sidebar.content {
  width: 100%;
}

.sidebar.toggle {
  display: block;
}

.sidebar>.bottom-nav {
  position: absolute;
}

/* bottom nav*/
.bottom-nav {
  display: flex;
  flex-direction: row;
  background: var(--greyLight);
}

.bottom-nav>.item {
  align-self: center;
}

/*chip*/
.chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--borderColorInlineElement);
  border-radius: 50px;
  margin: 5px;
  font-size: var(--tinySize);
}

.chip .dot {
  margin-left: 0;
}

.chip  * {
  font-size: var(--tinySize);
}

.chip.outline {
  border: 1px solid var(--borderColorHard);
}

.chip.narrow {
  padding: 1px 8px;
  margin: 1px;
}

.chip.narrow * {
  font-size: calc(var(--tinySize) - 4px);
}

.chip.success, .chip.success * {
  color: var(--greenDarker);
  border-color: var(--greenDarker);
}

.chip.failed, .chip.failed * {
  color: var(--redDarker);
  border-color: var(--redDarker);
}

.chip.error, .chip.error * {
  color: var(--orangeDarker);
  border-color: var(--orangeDarker);
}

/*badge*/
.badge {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--borderColorInlineElement);
  margin: 5px;
}

.badge.outline {
  border-color: var(--borderColorHard);
}

.badge.active {
  border-color: var(--blue);
}

.badge.outline.active {
  border-color: var(--blueDarker);
}

.badge[onclick] {
  cursor: pointer;
}

.badge.clickable {
  cursor: pointer;
}

.badge.clickable:hover {
  border-color: var(--blueLighter);
}


/*placeholder*/
.placeholder {
  width: 100%;
  min-height: 200px;
  text-align: center;
  display: flex;
}

.placeholder .loader {
  align-self: center;
  margin: auto;
}

.placeholder.dimmer {
  background: var(--greyLighter);
}

@media (prefers-color-scheme: dark) {
  .placeholder.dimmer {
    background-color: var(--blackDarker);
  }
}

.placeholder.small {
  min-height: 100px;
}

.placeholder.tiny {
  min-height: 50px;
}

/*loader*/
.loader {
  text-align: center;
}

.loader>.text {
  text-align: center;
}

.spinner {
  width: var(--mediumSize);
  height: var(--mediumSize);
  border: 4px solid var(--greyLight);
  border-top: 4px solid var(--black);
  border-radius: 50%;
  animation: spin .5s linear infinite;
  display: inline-block;
}

.spinner.tiny {
  width: var(--tinySize);
  height: var(--tinySize);
}

.spinner.small {
  width: var(--smallSize);
  height: var(--smallSize);
}

.spinner.large {
  width: var(--largeSize);
  height: var(--largeSize);
}

.spinner.huge {
  width: var(--hugeSize);
  height: var(--hugeSize);
}

.spinner.blue {
  border: 4px solid var(--blueLightest);
  border-top: 4px solid var(--blue);
}

.spinner.green {
  border: 4px solid var(--greenLightest);
  border-top: 4px solid var(--green);
}

.spinner.red {
  border: 4px solid var(--redLightest);
  border-top: 4px solid var(--red);
}

.spinner.orange {
  border: 4px solid var(--orangeLightest);
  border-top: 4px solid var(--orange);
}

.spinner.purple {
  border: 4px solid var(--purpleLightest);
  border-top: 4px solid var(--purple);
}


/*button*/
.button {
  display: inline-block;
  border: 1px solid var(--greyLight);
  font-size: calc(var(--smallSize) - 2px);
  background: none;
  padding: 4px var(--formLabelPadding);
  border-radius: 4px;
  font-weight: var(--fontWeight);
  vertical-align: bottom;
}

.button[disabled] {
  border-color: var(--greyLightest);
  background: var(--white);
  color: var(--greyLight);
}

.button:hover {
  border-color: var(--greyDarker);
}

.button[disabled]:hover {
  border-color: var(--greyLightest);
  background: var(--white);
  color: var(--greyLight);
}

.button:active {
  border-color: var(--greyDark);
  background: var(--greyLightest);
  color: var(--greyDark);
}

.button[disabled]:active {
  border-color: var(--greyLightest);
  background: var(--white);
  color: var(--greyLight);
}

.button.primary {
  border-color: var(--blueDark);
  background-color: var(--blue);
  color: var(--white);
}

.button[disabled].primary {
  border-color: var(--blueLightest);
  background-color: var(--blueLighter);
  color: var(--white);
}

.button.primary:hover {
  border-color: var(--blueDarker);
  background-color: var(--blueLight);
}

.button[disabled].primary:hover {
  border-color: var(--blueLightest);
  background-color: var(--blueLighter);
  color: var(--white);
}

.button.primary:active {
  border-color: var(--blueDarker);
  background-color: var(--blueDark);
}

.button[disabled].primary:active {
  border-color: var(--blueLightest);
  background-color: var(--blueLighter);
  color: var(--white);
}

.button.danger {
  border-color: var(--redDark);
  background-color: var(--red);
  color: var(--white);
}

.button[disabled].danger {
  border-color: var(--redLightest);
  background-color: var(--redLighter);
  color: var(--white);
}

.button.danger:hover {
  border-color: var(--redDarker);
  background-color: var(--redLight);
}

.button[disabled].danger:hover {
  border-color: var(--redLightest);
  background-color: var(--redLighter);
  color: var(--white);
}

.button.danger:active {
  border-color: var(--redDarker);
  background-color: var(--redDark);
}

.button[disabled].danger:active {
  border-color: var(--redLightest);
  background-color: var(--redLighter);
  color: var(--white);
}

.button.tiny {
  font-size: var(--tinySize);
  padding: 3px 8px;
}

.button.medium {
  font-size: calc(var(--mediumSize) - 2px);
  padding: 5px 17px;
}

.button.large {
  font-size: calc(var(--largeSize) - 2px);
  padding: 7px 19px;
}

.button.huge {
  font-size: calc(var(--hugeSize) - 2px);
  padding: 9px 21px;
}

@media (prefers-color-scheme: dark) {
  .button {
    color: var(--grey);
  }

  .button[disabled] {
    color: var(--greyDarker);
    border-color: var(--greyDarker);
    background: none;
  }

  .button[disabled]:hover {
    color: var(--greyDarker);
    border-color: var(--greyDarker);
    background: none;
  }

  .button[disabled].primary {
    border-color: var(--blueDarker);
    background-color: var(--blueDarker);
    color: var(--greyDarker);
    opacity: 0.7;
  }

  .button[disabled].primary:hover {
    border-color: var(--blueDarker);
    background-color: var(--blueDarker);
    color: var(--greyDarker);
    opacity: 0.7;
  }

  .button[disabled].danger {
    border-color: var(--redDarker);
    color: var(--greyDarker);
    background-color: var(--redDarker);
    opacity: 0.7;
  }

  .button[disabled].danger:hover {
    border-color: var(--redDarker);
    color: var(--greyDarker);
    background-color: var(--redDarker);
    opacity: 0.7;
  }
}

/*switch*/
.switch {
  position: relative;
  display: inline-block;
  width: calc(var(--smallSize) * 2);
  height: calc(var(--smallSize) + 4px);
  flex: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
  border: 1.5px solid var(--greyLight);
  padding: 0;
  margin: 0;
}

.slider::before {
  position: absolute;
  content: "";
  height: calc(var(--smallSize) + 1px);
  width: calc(var(--smallSize) + 1px);
  left: -1px;
  bottom: -0.25px;
  background-color: var(--white);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
  border: 1px solid var(--greyLight);
  box-shadow: 0.5px 2px 5px 0px var(--grey);
}

@media (prefers-color-scheme: dark) {
  .slider {
    background-color: var(--black);
    border: 1.5px solid var(--blackDark);
  }

  .slider::before {
    background-color: var(--black);
    border: 1.5px solid var(--blackDark);
    box-shadow: 0.5px 2px 5px 0px var(--blackDarker);
  }
}

.switch input:checked + .slider {
  background-color: var(--green);
  border: 1px solid var(--green);
}

.switch  input:focus + .slider {
  border: 1px solid var(--green);
}

.switch  input:checked + .slider:before {
  transform: translateX(calc(var(--smallSize) - 4px));
  bottom: -0.5px;
}


/*popover*/
.popover {
  position: absolute;
  display: none;
}

.popover>.content{
  max-width: 200px;
  padding: var(--tinySize); 
  font-size: var(--tinySize);
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(5px) brightness(100%);
  backdrop-filter: blur(5px) brightness(100%);
}

.popover.display {
  box-shadow: 0px 0px 5px 1px var(--grey);
  display: block;
}

.popover .arrow {
  position: absolute;
  width: var(--tinySize); 
  height: var(--tinySize);
  content: '';
  box-shadow: 0px 0px 5px 1px var(--black);
  transform: rotate(45deg);
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(5px) brightness(100%);
  backdrop-filter: blur(5px) brightness(100%);
}


.popover .arrow.point-top {
  top: calc(0px - var(--tinySize) / 2);
}

.popover .arrow.point-bottom {
  bottom: calc(0px - var(--tinySize) / 2);
}

.popover .arrow.point-left {
  left: calc(0px - var(--tinySize) / 2);
}

.popover .arrow.point-right {
  right: calc(0px - var(--tinySize) / 2);
}


@media (prefers-color-scheme: dark) {
  .popover>.content {
    background-color: var(--blurBackgroundColorDark);
  }

  .popover.display {
    box-shadow: 0px 0px 5px 1px var(--black);
  }

  .popover .arrow {
    background-color: var(--blurBackgroundColorDark);
  }
}


/* drawer */
.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  transition: height .5s;
  width: 100%;
  height: 0%;
  overflow: auto;
  border-top: 1px solid var(--blurBackgroundColor);
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(5px) brightness(88%);
  backdrop-filter: blur(5px) brightness(88%);
  box-sizing: border-box;
  z-index: var(--topZIndex);
}

.drawer.display {
  min-height: 250px;
  height: 30%;
  box-shadow: 0px 0px 5px 1px var(--grey);
}

@media (prefers-color-scheme: dark) {
  .drawer {
    background-color: var(--blurBackgroundColorDark);
    border-color: var(--blurBackgroundColorDark);
    -webkit-backdrop-filter: blur(5px) brightness(150%);
    backdrop-filter: blur(5px) brightness(150%);
  }

  .drawer.display {
    box-shadow: 0px 0px 5px 1px var(--black);
  }
}

.drawer.left {
  left: 0;
  width: 0%;
  height: 100%;
  transition: width .5s;
  border: none;
  border-right: 1px solid var(--blurBackgroundColor);
}

@media (prefers-color-scheme: dark) {
  .drawer.left {
    border-right: 1px solid var(--blurBackgroundColorDark);
  }
}

.drawer.left.display {
  width: 45%;
}

.drawer.right {
  right: 0;
  bottom: 0;
  left: auto;
  width: 0%;
  height: 100%;
  transition: width .5s;
  border: none;
  border-left: 1px solid var(--blurBackgroundColor);
}

@media (prefers-color-scheme: dark) {
  .drawer.right {
    border-left: 1px solid var(--blurBackgroundColorDark);
  }
}

.drawer.right.display {
  width: 45%;
}

.drawer.left.under-topbar, .drawer.right.under-topbar {
  height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
}

.drawer.left.under-topbar-with-actions, .drawer.right.under-topbar-with-actions {
  height: calc(100% - 12px * 2  - var(--largeSize) * 1.3 - var(--smallSize) * 1.3 - 12px * 2 );
}

@media screen and (min-width: 600px) {
  .drawer.left.display, .drawer.right.display {
    width: 20%;
  }

  .drawer.left.under-topbar-with-actions, .drawer.right.under-topbar-with-actions {
    height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
  }
}

.drawer .header {
  border: none;
  margin-bottom: 5px;
}

.drawer .header>.title.small {
  font-size: var(--smallSize);
  padding-left: 0;
}

.drawer .badge {
  border-color: var(--greyLight);
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(0.5px);
}

.drawer .chip {
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(0.5px);
}

.drawer pre {
  background-color: var(--blurBackgroundColor);
  -webkit-backdrop-filter: blur(0.5px);
}

.drawer .badge.active {
  border-color: var(--blueLight);
}

@media (prefers-color-scheme: dark) {
  .drawer .badge {
    background-color: var(--blurBackgroundColorDark);
    -webkit-backdrop-filter: blur(5px) brightness(150%);
    backdrop-filter: blur(5px) brightness(150%);
  }

  .drawer .chip {
    background-color: var(--blurBackgroundColorDark);
    -webkit-backdrop-filter: blur(5px) brightness(150%);
    backdrop-filter: blur(5px) brightness(150%);
  }

  .drawer pre {
    background-color: var(--blurBackgroundColorDark);
    -webkit-backdrop-filter: blur(5px) brightness(150%);
    backdrop-filter: blur(5px) brightness(150%);
  }
}

.drawer>.close-header {
  width: 100%;
  display: flex;
  position: fixed;
  text-align: center;
}

.drawer>.close-header>.list {
  width: 100%;
  flex-direction: column;
  height: 20px;
  padding: 0;
  margin: 0;
}

.drawer>.close-header>.list>.item {
  padding: 0;
  margin: 0;
  vertical-align: center;
}

.drawer>.close-header+.content {
  margin-top: 20px;
  height: calc(100% - 20px);
}

/* Tab */
.tabs {
  text-align: center;
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--greyLight);
  margin-bottom: 15px;
}

.tabs .tab:first-child {
  padding-left: 0px;
}

.tabs .title {
  color: var(--greyDarker);
  font-size: calc(var(--smallSize) + 2px);
}

.tabs .tab {
  padding-left: 60px;
}

.tabs .tab.active .link {
  border-bottom: 1px solid var(--linkColor);
  color: var(--linkColor);
}

.tabs .tab .link {
  padding-top: 2px;
  padding-bottom: 4px;
  display: block;
  font-size: calc(var(--smallSize) - 2px);
}

.tabs .tab a.link {
  color: var(--greyDarker);
  cursor: pointer;
}

.tabs .tab a.link:hover {
  color: var(--linkColor);
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .tabs .title {
    color: var(--grey);
    font-size: calc(var(--smallSize) + 2px);
  }

  .tabs .tab.active .link {
    border-bottom: 1px solid var(--grey);
  }

  .tabs .tab a.link {
    color: var(--grey);
  }
}

a.disabled {
  color: var(--grey);
  pointer-events: none; 
}

@media screen and (min-width: 600px) {
  .sidebar {
    display: block;
    width: 299px;
    left: 0;
    right: unset;
  }
  .sidebar.left.hidden {
    display: block;
    left: -249px;
  }
  .sidebar.right.hidden {
    display: block;
    right: -249px;
  }
  .sidebar.under-topbar-with-actions {
    height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
    bottom: 0;
  }

  .main {
    margin-left: 299px;
    width: calc(100% - 299px);
  }

  .main.right-sidebar {
    margin-left: 0px;
    margin-right: 299px;
  }
  .main.left-sidebar.hidden {
    margin-left: 50px;
    width: calc(100% - 50px);
  }
  .main.right-sidebar.hidden {
    margin-left: 0;
    margin-right: 50px;
    width: calc(100% - 50px);
  }

  .main.under-topbar-with-actions {
    margin-top: calc(12px * 2  + var(--largeSize) * 1.3);
  }
}

@media screen and (min-width: 768px) {
  .sidebar {
    display: block;
    width: 310px;
    left: 0;
    right: unset;
  }
  .sidebar.left.hidden {
    display: block;
    left: -260px;
  }
  .sidebar.right.hidden {
    display: block;
    right: -260px;
  }
  .sidebar.under-topbar-with-actions {
    height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
    bottom: 0;
  }

  .mobile-sidebar-control.display {
    display: none;
  }

  .main {
    margin-left: 310px;
    width: calc(100% - 310px);
  }

  .main.right-sidebar {
    margin-left: 0px;
    margin-right: 310px;
  }
}

/* timeline */
.timeline {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 2px 0;
}

.timeline.no-border {
  border: none;
}

.timeline>.content {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  flex: auto;
}

.timeline>.header {
  margin: 0;
  text-align: right;
  border: none;
  vertical-align: middle;
  display: block;
  padding-right: 10px;
  overflow: auto;
  position: relative;
  border-left: 1px solid var(--borderColorInlineElement);
  flex: none;
}

.timeline>.header .series {
  margin-left: 5px;
  display: block;
  vertical-align: middle;
  font-size: var(--tinySize);
  line-height: calc(var(--mediumSize) + var(--colPaddingSize));
  white-space: nowrap;
}
.timeline>.header .series * {
  line-height: calc(var(--mediumSize) + var(--colPaddingSize));
  font-size: var(--tinySize);
}
.timeline>.header .series a {
  line-height: calc(var(--mediumSize) + var(--colPaddingSize));
}

.timeline>.content .series {
  display: flex;
  white-space: nowrap;
  height: calc(var(--mediumSize) + var(--colPaddingSize));
  vertical-align: middle;
  align-items: center;
}

.timeline>.content .dot {
  vertical-align: middle;
  margin: 0 calc(var(--tinySize) / 2 );
  width: var(--smallSize);
  height: var(--smallSize);
  border-radius: var(--smallSize);
  display: flex;
  align-items: center;
  position: relative;
}

.timeline>.content .dot.clickable {
  border: none;
}

.timeline>.content .dot.clickable:hover {
  border: none;
}

.timeline>.content .dot.clickable:active {
  border: none;
}

.timeline>.content .dot .tag {
  font-size: calc(var(--tinySize) * 0.8);
  position: absolute;
  left: calc(0px - var(--tinySize) / 2);
  top: calc(var(--smallSize));
  height: var(--tinySize);
  line-height: 1;
  text-align: center;
  width: calc(var(--smallSize) + var(--tinySize));
  padding-top: 2px;
}

.timeline>.content .dot::before, .timeline>.content .dot::after {
  content: "";
  height: 1px;
  background: var(--borderColorInlineElement);
  width: calc(var(--tinySize) / 2 );
  display: inline-block;
  flex: none;
}

.timeline>.content .dot::before {
  margin-left: calc(0px - var(--tinySize) / 2);
}

.timeline>.content .dot::after {
  margin-left: calc(var(--smallSize));
}

.timeline>.content .dot.blink::before {
  animation: none;
}

.timeline>.content .dot.blink::after {
  animation: none;
}

.timeline>.content .dot.empty {
  height: 1px;
  background: var(--grey);
}

.timeline>.content .dot.empty::before {
  vertical-align: top;
}

.timeline>.content .dot.empty::after {
  vertical-align: top;
}

.timeline>.content .x-axis {
  display: flex;
  min-height: calc(var(--smallSize) * 4);
}

.timeline>.content>.x-axis .scale {
  font-size: var(--smallSize);
  width: calc(var(--smallSize) + var(--tinySize));
  text-align: center;
  border-top: 1px solid var(--borderColorInlineElement);
  flex: none;
  position: relative;
}

.timeline>.content>.x-axis .scale.group-2 {
  width: calc((var(--smallSize) + var(--tinySize)) * 2);
}

.timeline>.content>.x-axis .scale.group-3 {
  width: calc((var(--smallSize) + var(--tinySize)) * 3);
}

.timeline>.content>.x-axis .scale.group-4 {
  width: calc((var(--smallSize) + var(--tinySize)) * 4);
}

.timeline>.content>.x-axis .scale.group-5 {
  width: calc((var(--smallSize) + var(--tinySize)) * 5);
}

.timeline>.content>.x-axis .scale.group-6 {
  width: calc((var(--smallSize) + var(--tinySize)) * 6);
}

.timeline>.content>.x-axis .scale.group-7 {
  width: calc((var(--smallSize) + var(--tinySize)) * 7);
}

.timeline>.content>.x-axis .scale.group-8 {
  width: calc((var(--smallSize) + var(--tinySize)) * 8);
}

.timeline>.content>.x-axis .scale.group-9 {
  width: calc((var(--smallSize) + var(--tinySize)) * 9);
}

.timeline>.content>.x-axis .scale.group-10 {
  width: calc((var(--smallSize) + var(--tinySize)) * 10);
}

.timeline>.content>.x-axis .scale.group-11 {
  width: calc((var(--smallSize) + var(--tinySize)) * 11);
}

.timeline>.content>.x-axis .scale.group-12 {
  width: calc((var(--smallSize) + var(--tinySize)) * 12);
}

.timeline>.content>.x-axis .scale.group-13 {
  width: calc((var(--smallSize) + var(--tinySize)) * 13);
}

.timeline>.content>.x-axis .scale.group-14 {
  width: calc((var(--smallSize) + var(--tinySize)) * 14);
}

.timeline>.content>.x-axis .scale.group-15 {
  width: calc((var(--smallSize) + var(--tinySize)) * 15);
}

.timeline>.content>.x-axis .scale.group-16 {
  width: calc((var(--smallSize) + var(--tinySize)) * 16);
}

.timeline>.content>.x-axis .scale.group-17 {
  width: calc((var(--smallSize) + var(--tinySize)) * 17);
}

.timeline>.content>.x-axis .scale.group-18 {
  width: calc((var(--smallSize) + var(--tinySize)) * 18);
}

.timeline>.content>.x-axis .scale.group-19 {
  width: calc((var(--smallSize) + var(--tinySize)) * 19);
}

.timeline>.content>.x-axis .scale.group-20 {
  width: calc((var(--smallSize) + var(--tinySize)) * 20);
}

.timeline>.content>.x-axis .scale[class*="group-"] {
  border-color: var(--black);
}

.timeline>.content>.x-axis .scale .line {
  width: 2px;
  height: var(--tinySize);
  margin: auto;
  display: block;
  background: var(--grey);
}

.timeline>.content>.x-axis .scale .text {
  position: relative;
  left: calc(var(--tinySize) / 2);
  font-size: var(--tinySize);
  min-height: calc(var(--smallSize) * 4);
  display: block;
  -webkit-transform-origin: 10% 25%;
  -moz-transform-origin: 10% 25%;
  -ms-transform-origin: 10% 25%;
  -o-transform-origin: 10% 25%;
  transform-origin: 10% 25%;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
  white-space: nowrap;
}

.timeline>.content>.x-axis.scale-90deg .scale .text {
  -webkit-transform-origin: 0% 25%;
  -moz-transform-origin: 0% 25%;
  -ms-transform-origin: 0% 25%;
  -o-transform-origin: 0% 25%;
  transform-origin: 0% 25%;
  top: -12px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.timeline>.content>.x-axis .scale[class*="group-"] .border-line-left {
  position: absolute;
  top: calc(0px - var(--tinySize) / 2);
  left: 0;
  height: calc(var(--tinySize) / 2);
  width: 2px;
  background: var(--black);
}

.timeline>.content>.x-axis .scale[class*="group-"] .border-line-right {
  position: absolute;
  top: calc(0px - var(--tinySize) / 2);
  right: 0;
  height: calc(var(--tinySize) / 2);
  width: 2px;
  background: var(--black);
}

.timeline>.content>.x-axis .scale[class*="group-"] .line {
  background: var(--black);
}

.timeline>.content>.x-axis .scale[class*="group-"] .text {
  min-height: calc(var(--smallSize));
  position: absolute;
  left: 50%;
  top: calc(8px + var(--tinySize));
}

.timeline>.content>.x-axis.scale-90deg .scale[class*="group-"] .text {
  top: calc(4px + var(--tinySize));
}

.timeline>.content>.x-axis.top .scale {
  border: none;
  border-bottom: 1px solid var(--borderColorInlineElement);
}

.timeline>.content>.x-axis.top .scale[class*="group-"]{
  border-color: var(--black);
}

.timeline>.content>.x-axis.top .scale .line {
  width: 2px;
  height: var(--tinySize);
  left: 50%;
  bottom: 0;
  display: block;
  background: var(--grey);
  position: absolute;
}

.timeline>.content>.x-axis.top .scale[class*="group-"] .line {
  background: var(--black);
}

.timeline>.content>.x-axis.top .scale .text {
  left: calc(var(--tinySize) * 2);
  min-height: calc(var(--smallSize) * 4);
  top: calc(var(--smallSize) * 2);
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
  white-space: nowrap;
}

.timeline>.content>.x-axis.top .scale[class*="group-"] .border-line-left {
  top: auto;
  bottom: calc(0px - var(--tinySize) / 2);
}

.timeline>.content>.x-axis.top .scale[class*="group-"] .border-line-right {
  top: auto;
  bottom: calc(0px - var(--tinySize) / 2);
}

.timeline>.content>.x-axis.top .scale[class*="group-"] .text {
  left: 54%;
}

.timeline>.header.with-top-x-axis {
  padding-top: calc(var(--smallSize) * 4);
}

.timeline>.content>.x-axis .scale .text a {
  font-size: var(--tinySize);
}

.legend, .timeline>.content .legend{
  display: flex;
  flex-direction: row;
}

.legend.horizontal, .timeline>.header .legend {
  display: flex;
  flex-direction: column;
}

.legend>.item {
  font-size: var(--tinySize);
  text-align: left;
  margin: 4px;
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.legend>.item .dot{
  width: var(--smallSize);
  height: var(--smallSize);
  border-radius: var(--smallSize);
  font-size: calc(var(--tinySize));
  text-align: center;
  flex: none;
  vertical-align: middle;
  align-items: center;
  display: flex;
  margin: 0 var(--tinySize);
  position: relative;
}
.legend>.item .dot img, .legend>.item .dot .text {
  width: var(--tinySize);
  height: var(--tinySize);
  font-size: var(--tinySize);
} 
.legend>.item .dot>img, .legend>.item .dot>.text {
  position: absolute;
  top: calc((var(--smallSize) - var(--tinySize)) / 2);
  left: calc((var(--smallSize) - var(--tinySize)) / 2);
}
.timeline.legend>.item .dot::before{
  left: calc(0px - var(--tinySize));
  width: var(--tinySize);
  content: "";
  height: 1px;
  background: var(--borderColorInlineElement);
  display: inline-block;
  flex: none;
  position: absolute;
}
.timeline.legend>.item .dot::after{
  right: calc(0px - var(--tinySize));
  width: var(--tinySize);
  content: "";
  height: 1px;
  background: var(--borderColorInlineElement);
  display: inline-block;
  flex: none;
  position: absolute;
}
.legend>.item .label{
  font-size: var(--tinySize);
  padding: 0 4px;
}

@media (prefers-color-scheme: dark) {

  .timeline>.content>.x-axis .scale[class*="group-"] {
    border-color: var(--white);
  }

  .timeline>.content>.x-axis .scale[class*="group-"] .border-line-left {
    background: var(--white);
  }

  .timeline>.content>.x-axis .scale[class*="group-"] .border-line-right {
    background: var(--white);
  }

  .timeline>.content>.x-axis .scale[class*="group-"] .line {
    background: var(--white);
  }

  .timeline>.content>.x-axis.top .scale[class*="group-"] .line {
    background: var(--white);
  }

  .timeline>.content>.x-axis.top .scale[class*="group-"]{
    border-color: var(--white);
  }
}

/* form and input*/
.input {
  margin: var(--colPaddingSize);
  margin-left: 0;
  position: relative;
  display: flex;
  align-items: center;
}

select, input {
  font-weight: calc(2.5 * var(--fontWeight));
}

.row .input {
  margin: 0;
  margin-right: var(--colPaddingSize);
}

.input>label {
  margin: 0;
  margin-left: var(--formLabelPadding);
  font-color: var(--inverseColor);
}

.input>label.switch {
  flex: none;
  position: absolute;
  right: 0;
}

.input>input, .input>select {
  width: 100%;
  margin: 0;
}

.input>.prefix {
  width: calc(var(--mediumSize) * 3);
  background: var(--greyLightest);
  position: absolute;
  left: 0;
  height: 100%;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: center;
  border: 1px solid var(--grey);
  box-sizing: border-box;
}

.input>.prefix * {
  text-align: center;
  width: 100%;
}

.input>.prefix~label {
  margin-left: calc(var(--formLabelPadding) + var(--mediumSize) * 3);
}

.input>.prefix.invalid {
  border-color: var(--red);
}

.input>input[type="text"][required], .input>input[type="number"][required],
.input>input[type="password"][required], .input>input[type="email"][required], .input>select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: var(--smallSize);
  box-sizing: border-box;
  padding-top: calc(var(--tinySize) + 4px);
  padding-left: var(--formLabelPadding);
  padding-right: var(--formLabelPadding);
  text-align: left;
  border-radius: 4px;
  border: 1px solid var(--greyDarker);
  background: none;
  vertical-align: top;
}

.input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
.input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
  border: 1px solid var(--greyLighter);
}

.input>.prefix+input[type="text"][required], .input>.prefix+input[type="number"][required],
.input>.prefix+input[type="password"][required], .input>.prefix+input[type="email"][required], .input>.prefix+select {
  padding-left: calc(var(--formLabelPadding) + var(--mediumSize) * 3);
}

.input>input[type="text"][required]~label, .input>input[type="number"][required]~label,
.input>input[type="password"][required]~label, .input>input[type="email"][required]~label, .input>select~label {
  pointer-events: none;
  display: block;
  position: absolute;
  top: calc((var(--tinySize) + 4px) / 2);
  color: var(--inverseColor);
  transition-timing-function: ease-in;
  transition-duration: .125s;
  font-size: var(--smallSize);
  height: var(--smallSize);
  z-index: 1;
}

.input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
.input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
  color: var(--greyDarker);
}

.input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
.input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
  color: var(--grey);
  font-size: var(--tinySize);
  top: 4px;
}


.input>input[type="text"][required]:focus, .input>input[type="number"][required]:focus,
.input>input[type="password"][required]:focus, .input>input[type="email"][required]:focus, .input>select:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--blue);
  border-radius: 4px;
  box-shadow: none;
}

.input>input[type="text"][required]:focus~label, .input>input[type="number"][required]:focus~label,
.input>input[type="password"][required]:focus~label, .input>input[type="email"][required]:focus~label {
  font-size: var(--tinySize);
  top: 4px;
}

.input>input[type="text"][required]:valid~label, .input>input[type="number"][required]:valid~label,
.input>input[type="password"][required]:valid~label, .input>input[type="email"][required]:valid~label, .input>select:valid~label {
  font-size: var(--tinySize);
  top: 4px;
}

@media (prefers-color-scheme: dark) {
  .input>.prefix {
    background-color: var(--black);
  }

  .input>input[type="text"][required], .input>input[type="number"][required],
  .input>input[type="password"][required], .input>input[type="email"][required], .input>select {
    color: var(--white);
  }

  .input>input[type="text"][required]~label, .input>input[type="number"][required]~label,
  .input>input[type="password"][required]~label, .input>input[type="email"][required]~label, .input>select~label {
    color: var(--grey);
  }

  .input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
  .input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
    border: 1px solid var(--greyDarker);
    color: var(--blackDark);
  }

  .input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
  .input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
    color: var(--greyDarker);
  }

  .input>input[type="text"][required]:focus, .input>input[type="number"][required]:focus,
  .input>input[type="password"][required]:focus, .input>input[type="email"][required]:focus, .input>select:focus {
    color: var(--white);
  }
}

.input>input[type="number"]:out-of-range, .input>input[type="text"][required].invalid, .input>input[type="number"][required].invalid,
.input>input[type="password"][required].invalid, .input>input[type="email"][required].invalid, .input>select.invalid {
  border-color: var(--red);
  color: var(--red);
}

.input>input[type="number"]:out-of-range~label, .input>input[type="text"][required].invalid~label, .input>input[type="number"][required].invalid~label,
.input>input[type="password"][required].invalid~label, .input>input[type="email"][required].invalid~label, .input>select.invalid~label {
  color: var(--red);
  font-size: var(--tinySize);
  top: 4px;
}

.input>input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.input>input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 0.8;
  background: var(--grey);
  outline: none;
  transition-duration: .125s;
  height: 2px;
  width: auto;
  margin: 0 var(--formLabelPadding);
  flex: auto;
}

.input>input[type="range"]:hover {
  opacity: 1;
}

.input>input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--tinySize);
  height: var(--tinySize);
  background: var(--grey);
  border-radius: var(--tinySize);
  cursor: pointer;
}

.input>input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--greyDarker);
}

.input>input[type="range"].invalid::-webkit-slider-thumb {
  background: var(--red);
}

.input>input[type="range"].invalid::-webkit-slider-thumb:hover {
  background: var(--red);
}

.input>input[type="range"]:out-of-range, .input>input[type="range"].invalid {
  background: var(--red);
}

.input>input[type="range"]:out-of-range::-webkit-slider-thumb, .input>input[type="range"].invalid::-webkit-slider-thumb {
  color: var(--red);
}

.input>input[type="range"]+input[type="number"] {
  background: none;
  width: auto;
  min-width: calc(var(--mediumSize) * 2);
  border: 1px solid var(--grey);
  text-align: right;
  padding: 3px;
}

.input>input[type="range"]+input[type="number"]:out-of-range {
  border-color: var(--red);
  color: var(--red);
}

@media (prefers-color-scheme: dark) {
  .input>input[type="range"]+input[type="number"] {
    color: var(--white);
  }
}

.input>input[type="range"]+input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.input>.double-range {
  flex: auto;
}

.input>label + .double-range {
  margin-left: var(--formLabelPadding);
}

.double-range {
  display: flex;
  align-items: center;
}

.double-range>.range {
  flex: auto;
  position: relative;
  margin: 0 var(--formLabelPadding);
  height: var(--tinySize);
}

.double-range>input[type="number"] {
  background: none;
  min-width: calc(var(--mediumSize) * 2);
  border: 1px solid var(--grey);
  text-align: right;
  padding: 3px;
}

.double-range>input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

.double-range>.range>input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 1;
  background: var(--grey);
  outline: none;
  transition-duration: .125s;
  height: 2px;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: calc(var(--tinySize) / 2 - 2px);
}

@media (prefers-color-scheme: dark) {
  .double-range>.range>input[type="range"] {
    background: var(--greyDark);
  }

  .double-range>input[type="number"] {
    color: var(--white);
  }
}

.double-range>.range>input[type="range"]:first::-webkit-slider-thumb {
  background: var(--grey);
}

.double-range>.range>input[type="range"]:last-child::-webkit-slider-thumb {
  background: var(--greyDarker);
}

.double-range>.range>input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  pointer-events: all;
  position: relative;
  width: var(--tinySize);
  height: var(--tinySize);
  background: var(--grey);
  outline: none;
  opacity: 1;
  z-index: 1;
}

/* progress bar */
.progress-bar-container {
  display: flex;
  width: 100%;
  background: var(--greyLightest);
}

@media (prefers-color-scheme: dark) {
  .progress-bar-container {
    background: var(--black);
  }
}

.progress-bar-container .progress-bar {
  background: var(--blue);
  color: var(--white);
  min-width: 0%;
  text-align: center;
  overflow: hidden;
  height: var(--mediumSize);
  font-size: var(--tinySize);
  line-height: var(--mediumSize);
}

.progress-bar-container .progress-bar.success {
  background: var(--green);
}

.progress-bar-container .progress-bar.failed {
  background: var(--red);
}

.progress-bar-container .progress-bar.error {
  background: var(--orange);
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.desktop-control {
  display: none;
}
.mobile-control {
  display: block;
}

.mobile-sidebar-control {
  display: none;
  float: right;
}
.mobile-sidebar-control.display {
  display: block;
}

@media screen and (min-width: 600px) {
  .desktop-control {
    display: block;
  }
  .mobile-control {
    display: none;
  }
  .mobile-sidebar-control.display {
    display: none;
  }
}