:root {
  --text-color: #000000;
  --error-color: #000000;
  --disabled-color: #000000;
  --border-color: var(--text-color);
  --border-color-selected: var(--secondary-color);
  --background-color: #ffffff;
  --primary-color-very-very-light: #000000;
  --primary-color-hover: #dddddd;
  --primary-color-focus: #000000;
  --primary-color-very-light: #000000;
  --primary-color-light: #000000;
  --primary-color: #000000;
  --secondary-color-very-very-light: #000000;
  --secondary-color-very-light: #000000;
  --secondary-color-light: #000000;
  --secondary-color: #000000;
  --secondary-color-hover: #000000;
  --divider-color: rgba(0.27, 0.27, 0.27, 0.5);
  --shadow-color: rgba(0.7, 0.7, 0.7, 0.2);
  --toggle-inactive-color: #000000;
  --cta-text-color: white;
  --cta-gradient: linear-gradient(0deg, var(--secondary-color), var(--secondary-color));
  --cta-disabled-text-color: black;
  --cta-disabled-gradient: linear-gradient(0deg, lightgray, darkgray);
  --debug-panel-color: #ffffff;
  --autofill-color: #f7f7f7;

  --radio-border-color: #000000;
  --radio-border-color-selected: var(--secondary-color);
  --radio-size: 14px;

  --input-border-radius: 5px;

  --buttons-hover-green: #000000;
  --buttons-hover-grey: #ffffff;
  
  --sepa-background: #ffffff;
  --sepa-color1: #000000;
  --sepa-color2: #000000;
}

footer .copyright {
  color: #000000;
}

header .infobox .label {
  color: #000000;
}

.component.uinavigation .actionbutton {
  border: 2px solid #000000;
}

.component.uinavigation .actionbutton:active {
  filter: brightness(100%);
}

.component.uinavigation .actionbutton.previous {
  color: #000000;
}

.component.uinavigation .actionbutton.previous:active {
  color: white;
  background: #000000;
}

.component.uinavigation .actionbutton.previous .text:before {
  content: url("data:image/svg+xml;utf8,<svg width='40px' height='28px' viewBox='0 -10 36 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 10 1 L 0 11 L 10 21' stroke='%23000' stroke-width='3' fill='none'/></svg>");
}

.component.uinote.warn .note .np {
  border-left: 4px solid #000000;
}
.component.uinote.info .note .np:before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35px' height='35px' viewBox='0 0 35 35'><circle cx='17.5' cy='17.5' r='17.5' fill='%23000'/><line y1='12.996' transform='translate(17.5 14.504)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/><circle cx='1.5' cy='1.5' r='1.5' transform='translate(16 8)' fill='%23fff'/></svg>");
}
.component.uinote.warn .note .np:before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35px' height='35px' viewBox='0 0 35 35'><circle cx='17.5' cy='17.5' r='17.5' fill='%23000'/><line y1='13.004' transform='translate(17.5 8.5)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/><circle cx='1.5' cy='1.5' r='1.5' transform='translate(16 24)' fill='%23fff'/></svg>");
}
.component.uinote.error .note .np:before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='35px' height='35px' viewBox='0 0 35 35'><circle cx='17.5' cy='17.5' r='17.5' fill='%23000'/><path d='M0,8.9V0' transform='translate(18 11.09)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1.5'/><circle cx='1' cy='1' r='1' transform='translate(17 22.004)' fill='%23fff'/><g transform='translate(5 3.004)' fill='none' stroke-linejoin='round'><path d='M12.121,1.623a1,1,0,0,1,1.759,0L25.2,22.524A1,1,0,0,1,24.321,24H1.679A1,1,0,0,1,.8,22.524Z' stroke='none'/><path d='M 13.00000095367432 4.199184417724609 L 3.357891082763672 22 L 22.64211273193359 22 L 13.00000095367432 4.199184417724609 M 13 1.099592208862305 C 13.34508514404297 1.099592208862305 13.69017028808594 1.274164199829102 13.8792896270752 1.623310089111328 L 25.20034980773926 22.52371978759766 C 25.56126022338867 23.19001960754395 25.07881927490234 24 24.3210506439209 24 L 1.678939819335938 24 C 0.9211807250976562 24 0.4387397766113281 23.19001960754395 0.7996501922607422 22.52371978759766 L 12.1207103729248 1.623310089111328 C 12.30982971191406 1.274164199829102 12.65491485595703 1.099592208862305 13 1.099592208862305 Z' stroke='none' fill='%23fff'/></g></svg>");
}
.uiactionbutton.trash .actionbutton {
  background: transparent url("data:image/svg+xml;utf8,<svg width='19px' height='20px' viewBox='-1 0 38 40' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='%23000' stroke-width='4' fill='none' stroke-linecap='round'><path d='M 1 9 H 35 M 10 9 V 5 A 5 5 0 0 1 15 2 H 20 A 5 5 0 0 1 25 5 V 9'/><path d='M 5 9 V 33 A 5 5 0 0 0 10 38 H 25 A 5 5 0 0 0 30 33 V 9'/><path d='M 14 16 V 30 M 21 16 V 30' /></g></svg>") no-repeat;
}

.success-check .check-mark {
  content: url("data:image/svg+xml;utf8,<svg width='42px' height='42px' viewBox='0 0 42 42' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='%23000' stroke-width='2' fill='none'><circle cx='21' cy='21' r='20'/><path d='M 11,22 L 19,30 L 33,15'/></g></svg>");
}

.grid-enum-container .greencheck:before {
  content: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,15 L 12,28 L 30,2' stroke='%23000' stroke-width='4' fill='none'/></svg>");
}

.grid-enum-container-details-mobil .greencheck:before {
  content: url("data:image/svg+xml;utf8,<svg width='14px' height='14px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,15 L 12,28 L 30,2' stroke='%23000' stroke-width='4' fill='none'/></svg>");
}

.grid-enum-container .cross:before {
  content: url("data:image/svg+xml;utf8,<svg width='20px' height='20px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 2,2 L 30,30 M 2,30 L 30,2' stroke='%23000' stroke-width='4' fill='none'/></svg>");
}

.grid-enum-container-details-mobil .cross:before {
  content: url("data:image/svg+xml;utf8,<svg width='14px' height='14px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 2,2 L 30,30 M 2,30 L 30,2' stroke='%23000' stroke-width='4' fill='none'/></svg>");
}

select, select[disabled] {
  background: white url("data:image/svg+xml;utf8,<svg width='20px' height='16px' viewBox='0 0 20 16' version='1.1' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 20,0 10,16' fill='%23000'/></svg>") no-repeat;
  background-position-x: calc(100% - 22px);
  background-position-y: 18px;
}
.component[data-disabled] .label span::after, .component[data-disabled] .sublabel::after {
  content: ' (nicht \00e4nderbar)';
}
.component.uiinputselect select[disabled] {
  opacity: 1;
}
input:disabled {
  background-color: #ffffff;
  color: #000000;
}

.linkset {
  color: #000000;
}
a, .white-box-vertrag a, .linkset .link {
  text-decoration: underline;
  color: #000000;
}

.white-box-beitrag, .white-box-beitrag.tight {
  padding: 0;
}

.component.uiinputcheckbox.switch .inputcheckbox .check {
  border-radius: 18px;
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  background-image: none;
  background-color: #ffffff;
}

.component.uiinputcheckbox.switch .inputcheckbox .check > div:first-child {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #000000;
  top: 3px;
  left: 4px;
}

.component.uiinputcheckbox.switch .inputcheckbox.checked .check > div:first-child {
  background-color: white;
}

.component select.active,
.component .inputbutton.active {
  box-shadow: 0 0 0 2.5px var(--border-color-selected) inset;
}

.grid-enum-container .card.active {
  border: 4px solid var(--border-color-selected);
}

.input.invalid,
.inputarea.invalid,
.inputbutton.invalid,
.inputcheckbox.invalid .check,
.component.invalid .input,
.component.invalid .inputarea,
.component.invalid .inputbutton,
.component.invalid .inputcheckbox .check {
  outline: none;
  border: 2px solid var(--error-color);
}

.component .required-error,
.component .error,
.component .required-auxiliary-error,
.component .auxiliary-error {
  font-size: 18px;
  font-weight: 600;
  background-color: var(--error-color);
  color: white;
  padding: 6px 8px;
  border-radius: 5px;
}

.component .required-error::before,
.component .error::before,
.component .required-auxiliary-error::before,
.component .auxiliary-error::before {
  content: 'Fehler: ';
}

option {
  background-color: white !important;
}