/* Text sizes */

.t-small {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.42857;
}

.t-medium {
  font-weight: 500;
}

.t-bold {
  font-weight: 900;
}

.t-title {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 2rem;
}

.t-paragraph {
    margin: 0;
    font-size: 1rem;
    font-family: Roboto,sans-serif;
    line-height: 1.5;
    font-weight: 400;
}

@font-face {
  font-family : Roboto;
  font-style  : normal;
  font-weight : 300;
  src         : local("Roboto Light"),
                local("Roboto-Light"),
                url(../fonts/roboto-v18-latin-300.woff2) format("woff2"),
                url(../fonts/roboto-v18-latin-300.woff) format("woff");
}

@font-face {
  font-family : Roboto;
  font-style  : normal;
  font-weight : 400;
  src         : local("Roboto"),
                local("Roboto-Regular"),
                url(../fonts/roboto-v18-latin-regular.woff2) format("woff2"),
                url(../fonts/roboto-v18-latin-regular.woff) format("woff");
}

@font-face {
  font-family : Roboto;
  font-style  : normal;
  font-weight : 500;
  src         : local("Roboto Medium"),
                local("Roboto-Medium"),
                url(../fonts/roboto-v18-latin-500.woff2) format("woff2"),
                url(../fonts/roboto-v18-latin-500.woff) format("woff");
}

@font-face {
  font-family : Roboto;
  font-style  : normal;
  font-weight : 700;
  src         : local("Roboto Bold"),
                local("Roboto-Bold"),
                url(../fonts/roboto-v18-latin-700.woff2) format("woff2"),
                url(../fonts/roboto-v18-latin-700.woff) format("woff");
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* spacings */

.l-m-025 {
  margin: 8px;
}

.l-m-05 {
  margin: 16px;
}

.l-m-1 {
  margin: 24px;
}

.l-m-2 {
  margin: 32px;
}

.l-m-3 {
  margin: 48px;
}

.l-m-4 {
  margin: 64px;
}

.l-mt-025 {
  margin-top: 8px;
}

.l-mt-05 {
  margin-top: 16px;
}

.l-mt-1 {
  margin-top: 24px;
}

.l-mt-2 {
  margin-top: 32px;
}

.l-mt-3 {
  margin-top: 48px;
}

.l-mt-4 {
  margin-top: 64px;
}

.l-mr-025 {
  margin-right: 8px;
}

.l-mr-05 {
  margin-right: 16px;
}

.l-mr-1 {
  margin-right: 24px;
}

.l-mr-2 {
  margin-right: 32px;
}

.l-mr-3 {
  margin-right: 48px;
}

.l-mr-4 {
  margin-right: 64px;
}

.l-mb-025 {
  margin-bottom: 8px;
}

.l-mb-05 {
  margin-bottom: 16px;
}

.l-mb-1 {
  margin-bottom: 24px;
}

.l-mb-2 {
  margin-bottom: 32px;
}

.l-mb-3 {
  margin-bottom: 48px;
}

.l-mb-4 {
  margin-bottom: 64px;
}

.l-ml-025 {
  margin-left: 8px;
}

.l-ml-05 {
  margin-left: 16px;
}

.l-ml-1 {
  margin-left: 24px;
}

.l-ml-2 {
  margin-left: 32px;
}

.l-ml-3 {
  margin-left: 48px;
}

.l-ml-4 {
  margin-left: 64px;
}

/* Basics */

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

body, button, input, select, table {
    font-size: 1rem;
    font-family: Roboto,sans-serif;
    line-height: 1.5;
    font-weight: 400;
}


body.kc-body {
  /* .bc-primary  */
  border-top: 4px solid var(--c-primary);
  margin: 0;
  padding: 0;
  color: var(--c-darkest)
;
  line-height: 1.5;
  background: var(--c-white);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1rem;
  font-family: Roboto,sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:  1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 12px;
  max-width: 820px;
  margin: 0 16px;
}

.grid-content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:  1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 12px;
  margin-bottom: 48px;
}

/* Header Logo */
.header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 1;
  margin-bottom: 32px;
}

.kc-logo {
    margin-top: 62px;
    margin-left: var(--logo-margin-left);
    height: var(--logo-height);
    background: var(--logo-path);
    background-size: contain;
    background-repeat: no-repeat;
}

.kc-logo-text {
  padding: 75px;
  padding-left: 4px;
  font-size: 2rem;
  font-weight: bold;
}

#kc-locale {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  -ms-grid-row: 1;
}

#kc-current-locale-link {
  display: none;
}

.locale-list ul {
  margin: 8px 0 0 0;
  padding: 0;
  text-align: right;
}

.locale-list li{
  display: inline;
  /* font-weight: 300; */
  margin-right: 0.25rem;
}

.text-underline {
  border-bottom: 2px solid var(--c-darkest);
  display            : inline;
  margin-bottom      : -3px;
  /* border-bottom      : 2px solid transparent; */
  -webkit-transition : color .1s,
                       border-color .1s;
  transition         : color .1s,
                       border-color .1s;
  -webkit-appearance: none;
}

.text-underline-submit {
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  line-height: 19px;
  font-weight: 500;
  text-align: center;

  /* Webkit / iOS Submit Button reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  margin: 0;

  border-bottom: 2px solid #011926;

  vertical-align: middle;
  padding: 0;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  opacity: 1;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* .text-underline:not(:focus) {
    border-bottom: 2px solid var(--c-darkest)
;
} */

/* .text-underline:hover {
    border-color: var(--c-darkest)
;
    -webkit-transition-duration: .2s;
    transition-duration: .2s
} */

a, a:hover, a:focus {
  color: var(--c-darkest);
  text-decoration: none;
  outline-offset: 5px;
}

:focus {
  outline: 2px solid var(--c-darkest)
;
}

/* li.text-underline {
  border-bottom: 1px solid var(--c-darkest)
;
} */

li.locale-current {
  /* font-weight: 700; */
  border-bottom: 0px transparent;
}

/* li.locale-current {
  border-bottom: 2px solid var(--c-darkest)
;
} */

.text-underline:hover, .text-underline:hover a, li.text-underline:hover, li.locale-current:hover {
    color: var(--c-dark);
    border-color: var(--c-dark)
}


/* content */
.grid-content-area {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 3;
}

.header-content {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 1;
}

/* #kc-page-title {
  display: none;
} */

#kc-content {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 2;
}

/* Infocards */

#kc-infocards {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 3;
}

#kc-infocards a:focus>div {
  outline: 2px solid #260102;
}

.teaser {
  width: 100%;
  height: auto;
  /* min-height: 15rem; */
  padding: 24px;
  margin-top: 16px;
  /* background-color: var(--c-lightest); */
}

.teaser-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  height: 56px;
  -webkit-box-orient: horizontal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 16px;
}

.t-subtitle {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.36364;
}

.teaser-link-bottom {
  -webkit-margin-after: 0;
  -webkit-margin-before: 0;
  border-bottom: 2px solid #260106;
  font-weight: 700;
}

.badgecontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.badge {
  flex-grow: 0;
  flex-basis: auto;
  max-width: 135px;
  margin: 8px 0 8px;
  background-color: inherit!important;
}

#appstore {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 4;
}

#playstore {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
  -ms-grid-row: 5;
}

.app-teaser {
  height: 40px;
  width: auto;
  text-decoration: none;
}

.app-teaser svg {
  width: auto;
}

/* Form Elements */

.l-one-whole {
  width: 100%;
}

/* .l-one-whole + .l-one-whole {
    margin: 16px;
} */

.l-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* input field */
.control-label {
  font-weight: 400;
  line-height: 1.42857;
  font-size: 0.875rem;
}

.input {
  width: 100%;
  height: 48px!important;
  color: currentColor;
  font-size: inherit;
  border: 1px solid var(--c-light)!important;
  border-radius: 2px;
  background-color: var(--c-white);
  line-height: normal;
  padding: 0 0 0 12px!important;
}

.input:focus, .input:hover {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.input:focus {
  outline: 0;
  border-color: currentColor;
  -webkit-box-shadow: 0 0 0 1px currentColor inset;
  box-shadow: inset 0 0 0 1px currentColor;
}

.input:hover {
  -webkit-box-shadow: 0 0 24px -5px rgba(38,1,6,.18);
  box-shadow: 0 0 24px -5px rgba(38,1,6,.18);
}

/* .checkbox {
  position: absolute;
  border: 0;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
} */

.icon-wrapper {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  padding: 0 3px;
  border-width: 2px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 1;
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  fill: currentColor;
  vertical-align: middle;
  font-style: normal;
}

.icon-small {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.icon-large {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

.icon-trans {
  width: 100%;
  min-width: 0;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  opacity: 0;
  -webkit-transition: opacity .1s,-webkit-transform .2s ease-out;
  transition: opacity .1s,-webkit-transform .2s ease-out;
  transition: transform .2s ease-out,opacity .1s;
  transition: transform .2s ease-out,opacity .1s,-webkit-transform .2s ease-out;
  margin: -2px 0;
}

.icon-trans-inv {
  width: 100%;
  min-width: 0;
  -webkit-transform: scale(.5);
  transform: scale(.5);
  opacity: 1;
  -webkit-transition: opacity .1s,-webkit-transform .2s ease-out;
  transition: opacity .1s,-webkit-transform .2s ease-out;
  transition: transform .2s ease-out,opacity .1s;
  transition: transform .2s ease-out,opacity .1s,-webkit-transform .2s ease-out;
  margin: -2px 0;
}

.checkbox:focus+.label .icon-wrapper, .checkbox:hover+.label .icon-wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.checkbox:focus+.label .icon-wrapper {
  outline: 0;
  border-color: currentColor;
  -webkit-box-shadow: 0 0 0 1px currentColor inset;
  box-shadow: inset 0 0 0 1px currentColor;
}

.checkbox:hover+.label .icon-wrapper {
  -webkit-box-shadow: 0 0 24px -5px rgba(38,1,6,.18);
  box-shadow: 0 0 24px -5px rgba(38,1,6,.18);
}

.checkbox:checked+.label .icon-wrapper {
    border-color: var(--c-darkest)
;
}

.checkbox:checked+.label .icon-trans {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.form-group + .form-group {
    margin: 16px;
}

/* Buttons */

.button {
  /* Webkit / iOS Submit Button reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;

  vertical-align: middle;
  padding            : 4px 6px;
  color              : inherit;
  opacity            : 1;
  border             : none;
  border-radius      : 2px;
  background-color   : transparent;
  vertical-align     : middle;
  -webkit-transition : opacity .2s,
                       -webkit-box-shadow .2s;
  transition         : box-shadow .2s,
                       opacity .2s,
                       -webkit-box-shadow .2s;
  transition         : opacity .2s,
                       -webkit-box-shadow .2s;
  transition         : box-shadow .2s,
                       opacity .2s;
  cursor             : pointer;
}

.button {
  display : -webkit-inline-box;
  display : -ms-inline-flexbox;
  display : inline-flex;
}

.button:focus {
  outline : 0;
}

.button:not(:active):not(:hover):focus {
  -webkit-box-shadow : 0 0 0 1px var(--c-darkest)
 inset,
                       0 0 0 2px hsla(0,0%,100%,.6) inset,
                       0 0 0 1px var(--c-darkest)
;
  box-shadow         : inset 0 0 0 1px var(--c-darkest)
,
                       inset 0 0 0 2px hsla(0,0%,100%,.6),
                       0 0 0 1px var(--c-darkest)
;
}

.button:active>* {
  -webkit-transform : translateY(.8px);
  transform         : translateY(.8px);
}

.button:hover .text-underline {
  border-color                : var(--c-darkest)
;
  -webkit-transition-duration : .2s;
  transition-duration         : .2s;
}

.main-button {
  padding : 11px 20px;
  border  : 1px solid var(--c-darkest)
;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--c-white);
  background-color: var(--c-darkest)
;
}

.main-button svg:first-child {
  margin-left : -6px;
}

.main-button:hover {
  color: var(--c-white);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-box-shadow: 0 0 24px -5px rgba(38, 1, 6, 0.18);
  box-shadow: 0 0 24px -5px rgba(38, 1, 6, 0.18);
  opacity: 0.9;
}

a.main-button:hover,
a.main-button:focus,
a.main-button:visited {
  color: var(--c-white)!important;
  text-decoration: none!important;
}

.secondary {
    color: var(--c-darkest)
;
    background-color: var(--c-white);
}

/* .button--1J8JbCbj {
    vertical-align: middle;
    padding: 4px calc(4px + 2px);
    color: inherit;
    background-color: transparent;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.2s, -webkit-box-shadow 0.2s;
    transition: opacity 0.2s, -webkit-box-shadow 0.2s;
    transition: box-shadow 0.2s, opacity 0.2s;
    transition: box-shadow 0.2s, opacity 0.2s, -webkit-box-shadow 0.2s;
} */

.input-button {
    /* position: absolute;
    right: 0;
    bottom: 0; */
    height: 48px;
    width: 4rem;
    color: var(--c-white);
    background-color: var(--c-darkest)
;
    border-radius: 0 3px 3px 0;
}

/* pw-visible-button */
.pw-visible-button {
  border: 1px solid var(--c-light)!important;
  border-bottom-color: var(--c-light)!important;
  border-radius: 2px;
  background-color: var(--c-white)!important;
}

.pw-visible-button:focus,
.pw-visible-button:hover {
  -webkit-transform: translateZ(0)!important;
  transform: translateZ(0)!important;
}

.pw-visible-button:after,
.pw-visible-button:focus:after,
.pw-visible-button:hover:after {
  border-width: 0 !important;
}

.pw-visible-button:focus {
  outline: 0;
  border-color: currentColor!important;
  -webkit-box-shadow: 0 0 0 1px currentColor inset!important;
  box-shadow: inset 0 0 0 1px currentColor!important;
}

.pw-visible-button:hover {
  -webkit-box-shadow: 0 0 24px -5px rgba(38, 1, 6, .18)!important;
  box-shadow: 0 0 24px -5px rgba(38, 1, 6, .18)!important;
}

/* search button */


/* .icon--tiM92kPx {
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    fill: currentColor;
    vertical-align: middle;
    font-style: normal;
}

.icon-small--2d4DhrKX {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
} */

/* Alerts */

.l-inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon-titleSize {
  display: inline-block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  fill: currentColor;
  vertical-align: middle;
  font-style: normal;
}

.inner-box > * {
  padding: 0;
  margin: 0; }

.alert-box {
  width: 100%;
  padding: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 16px;
  border-top: 0;
}

.alert-title {
  color: #333333;
  font-size: 1rem;
  font-family: Roboto, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

.alert-success {
  color: #333333;
  background-color: #e5fde9;
  border-color: var(--c-success);
}

.alert-warning {
  color: #333333;
  background-color: #fff3e7;
  border-color: var(--c-warning);
}

.alert-warning svg {
  color: var(--c-warning);
}

.alert-error {
  color: #333333;
  background-color: #fde7e7;
  border-color: var(--c-error);
}

.icon-error {
  height: 32px;
  width: 32px;
  margin: 8px;
  display: inline;
}

.icon-error svg {
  height: 32px;
  width: 32px;
}

.alert-info {
  background-color: rgba(240, 240, 240, 1);
  border-color: var(--c-lightest);
}

.instruction {
  margin-top: 16px;
}

@media (min-width: 480px) {
  .grid-container {
    margin: 0 34px;
  }

  /* .header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-bottom: 32px;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
  } */

  #kc-locale {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
  }

  .locale-list ul {
    margin-top: 52px;
  }

  .secondrow {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
  }

  #kc-content {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
  }

  /* Infocards */
  
  #kc-infocards {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 3;
  }

  #appstore {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 4;
  }

  #playstore {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    -ms-grid-row: 4;
  }

}

@media  (min-width: 600px) {
  .grid-container {
    margin: 0 42px;
  }

  /* .header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    margin-bottom: 32px;
  } */

  #kc-locale {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
  }

  #kc-content {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
  }

  /* Infocards */

  #kc-infocards {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
  }

  #appstore {
    grid-column-start: 3;
    grid-column-end: 4;
    -ms-grid-column: 3;
    /* grid-row-start: 3;
    grid-row-end: 4; */
  }

  #playstore {
    grid-column-start: 4;
    grid-column-end: 5;
    -ms-grid-column: 4;
    /* grid-row-start: 3;
    grid-row-end: 4; */
  }
}

@media (min-width: 1024px) {
  .grid-container {
    max-width: 820px;
    margin: 0 auto;
  }
}

/* colors */

.c-primary {
  color: var(--c-primary)
}

.c-darkest {
  color: var(--c-darkest)
}

.c-dark {
  color: var(--c-dark)
}

.c-medium {
  color: var(--c-medium)
}

.c-light {
  color: var(--c-light)
}

.c-lighter {
  color: var(--c-lighter)
}

.c-lightest {
  color: var(--c-lightest)
}

.c-white {
  color: var(--c-white)
}

.c-error {
  color: var(--c-error)
}

.c-warning {
  color: var(--c-warning)
}

.c-success {
  color: var(--c-success);
}

.c-orange-light {
  color: var(--c-warning-light)
}

.c-green-light {
  color: var(--c-success-light)
}

.c-red-light {
  color: var(--c-error-light)
}

.c-medium--hover:hover {
  color: var(--c-medium)
}

.c-dark--hover:hover {
  color: var(--c-dark)}

.bg-primary {
  background-color: var(--c-primary)

}

.bg-darkest {
  background-color: var(--c-darkest)

}

.bg-dark {
  background-color: var(--c-dark)
}

.bg-medium {
  background-color: var(--c-medium)
}

.bg-light {
  background-color: var(--c-light)
}

.bg-lighter {
  background-color: var(--c-lighter)
}

.bg-lightest {
  background-color: var(--c-lightest)
}

.bg-white {
  background-color: var(--c-white)
}

.bg-error {
  background-color: var(--c-error)
}

.bg-warning {
  background-color: var(--c-warning)
}

.bg-lightest--hover:hover {
  background-color: var(--c-lightest)
}

.bg-lighter--hover:hover {
  background-color: var(--c-lighter)
}

.bg-light--hover:hover {
  background-color: var(--c-light)
}

.bc-primary {
  border-color: var(--c-primary)

}

.bc-darkest {
  background-color: var(--c-darkest)

}

.bc-dark {
  background-color: var(--c-dark)
}

.bc-medium {
  background-color: var(--c-medium)
}

.bc-light {
  border-color: var(--c-light)
}

.bc-lighter {
  border-color: var(--c-lighter)
}

.bc-lightest {
  border-color: var(--c-lightest)
}

.bc-transparent {
  border-color: transparent
}

.bc-orange-light {
  border-color: var(--c-warning-light)
}

.bc-green-light {
  border-color: var(--c-success-light)
}

.c-red-light {
  border-color: var(--c-error-light)
}

/* error text color (from keycloak template) */
.required {
  color: var(--c-error);
}