:root {
  --space-unit: 1rem;
  --space-xxs:  calc(0.25 * var(--space-unit));
  --space-xs:   calc(0.5 * var(--space-unit));
  --space-sm:   calc(0.75 * var(--space-unit));
  --space-md:   calc(1.25 * var(--space-unit));
  --space-lg:   calc(2 * var(--space-unit));
  --space-xl:   calc(3.25 * var(--space-unit));
  --space-xxl:  calc(5.25 * var(--space-unit));

  --color-danger: red;
  --color-light: #c3a6a0;
  --color-white: white;
  --color-gray: #f4f5f5;
  --color-gray-chrome: #f2f2f2;
  --color-gray-border: #dddddd;
  --color-blue: #b2cefe;
  --color-disabled: #ebebe4;

  /* TODO: fallback */
  --font-family-secondary: "Impact";

  font-size: 1em;
}

* {
  box-sizing: border-box;
  justify-content: safe center;
}

html,
body {
  height: 100%;
}



body {

  margin: 0;
  padding: 0;
  overflow: auto;

}

a {
    text-decoration: none;
}

ul > li {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.d-none {
  display: none;
}

.d-col.h-center {
   align-items:center;
}

@media (min-width: 1200px) {
  .d-xl-row {
    display: flex;
    flex-direction: row;
  }
  .d-xl-block {
    display: block;
  }

  .xl:text-center {
    text-align: center;
  }
}


.d-inline {
  display: inline;
}

.stroke-primary {
  stroke: var(--color-primary);
}

.justify-space-evenly {
  justify-content: space-evenly;
}


.flex-1 {
  flex: 1;
}

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

.text-justify {
  text-align: justify;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-gray {
  color: rgb(160, 160, 130);
}

.text-80 {
  font-size: 80%;
}

.height-100 {
  height: 100%;
}

.height-auto {
  height: auto;
}

.width-auto {
  width: auto;
}

.width-100 {
  width: 100%;
}

.overflow-y-auto {
  overflow-y: auto;
}

.gap-xxs {gap: var(--space-xxs); }
.gap-xs {gap: var(--space-xs); }
.gap-sm {gap: var(--space-sm); }
.gap-md {gap: var(--space-md); }
.gap-lg {gap: var(--space-lg); }
.gap-xl {gap: var(--space-xl); }
.gap-xxl {gap: var(--space-xxl); }
.padding-xxs {padding: var(--space-xxs); }
.padding-xs {padding: var(--space-xs); }
.padding-sm {padding: var(--space-sm); }
.padding-md {padding: var(--space-md); }
.padding-lg {padding: var(--space-lg); }
.padding-xl {padding: var(--space-xl); }
.padding-xxl {padding: var(--space-xxl); }
.padding-v-xxs {padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
.padding-v-xs {padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.padding-v-sm {padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.padding-v-md {padding-top: var(--space-md); padding-bottom: var(--space-md); }
.padding-v-lg {padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.padding-v-xl {padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.padding-v-xxl {padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
.padding-h-xxs {padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
.padding-h-xs {padding-left: var(--space-xs); padding-right: var(--space-xs); }
.padding-h-sm {padding-left: var(--space-sm); padding-right: var(--space-sm); }
.padding-h-md {padding-left: var(--space-md); padding-right: var(--space-md); }
.padding-h-lg {padding-left: var(--space-lg); padding-right: var(--space-lg); }
.padding-h-xl {padding-left: var(--space-xl); padding-right: var(--space-xl); }
.padding-h-xxl {padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
.margin-xxs {margin: var(--space-xxs); }
.margin-xs {margin: var(--space-xs); }
.margin-sm {margin: var(--space-sm); }
.margin-md {margin: var(--space-md); }
.margin-lg {margin: var(--space-lg); }
.margin-xl {margin: var(--space-xl); }
.margin-xxl {margin: var(--space-xxl); }
.margin-v-xxs {margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
.margin-v-xs {margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.margin-v-sm {margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.margin-v-md {margin-top: var(--space-md); margin-bottom: var(--space-md); }
.margin-v-lg {margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.margin-v-xl {margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.margin-v-xxl {margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
.margin-h-xxs {margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
.margin-h-xs {margin-left: var(--space-xs); margin-right: var(--space-xs); }
.margin-h-sm {margin-left: var(--space-sm); margin-right: var(--space-sm); }
.margin-h-md {margin-left: var(--space-md); margin-right: var(--space-md); }
.margin-h-lg {margin-left: var(--space-lg); margin-right: var(--space-lg); }
.margin-h-xl {margin-left: var(--space-xl); margin-right: var(--space-xl); }
.margin-h-xxl {margin-left: var(--space-xxl); margin-right: var(--space-xxl); }