@fastwork/turbine/scss/all.css

Turbine UI

/*
 * Color
 *********************************************/
:root {
  --color-primary-100: hsl(217, 85%, 95%);
  --color-primary-200: hsl(217, 85%, 92%);
  --color-primary-300: hsl(217, 85%, 87%);
  --color-primary-400: hsl(217, 77%, 61%);
  --color-primary-500: hsl(217, 77%, 56%);
  --color-primary-600: hsl(217, 77%, 51%);
  --color-primary-700: hsl(217, 67%, 36%);
  --color-primary-800: hsl(217, 67%, 30%);
  --color-primary-900: hsl(217, 67%, 25%);
  --color-gray-100: hsl(216, 15%, 97%);
  --color-gray-200: hsl(216, 15%, 92%);
  --color-gray-300: hsl(216, 15%, 86%);
  --color-gray-400: hsl(216, 15%, 66%);
  --color-gray-500: hsl(216, 15%, 59%);
  --color-gray-600: hsl(216, 15%, 52%);
  --color-gray-700: hsl(216, 15%, 33%);
  --color-gray-800: hsl(216, 15%, 26%);
  --color-gray-900: hsl(216, 15%, 20%);
  --color-positive-100: hsl(168, 75%, 95%);
  --color-positive-200: hsl(168, 75%, 90%);
  --color-positive-300: hsl(168, 75%, 83%);
  --color-positive-400: hsl(168, 76%, 48%);
  --color-positive-500: hsl(168, 76%, 45%);
  --color-positive-600: hsl(168, 76%, 41%);
  --color-positive-700: hsl(168, 66%, 25%);
  --color-positive-800: hsl(168, 66%, 20%);
  --color-positive-900: hsl(163, 80%, 15%);
  --color-negative-100: hsl(8, 85%, 97%);
  --color-negative-200: hsl(8, 85%, 93%);
  --color-negative-300: hsl(8, 85%, 89%);
  --color-negative-400: hsl(8, 78%, 67%);
  --color-negative-500: hsl(8, 78%, 61%);
  --color-negative-600: hsl(8, 78%, 55%);
  --color-negative-700: hsl(8, 68%, 38%);
  --color-negative-800: hsl(8, 68%, 34%);
  --color-negative-900: hsl(8, 68%, 30%);
  --color-info-100: hsl(283, 90%, 96%);
  --color-info-283: hsl(283, 90%, 92%);
  --color-info-300: hsl(283, 90%, 88%);
  --color-info-400: hsl(283, 40%, 55%);
  --color-info-500: hsl(283, 40%, 50%);
  --color-info-600: hsl(283, 40%, 45%);
  --color-info-700: hsl(283, 66%, 28%);
  --color-info-800: hsl(283, 66%, 25%);
  --color-info-900: hsl(283, 66%, 22%);
  --color-warning-100: hsl(45, 80%, 95%);
  --color-warning-200: hsl(45, 80%, 90%);
  --color-warning-300: hsl(45, 80%, 85%);
  --color-warning-400: hsl(45, 90%, 55%);
  --color-warning-500: hsl(45, 90%, 48%);
  --color-warning-600: hsl(45, 90%, 45%);
  --color-warning-700: hsl(45, 90%, 31%);
  --color-warning-800: hsl(45, 90%, 27%);
  --color-warning-900: hsl(45, 90%, 27%);
  --color-text-text-invert-100: hsla(0, 0%, 100%, .95);
  --color-text-light-secondary: rgba(226, 226, 226, 0.95);
  --color-text-text-default-100: hsla(215, 15%, 28%, 0.96);
  --color-text-dark-secondary: hsla(220, 10%, 47%, 0.95);
  --color-shader: rgba(0, 0, 0 , 0.12);
}

/*
 * Font family
 *********************************************/
:root {
  --font-family-primary: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-secondary: "Kanit", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/*
 * Typescale
 *********************************************/
:root {
  --font-size-1200: 3rem;
  --font-size-1100: 2.5rem;
  --font-size-1000: 2.25rem;
  --font-size-900: 2rem;
  --font-size-800: 1.75rem;
  --font-size-700: 1.5rem;
  --font-size-600: 1.25rem;
  --font-size-500: 1.125rem;
  --font-size-400: 1rem;
  --font-size-300: 0.875rem;
  --font-size-200: 0.75rem;
  --font-size-100: 0.6875rem;
}

html {
  font-size: 16px;
  font-family: var(--font-family-primary);
  line-height: var(--line-height-default);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--color-text-default-100);
}

*, *:before, *:after {
  box-sizing: inherit;
}

p {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-primary);
  line-height: var(--line-height-paragraph);
}

body, h1, h2, h3, h4, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: var(--line-height-default);
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

b, strong {
  font-weight: var(--font-weight-bolder);
}

small {
  font-size: 80%;
}

button, input, select, textarea {
  font-size: 1rem;
  line-height: 1.15;
  margin: 0;
  text-transform: none;
}

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

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

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

progress {
  display: block;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  height: auto;
  margin: 0;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

[hidden] {
  display: none;
}

[disabled] {
  cursor: not-allowed;
}

img, video, object {
  vertical-align: top;
}

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

hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--color-gray-200);
}

.u-animation-spin-1 {
  animation: spin 0.5s infinite linear;
}

.u-animation-spin-2 {
  animation: spin 1s infinite linear;
}

.u-animation-spin-3 {
  animation: spin 1.5s infinite linear;
}

.u-animation-spin-4 {
  animation: spin 2.5s infinite linear;
}

.u-animation-spin-5 {
  animation: spin 3s infinite linear;
}

.u-animation-spin-6 {
  animation: spin 5.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.u-align-middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-valign-center {
  display: flex;
  align-items: center;
}

.u-valign-top {
  display: flex;
  justify-content: flex-start;
}

.u-valign-bottom {
  display: flex;
  justify-content: flex-end;
}

.u-halign-center {
  display: flex;
  justify-content: center;
}

.u-halign-left {
  display: flex;
  justify-content: flex-start;
}

.u-halign-right {
  display: flex;
  justify-content: flex-end;
}

.u-halign-split {
  display: flex;
  justify-content: space-between;
}

h1, .u-heading-1,
h2, .u-heading-2,
h3, .u-heading-3,
h4, .u-heading-4,
h5, .u-heading-5,
h6, .u-heading-6 {
  font-family: var(--font-family-secondary);
  font-weight: var(--font-weight-default);
  line-height: var(--line-height-default);
}

h1,
.u-heading-1 {
  font-size: var(--font-size-1000);
}
@media (min-width: 768px) {
  h1,
.u-heading-1 {
    font-size: var(--font-size-1000);
  }
}
@media (min-width: 1024px) {
  h1,
.u-heading-1 {
    font-size: var(--font-size-1100);
  }
}
@media (min-width: 1280px) {
  h1,
.u-heading-1 {
    font-size: var(--font-size-1100);
  }
}

h2,
.u-heading-2 {
  font-size: var(--font-size-900);
}
@media (min-width: 768px) {
  h2,
.u-heading-2 {
    font-size: var(--font-size-900);
  }
}
@media (min-width: 1024px) {
  h2,
.u-heading-2 {
    font-size: var(--font-size-1000);
  }
}
@media (min-width: 1280px) {
  h2,
.u-heading-2 {
    font-size: var(--font-size-1000);
  }
}

h3,
.u-heading-3 {
  font-size: var(--font-size-800);
}
@media (min-width: 768px) {
  h3,
.u-heading-3 {
    font-size: var(--font-size-800);
  }
}
@media (min-width: 1024px) {
  h3,
.u-heading-3 {
    font-size: var(--font-size-900);
  }
}
@media (min-width: 1280px) {
  h3,
.u-heading-3 {
    font-size: var(--font-size-900);
  }
}

h4,
.u-heading-4 {
  font-size: var(--font-size-700);
}

h5,
.u-heading-5 {
  font-size: var(--font-size-600);
}

h6,
.u-heading-6 {
  font-size: var(--font-size-500);
}

p,
.u-paragraph {
  font-size: var(--font-size-400);
  margin: 0px;
  line-height: var(--line-height-paragraph);
}

.u-paragraph-small {
  font-size: var(--font-size-300);
  margin: 0px;
  line-height: var(--line-height-paragraph);
}

.u-paragraph-big {
  font-size: var(--font-size-500);
  margin: 0px;
  line-height: var(--line-height-paragraph);
}

.u-ellipsis-container {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-raised-1 {
  box-shadow: 0 15px 15px 0 rgba(43, 43, 43, 0.1);
}

.u-raised-2 {
  box-shadow: 0 4px 12px 0 rgba(43, 43, 43, 0.1);
}

.tb-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  object-fit: cover;
}
.-small.tb-avatar {
  width: 2.25rem;
  height: 2.25rem;
}
.-tiny.tb-avatar {
  width: 1.25rem;
  height: 1.25rem;
}

.tb-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.5rem 1.5rem;
  font-family: var(--font-family-secondary);
  font-weight: 500;
  font-size: 1rem;
  line-height: 100%;
  border: none;
  border-radius: 3px;
  transition: all 0.16s ease-in-out;
  user-select: none;
  cursor: pointer;
  outline: none;
}
.-pill.tb-button {
  border-radius: 999px;
}
.-small.tb-button {
  min-height: 2.25rem;
  font-size: 0.875rem;
}
.-big.tb-button {
  min-height: 3.25rem;
  font-size: 1.25rem;
}
.-loading.tb-button {
  color: transparent;
}
.-loading.tb-button:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1rem;
  width: 1rem;
  margin: auto;
  border: 2px solid;
  border-radius: 999px;
  animation: spinAround 0.48s infinite linear;
}
.-fluid.tb-button {
  width: 100%;
}

.tb-button {
  color: var(--color-text-invert-100);
  background-color: var(--color-primary-500);
}
.tb-button:focus {
  box-shadow: 0 0 0 0.175rem var(--color-primary-300);
}
.tb-button:hover {
  background-color: var(--color-primary-600);
}
.tb-button.-loading {
  color: transparent;
}
.tb-button.-loading:after {
  border-right-color: var(--color-text-invert-100);
  border-top-color: var(--color-text-invert-100);
}
.tb-button.-positive {
  color: var(--color-text-invert-100);
  background-color: var(--color-positive-200);
}
.tb-button.-positive:focus {
  box-shadow: 0 0 0 0.175rem var(--color-positive-100);
}
.tb-button.-positive:hover {
  background-color: var(--color-positive-300);
}
.tb-button.-positive.-loading {
  color: transparent;
}
.tb-button.-positive.-loading:after {
  border-right-color: var(--color-text-invert-100);
  border-top-color: var(--color-text-invert-100);
}
.tb-button.-white {
  color: var(--color-primary-600);
  background-color: white;
}
.tb-button.-white:focus {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-button.-white:hover {
  background-color: var(--color-neutral-100);
}
.tb-button.-white.-loading {
  color: transparent;
}
.tb-button.-white.-loading:after {
  border-right-color: var(--color-primary-600);
  border-top-color: var(--color-primary-600);
}
.tb-button.-white.-secondary {
  color: white;
  background: transparent;
  border: 1px solid white;
}
.tb-button.-white.-secondary:hover {
  background-color: transparent;
}
.tb-button.-white.-secondary:focus {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-button.-white.-secondary.-loading {
  color: transparent;
}
.tb-button.-white.-secondary.-loading:after {
  border-right-color: white;
  border-top-color: white;
}
.tb-button.-white.-tertiary {
  color: var(--color-primary-600);
  border: none;
  background: transparent;
}
.tb-button.-white.-tertiary:hover {
  background-color: var(--color-neutral-100);
}
.tb-button.-white.-tertiary.-loading {
  color: transparent;
}
.tb-button.-white.-tertiary.-loading:after {
  border-right-color: var(--color-primary-600);
  border-top-color: var(--color-primary-600);
}
.tb-button.-negative {
  color: var(--color-text-invert-100);
  background-color: var(--color-negative-200);
}
.tb-button.-negative:focus {
  box-shadow: 0 0 0 0.175rem var(--color-negative-100);
}
.tb-button.-negative:hover {
  background-color: var(--color-negative-300);
}
.tb-button.-negative.-loading {
  color: transparent;
}
.tb-button.-negative.-loading:after {
  border-right-color: var(--color-text-invert-100);
  border-top-color: var(--color-text-invert-100);
}
.tb-button.-white {
  color: var(--color-primary-600);
  background-color: white;
}
.tb-button.-white:focus {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-button.-white:hover {
  background-color: var(--color-neutral-100);
}
.tb-button.-white.-loading {
  color: transparent;
}
.tb-button.-white.-loading:after {
  border-right-color: var(--color-primary-600);
  border-top-color: var(--color-primary-600);
}
.tb-button.-white.-secondary {
  color: white;
  background: transparent;
  border: 1px solid white;
}
.tb-button.-white.-secondary:hover {
  background-color: transparent;
}
.tb-button.-white.-secondary:focus {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-button.-white.-secondary.-loading {
  color: transparent;
}
.tb-button.-white.-secondary.-loading:after {
  border-right-color: white;
  border-top-color: white;
}
.tb-button.-white.-tertiary {
  color: var(--color-primary-600);
  border: none;
  background: transparent;
}
.tb-button.-white.-tertiary:hover {
  background-color: var(--color-neutral-100);
}
.tb-button.-white.-tertiary.-loading {
  color: transparent;
}
.tb-button.-white.-tertiary.-loading:after {
  border-right-color: var(--color-primary-600);
  border-top-color: var(--color-primary-600);
}
.tb-button.-secondary {
  color: var(--color-primary-500);
  border: 1px solid var(--color-neutral-300);
  background: transparent;
}
.tb-button.-secondary:hover {
  background-color: var(--color-neutral-100);
}
.tb-button.-secondary.-disabled {
  color: var(--color-neutral-400);
  border: 1px solid var(--color-neutral-300);
  background-color: transparent;
}
.tb-button.-secondary.-disabled:hover {
  background-color: transparent;
}
.tb-button.-secondary.-loading {
  color: transparent;
}
.tb-button.-secondary.-loading:after {
  border-right-color: var(--color-primary-600);
  border-top-color: var(--color-primary-600);
}
.tb-button.-secondary.-disabled.-loading:after {
  border-right-color: var(--color-neutral-500);
  border-top-color: var(--color-neutral-500);
}
.tb-button.-disabled {
  background-color: var(--color-neutral-200);
  cursor: not-allowed;
}
.tb-button.-disabled:not(.-loading) {
  color: var(--color-neutral-500);
}
.tb-button.-disabled.-loading:after {
  border-right-color: var(--color-neutral-500);
  border-top-color: var(--color-neutral-500);
}
.tb-button.-disabled:hover {
  background-color: var(--color-neutral-300);
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.tb-breadcrumb {
  font-family: var(--font-family-secondary);
  display: inline-flex;
}
.tb-breadcrumb > *:not(:last-child) {
  margin-right: 0.875rem;
}
.tb-breadcrumb > *:not(:last-child):after {
  content: "";
  display: inline-block;
  width: 0.425rem;
  height: 0.425rem;
  margin-left: 0.5rem;
  margin-bottom: 1px;
  border-right: 1px solid var(--color-neutral-400);
  border-bottom: 1px solid var(--color-neutral-400);
  transform: rotate(-45deg);
}
.tb-breadcrumb > * > * {
  display: inline-block;
}

.tb-card-product {
  display: grid;
  grid-template-columns: min-content min-content 1fr max-content;
  grid-template-rows: max-content max-content max-content max-content max-content max-content;
  grid-template-areas: "avatar seller-name seller-name favorite" "avatar online online online" "image  image  image  image" "title  title  title  title" "rating rating label  price";
  width: 100%;
  max-width: 12.5rem;
  padding: 0.5rem;
  background-color: white;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  font-size: var(--font-size-300);
}
.tb-card-product > .slot-avatar {
  grid-area: avatar;
  margin-right: 0.5rem;
}
.tb-card-product > .slot-seller-name {
  grid-area: seller-name;
  margin-top: 0.125rem;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-card-product > .slot-online {
  grid-area: online;
  font-size: var(--font-size-100);
  line-height: 1.65;
  color: var(--color-neutral-500);
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-card-product > .slot-favorite {
  grid-area: favorite;
  margin-top: 0.125rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-100);
  line-height: 1.65;
  color: var(--color-neutral-500);
}
.tb-card-product > .slot-image {
  grid-area: image;
  margin-top: 0.5rem;
}
.tb-card-product > .slot-image img {
  width: 100%;
  border-radius: 2px;
}
.tb-card-product > .slot-title {
  grid-area: title;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: clip;
  -webkit-line-clamp: 2;
  line-height: 1.65;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.tb-card-product > .slot-rating {
  grid-area: rating;
  font-size: var(--font-size-100);
}
.tb-card-product > .slot-label {
  grid-area: label;
  margin-left: 0.25rem;
}
.tb-card-product > .slot-price {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 5;
  text-align: right;
}

*::placeholder {
  color: #abb2ba;
}

*::-moz-placeholder {
  color: #6f767b;
}

*::webkit-input-placeholder {
  color: #abb2ba;
}

.tb-input input,
.tb-textarea textarea,
.tb-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: white;
  font-size: 0.9375rem;
  vertical-align: top;
  border-radius: inherit;
  border: 1px solid #c4cad4;
  outline: none;
}
.tb-input input.-big .tb-input,
.tb-textarea textarea.-big .tb-input,
.tb-select select.-big .tb-input,
.tb-input input.-big .tb-select:not(.-multiple),
.tb-textarea textarea.-big .tb-select:not(.-multiple),
.tb-select select.-big .tb-select:not(.-multiple) {
  height: 3rem;
}
.tb-input input.-big .tb-input > input,
.tb-textarea textarea.-big .tb-input > input,
.tb-select select.-big .tb-input > input,
.tb-input input.-big .tb-select:not(.-multiple) > select,
.tb-textarea textarea.-big .tb-select:not(.-multiple) > select,
.tb-select select.-big .tb-select:not(.-multiple) > select {
  font-size: 1.25rem;
  height: 100%;
}
.tb-input input.-small .tb-input,
.tb-textarea textarea.-small .tb-input,
.tb-select select.-small .tb-input,
.tb-input input.-small .tb-select:not(.-multiple),
.tb-textarea textarea.-small .tb-select:not(.-multiple),
.tb-select select.-small .tb-select:not(.-multiple) {
  height: 1.875em;
}
.tb-input input.-small .tb-input > input,
.tb-textarea textarea.-small .tb-input > input,
.tb-select select.-small .tb-input > input,
.tb-input input.-small .tb-select:not(.-multiple) > select,
.tb-textarea textarea.-small .tb-select:not(.-multiple) > select,
.tb-select select.-small .tb-select:not(.-multiple) > select {
  font-size: 0.75rem;
  height: 100%;
}
.tb-input input:hover,
.tb-textarea textarea:hover,
.tb-select select:hover {
  border-color: #98a3b3;
}
.tb-input input:focus,
.tb-textarea textarea:focus,
.tb-select select:focus,
.tb-input input :active,
.tb-textarea textarea :active,
.tb-select select :active {
  border-color: var(--color-primary-400);
  border-width: 1px;
  box-shadow: 0 0 0 0.175rem var(--color-primary-300);
}

.tb-field label {
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.tb-field small {
  display: inline-block;
  margin-top: 0.375rem;
}
.tb-field.-positive .tb-input input,
.tb-field.-positive .tb-textarea textarea,
.tb-field.-positive .tb-select select {
  color: var(--color-positive-400);
  border-color: var(--color-positive-200);
}
.tb-field.-positive .tb-input input:focus,
.tb-field.-positive .tb-input input :active,
.tb-field.-positive .tb-textarea textarea:focus,
.tb-field.-positive .tb-textarea textarea :active,
.tb-field.-positive .tb-select select:focus,
.tb-field.-positive .tb-select select :active {
  box-shadow: 0 0 0 0.175rem var(--color-positive-100);
}
.tb-field.-positive small,
.tb-field.-positive i {
  color: var(--color-positive-400);
}
.tb-field.-negative .tb-input input,
.tb-field.-negative .tb-textarea textarea,
.tb-field.-negative .tb-select select {
  color: var(--color-negative-400);
  border-color: var(--color-negative-200);
}
.tb-field.-negative .tb-input input:focus,
.tb-field.-negative .tb-input input :active,
.tb-field.-negative .tb-textarea textarea:focus,
.tb-field.-negative .tb-textarea textarea :active,
.tb-field.-negative .tb-select select:focus,
.tb-field.-negative .tb-select select :active {
  box-shadow: 0 0 0 0.175rem var(--color-negative-100);
}
.tb-field.-negative small,
.tb-field.-negative i {
  color: var(--color-negative-400);
}
.tb-field.-warning .tb-input input,
.tb-field.-warning .tb-textarea textarea,
.tb-field.-warning .tb-select select {
  color: var(--color-warning-400);
  border-color: var(--color-warning-200);
}
.tb-field.-warning .tb-input input:focus,
.tb-field.-warning .tb-input input :active,
.tb-field.-warning .tb-textarea textarea:focus,
.tb-field.-warning .tb-textarea textarea :active,
.tb-field.-warning .tb-select select:focus,
.tb-field.-warning .tb-select select :active {
  box-shadow: 0 0 0 0.175rem var(--color-warning-100);
}
.tb-field.-warning small,
.tb-field.-warning i {
  color: var(--color-warning-400);
}
.tb-field.-info .tb-input input,
.tb-field.-info .tb-textarea textarea,
.tb-field.-info .tb-select select {
  color: var(--color-info-400);
  border-color: var(--color-info-200);
}
.tb-field.-info .tb-input input:focus,
.tb-field.-info .tb-input input :active,
.tb-field.-info .tb-textarea textarea:focus,
.tb-field.-info .tb-textarea textarea :active,
.tb-field.-info .tb-select select:focus,
.tb-field.-info .tb-select select :active {
  box-shadow: 0 0 0 0.175rem var(--color-info-100);
}
.tb-field.-info small,
.tb-field.-info i {
  color: var(--color-info-400);
}
.tb-field.-big .tb-input,
.tb-field.-big .tb-select:not(.-multiple) {
  height: 3rem;
}
.tb-field.-big .tb-input input,
.tb-field.-big .tb-select:not(.-multiple) select {
  font-size: 1.25rem;
  height: 100%;
}
.tb-field.-small .tb-input,
.tb-field.-small .tb-select:not(.-multiple) {
  height: 1.875em;
}
.tb-field.-small .tb-input input,
.tb-field.-small .tb-select:not(.-multiple) select {
  font-size: 0.75rem;
  height: 100%;
}
.tb-field.-disabled .tb-input input,
.tb-field.-disabled .tb-textarea textarea,
.tb-field.-disabled .tb-select select,
.tb-field .disabled .tb-input input,
.tb-field .disabled .tb-textarea textarea,
.tb-field .disabled .tb-select select,
.tb-field [disabled] .tb-input input,
.tb-field [disabled] .tb-textarea textarea,
.tb-field [disabled] .tb-select select {
  cursor: not-allowed;
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-400);
}
.tb-field.-disabled .tb-input input:hover,
.tb-field.-disabled .tb-textarea textarea:hover,
.tb-field.-disabled .tb-select select:hover,
.tb-field .disabled .tb-input input:hover,
.tb-field .disabled .tb-textarea textarea:hover,
.tb-field .disabled .tb-select select:hover,
.tb-field [disabled] .tb-input input:hover,
.tb-field [disabled] .tb-textarea textarea:hover,
.tb-field [disabled] .tb-select select:hover {
  border-color: var(--color-neutral-300);
}
.tb-field.-disabled small,
.tb-field .disabled small,
.tb-field [disabled] small {
  color: var(--color-text-default-100);
}
.tb-field .fieldset,
.tb-field fieldset {
  padding: 1rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.25rem;
}
.tb-field input:not(:placeholder-shown):invalid,
.tb-field textarea:not(:placeholder-shown):invalid,
.tb-field select:not(:placeholder-shown):invalid {
  color: var(--color-negative-400);
  border-color: var(--color-negative-200);
}
.tb-field input:not(:placeholder-shown):invalid:focus,
.tb-field input:not(:placeholder-shown):invalid :active,
.tb-field textarea:not(:placeholder-shown):invalid:focus,
.tb-field textarea:not(:placeholder-shown):invalid :active,
.tb-field select:not(:placeholder-shown):invalid:focus,
.tb-field select:not(:placeholder-shown):invalid :active {
  box-shadow: 0 0 0 0.175rem var(--color-negative-100);
}
.tb-field .-required label {
  position: relative;
}
.tb-field .-required label:after {
  content: "*";
  display: block;
  position: absolute;
  right: -0.5rem;
  top: 0;
  color: var(--color-negative-200);
}

.tb-input,
.tb-textarea,
.tb-select {
  border-radius: 4px;
}

.tb-select {
  position: relative;
}
.tb-select select {
  padding-right: 32px;
  cursor: pointer;
}
.tb-select:after {
  content: "";
  border-left: 2px solid var(--color-neutral-400);
  border-bottom: 2px solid var(--color-neutral-400);
  height: 0.5rem;
  width: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  border-color: var(--color-neutral-400);
  transform: rotate(-45deg) translate(0, calc(-50% - 4px));
  pointer-events: none;
}

.tb-textarea textarea {
  padding: 8px 0.75rem;
  line-height: 1.25;
}

.tb-input,
.tb-select {
  height: 2.5rem;
}

.tb-radio > input[type=radio] {
  position: absolute;
  z-index: -1;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.tb-radio > input[type=radio]:checked + label:after {
  content: "";
}
.tb-radio > input[type=radio]:focus + label:before {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-radio > label {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  line-height: 21px;
  cursor: pointer;
  user-select: none;
}
.tb-radio > label:before, .tb-radio > label:after {
  content: "";
  position: absolute;
  display: inline-block;
}
.tb-radio > label:before {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  left: 0px;
  border: 2px solid var(--color-primary-500);
  border-radius: 50%;
  background-color: white;
}
.tb-radio > label:after {
  content: none;
  height: 0.75rem;
  width: 0.75rem;
  top: 5px;
  left: 5px;
  background-color: var(--color-primary-500);
  border-radius: 50%;
}

.tb-field.-disabled .tb-radio > label {
  cursor: not-allowed;
  color: var(--color-neutral-400);
}
.tb-field.-disabled .tb-radio > label:before {
  border: 2px solid var(--color-neutral-300);
}
.tb-field.-disabled .tb-radio > label:after {
  background-color: var(--color-neutral-300);
}

.tb-checkbox > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.tb-checkbox > input[type=checkbox]:checked + label:before {
  background: var(--color-primary-500);
  border: 1px solid var(--color-primary-500);
}
.tb-checkbox > input[type=checkbox]:checked + label:after {
  content: "";
}
.tb-checkbox > input[type=checkbox]:focus + label:before {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-checkbox > input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  height: 100%;
  padding-left: 28px;
  margin-left: -19px;
  line-height: 19px;
  cursor: pointer;
}
.tb-checkbox > input[type=checkbox] + label:before, .tb-checkbox > input[type=checkbox] + label:after {
  content: "";
  position: absolute;
  display: inline-block;
}
.tb-checkbox > input[type=checkbox] + label:before {
  width: 20px;
  height: 20px;
  left: 0px;
  background-color: var(--color-text-invert-100);
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  box-sizing: border-box;
}
.tb-checkbox > input[type=checkbox] + label:after {
  content: none;
  height: 7px;
  width: 0.75rem;
  top: 5px;
  left: 4px;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-left-style: solid;
  border-bottom-style: solid;
  border-color: var(--color-text-invert-100);
  transform: rotate(-45deg);
}
.tb-checkbox > input[type=checkbox] + label:hover:before {
  border: 1px solid var(--color-neutral-400);
}

.tb-toggle-tag > input[type=radio],
.tb-toggle-tag > input[type=checkbox] {
  position: absolute;
  z-index: -1;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
}
.tb-toggle-tag > input[type=radio]:checked + label:after,
.tb-toggle-tag > input[type=checkbox]:checked + label:after {
  content: "";
}
.tb-toggle-tag > input[type=radio]:focus + label:before,
.tb-toggle-tag > input[type=checkbox]:focus + label:before {
  box-shadow: 0 0 0 0.175rem var(--color-primary-200);
}
.tb-toggle-tag > input[type=radio] + label,
.tb-toggle-tag > input[type=checkbox] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  color: var(--color-text-default-200);
  background: white;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  font-family: var(--font-family-secondary);
  user-select: none;
  cursor: pointer;
}
.tb-toggle-tag > input[type=radio] + label:hover,
.tb-toggle-tag > input[type=checkbox] + label:hover {
  background: var(--color-neutral-100);
}
.tb-toggle-tag > input[type=radio]:checked + label,
.tb-toggle-tag > input[type=checkbox]:checked + label {
  color: var(--color-primary-500);
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-500);
  border-radius: 4px;
  font-family: var(--font-family-secondary);
  cursor: pointer;
}

.tb-switch {
  display: inline-flex;
  align-items: center;
}
.tb-switch > input[type=checkbox],
.tb-switch > input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  background-color: #ededed;
  width: 2.75rem;
  height: 26px;
  border-radius: 999px;
  transition: all var(--timing-normal) ease-in-out;
  cursor: pointer;
  outline: none;
}
.tb-switch > input[type=checkbox]:checked,
.tb-switch > input[type=radio]:checked {
  background-color: var(--color-primary-500);
}
.tb-switch > input[type=checkbox]:after,
.tb-switch > input[type=radio]:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: white;
  height: 2rem;
  width: 2rem;
  left: -2px;
  top: -3px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  transform: scale(0.64);
  transition: all var(--timing-faster) ease-in-out;
}
.tb-switch > input[type=checkbox]:checked:after,
.tb-switch > input[type=radio]:checked:after {
  left: calc(100% - 30px);
}
.tb-switch > label {
  margin-left: 8px;
}

.tb-field.-disabled .tb-checkbox {
  opacity: 0.5;
}
.tb-field.-disabled .tb-checkbox > input[type=checkbox],
.tb-field.-disabled .tb-checkbox > label {
  cursor: not-allowed;
}
.tb-field.-disabled .tb-checkbox > input[type=checkbox]:before,
.tb-field.-disabled .tb-checkbox > label:before {
  opacity: 0.5;
  border-color: var(--color-text-default-100);
}
.tb-field.-disabled .tb-checkbox > input[type=checkbox]:after,
.tb-field.-disabled .tb-checkbox > label:after {
  opacity: 0.5;
  border-color: var(--color-text-default-100);
}

.tb-input.-has-icon-left,
.tb-select.-has-icon-left,
.tb-input.-has-icon-right {
  position: relative;
}
.tb-input.-has-icon-left > .icon,
.tb-select.-has-icon-left > .icon,
.tb-input.-has-icon-right > .icon {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 100%;
  color: var(--color-neutral-400);
  font-size: 1rem;
}

.tb-input.-has-icon-left > input {
  padding-left: 2.625rem;
}
.tb-input.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
}

.tb-select.-has-icon-left > select {
  padding-left: 2.625rem;
}
.tb-select.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
}

.tb-input.-has-icon-right > input {
  padding-right: 2.625rem;
}
.tb-input.-has-icon-right > .icon.-is-right {
  right: 0;
}

.tb-field.-small .tb-input.-has-icon-left > input {
  padding-left: 2rem;
}
.tb-field.-small .tb-input.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
  width: 2rem;
  font-size: 0.875rem;
}
.tb-field.-small .tb-select.-has-icon-left > select {
  padding-left: 2rem;
}
.tb-field.-small .tb-select.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
  width: 2rem;
  font-size: 0.875rem;
}
.tb-field.-small .tb-input.-has-icon-right > input {
  padding-right: 2rem;
}
.tb-field.-small .tb-input.-has-icon-right > .icon.-is-right {
  right: 0;
  width: 2rem;
  font-size: 0.875rem;
}

.tb-field.-big .tb-input.-has-icon-left > input {
  padding-left: 3rem;
}
.tb-field.-big .tb-input.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
  width: 3rem;
  font-size: 1.33333rem;
}
.tb-field.-big .tb-select.-has-icon-left > select {
  padding-left: 3rem;
}
.tb-field.-big .tb-select.-has-icon-left > .icon:not(.-is-right) {
  left: 0;
  width: 3rem;
  font-size: 1.33333rem;
}
.tb-field.-big .tb-input.-has-icon-right > input {
  padding-right: 3rem;
}
.tb-field.-big .tb-input.-has-icon-right > .icon.-is-right {
  right: 0;
  width: 3rem;
  font-size: 1.33333rem;
}

.tb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
}

.tb-label {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-100);
  font-weight: 700;
  border-radius: 4px;
  color: var(--color-text-invert-100);
  background-color: var(--color-primary-500);
}
.tb-label.-positive {
  background-color: var(--color-positive-200);
}
.tb-label.-negative {
  background-color: var(--color-negative-200);
}

.tb-link {
  position: relative;
  color: var(--color-neutral-800);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: all 160ms ease-in-out;
}
.tb-link svg, .tb-link path {
  transition: fill 160ms ease-in-out;
  fill: var(--color-neutral-800);
}
.tb-link:before, .tb-link:after {
  pointer-events: none;
  backface-visibility: hidden;
}
.tb-link:hover, .tb-link:focus, .tb-link.-active {
  color: var(--color-primary-600);
}
.tb-link:hover svg, .tb-link:hover path, .tb-link:focus svg, .tb-link:focus path, .tb-link.-active svg, .tb-link.-active path {
  fill: var(--color-primary-600);
}
.tb-link.-fancy {
  border-radius: 3px;
}
.tb-link.-fancy:after {
  position: absolute;
  opacity: 0;
  content: "";
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary-400);
  transition: all 160ms ease-in-out;
}
.tb-link.-fancy:hover, .tb-link.-fancy:focus, .tb-link.-fancy.-active {
  background-color: var(--color-primary-100);
}
.tb-link.-fancy:hover:after, .tb-link.-fancy:focus:after, .tb-link.-fancy.-active:after {
  opacity: 1;
}
.tb-link:not(.-fancy):focus {
  text-decoration: underline;
}
.tb-link.-primary {
  color: var(--color-primary-500);
}
.tb-link.-primary svg, .tb-link.-primary path {
  fill: var(--color-primary-500);
}
.tb-link.-primary:hover, .tb-link.-primary:focus, .tb-link.-primary.-active {
  color: var(--color-primary-600);
}
.tb-link.-primary:hover svg, .tb-link.-primary:hover path, .tb-link.-primary:focus svg, .tb-link.-primary:focus path, .tb-link.-primary.-active svg, .tb-link.-primary.-active path {
  fill: var(--color-primary-600);
}
.tb-link.-positive {
  color: var(--color-positive-200);
}
.tb-link.-positive svg, .tb-link.-positive path {
  fill: var(--color-positive-200);
}
.tb-link.-positive:hover, .tb-link.-positive:focus, .tb-link.-positive.-active {
  color: var(--color-positive-300);
}
.tb-link.-positive:hover svg, .tb-link.-positive:hover path, .tb-link.-positive:focus svg, .tb-link.-positive:focus path, .tb-link.-positive.-active svg, .tb-link.-positive.-active path {
  fill: var(--color-positive-300);
}
.tb-link.-negative {
  color: var(--color-negative-200);
}
.tb-link.-negative svg, .tb-link.-negative path {
  fill: var(--color-negative-200);
}
.tb-link.-negative:hover, .tb-link.-negative:focus, .tb-link.-negative.-active {
  color: var(--color-negative-300);
}
.tb-link.-negative:hover svg, .tb-link.-negative:hover path, .tb-link.-negative:focus svg, .tb-link.-negative:focus path, .tb-link.-negative.-active svg, .tb-link.-negative.-active path {
  fill: var(--color-negative-300);
}

.tb-message {
  padding: 1rem 1.25rem;
  border-radius: 3px;
  color: var(--color-primary-400);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-400);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-400);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  color: var(--color-primary-400);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
}
.tb-message.-positive {
  color: var(--color-positive-400);
  background-color: var(--color-positive-50);
  border: 1px solid var(--color-positive-200);
}
.tb-message.-negative {
  color: var(--color-negative-400);
  background-color: var(--color-negative-50);
  border: 1px solid var(--color-negative-200);
}
.tb-message.-warning {
  color: var(--color-warning-400);
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}
.tb-message.-info {
  color: var(--color-info-400);
  background-color: var(--color-info-50);
  border: 1px solid var(--color-info-200);
}

.tb-modal > .tb-modal-panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 16px;
  background: white;
  transform: translate3d(0, 20px, 0);
  transition: all var(--timing-faster) ease;
  opacity: 0;
}
.tb-modal > .tb-modal-panel > .header {
  padding: 0 2rem;
  text-align: center;
}
.tb-modal > .tb-modal-panel > .header + .description {
  margin-top: 0.25rem;
}
.tb-modal > .tb-modal-panel > .header + .content {
  margin-top: 2rem;
}
.tb-modal > .tb-modal-panel > .description {
  padding: 0 2rem;
  font-size: var(--font-size-300);
  text-align: center;
}
.tb-modal > .tb-modal-panel > .description + .content {
  margin-top: 2rem;
}
.tb-modal > .tb-modal-panel > .close {
  position: absolute;
  right: 0.5rem;
  top: 0;
  right: 0;
  cursor: pointer;
}

.tb-modal {
  position: fixed;
  overflow-y: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: auto;
  background: rgba(0, 0, 0, 0.56);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all var(--timing-faster) ease;
}
.tb-modal:before, .tb-modal:after {
  content: "";
  display: block;
  min-height: 2rem;
  height: 1.5rem;
  -webkit-box-flex: 1;
  box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.tb-modal.-show {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
}
.tb-modal.-show .tb-modal-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.tb-pagination {
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: -0.5rem;
}
.tb-pagination > .item:not(:last-child) {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.tb-pagination > .item {
  margin-top: 0px;
  word-break: normal;
}
.tb-pagination > .item > .link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  color: var(--color-neutral-500);
  background-color: transparent;
  font-weight: 400;
  font-family: var(--font-family-secondary);
  line-height: 1;
  border-radius: 999px;
  transition: all 160ms ease-in-out;
  cursor: pointer;
}
.tb-pagination > .item > .link:hover {
  background-color: var(--color-neutral-200);
}
.tb-pagination > .item.-chevron-left > .link {
  padding-top: 2px;
  padding-right: 10px;
  border: 1px solid var(--color-neutral-200);
}
.tb-pagination > .item.-chevron-left > .link > * {
  transition: all var(--timing-normal) ease;
}
.tb-pagination > .item.-chevron-left > .link:hover > * {
  transform: translate3d(-2px, 0, 0);
}
.tb-pagination > .item.-chevron-right > .link {
  padding-top: 2px;
  padding-left: 10px;
  border: 1px solid var(--color-neutral-200);
}
.tb-pagination > .item.-chevron-right > .link > * {
  transition: all var(--timing-normal) ease;
}
.tb-pagination > .item.-chevron-right > .link:hover > * {
  transform: translate3d(2px, 0, 0);
}
.tb-pagination > .item.-active > {
  cursor: normal;
}
.tb-pagination > .item.-active > .link {
  color: white;
  fill: white;
  background-color: var(--color-primary-500);
}
.tb-pagination > .item.-disabled .link {
  pointer-events: none;
}

.tb-popup {
  position: absolute;
  opacity: 0;
  transition: all var(--timing-faster) ease;
  transform: scale(0);
  transform-origin: top right;
  pointer-events: none;
  backface-visibility: hidden;
}
.tb-popup.-is-slide-down {
  transform: scaleY(0);
  transform-origin: top center;
}
.tb-popup.-is-slide-down.-active {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: all;
}
.tb-popup.-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

.tb-side-menu {
  position: fixed;
  z-index: 9;
  left: 0;
  top: 0;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transition: all var(--timing-faster) ease;
}
.tb-side-menu .panel {
  width: 35rem;
  position: relative;
  z-index: 1;
  transition: all var(--timing-faster) ease;
  min-height: 100vh;
  transform: translate3d(-100%, 0, 0);
  background: white;
  border: 1px solid var(--color-neutral-300);
  border-bottom: 2px solid var(--color-primary-500);
  box-shadow: 0 0 1.5rem 0 rgba(25, 72, 142, 0.15);
  pointer-events: all;
  backface-visibility: hidden;
}
.tb-side-menu .backdrop {
  transition: all var(--timing-faster) ease;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
}
.tb-side-menu.-active {
  opacity: 1;
  pointer-events: all;
}
.tb-side-menu.-active .panel {
  transform: translate3d(0, 0, 0);
  pointer-events: all;
}
.tb-side-menu.-active .backdrop {
  opacity: 1;
}

.tb-table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  margin-top: 1rem;
}
.tb-table-container .row {
  cursor: pointer;
}
.tb-table-container .row:hover {
  background-color: rgba(247, 247, 247, 0.8);
}

.tb-table {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  word-break: normal;
  border-collapse: collapse;
  border-spacing: 0;
}
.tb-table thead {
  font-size: 15px;
  color: var(--color-neutral-500);
}
.tb-table td, .tb-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
  text-align: left;
}
.tb-table td:not(:first-child), .tb-table th:not(:first-child) {
  padding-left: 2rem;
}
.tb-table.-ruled tbody tr {
  border-bottom: 1px solid var(--color-neutral-300);
}
.tb-table.-ruled thead tr {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.tb-table.-ruled:not(.-no-top-rule) thead tr {
  border-bottom: 2px solid var(--color-neutral-300);
}
.tb-table.-striped tbody tr:nth-child(even) {
  background-color: var(--color-neutral-100);
}
.tb-table.-list tbody tr td:first-child {
  white-space: nowrap;
  font-weight: 700;
}
.tb-table.-list tbody tr td:last-child {
  text-align: right;
}
.tb-table .collapse {
  width: 1%;
}

.lo-container {
  display: grid;
  width: 100%;
  grid-template-columns: 12px minmax(0px, auto) 12px;
  grid-template-rows: auto;
}
@media (min-width: 768px) {
  .lo-container {
    grid-template-columns: 1fr 728px 1fr;
  }
}
@media (min-width: 1024px) {
  .lo-container {
    grid-template-columns: 1fr 984px 1fr;
  }
}
@media (min-width: 1280px) {
  .lo-container {
    grid-template-columns: 1fr 1240px 1fr;
  }
}
.lo-container > * {
  grid-column: 2/3;
}

.lo-container-desktop {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(1rem, 1fr) minmax(calc(var(--breakpoint-lg) - 4rem), calc(var(--breakpoint-lg) - 4rem)) minmax(1rem, 1fr);
  grid-template-rows: auto;
}
.lo-container-desktop > * {
  grid-column: 2/3;
}

.lo-1-11 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 11fr;
}

.lo-2-10 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 2fr 10fr;
}

.lo-3-9 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 3fr 9fr;
}

.lo-4-8 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 4fr 8fr;
}

.lo-5-7 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 5fr 7fr;
}

.lo-7-5 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 7fr 5fr;
}

.lo-8-4 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 8fr 4fr;
}

.lo-9-3 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 9fr 3fr;
}

.lo-10-2 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 10fr 2fr;
}

.lo-11-1 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 11fr 1fr;
}

.lo-1 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.lo-2 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.lo-3 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.lo-4 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr 1fr;
}

.lo-6 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
}

.lo-12 {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .lo-1-11-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 11fr;
  }

  .lo-2-10-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 2fr 10fr;
  }

  .lo-3-9-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 3fr 9fr;
  }

  .lo-4-8-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 4fr 8fr;
  }

  .lo-5-7-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 5fr 7fr;
  }

  .lo-7-5-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 7fr 5fr;
  }

  .lo-8-4-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 8fr 4fr;
  }

  .lo-9-3-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 9fr 3fr;
  }

  .lo-10-2-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 10fr 2fr;
  }

  .lo-11-1-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 11fr 1fr;
  }

  .lo-1-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .lo-2-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .lo-3-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .lo-4-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .lo-6-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
  }

  .lo-12-sm {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) {
  .lo-1-11-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 11fr;
  }

  .lo-2-10-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 2fr 10fr;
  }

  .lo-3-9-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 3fr 9fr;
  }

  .lo-4-8-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 4fr 8fr;
  }

  .lo-5-7-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 5fr 7fr;
  }

  .lo-7-5-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 7fr 5fr;
  }

  .lo-8-4-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 8fr 4fr;
  }

  .lo-9-3-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 9fr 3fr;
  }

  .lo-10-2-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 10fr 2fr;
  }

  .lo-11-1-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 11fr 1fr;
  }

  .lo-1-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .lo-2-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .lo-3-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .lo-4-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .lo-6-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 1fr;
  }

  .lo-12-md {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1280px) {
  .lo-1-11-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr 11fr;
  }

  .lo-2-10-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 2fr 10fr;
  }

  .lo-3-9-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 3fr 9fr;
  }

  .lo-4-8-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 4fr 8fr;
  }

  .lo-5-7-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 5fr 7fr;
  }

  .lo-7-5-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 7fr 5fr;
  }

  .lo-8-4-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 8fr 4fr;
  }

  .lo-9-3-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 9fr 3fr;
  }

  .lo-10-2-lg {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: