@charset "UTF-8";
:root {
  --white: #fff;
  --black: #000;
  --trans: transparent;
  --jp-blau: #194B7D;
  --jp-blau-light: #1E73BE;
  --jp-blau-xlight: #3e9bd6;
  --jp-blau-xxlight: #e6f2fa;
  --jp-pink: #FF007A;
  --jp-text: var(--black);
  --jp-text-invers: var(--white);
  --jp-text-hilite: var(--jp-blau);
  --jp-text-light: var(--jp-blau-light);
  --main-color: var(--jp-blau);
  --second-color: var(--jp-pink);
  --second-color-hilite: var(--jp-pink);
  --text-reverse: white;
  --text-reverse-hilite: var(--jp-grau);
  --text: var(--jp-text-web);
  --text-hl: var(--jp-gruen-light);
  --text-hilite: var(--jp-gruen);
  --link-color: var(--jp-gruen);
  --link-color-hilite: var(--jp-gruen-light);
  --btn-bg: var(--jp-blau);
  --btn-bg-hilite: var(--jp-blau-light);
  --btn-text: var(--jp-text-invers);
  --btn-text-hilite: var(--jp-text-invers);
  --btn-border: var(--jp-blau-light);
  --btn-border-hilite: var(--jp-blau-light);
  --footer-bg: var(--black);
  --footer-text: var(--jp-grau);
  --footer-lnk: var(--jp-gruen-light);
  --footer-lnk-hilite: var(--jp-gruen-light);
}

.text-white-50 {
  color: var(--jp-text) !important;
}

.pt-3 {
  padding-top: 24px !important;
}

.py-3 {
  padding: 0 !important;
}

.btn,
.form-control {
  border-radius: 0;
}

.button {
  margin-left: 0;
}

#header-menu {
  margin-top: 30px;
}
#header-menu.sticky-top {
  position: inherit;
}

h1, h2, h3, a {
  color: var(--jp-text-hilite);
}

body {
  font-family: "Open Sans", sans-serif;
  scrollbar-color: var(--jp-blau);
  color: var(--jp-text);
}

.region-header-branding-mobile,
.region-header-branding {
  justify-content: flex-start;
  padding: 0;
}
.region-header-branding-mobile img[src*=logo],
.region-header-branding img[src*=logo] {
  width: 100%;
  max-width: 350px;
  margin: 0 0 12px 0;
}
.region-header-branding-mobile #block-bfd-systopia-logomitlink,
.region-header-branding #block-bfd-systopia-logomitlink {
  font-size: 14px;
}

.region-header-branding-mobile {
  padding: 0 15px;
}
.region-header-branding-mobile #block-bfd-systopia-logomitlink-2 {
  font-size: 12px;
}

.navbar-dark .navbar-nav .nav-link, .node--type-dashboard li a {
  color: var(--jp-text);
}
.navbar-dark .navbar-nav .nav-link:hover, .node--type-dashboard li a:hover {
  color: var(--jp-text-light);
}
.navbar-dark .navbar-nav .nav-link.active, .node--type-dashboard li a.active {
  color: var(--jp-blau-light);
}

#menu-add ul.menu-account {
  text-align: right;
}
#menu-add ul.menu-account li {
  display: inline-block;
}
#menu-add ul.menu-account a {
  font-size: inherit;
  border: 1px solid var(--jp-text);
  padding: 7px 18px !important;
  display: inline-block;
  color: var(--jp-text);
}
#menu-add ul.menu-account a:hover {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}
#menu-add ul.menu-account a.active {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}
#menu-add ul.menu-account a:before {
  display: none;
}

.menu--hauptnavigation---mein-bereich-b {
  margin: 20px 0;
}
.menu--hauptnavigation---mein-bereich-b .navbar-nav, .menu--hauptnavigation---mein-bereich-b .nav {
  display: inline-block;
}

li.nav-item, .node--type-dashboard li {
  display: inline-block;
}
li.nav-item a, .node--type-dashboard li a {
  border: 1px solid var(--jp-text);
  padding: 7px 18px !important;
  display: inline-block;
  color: var(--jp-text);
}
li.nav-item a:hover, .node--type-dashboard li a:hover {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}
li.nav-item a.active, .node--type-dashboard li a.active {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}
li.nav-item a, .node--type-dashboard li a {
  display: inline-block;
  padding: 0;
}
li.nav-item + li.nav-item, li.nav-item + .node--type-dashboard li, .node--type-dashboard li + li.nav-item, .node--type-dashboard li + .node--type-dashboard li {
  margin-left: 10px;
}

.alert-dismissible {
  display: none;
}

.path-user .profile {
  text-align: left;
}
.path-user .profile .field-value {
  padding-left: 0;
}
.path-user .profile .field__label, .path-user .profile h4 {
  float: left;
  width: 160px;
}

.btn-primary {
  color: var(--btn-text);
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
}
.btn-primary:hover {
  color: var(--btn-text-hilite);
  background-color: var(--btn-bg-hilite);
  border-color: var(--btn-border-hilite);
}

.webform-submission-persoenliche-daten-ansicht-form #edit-contact-birth-date,
.webform-submission-persoenliche-daten-ansicht-form #edit-contact-phone-primary {
  width: 50%;
}
.webform-submission-persoenliche-daten-ansicht-form #edit-adressfelder div:nth-of-type(2) {
  flex: 0.4;
}

.view-remote-case-neue-antraege-einfache-liste .m-2,
.view-remotecase-offene-antraege-einfache-liste .m-2,
.view-remotecase-abgeschlossene-antraege-einfache-liste .m-2 {
  margin-left: 0 !important;
}

.view-remotecase-offene-antraege-einfache-liste .views-field-fieldset fieldset {
  display: flex;
}
.view-remotecase-offene-antraege-einfache-liste .views-field-fieldset fieldset div + div {
  margin-left: 10px;
}

article.node--type-dashboard ul:not([class]) {
  padding: 0;
  margin: 0;
}

#webform-submission-antragsformular-add-form > .form-item,
#webform-submission-antragsformular-ansicht-add-form > .form-item,
#civiremote-case-update-form > .form-item {
  margin-top: 50px;
}
#webform-submission-antragsformular-add-form > .form-item + .form-item:not(#edit-antrag) h2,
#webform-submission-antragsformular-ansicht-add-form > .form-item + .form-item:not(#edit-antrag) h2,
#civiremote-case-update-form > .form-item + .form-item:not(#edit-antrag) h2 {
  font-size: 24px;
}

[id*=tippy] {
  width: -moz-max-content;
  width: max-content;
}

.tippy-box {
  max-width: 300px;
}

.view-reimbursement-basisdaten {
  margin-top: 20px;
}
.view-reimbursement-basisdaten h3 {
  font-size: 1.5rem;
}

.fieldset-main > fieldset > div:not(.views-field-fieldset-2) {
  margin: 10px 0 0;
}
.fieldset-main legend {
  font-size: 1rem;
  margin-bottom: 0;
}
.fieldset-main .field-content {
  font-size: 18px;
}
.fieldset-main .views-label {
  font-size: 1rem;
}

.fieldset-flex {
  display: flex;
}
.fieldset-flex div + div {
  margin-left: 10px;
}
.xtr-mr .fieldset-flex div + div {
  margin-left: 20px;
}

.block-views-blockreimbursement-basisdaten-block-1 h2 {
  display: none;
}
.block-views-blockreimbursemenet-expenses-block-1 + .block-views-blockreimbursement-basisdaten-block-1 {
  margin-top: 30px;
}
.block-views-blockreimbursemenet-expenses-block-1 + .block-views-blockreimbursement-basisdaten-block-1 h3 {
  font-size: 1.2rem;
}
.block-views-blockreimbursemenet-expenses-block-1 + .block-views-blockreimbursement-basisdaten-block-1 h2 {
  font-size: 1.75rem;
  display: block;
}

.webform-element-help-container--title.webform-element-help-container--title-after.js-form-item.form-item.custom-control.custom-number {
  display: contents !important;
}

.form-item.form-type-item > .field-value {
  padding: 0 rem;
}

.custom-control-label {
  position: relative;
  vertical-align: top;
  margin-bottom: 10px;
}

.js-form-item .form-item-subject .form-control {
  width: 45% !important;
}

.view-reimbursemenet-expenses {
  margin-top: 20px;
}
.view-reimbursemenet-expenses .border {
  border: none !important;
}
.view-reimbursemenet-expenses h3 {
  font-size: 1.2rem;
}
.view-reimbursemenet-expenses .views-row + h3 {
  margin-top: 20px;
}
.view-reimbursemenet-expenses .mt-3 {
  margin-top: 0 !important;
}
.view-reimbursemenet-expenses .p-2 {
  padding: 0 !important;
}

#page-footer, #page-footer-sub {
  padding: 0;
}
#page-footer .region, #page-footer-sub .region {
  padding-left: 0;
}

#block-bfd-systopia-logomitlink-3 img[src*=logo] {
  width: 100%;
  max-width: 200px;
  margin: 0 0 12px 0;
}
#block-bfd-systopia-logomitlink-3 p:last-of-type {
  display: none;
}

.menu-footer li.menu-item a {
  border: 1px solid var(--jp-text);
  padding: 7px 18px !important;
  display: inline-block;
  color: var(--jp-text);
}
.menu-footer li.menu-item a:hover {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}
.menu-footer li.menu-item a.active {
  border-color: var(--jp-text-light);
  color: var(--jp-text-light);
}

#header-menu, #page-footer {
  box-shadow: none;
}

.bg-secondary, .bg-primary {
  background-color: var(--trans) !important;
}

#block-bfd-systopia-antraghinzufugen > div:nth-child(2) > p:nth-child(3) > a:nth-child(1) {
  background-color: var(--btn-bg);
  color: white;
  padding: 8px 12px 8px 12px;
}

#block-bfd-systopia-antraghinzufugen > div:nth-child(2) > p:nth-child(3) > a:nth-child(1):hover {
  background-color: var(--jp-blau-light);
}

#block-bfd-systopia-antraghinzufugen > div:nth-child(2) > p:nth-child(3) {
  margin: 30px 0px 30px 0px;
}

label.custom-control-label[for=edit-allgemein-anmerkungen] {
  font-size: 24px;
  color: var(--jp-blau);
}

.form-item.form-type-item > .field-value {
  flex: 1 0 20%;
  border-bottom: 1px solid #adb5bd;
  padding: 0.5rem;
  text-align: right !important;
}

.form-item.form-type-item > .field-value::after {
  content: " €"; /* Adds the Euro symbol after the field-value */
  font-weight: normal; /* Optional: Adjust font weight */
  font-size: inherit; /* Optional: Match font size */
}

@media (min-width: 768px) {
  #header-menu .nav.navbar-nav li.nav-item a {
    border: 1px solid var(--jp-text);
    padding: 7px 18px !important;
    display: inline-block;
    color: var(--jp-text);
  }
  #header-menu .nav.navbar-nav li.nav-item a:hover {
    border-color: var(--jp-text-light);
    color: var(--jp-text-light);
  }
  #header-menu .nav.navbar-nav li.nav-item a.active {
    border-color: var(--jp-text-light);
    color: var(--jp-text-light);
  }
  #menu-main a.nav-item::before {
    display: none;
  }
  #menu-add {
    padding-top: 0;
  }
  #edit-antrag {
    width: 50%;
  }
  #webform-submission-antragsformular-add-form {
    flex-wrap: wrap;
    display: inline-flex;
  }
  #edit-uebernachtungskosten ~ section .webform-flexbox,
  #edit-uebernachtungskosten .webform-flexbox {
    display: inline-block;
  }
  #edit-uebernachtungskosten ~ section,
  #edit-uebernachtungskosten {
    width: calc(50% - 20px);
    box-sizing: border-box;
    margin: 10px;
  }
  .form-item-allgemein-anmerkungen {
    width: calc(50% - 20px);
    padding-left: 10px;
    margin-right: 20px;
  }
  #edit-belege {
    display: flow-root;
  }
  #edit-actions {
    flex: -webkit-fill-available;
  }
  #edit-belege {
    width: 100% !important;
  }
  #edit-attachments {
    display: flex; /* Activate Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping of child elements */
  }
  #edit-attachments .webform-flex {
    width: calc(33.33% - 20px); /* Each div takes up 33.33% width minus margin */
    margin: 10px; /* Optional margin for spacing between divs */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    display: inline-block;
  }
  #edit-actions input#edit-submit.webform-button--submit {
    margin-left: 1.8%;
  }
}
@media (max-width: 768px) {
  #edit-actions input#edit-submit.webform-button--submit {
    margin-top: 5%;
  }
}
@media (min-width: 992px) {
  .pb-lg-5, .py-lg-5 {
    padding: 0 !important;
  }
}
.view-reimbursement-antragsdaten h5.field-content {
  font-size: 1.5rem !important;
  color: var(--jp-text-hilite);
}
.view-reimbursement-antragsdaten h5.views-label {
  font-size: 1.25rem !important;
}
.view-reimbursement-antragsdaten .field-content .fieldset-flex legend {
  margin-top: 2%;
}
.view-reimbursement-antragsdaten .field-content {
  font-size: 1rem;
}
.view-reimbursement-antragsdaten .views-field .views-field-fieldset-3 {
  margin-bottom: 5%;
}
.view-reimbursement-antragsdaten .views-field .views-field-fieldset-3 .views-label {
  content: ""; /* Necessary for the pseudo-element to work */
  display: block; /* Makes the inserted content a block element, creating a line break */
  margin: 0; /* Optional: Adjust spacing as needed */
}
.view-reimbursement-antragsdaten .views-field-Reisekosten__allgemein-gesamtkosten {
  margin-top: 3% !important;
  font-size: 1.25rem !important;
}
.view-reimbursement-antragsdaten .views-field-Reisekosten__allgemein-gesamtkosten .field-content {
  font-size: 1.25rem !important;
}
.view-reimbursement-antragsdaten {
  margin-bottom: 20px;
}

.block-bfd-systopia-views-block-reimbursemenet-expenses-block-1 .view-empty {
  font-weight: bold;
}

[class*=form-item-expenses][class*=amount] {
  margin-top: 0;
}

[id*=edit-expenses] > .fieldset-wrapper [data-drupal-selector*=edit-expenses][data-drupal-selector*=items]:not([data-drupal-selector*=attachments]) {
  width: 100%;
}
[id*=edit-expenses] > .fieldset-wrapper [data-drupal-selector*=edit-expenses][data-drupal-selector*=items]:not([data-drupal-selector*=attachments]):nth-child(even) {
  background-color: var(--jp-blau-xxlight);
}
[id*=edit-expenses] > .fieldset-wrapper [id*=edit-expenses][id*=attachments] > .fieldset-wrapper {
  width: 100% !important;
}
[id*=edit-expenses] > .fieldset-wrapper {
  width: 75%;
  border: 1px solid #ced4da;
  padding: 2%;
}

.form-wrapper[data-drupal-selector^=edit-expenses][data-drupal-selector*=items] {
  padding: 2% !important;
}

.form-number {
  width: 33%;
}

.edit-total {
  font-weight: bold;
}

.table {
  color: #6c757d;
}
.table thead th {
  border-bottom: 1px solid #ced4da;
}

.civiremote-entity-file {
  margin-top: 6%;
}

[data-drupal-selector*=edit-expenses][data-drupal-selector*=add] {
  margin-top: 10px !important;
}

[data-drupal-selector=edit-expenses][data-drupal-selector*=attachments-items] {
  background-color: none !important;
}

.table .form-control {
  width: 100% !important;
}

.json-forms-array-wrapper > .fieldset-wrapper,
[data-drupal-selector*=edit-expenses][data-drupal-selector*=attachments] > .fieldset-wrapper {
  display: flex; /* Enables flexbox for layout */
  justify-content: space-between; /* Distributes space between flex items */
}

[id*=edit-expenses][id*=attachments-items] td {
  vertical-align: middle;
}

.file {
  margin-bottom: 5%;
  vertical-align: middle;
}

[data-drupal-selector*=edit-expenses] > .fieldset-legend {
  width: -moz-fit-content;
  width: fit-content;
}

[data-drupal-selector*=edit-expenses][data-drupal-selector*=attachments] > .fieldset-legend {
  flex: 1; /* Allows the legend to take available space */
}

[name*=attachments_add] {
  margin-left: 10px; /* Pushes the selector to the right */
  height: auto;
  margin-top: 4.7%;
  margin-bottom: 10px;
}

[edit-expenses-4-1-attachments] [data-drupal-selector*=edit-expenses][data-drupal-selector*=remove] {
  background: var(--jp-blau);
  color: white;
  margin-top: 1%;
}

[id*=edit-expenses][id*=add]:not([data-drupal-selector*=attachments]) {
  margin-bottom: 1%;
  width: 100%;
}

@media (max-width: 768px) {
  [id*=edit-expenses][id*=items] {
    margin-bottom: 10%;
  }
  .form-type-textfield > .form-text {
    width: 100% !important;
  }
  [id*=edit-expenses] > .fieldset-wrapper {
    width: 100% !important;
  }
  .form-number {
    width: 100% !important;
  }
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper {
    display: revert;
  }
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper [class*=table-responsive] {
    margin-bottom: 0px !important;
  }
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper [class*=table-responsive] th,
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper [class*=table-responsive] [id*=edit-expenses][id*=attachments][id*=description],
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper [class*=table-responsive] [id*=edit-expenses][id*=attachments][id*=file-upload] {
    font-size: 0.75rem;
  }
  [id*=edit-expenses][id*=attachments] > .fieldset-wrapper [id*=edit-expenses][id*=attachments-add] {
    width: 93%;
  }
  .fieldset-flex {
    display: block !important;
  }
  .xtr-mr .fieldset-flex {
    display: block !important;
  }
  .xtr-mr .fieldset-flex .views-field-case-type-id__label,
  .xtr-mr .fieldset-flex .views-field-status-id__label {
    margin-left: 0 !important;
  }
}