:root {
  --white: #fff;
  --black: #000;
  --trans: transparent;
  --jp-blau: #194B7D;
  --jp-blau-light: #1E73BE;
  --jp-blau-xlight: #3e9bd6;
  --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;
}

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

.form-control,
.custom-select {
  width: 45% !important;
}

.civiremote-case-create-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 10px;
}
.civiremote-case-create-form .js-form-item.form-item.custom-control.custom-textfield.js-form-type-textfield.form-type-textfield.js-form-item-subject.form-item-subject {
  grid-column: span 1;
}

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

@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;
  }
}
@media (min-width: 992px) {
  .pb-lg-5, .py-lg-5 {
    padding: 0 !important;
  }
}