/* pseudo styles */

:root {
  --mark-offset: calc((20px - var(--radio-size)) / 2);
  --radio-outer-size: calc(var(--radio-size) + 8px);
}

:focus,
.component .inputbutton.active:focus,
.component select.active:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--primary-color) inset;
}

@media (pointer: fine) {
  .component .inputbutton:hover {
    background-color: var(--primary-color-hover);
  }
}

.component select:hover {
  background-color: var(--primary-color-hover);
}

header *:focus,
footer *:focus {
  box-shadow: none;
  background-color: transparent;
}

.hidden {
  display: none !important;
}

/* document level styles */

html {
  overflow-y: scroll; /* Fallback für die Browser, die overlay nicht verstehen */
  overflow-y: overlay; /* Scollbar liegt über dem Content */
}

html.no-select { /* Für Drag & Drop, damit nichts falsches selektiert wird. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}

body, select {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1em;
  color: var(--text-color);
  background: var(--background-color);
  padding-top: 0;
  margin: 0;
}

select, option {
  font-weight: 600;
}

form {
  margin: auto;
  max-width: 960px;
  position: relative;
  overflow-y: visible; /* Default des Ancestors: scroll */
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

a {
  text-decoration: initial;
}

textarea {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  resize: vertical;
  color: var(--text-color);
}

select {
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;

  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='%2362BB46'/></svg>") no-repeat;
  background-position-x: calc(100% - 22px);
  background-position-y: 16px;
}

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='gray'/></svg>") no-repeat;
  background-position-x: calc(100% - 22px);
  background-position-y: 16px;
}

template { /* template-Element im IE und Edge ausblenden */
  display: none;
}

header, footer {
  background-color: white;
  padding: 50px 45px 5px 45px;
  box-shadow: 0 2px 6px 1px var(--shadow-color);
  color: var(--disabled-color);
  font-weight: bold;
}

header.fixheader {
  position: sticky;
  top: 0;
  z-index: 100;
}

.content-main {
  min-height: 5em;
  flex: 1;
}

header {
  margin-bottom: 6px;
  padding-top: 10px;
}

footer {
  margin-top: 16px;
}

header .title {
  position: absolute;
  right: 0;
  font-size: 150%;
  padding: 18px 16px 8px 16px;
}

header .subtitle {
  font-size: 150%;
}

header .logo {
  max-width: 50vw;
  margin-bottom: 8px;
  overflow-x: visible;
}

header .logo img {
  max-width: 430px;
  height: 51px;
}

.linkset {
  display: flex;
  flex-wrap: wrap;
  padding-right: 8px;
  padding: 0;
  font-size: 16px;
  color: #393939;
}

.linkset .link {
  color: #393939;
  cursor: pointer;
}

footer .copyright {
  color: #A2A2A2;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 20px 0;
}

.seal-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 40px;
  margin-left: -38px;
  margin-right: -38px;
}

header .content {
  color: var(--primary-color);
}

@media (max-width: 760px) {

  header {
    padding: 16px 10px 0 10px;
    margin: 0;
  }

  header .title {
    display: none;
  }

  header .logo img {
    padding: 4px 0 12px 0;
  }

  header .logo img {
    max-width: 80vw;
    height: 7.5vw;
  }

  footer .copyright {
    margin-bottom: 36px;
  }

  .linkset .link {
    padding-right: 0;
  }
}

.content-side {
  display: table-cell;
  width: 300px;
  min-width: 260px;
  padding-top: 20px;
  text-align: right;
  vertical-align: top;
}

.content-form {
  position: relative;
  box-sizing: border-box; /* Border gehört mit zur Größe, hier kann es wahrscheinlich weg */
  padding-top: 16px;
}

.content-form .title {
  color: var(--text-color);
}

@media (max-width: 768px) {
  .content-side {
    display: none;
  }

  .content-form {
    border: none;
  }
}

#overlay {
  display: none;
  position: fixed; /* fixed heißt bezogen auf den Viewport */
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw; /* gesamter Bildschirm, unabhängig vom Parent */
  height: 100vh; /* gesamter Bildschirm, unabhängig vom Parent */
  background: black;
  opacity: 0.1;
}

/* component level styles */

.component {
  position: relative; /* Marker, um Kinder auszurichten */
  padding: 0 45px 20px 45px;
  overflow-y: visible;
}

.component .divider {
  width: 100%;
  height: 45px;
}

.component .label,
.component .sublabel {
  padding-bottom: 3px;
  font-size: 18px;
  font-weight: bold;
}

.component .sublabel {
  padding-top: 20px;
}

.component .required-error,
.component .error {
  padding-top: 4px;
  font-size: 13px;
  color: var(--error-color);
}

.component .required-auxiliary-error,
.component .auxiliary-error {
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--error-color);
}

.component:not(.uiinputcheckbox) .caption {
  font-size: 13px;
}

/* ================== */
/* Help (Icon & Text) */
/* ================== */

.component .label span {
  margin-right: 1ex;
}

.help-icon:before {
  content: 'i';
  color: var(--primary-color);
}

.component .help-icon, .help-icon {
  display: inline-block;
  color: var(--primary-color);
  width: 14px;
  height: 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transform: translateY(-2px);
}

.component .help-icon.has-divider {
  top: 25px;
}

.component .help-text {
  margin-bottom: 8px;
  box-sizing: border-box;
  border: 1px solid var(--primary-color);
  border-left: 5px solid var(--primary-color);  
  border-radius: 5px;
  background: white;
  padding: 1em;
  font-size: 13px;
  display: none;
  float: left;
}

.component .help-text.show {
  display: block;
}

.component.uiinputcheckbox .help-text.show {
  margin-top: 10px;
}

.component.uiinputcheckbox.switch .help-text.show {
  margin-top: 25px;
  margin-right: 5px;
  margin-bottom: 0;
}

.component .help-text.fade-in {
  opacity: 0;
  transition: all 0.5s ease-in;
  will-change: opacity;
}

.component .help-text.fade-in.animate {
  opacity: 1;
}

.component .help-text .np {
  padding-bottom: 3px;
}

.component .help-text .np:has(.nh1){
  padding-top: 9px;
}

.component .help-text .np:first-child {
  padding-top: 0;
}

.component .help-text .np:last-child {
  padding-bottom: 0;
}

.component .help-text .nh1 {
  font-weight: bold;
}

.component .help-text .nh2 {
  font-weight: bold;
  font-size: 120%;
}

/* ============ */
/* ActionButton */
/* ============ */

.component .actionbutton {
  position: relative;
}

.component .actionbutton .text {
  margin-right: 14px;
  margin-left: 14px;
}

.component .actionbutton .spinner {
  display: none;
  position: absolute;
  top: 15px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-color);
  border-color: transparent white;
  animation: anim-spinner 1.2s linear infinite;
}

.component.uinavigation .actionbutton.previous .spinner {
  border-color: transparent var(--primary-color);
}

@keyframes anim-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.component .input {
  box-sizing: border-box;
  padding: 16px 0 15px 26px;
  border-radius: var(--input-border-radius);
  font-size: 16px;
  /* font-weight: 600; BJÖRN */
  border: 1px solid var(--border-color);
}

.component select.input {
  padding-top: 12px;
  padding-bottom: 12px;
}

.component input.input {
  padding: 13px 12px;
}

.component select.input {
  padding-left: 14px;
  min-height: 48px !important;
}

.component .inputarea {
  box-sizing: border-box;
  padding: 7px 10px;
  width: 100%;
  border-radius: var(--input-border-radius);
  font-size: 16px;
  border: 1px solid var(--border-color);
}

.component .inputbutton {
  box-sizing: border-box;
  display: inline-block;
  padding: 12px 0 12px 12px;
  margin-right: 8px;
  border-radius: var(--input-border-radius);
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: white;
}

.component:not(.buttons-set-width) .inputbutton {  /* TODO: bessere Lösung für Controls in voller Breite */
  width: 100% !important;
}

.group .inputbutton:first-child {
  margin-top: 0;
  border-bottom-color: transparent;
}

.group .inputbutton {
  margin-top: -1px;
  border-bottom-color: var(--border-color);
}

.uiinputmultiselect select {
  width: 100%;
  margin-top: -1px;
  padding: 12px 0 12px 52px !important;
  min-height: 48px !important;
}

.component select.active:focus,
.component .inputbutton.active:focus {
  border-color: var(--primary-color);
}

.component .inputbutton.active:not(.hidden):focus + .inputbutton {
  border-top-color: var(--primary-color);
}

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

.component .group.lastactive ~ select,
.component .inputbutton.active:not(.hidden) + .inputbutton {
  border-top-color: var(--border-color-selected);
}

.component .inputbutton[disabled] {
  opacity: 0.7;
  cursor: default;
}

.component .inputbutton[disabled]:hover {
  background-color: white;
}

.component .inputbutton:last-child {
  margin-right: 0;
}

.component .inputbutton .radio {
  display: block;
  float: left;
  box-sizing: border-box;
  width: var(--radio-outer-size);
  height: var(--radio-outer-size);
  border-radius: 50%;
  vertical-align: top;
  border: 1px solid var(--radio-border-color);
}

.component .inputbutton.active .radio {
  border-color: var(--radio-border-color-selected);
}

.component .inputbutton.active .mark {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  background: var(--secondary-color);
  transform: translate(var(--mark-offset), var(--mark-offset));
}

.component .inputbutton .label {
  display: block;
  margin-left: 40px;
  margin-right: 15px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
}

.component .inputcheckbox {
  display: inline-block;
  width: calc(100% - 36px);
  padding: 0;
  cursor: pointer;
}

.component.switch .inputcheckbox {
  width: 100%;
}

.component .inputcheckbox.disabled {
  cursor: default;
}

.component.switch .inputcheckbox.disabled .check {
  display: none;
}

.component.switch .inputcheckbox.disabled {
  width: 100%;
}

.component.switch .inputcheckbox.disabled:after {
  position: absolute;
  content: "Inklusive";
  color: var(--disabled-color);
  padding-left: 4px;
  margin-top: 7px;
}

.component .inputcheckbox .check {
  display: inline-block;
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  border-radius: 25%;
  transform: translateY(2px);
  border: 1px solid var(--border-color);
  background: white;
}

.component .inputcheckbox.checked .check {
  background: var(--secondary-color) url("data:image/svg+xml;utf8,<svg width='12px' height='14px' viewBox='0 0 30 23' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,13 L 10,21 L 30,1' stroke='%23fff' stroke-width='4' fill='none'/></svg>") no-repeat 4px 4px;
  border: none;
}

.component .inputcheckbox.disabled.checked .check {
  background: var(--disabled-color) url("data:image/svg+xml;utf8,<svg width='12px' height='14px' viewBox='0 0 30 23' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,13 L 10,21 L 30,1' stroke='%23fff' stroke-width='4' fill='none'/></svg>") no-repeat 4px 4px;
  border: none;
}

.component .inputcheckbox .label {
  float: right;
  width: calc(100% - 34px);
  padding: 0;
  transform: translateY(1px);
  font-weight: bold;
}

.modifikation-container .component .inputcheckbox .label {
  font-weight: 600;
}

.component .inputcheckbox .label a {
  color: var(--primary-color);
}


/*  spezielle Checkbox für ein-/ausklappbare Eintraege */

.component.uiinputcheckbox.collapse {
  float: right;
}

.component.uiinputcheckbox.collapse .check:focus,
.component.uiinputcheckbox.switch .check:focus {
  box-shadow: none;
}

.component.uiinputcheckbox.collapse .inputcheckbox .check {
  display: inline-block;
  box-sizing: border-box;
  width: 26px;
  height: 15px;
  transform: translateY(6px);
  border-style: none;
  background: transparent url("data:image/svg+xml;utf8,<svg width='26px' height='15px' viewBox='0 0 26 15' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,13 L 13,1 L 25,13' stroke='%23A0A0A0' stroke-width='3' fill='none'/></svg>") no-repeat;
}

.component.uiinputcheckbox.collapse .inputcheckbox .label {
  float: none;
}

.component.uiinputcheckbox.collapse .inputcheckbox.checked .check {
  background: transparent url("data:image/svg+xml;utf8,<svg width='26px' height='15px' viewBox='0 0 26 15' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 1,1 L 13,13 L 25,1' stroke='%23A0A0A0' stroke-width='3' fill='none'/></svg>") no-repeat;
}

/* Switch control (checkbox) */

.component.uiinputcheckbox.switch .inputcheckbox .label {
  padding-top: 5px;
  float: left;
  overflow-wrap: anywhere;
  width: calc(100% - 80px);
}

.component.uiinputcheckbox.switch .inputcheckbox .caption {
  float: left;
  margin-top: 18px;
  margin-right: 0px;
}

.component.uiinputcheckbox.switch .inputcheckbox .check {
  position: absolute;
  right: 20px;
  width: 84px;
  height: 37px;
  border-radius: 18.5px;
  border-style: none;
  background-image: none;
  background-color: var(--toggle-inactive-color);
  transition: background-color 350ms ease-in-out;
}

.component.uiinputcheckbox.switch .inputcheckbox.checked .check {
  background-color: var(--secondary-color);
}

.component.uiinputcheckbox.switch .inputcheckbox .check > div:first-child {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: 4px;
  left: 4px;
  transition: left 350ms ease-in-out;
}

.component.uiinputcheckbox.switch .inputcheckbox.checked .check > div:first-child {
  left: 51px;
}


.component .togglebutton,
.component .actionbutton {
  display: inline-block;
  padding: 5px 20px;
  border-radius: var(--input-border-radius);
  cursor: pointer;
  color: var(--cta-text-color);
  background-color: var(--secondary-color);
}

.component .actionbutton.next,
.component .actionbutton.previous,
.component.uiactionbutton.forward .actionbutton,
.component.uiactionbutton.secondary-button .actionbutton,
.component.uiactionbutton.login .actionbutton {
  padding: 7px 22px 9px 22px;
  font-size: 24px;
}

.component .actionbutton.next {
  padding-right: 11px;
}

.component .actionbutton.previous {
  padding-left: 11px;
}


.component .actionbutton[disabled] {
  color: var(--cta-disabled-text-color);
  background: var(--cta-disabled-gradient);
  cursor: default;
}

.component .togglebutton.checked {
  background: var(--primary-color-light);
}

.component.uiactionbutton.login .actionbutton {
  outline: none;
  transition: background-color .3s ease-in-out;
}

.component.uiactionbutton.login .actionbutton:hover {
  background-color: var(--buttons-hover-green);
}

@media (max-width: 1100px) {
  .component {
    padding: 0 25px 20px 25px;
  }

  .component.uibankverbindung .inputarea,
  .component .input {
    box-sizing: border-box;
    width: 100%;
  }

  .component .inputbutton {
    box-sizing: border-box;
    display: inline-block;
    margin-right: 0;
    width: 100% !important;
  }

  .component .inputbutton:last-child {
    margin-bottom: 0;
  }
}

/* ============ */
/* Autocomplete */
/* ============ */

.component .autocomplete {
  position: relative;
}

.component .autocomplete .list {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 100%; /* rendere dieses Element unter das Bezugselement */
  width: 100%;
  box-sizing: border-box;
  display: none;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 5px 0;
  max-height: 188px;
  overflow-y: auto;
}

.component .autocomplete input {
  width: 100%;
}

.component .autocomplete .input:focus + .list:not(:empty) {
  display: block;
}

.component .autocomplete .list .item {
  padding: 5px 10px;
  font-weight: 600;
}

.component .autocomplete .list .item:hover,
.component .autocomplete .list .item.active {
  cursor: pointer;
  color: white;
  background: var(--primary-color);
}

.component .autocomplete .list .item.disabled {
  color: gray;
  background: white;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .component .autocomplete .list {
    width: calc(100%);
  }
}

/* TODO RB: .component.invalid: styles should be made obsolete */
.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: 1px solid var(--error-color);
}

.component.invalid .inputbutton .radio,
.component.uiinputmultiselect.invalid > .select-radio {
  border: 1px solid var(--error-color);
}

.input.invalid:focus,
.inputarea.invalid:focus,
.inputbutton.invalid:focus,
.inputcheckbox.invalid .check:focus,
.component.invalid *:focus,
.component.invalid .inputcheckbox .check:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--error-color) inset;
}

#main\:linkGroup {
  padding: 0 16px;
  margin-bottom: 16px;
}

#main\:linkGroup a {
  padding: 8px;
  padding-left: 0;
  color: var(--primary-color);
  text-decoration: none;
  box-shadow: none;
}

#main\:linkGroup a.active {
  font-weight: bolder;
  color: var(--primary-color);
}

.component.uilink :focus {
  box-shadow: none;
}

.component.uilink .link,
.component.uilink .link a:visited {
  text-decoration: underline;
  color: var(--primary-color);
}

/* ================== */
/* UIInputMultiSelect */
/* ================== */

.component.uiinputmultiselect .group {
  display: inline;
  margin-right: 8px;
}

.component.uiinputmultiselect select {
  padding-left: 52px;
}

.component.uiinputmultiselect .select-radio {
  position: absolute;
  transform: translate(13px, 13px);
  box-sizing: border-box;
  width: var(--radio-outer-size);
  height: var(--radio-outer-size);
  border-radius: 50%;
  border: 1px solid var(--radio-border-color);
  pointer-events: none;
}

.component.uiinputmultiselect.active .select-radio {
  border-color: var(--radio-border-color-selected);
}

.component.uiinputmultiselect .select-radio .mark.active {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  background: var(--secondary-color);
  transform: translate(var(--mark-offset), var(--mark-offset));
}

/* ============= */
/* UIInputSelect */
/* ============= */

.component.uiinputselect select[disabled] {
  opacity: 0.5;
}

.component.uiinputselect select,
.component.uiinputselectlist select {
  /* TODO: bessere Lösung für Controls in voller Breite */
  width: 100% !important;
}

/* ====================================================================== */
/* UIInputDate, UIInputTime, UIInputDecimal, UIInputInteger, UIInputPhone */
/* ====================================================================== */

.component.uiinputdate .input {
  width: 120px;
}

.component.uiinputtime .input,
.component.uiinputdecimal .input,
.component.uiinputinteger .input {
  width: calc(25% - 2px - 4px);
}

.component.uiinputphone .input {
  width: 170px;
}

.component.uibankverbindung .input,
.component.uiinputemail .input,
.px340 .input {
  width: 340px;
}

@media (max-width: 1100px) {
  .component.uiinputtime .input,
  .component.uiinputdecimal .input,
  .component.uiinputinteger .input {
    width: 100%;
  }
}

/* =========== */
/* UIInputArea */
/* =========== */

.component.uiinputarea .charcount {
  font-size: 13px;
  color: var(--text-color);
}

/* =============== */
/* UIActionButtons */
/* =============== */

.component.uiactionbuttons .actionbutton {
  margin-right: 8px;
}

@media (max-width: 1100px) {
  .component.uiactionbuttons .actionbutton {
    box-sizing: border-box;
    margin-right: 0;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
  }

  .component.uiactionbuttons .actionbutton:last-child {
    margin-bottom: 0;
  }
}

.logout-group .component.logout-button {
  float: right;
  position: relative;
  padding: 0;
}

.secondary-button .actionbutton {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  background: transparent;
  font-weight: 600;
  outline: none;
  transition-property: background-color, color;
  transition: .3s ease-in-out;
}

.secondary-button .actionbutton:hover {
  background-color: var(--primary-color);
  color: var(--cta-text-color);
}

@media (max-width: 760px) {
  .logout-group {
    right: 5px;
  }
  .component.logout-button {
    padding-left: 8px;
    padding-right: 0;
    right: 15px;
  }
}

@media (max-width: 500px) {
  .component.logout-button.text {
    display: none;
  }
}

.component.logout-button .actionbutton {
  padding: 0;
  color: var(--text-color);
  background: none;
}

.component.logout-button.img {
  margin-right: 5px;
}

@media (max-width: 760px) {
  header .logo {
    margin-bottom: 5px;
  }

  header .logo img {
    padding: 0;
  }
}

/* ============= */
/* UIOutputLabel */
/* ============= */

.component.uioutputlabel .label {
  padding-bottom: 0;
}

/* ================ */
/* UIBankverbindung */
/* ================ */

.component.uibankverbindung .input[data-key="iban"] {
  text-transform: uppercase;
}

.component.uibankverbindung .auxiliary-error,
.component.uibankverbindung .required-auxiliary-error {
  margin-top: 4px;
  padding-bottom: 0;
}

/* ============= */
/* UIVersicherer */
/* ============= */

.component.uiversicherer {
  overflow-y: visible; /* vollständig anzeigen, aber ohne Scrollbar (also ohne den Container größer zu machen) */
}

.component.uiversicherer input.input {
  display: block;
  margin: 4px 0;
}

.component.uiversicherer .input[x-disabled] {
  display: none;
}

/* ======== */
/* UIPerson */
/* ======== */

.component.uiperson .input {
  display: block;
  margin-bottom: 4px;
  width: 100%;
}

.component.uiperson .input:last-child {
  margin-bottom: 0;
}

.component.uiperson .required-auxiliary-error:last-child {
  padding-bottom: 0;
}

/* ======== */
/* UIHsnTsn */
/* ======== */

.component.uihsntsn .input {
  display: block;
  margin-bottom: 4px;
  width: 66px;
}

.component.uihsntsn .input:last-child {
  margin-bottom: 0;
}

.component.uihsntsn .required-auxiliary-error:last-child {
  padding-bottom: 0;
}

/* =========== */
/* UIAnschrift */
/* =========== */

.component.uianschrift {
  overflow-y: visible;
}

.component.uianschrift .input[data-key="address-2"] {
  margin-right: 8px;
}

.component.uianschrift .input[data-key="address-2"],
.component.uianschrift .input[data-key="address-3"] {
  width: 100%;
}

.component.uianschrift .required-auxiliary-error,
.component.uianschrift .auxiliary-error {
  margin-top: 4px;
}

.component.uianschrift .required-auxiliary-error:last-child {
  padding-bottom: 0;
}

.component.uianschrift.invalid select.input {
  border: 1px solid var(--border-color);
}

@media (max-width: 1100px) {
  .component.uianschrift .input[data-key="address-2"], .component.uianschrift .input[data-key="address-3"] {
    width: calc(50% - 4px);
  }
}

/* ============= */
/* UIKennzeichen */
/* ============= */

.component.uikennzeichen .required-auxiliary-error {
  margin-top: 4px;
}

.component.uikennzeichen .kennzeichen-int .required-auxiliary-error,
.component.uikennzeichen .kennzeichen-de .required-auxiliary-error {
  margin-top: 0;
  display: none;
}

.component.uikennzeichen input.input {
  text-transform: uppercase;
}

.component.uikennzeichen .kennzeichen-de,
.component.uikennzeichen .kennzeichen-int {
  margin-top: 8px;
}

.component.uikennzeichen .kennzeichen-de.short {
  margin-top: 0;
}

.component.uikennzeichen .kennzeichen-int .input {
  display: inline-block;
  width: calc(50% - 4px);
  margin-right: 4px;
}

.component.uikennzeichen .kennzeichen-de .input {
  display: inline-block;
  width: 110px;
  margin-right: 4px;
}

.component.uikennzeichen .kennzeichen-int .input:first-child,
.component.uikennzeichen .kennzeichen-de .input:first-child {
  display: block;
  width: calc(50% - 4px);
  margin-bottom: 4px;
}

.component.uikennzeichen .kennzeichen-de .input[x-disabled] {
  display: none;
}

.component.uikennzeichen .kennzeichen-int .input:last-child,
.component.uikennzeichen .kennzeichen-de .input:last-child {
  margin-right: 0;
}

.component.uikennzeichen.invalid select.input {
  border: 1px solid var(--border-color);
}

@media (max-width: 1100px) {
  .component.uikennzeichen .kennzeichen-de .input {
    width: calc((100% - 8px) / 3);
  }

  .component.uikennzeichen .kennzeichen-int .input {
    width: 100%;
  }

  .component.uikennzeichen .kennzeichen-int .input:first-child,
  .component.uikennzeichen .kennzeichen-de .input:first-child {
    width: 100%;
  }
}

/* =============================== */
/* UIRemoteCommand, UIRemoteScript */
/* =============================== */

.component.uiremotecommand,
.component.uiremotescript {
  display: none;
}

/* ====== */
/* UINote */
/* ====== */

.component.uinote .note {
  box-sizing: border-box;
  background: var(--primary-color-very-light);
  border-radius: 4px;
  padding: 8px 12px;
}

.component.uinote .note .dismiss-container {
  margin: 8px 0;
  margin-top: 24px;
}

.component.uinote .note .dismiss-container a {
  padding: 5px 20px;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 3px;
}

.component.uinote .note.special {
  background: none;
  border: none;
  padding: 0;
}

/* alternate note style */
.component.uinote.alternate .note {
  border: 1px solid var(--primary-color);
  border-left-width: 8px;
}

.component.uinote .note .np {
  padding-top: 12px;
}

.component.uinote .note .np:first-child {
  padding-top: 0;
}

.component.uinote .note .nh1 {
  font-weight: bold;
}

.component.uinote .note .nh2 {
  font-weight: bold;
  font-size: 120%;
}

/* ======== */
/* UINavbar */
/* ======== */

.component.uinavbar {
  padding-left: 0;
  padding-right: 0;
  font-size: 1rem;
  font-weight: normal;
}

.component.uinavbar > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.component.uinavbar .navitem {
  color: var(--secondary-color);
  cursor: pointer;
}

.component.uinavbar .navitem.subitem {
  display: none;
}

.component.uinavbar .navitem.active {
  font-weight: bold;
  cursor: default;
}

.component.uinavbar .navitem.disabled {
  color: var(--disabled-color);
  cursor: default;
}

@media (max-width: 760px) {
  .component.uinavbar {
    display: none;
  }
}

/* ============ */
/* UINavigation */
/* ============ */

.component.uinavigation {
  margin-top: 24px;
  margin-bottom: 12px;
  padding-top: 2px;
  overflow-y: auto;
  clear: left;
}

.component.uinavigation .actionbutton {
  float: left;
  border: 2px solid #707070;
}

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

.component.uinavigation .actionbutton.previous {
  color: #707070;
  font-weight: 600;
  background: transparent;
  outline: none;
  transition: background-color .3s ease-in-out;
}

.component.uinavigation .actionbutton.previous:hover {
  background-color: var(--buttons-hover-grey);
}

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

.component.uinavigation .actionbutton.next {
  float: right;
  border: 1px solid var(--secondary-color);
  outline: none;
  transition-property: background-color, border-color;
  transition: .3s ease-in-out;
}

.component.uinavigation .actionbutton.next:hover {
  background-color: var(--buttons-hover-green);
  border-color: var(--buttons-hover-green);
}

.component.uinavigation .actionbutton.next .text:after,
.uiactionbutton.forward .actionbutton:after {
  position: relative;
  left: 0;
  transition: left .3s ease-in-out;
  content: url("data:image/svg+xml;utf8,<svg width='40px' height='28px' viewBox='6 -10 42 32' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 30 1 L 40 11 L 30 21' stroke='%23fff' stroke-width='3' fill='none'/></svg>");
}

.component.uinavigation .actionbutton.next:hover .text:after {
  left: 5px;
}

.component.uinavigation .actionbutton.next:focus .text:after {
  left: 5px;
}

.component.uinavigation .actionbutton.previous .text:before {
  position: relative;
  right: 0;
  transition: right .3s ease-in-out;
  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='%23707070' stroke-width='3' fill='none'/></svg>");
}

.component.uinavigation .actionbutton.previous:hover .text:before {
  right: 5px;
}

@media (max-width: 960px) {
  .component.uinavigation {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }

  .component.uinavigation .actionbutton {
    margin-left: 0;
    box-sizing: border-box;
    text-align: center;
  }

}

@media (max-width: 440px) {
  .component .actionbutton.next,
  .component .actionbutton.previous,
  .component.uiactionbutton.secondary-button .actionbutton,
  .component.uiactionbutton.login .actionbutton {
    padding: 8px 12px;
    font-size: 19px;
  }

  .component.uinavigation .actionbutton.next .text:after {
    content: url("data:image/svg+xml;utf8,<svg width='20px' height='24px' viewBox='-10 -10 20 24' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 0 0 L 7 7 L 0 14' stroke='%23fff' stroke-width='2' fill='none'/></svg>");
  }

  .component.uinavigation .actionbutton.next:hover .text:after {
    left: 3px;
  }

  .component.uinavigation .actionbutton.next:focus .text:after {
    left: 3px;
  }

  .component.uinavigation .actionbutton.previous .text:before {
    content: url("data:image/svg+xml;utf8,<svg width='20px' height='24px' viewBox='-1 -10 20 24' version='1.1' xmlns='http://www.w3.org/2000/svg'><path d='M 7 0 L 0 7 L 7 14' stroke='%23707070' stroke-width='2' fill='none'/></svg>");
  }

  .component.uinavigation .actionbutton.previous:hover .text:before {
    right: 3px;
  }

  .component.uinavigation {
    margin-top: 18px;
  }

  .component.uinavigation .actionbutton {
    margin-left: 0;
    box-sizing: border-box;
    text-align: center;
  }

}

/* ======= */
/* UITable */
/* ======= */

.component.uitable .table {
  width: 100%;
  background: white;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  font-weight: 600;
}

.component.uitable .table:empty {
  display: none;
}

.component.uitable .row .cell,
.component.uitable .row .header {
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
}

.component.uitable .row .header {
  padding-top: 16px;
  padding-bottom: 14px;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
}

.component.uitable .row .cell {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Header */
.component.uitable .row:first-child:hover {
  background-color: white;
}

.component.uitable .row:hover,
.component.uitable .row:hover + .row .detail {
  background: var(--primary-color-hover);
}

.component.uitable .detailed .row:hover {
  cursor: pointer;
}

.component.uitable .row[data-key="table-empty"] {
  color: var(--border-color);
}

.component.uitable .row[data-key="table-empty"]:hover {
  background: white;
}

.component.uitable .row.selected {
  background: var(--secondary-color-light);
}

.component.uitable .row .cell .delete {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* =========== */
/* Allgemeines */
/* =========== */

.bottom-space {
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .bottom-space {
    padding-bottom: 10px;
  }
}

.rightinput input,
.righttext {
  text-align: right;
}

.rightfloat {
  float: right;
}

.clear {
  clear: both;
}

.bold {
  font-weight: bold;
}

.tightbottom {
  padding-bottom: 0;
}

.less-top-space {
  margin-top: -15px;
}

/* ======= */
/* Spalten */
/* ======= */

.columns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.columns.wrap {
  flex-wrap: wrap;
}

.columns.end {
  align-items: flex-end;
}

.columns > div {
  flex: 1;
}

/***********/
/* Dialoge */
/***********/

.dialog {
  display: none;
  position: fixed;
  z-index: 1010;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.dialog .dialog-container {
  box-shadow: 0 2px 6px 1px var(--shadow-color);
}

.dialog.visible {
  display: flex;
}

/* Der eigentliche Dialog ist ein div unterhalb des divs mit Klasse .dialog */

.centerbuttons {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
}