/* pseudo styles */

:focus {
  outline: none;
  box-shadow: 0 0 1.5px 1px var(--primary-color);
}

.header *:focus {
  box-shadow: none;
}

.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 {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1em;
  color: var(--text-color);
  background: var(--background-color);
  padding-top: 8px;
  margin-top: 0px;
}

@media(max-width: 450px) {
  body {
    margin-left: 0px;
    margin-right: 0px;
  }
}

form {
  margin: auto;
  max-width: 1200px;
  position: relative;
  overflow-y: visible;   /* Default des Ancestors: scroll */
}

a {
  text-decoration: initial;
}

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

select {
  color: var(--text-color);
  background: white;
  height: 35px;
}

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

.header {
  margin-bottom: 16px;  
  border-bottom: 1px solid var(--primary-color);
}

.header .title {
  position: absolute;
  right: 0px;
  font-size: 150%;
  padding: 18px 16px 8px 16px;  
  z-index: -1; /* kann wahrscheinlich weg */
}

.header .logo {
  padding: 12px 0 12px 0;
  max-width: 293px;
  height: 35px; 
}

.header .linkset {
  display: inline;
  overflow-y: auto;
  padding-right: 8px;
  font-size: 13px;
}

.header .linkset .link {
  float: right;
  padding: 0px 8px;
  color: var(--primary-color);
  border-right: 1px solid var(--primary-color);
  cursor: pointer;
}

.header .linkset .link:first-child {
  border-right: none;
}

.header .linkset .link.first-link {
  padding-right: 16px;
}

@media(max-width: 768px) {
  .header {
    padding-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 0px;
  }
  
  .header .title {
    display: none;
  }
  
  .header .logo {
    padding: 4px 0 12px 0;
    width: auto;
	height: 16px;
  }
  
  .header .linkset .link {
    padding-right: 0px;
  }
  
  .header .linkset .link.first-link { /* überschreibt den Desktop-Style */
  	padding-right: 0px;
  }
}

@media(max-width: 450px) {
  .header {
    margin-left: 12px;
    margin-right: 12px;
  }
}
  
.content-side {
  display: table-cell;
  width: 300px;
  min-width: 260px;
  padding-top: 20px;  
  text-align: right; 
  vertical-align: top;
}

.content-main {
  display: table-cell;
  width: 900px;
}

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

.content-form .title {
  color: var(--text-color);
  margin-block-start: 0;
  margin-block-end: 0;
  font-weight: normal;
  font-size: 150%;
}

@media(max-width: 768px) {
  .content-side {
    display: none;
  }
  
  .content-form {
    border: none;
  }
  
  .content-form.logged-in {
  	padding-top: calc(16px + 61px + 8px);
  }
}

#overlay {
  display: none;
  position: fixed; /* fixed heißt bezogen auf den Viewport */
  z-index: 1000;
  top: 0px;
  left: 0px;
  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: 16px;
  padding-top: 0px;
  padding-bottom: 24px;
  overflow-y: visible;
}

.component.uibetterfileupload {
  padding-bottom: 40px;
}

@media(max-width: 450px) {
  .component {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.component .divider {
  width: 100%;
  height: 1px;
  margin-bottom: 24px;
  background: var(--primary-color);
}

.component .label {
  padding-bottom: 8px;
  font-size: 17px;
}

.component .label:has(.help-icon) {
  padding-right: 36px;
}

.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);
}

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

.help-icon:before {
  content: '?';
}

.component .help-icon {  
  position: absolute;  
  top: 0;
  right: 24px;  
  width: 22px;
  height: 22px;
  padding-left: 1px;
  color: var(--primary-color);
  font-weight: bold;
  text-align: center;  
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  transform: translateX(2px);
}

.component.uiinputcheckbox .help-icon {  
  right: 6px;  
}

@media(max-width: 450px) {
  .component.uiinputcheckbox .help-icon {  
    right: 12px;  
  }
}

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

.component .help-text { 
  margin-bottom: 8px;
  box-sizing: border-box;
  border: 1px solid var(--primary-color);
  background: var(--primary-color-very-light);  
  padding: 4px 8px;
  font-size: 13px;
  display: none;
}

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

.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-top: 12px;
}

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

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

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

/* ======== */
/* Dropzone */
/* ======== */

.component .drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: 3px;
  padding: 50px;
  text-align: center;
  color: var(--border-color);
  background: white;
  margin-bottom: 4px;
}

.component .drop-zone.full {
  opacity: 0.75;
}

.component .drop-zone.dragging {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.component .drop-zone a {
  text-decoration: underline;
}

.component .drop-zone input {
  display: none;
}

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

.component .actionbutton {
  position: relative;
}

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

.component .actionbutton .spinner {
  display: none;
  position: absolute;
  top: 6px;
  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:first-child .spinner {
  border-color: transparent var(--primary-color);
}

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

.component .input {
  box-sizing: border-box;
  width: calc(50% - 4px);
  padding: 7px 6px;
  border-radius: 3px;
  font-size: 16px;
  border: 1px solid var(--border-color);
}

.component input.input {
  padding: 7px 10px;
}

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

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

.component.flex .inputbutton { 
  display: inline-flex;
}

.component.uiinputbuttonslist .inputbutton { 
  width: calc(50% - 4px);
  display: block;
  margin-bottom: 8px;
}

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

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

.component .inputbutton .radio {  
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%; 
  vertical-align: top;
  transform: translateY(3px);
  border: 2px solid var(--radio-border-color);
}

.component .inputbutton.active .mark {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  background: var(--primary-color);
  transform: translate(calc((12px - var(--radio-size)) / 2), calc((12px - var(--radio-size)) / 2));
}

.component .inputbutton .label {
  display: inline-block;
  padding: 0px;
  padding-left: 8px;
  font-size: 16px;
}

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

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

.component .inputcheckbox.checked .tick-v {
  width: 2px;
  height: 16px;
  transform: translate(11px, 1px) rotate(30deg);
  background: var(--primary-color);
}

.component .inputcheckbox.checked .tick-h {
  width: 2px;
  height: 8px;
  transform: translate(4px, -6px) rotate(120deg);
  background: var(--primary-color);
}

.component .inputcheckbox .label {
  float: right;
  width: calc(100% - 36px);
  padding: 0px;
  padding-left: 8px;
  transform: translateY(-2px);
}

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

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

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

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

@media(max-width: 1100px) {
  .component.uibankverbindung .inputarea,
  .component .input {
    box-sizing: border-box;
    width: 100%;
  }

  .component .inputbutton {   
    box-sizing: border-box; 
    display: inline-block;
    margin-right: 0px;
    margin-bottom: 8px;
    width: calc(100%) !important;    
  }
  
  .component .inputbutton:last-child {
    margin-bottom: 0px;
  }
}

/* ====== */
/* Slider */
/* ====== */

.component .better-slider {
  position: relative;
}

.component .better-slider .range {
   -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  margin-top: 4px;
  background: transparent;
  width: calc(50% - 4px);   
  outline: none;
  cursor: pointer;
}

.component .better-slider .range::-webkit-slider-runnable-track {
  height: 4px;
  margin: 14px 0px;
  background: var(--primary-color-light);
  -webkit-appearance: none;  
}

.component .better-slider .range::-moz-range-track {
  height: 4px;
  transform: translateY(7px);
  background: var(--primary-color-light); 
  -moz-appearance: none;
}

.component .better-slider .range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -10px;
  background: var(--primary-color);
  border-radius: 50%;
  -webkit-appearance: none;  
  cursor: grabbing;
}

.component .better-slider .range::-moz-range-thumb {
  width: 24px;
  height: 24px;  
  transform: translateY(7px);
  background: var(--primary-color);
  border-radius: 50%;
  -moz-appearance: none;  
  cursor: grabbing;
}

.component .better-slider .markers {
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 12px;
  width: calc(50% - 4px - 24px);
  padding: 0;  
  margin: 16px 0px;
  list-style: none; 
}

.component .better-slider .markers .marker {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--primary-color-light);
  border-radius: 50%;
}

.component .better-slider .labels {
  display: block;
  position: relative;
  width: calc(50% - 4px - 24px);
  height: 24px;
  left: 12px;
  padding: 0;
  margin: 0px;
  margin-bottom: 4px;
  list-style: none;
}

@supports (-moz-appearance:none) {
  .component .better-slider .labels {
    margin-top: 12px;
  }
}

.component .better-slider .labels .label {
  position: absolute;  
  font-size: 14px;
  color: transparent;  
}

.component .better-slider .labels .label.selected { 
  margin-top: -1px;
  font-weight: bold;
  color: var(--primary-color);
  min-width: 50px;
}

@media(max-width: 768px) {
  .component .better-slider {
    overflow: hidden;
  }
  
  .component .better-slider .labels,
  .component .better-slider .markers {
    width: calc(100% - 24px);
  }
  
  .component .better-slider .range {
    width: 100%;
  }
}

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

.component .autocomplete {
  position: relative;  
}

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

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

.component .autocomplete .list .item {
  padding: 0px 10px;
}

.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);  
}

.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 1.5px 1px var(--error-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: 30px;
}

.component.uiinputmultiselect .select-radio {
  display: inline-block;
  position: absolute;
  transform: translate(10px, 10px);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--radio-border-color);
  pointer-events: none;
}

.component.uiinputmultiselect .select-radio .mark.active {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  background: var(--primary-color);
  transform: translate(calc((12px - var(--radio-size)) / 2), calc((12px - var(--radio-size)) / 2));
}

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

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

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

/* ============ */
/* UIInputYesNo */
/* ============ */

@media(max-width: 1100px) {
  .component.uiinputyesno .inputbutton:nth-child(2) {
    margin-right: 8px; 
    margin-bottom: 0px;   
  }
  
  .component.uiinputyesno .inputbutton {     
     width: calc(50% - 4px) !important;
  }
}

/* =========== */
/* 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: 0px;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  .component.uiactionbuttons .actionbutton:last-child {
    margin-bottom: 0px;
  }
}

@media(max-width: 440px) {
  .component.uiactionbutton.logout-button {
  	position: absolute;
    left: 17px;
    top: 65px;
    z-index: 2;
    font-size: 12px;    
  }  
}

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

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

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

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

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

/* ============= */
/* 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 0px;
}

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

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

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

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

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

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

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

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

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

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

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

.component.uianschrift .margin { 
  height: 4px;
}

.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: calc(25% - 2px - 4px);
}

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

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

.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: 0px;
  display: none;
}

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

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

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

.component.uikennzeichen .kennzeichen-de .input {
  display: inline-block;
  width: calc(50% / 3 - 4px);
  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: 0px;  
}

.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%;
  }
}

/* ======== */
/* UICapcha */
/* ======== */

.component.uicaptcha .wrapper {
  float: right;
  overflow: hidden;
  width: 300px;
  height: 74px;
}

.component.uicaptcha .wrapper .g-recaptcha {
  margin: -1px;
}

/* =============================== */
/* 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 0px;
  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: 0px;
}

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

.component.uinote.warn .note {
  border: 1px solid #ffc12f;
  border-left-width: 8px;
  background: #fff9ea;
}

/* user info-box note style */
.component.uinote.userInfos {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 0;
  font-size: 12px;
  color: var(--primary-color);
  text-align: right;
}

@media(max-width: 768px) {
  .component.uinote.userInfos {
  	top: 6px;
  	left: 16px;
  }
}

.component.uinote.userInfos .note {
  background: white;
  border: 1px solid var(--primary-color);
  padding: 4px 8px;
}
    
/* error note style */
.component.uinote.error .note {
  color: var(--error-color);
  background: white;
  border: 1px solid var(--error-color);
  border-left-width: 8px;
}
    
.component.uinote .note .np {
  padding-top: 12px;
}

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

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

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

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

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

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

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

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

/* ============== */
/* UIMobileNavbar */
/* ============== */

.component.uimobilenavbar {  
  display: none;  
  padding: 0px;
  overflow-y: visible;
}

.component.uimobilenavbar .navitem {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  height: 42px;
}

.component.uimobilenavbar .navitem .arrow {  
  position: absolute;
  left: -8px;
  top: calc(21px - 8px - 5px);
  width: 16px;
  height: 16px;   
  transform: scale(0.75);
}

.component.uimobilenavbar .navitem .arrow .tick-top {
  position: absolute;
  left: calc(50% - 8px);
  top: 2px;
  width: 16px;
  height: 2px;
  transform: rotate(45deg);
  background: var(--primary-color);
}

.component.uimobilenavbar .navitem .arrow .tick-bottom {
  position: absolute;
  left: calc(50% - 8px);
  bottom: 2px;
  width: 16px;
  height: 2px;
  transform: rotate(-45deg);
  background: var(--primary-color);
}

.component.uimobilenavbar .navitem.disabled .arrow .tick-top,
.component.uimobilenavbar .navitem.disabled .arrow .tick-bottom {
  background: var(--disabled-color);
}

.component.uimobilenavbar .navitem:first-child .arrow {
  display: none;
}

.component.uimobilenavbar .navitem .icon { /* Icon wird als background-Image im style-Attribut eines leeren divs gerendert */  
  position: absolute;
  left: calc(50% - 21px + 5px);
  top: 0;
  box-sizing: border-box; 
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.component.uimobilenavbar .navitem.active .icon {
  border-width: 3px;
  width: 34px;
  height: 34px;
  margin-top: -1px;
}

.component.uimobilenavbar .navitem.disabled .icon {
  border: 2px solid var(--disabled-color);
  color: var(--disabled-color);
  cursor: initial;
}

.component.uimobilenavbar .navitem.disabled .icon:after {
  content: ' '; /* damit es überhaupt wirkt (in allen Browsern) */
  position: absolute;
  border-radius: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.3);
}

@media(max-width: 768px) {
  .component.uimobilenavbar {
    display: block;
  }
}

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

.component.uinavigation {
  margin-top: -2px;
  padding-top: 2px;
  overflow-y: auto;
}

.component.uinavigation .actionbutton {
  float: left;
  border: 1px solid var(--primary-color);
}

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

.component.uinavigation .actionbutton:first-child {
  color: var(--primary-color);
  background: transparent;  
}

.component.uinavigation .actionbutton:first-child:active {
  color: white;
  background: var(--primary-color);
}

.component.uinavigation .actionbutton:last-child {
  float: right;
  border: 0px;
}

@media(max-width: 768px) {
  .component.uinavigation {
    height: 76px;
  }
  
  .component.uinavigation .actionbutton {
    position: absolute;
    left: 16px;
    width: calc(100% - 32px);
    box-sizing: border-box;
    text-align: center;
  }
  
  .component.uinavigation .actionbutton:first-child {    
    top: 40px;
  }
  
  .component.uinavigation .actionbutton:last-child {    
    top: 0px;
  }
}

@media(max-width: 450px) {
  .component.uinavigation .actionbutton {
    left: 12px;
    width: calc(100% - 24px);
  }
}

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

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

.component.uitable .table-link {
  color: var(--primary-color);
  cursor: pointer;
  margin-right: 0;
}
  
.component.uitable .table .sortable {
  cursor: pointer;
  display: flex;
}

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

.component.uitable .row:has(.header) {
  background: var(--primary-color);
}

.component.uitable .row .header {
  padding: 8px;
  height: 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--primary-color);
  color: white;
  text-align: left;
}

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

.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(--primary-color-very-light);
}

.component.uitable .row .cell {
  padding: 8px;
  height: 24px;
  border-bottom: 1px solid var(--border-color);
}

.component.uitable .row:last-child .cell {
  border-bottom: none !important;
}

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

/* ================== */
/* UIBetterFileUpload */
/* ================== */

.component.uibetterfileupload .upload-fails,
.component.uibetterfileupload .upload-fail-max-count {
  color: var(--error-color);
  background: white;
  border: 1px solid var(--error-color);
  border-left-width: 8px;
  border-radius: 4px;
  padding: 8px 12px;
  min-height: 76px;
  box-sizing: border-box;
  margin-top: 24px;
}

.component.uibetterfileupload .upload-fails .footer {
  margin-top: 16px;
  font-weight: bold;
}

.component.uibetterfileupload .upload-fails .heading,
.component.uibetterfileupload .upload-fail-max-count .heading {
  font-weight: bold;
}

.component.uibetterfileupload .upload-fails .dismiss-container,
.component.uibetterfileupload .upload-fail-max-count .dismiss-container {
  margin-top: 16px;
  margin-bottom: 8px;
}

.component.uibetterfileupload .upload-fails .dismiss-container a,
.component.uibetterfileupload .upload-fail-max-count .dismiss-container a {
  padding: 5px 20px;
  color: var(--error-color);
  border: 1px solid var(--error-color);
  border-radius: 3px;
}

.component.uibetterfileupload.invalid .input {
  border-color: var(--border-color);
}

.component.uibetterfileupload.invalid *:focus {
  outline: none;
  box-shadow: 0 0 1.5px 1px var(--primary-color);
}

.component.uibetterfileupload.invalid .input.invalid {
  border-color: var(--error-color);
}

.component.uibetterfileupload.invalid .input.invalid:focus {
  outline: none;
  box-shadow: 0 0 1.5px 1px var(--error-color);
}

.component.uibetterfileupload .upload-footer {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.component.uibetterfileupload .file-counter {
  text-align: right;
}

@media(min-width: 961px) {
  .component.uibetterfileupload .file-formats::before {
    content: "Unterst\FCtzte Dateiformate: ";
  }
}
  
.component.uibetterfileupload .list {
  margin-top: 30px;
  background: white;  
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.component.uibetterfileupload .list:empty {
  display: none;
}

.component.uibetterfileupload .list .item {
  padding: 8px 8px;  
  border-bottom: 1px solid var(--border-color);  
  display: flex;
  justify-content: space-between;
}

.component.uibetterfileupload .list .item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  column-gap: 10px;
  align-items: center;
}

.component.uibetterfileupload .list .item .name img {
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;  
}

.component.uibetterfileupload .list .item .name .label {
  display: flex;
  flex-direction: column;  
  padding-bottom: 0;
}

.component.uibetterfileupload .list .item:last-child {
  border-bottom: none;
}

.component.uibetterfileupload .list .item .controls {
  display: flex;
  column-gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.component.uibetterfileupload .list .item .controls .icons {
  position: relative;
}

.component.uibetterfileupload .list .item .controls .state,
.component.uibetterfileupload .list .item .controls .action {
  position: absolute;
  top: -16px;
  right: 4px;
}

.component.uibetterfileupload .list .item .controls .loading {  
  transition: opacity 1s ease;
}

.component.uibetterfileupload .list .item .controls .loading:after {
  content: " ";
  display: block;
  position: absolute;
  top: 10px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-color);
  border-color: var(--primary-color) var(--primary-color-light) var(--primary-color) var(--primary-color-light);
  animation: anim-spinner 1.2s ease infinite;
}

.component.uibetterfileupload .list .item .controls .success {
  transition: opacity 0.4s ease 1s;
}

.component.uibetterfileupload .list .item.done .controls .success {
  opacity: 0;
}

.component.uibetterfileupload .list .item .controls .success .tick-v {
  width: 2px;
  height: 16px;
  transform: translate(-10px, 11px) rotate(30deg);
  background: var(--primary-color);
}

.component.uibetterfileupload .list .item .controls .success .tick-h {
  width: 2px;
  height: 8px;
  transform: translate(-17px, 4px) rotate(120deg);
  background: var(--primary-color);
}

.component.uibetterfileupload .list .item .controls .fail {
  padding: 6px 0px;
}

.component.uibetterfileupload .list .item .controls .remove {
  width: 32px;
  height: 32px;
  cursor: pointer;  
}

.component.uibetterfileupload .list .item .controls .category,
.component.uibetterfileupload .list .item:not(.fail) .controls .remove {
  opacity: 0;
  transition: opacity 0.4s ease 1s;
}

.component.uibetterfileupload .list .item.done .controls .category,
.component.uibetterfileupload .list .item.done .controls .remove {
  opacity: 1;
}

.component.uibetterfileupload .list .item .controls .state,
.component.uibetterfileupload .list .item .controls .action {
  display: none;
}

.component.uibetterfileupload .list .item.loading .controls .loading,
.component.uibetterfileupload .list .item.success .controls .success,
.component.uibetterfileupload .list .item.fail .controls .fail,
.component.uibetterfileupload .list .item.success .controls .category,
.component.uibetterfileupload .list .item:not(.loading) .controls .remove {
  display: block;
}

.component.uibetterfileupload .list .item.fail {
  color: var(--error-color);
}

.component.uibetterfileupload .list .item.done .controls .category {
  width: 230px;
}

.component.uibetterfileupload .list .item .controls .category:empty {
  display: none;
}

.component.uibetterfileupload .invalid-files-hint {
  margin-top: 8px;
  box-sizing: border-box;
  background: var(--primary-color-very-light);
  border-radius: 4px;
  padding: 8px 12px;
}

.component.uibetterfileupload .category-limit-hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--error-color);
}

@media(max-width: 550px) {
  .component.uibetterfileupload .list .item .name {
  	overflow: hidden;
  	text-overflow: ellipsis;
    max-width: calc(100% - 40px);
  	max-height: 48px;
  }
  
  .component.uibetterfileupload .list .item .name .label {
  	font-size: 13px;
  }
  
  .component.uibetterfileupload .list .item .name img {
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;  
  }
  
  .component.uibetterfileupload .list .item .controls {
  	height: 36px;
  }
    
  .component.uibetterfileupload .list .item .controls .loading,
  .component.uibetterfileupload .list .item .controls .success {
  	top: -14px;
  	right: 2px;
  }

  .component.uibetterfileupload .list .item .controls .remove {
  	top: -6px;
  }
  
  .component.uibetterfileupload .list .item .controls .category,
  .component.uibetterfileupload .list .item .controls .fail {
    top: 46px;    
    left: 8px;
    right: 0;
    max-width: calc(100% - 40px);
  }
  
  .component.uibetterfileupload .list .item .controls .remove {
    width: 24px;
    height: 24px;
  }

}

/* =========== */
/* UIWerkstatt */
/* =========== */

.component.uiwerkstatt {
  min-height: 256px;
}

.component.uiwerkstatt .my-location {
  position: absolute;
  left: calc(50% - 4px);
  transform: translate(-29px, 5px);
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-size: 100%;
}

.component.uiwerkstatt select {
  display: block;
  margin: 8px 0px;
}

.component.uiwerkstatt .autocomplete .list .location {
  display: inline-block; 
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  transform: translateY(-2px);
  margin-right: 4px;
}

.component.uiwerkstatt .actionbutton {
  box-sizing: border-box;
  width: calc(50% - 4px);
  text-align: center;
  border: 1px solid var(--cta-gradient);
}

.component.uiwerkstatt .container {
  display: none;
  margin-top: 16px;
}

.component.uiwerkstatt .wrapper {
  display: flex;
  flex-direction: column;
}

@media(min-width: 1101px) {
  .component.uiwerkstatt .wrapper {
    flex-direction: row-reverse;
    height: 332px;
  }
}

.component.uiwerkstatt .w-list {
  position: relative;
  width: calc(50% - 4px);
  height: 100%;
  overflow-y: scroll;
  background: white;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.component.uiwerkstatt .w-list .empty-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--border-color);
}

.component.uiwerkstatt .w-list .item {
  position: relative;
  padding: 4px 8px; 
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
}

.component.uiwerkstatt .w-list .item:last-child {
  border-bottom: none;
}

.component.uiwerkstatt .w-list .item .email {
  position: absolute;
  right: calc(16px + 20px + 16px + 20px + 16px);
  bottom: 16px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: 100% 100%;
}

.component.uiwerkstatt .w-list .item .call {
  position: absolute;
  right: calc(16px + 20px + 16px);
  bottom: 16px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: 100% 100%;
}

.component.uiwerkstatt .w-list .item .route {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: 100% 100%;
}

.component.uiwerkstatt .w-list .item .email:hover,
.component.uiwerkstatt .w-list .item .call:hover,
.component.uiwerkstatt .w-list .item .route:hover {
  transform: scale(1.5);
}

.component.uiwerkstatt .w-list .item:nth-child(n+5):last-child {
  border-bottom: none;
}

.component.uiwerkstatt .w-list .item.active,
.component.uiwerkstatt .w-list .item:hover {
  cursor: pointer;
  background: var(--primary-color-very-light);
}

.component.uiwerkstatt .gmap {
  width: calc(50% - 4px);
  min-height: min(300px, 30vh);
  margin-left: 8px;
}

@media(max-width: 1100px) {
  .component.uiwerkstatt .my-location {
  	left: 100%;
  	transform: translate(-47px, 5px);
  }
  
  .component .better-slider .markers {
  	width: calc(100% - 24px);
  }
  
  .component .better-slider .range {
  	width: 100%;
  }
  
  .component.uiwerkstatt .w-list,
  .component.uiwerkstatt .actionbutton {
    width: 100%;
    height: auto;
  }
  
  .component.uiwerkstatt .w-list {
    max-height: min(400px, 40vh);
  }
  
  .component.uiwerkstatt .gmap {
    width: 100%;
    margin-left: 0px;
    margin-bottom: 8px;
  }
    
}