:root {
    --default-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 4px 8px 0px;
    --strong-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 4px 8px 0px;
    --color-white: #ffffff;
    --color-grey-light: #f8f9fa;
    --color-blue-very-light: #f3f8fc;
    --color-blue-light: #3e7b95;
    --color-blue-medium: #3e7b95;
    --color-blue-dark: #3e7b95;
    --color-blue-kisim: #1769b6;
    --color-blue-cistec: #1c7767;
    --color-typo: #212121;
    --color-input-filed-hover: #e8f0f8;
    --color-blue-neutral: #e6e0e9;
    --input-field-height: 56px;
    --input-field-stretch: 100%;
    --input-field-border-size: 1.5px;
    --input-field-border-radius: 0.5rem;
    --input-field-border-color: #b3b3b3;
    --input-big: 36px;
    --input-small: 24px;
    --input-filed-size-checkbox-and-radio: 24px;
}

@media screen and (max-width: 1082px) {
    :root {
        --input-filed-size-checkbox-and-radio: var(--input-big);
    }
}

body {
    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 1.125rem;
    min-height: 100vh;
    color: var(--color-typo);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom: 1rem;
    margin-top: 0;
}

/* GRID CLASSES */

.grid {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
}

.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
    grid-gap: 10px;
}

.grid-2,
.grid-xs-2 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
}

.grid-3,
.grid-xs-3 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr;
}

.grid-4,
.grid-xs-4 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
}

.grid-5,
.grid-xs-5 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-6,
.grid-xs-6 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-7,
.grid-xs-7 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-8,
.grid-xs-8 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid-2575,
.grid-xs-2575 {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 3fr;
    -ms-grid-columns: 1fr 3fr;
}

.grid-7525,
.grid-xs-7525 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 3fr 1fr;
    -ms-grid-columns: 3fr 1fr;
}

.grid-4060,
.grid-xs-4060 {
    display: grid;
    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 2fr 3fr;
    -ms-grid-columns: 2fr 3fr;
}

.grid-6040,
.grid-xs-6040 {
    display: grid;
    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 3fr 2fr;
    -ms-grid-columns: 3fr 2fr;
}

.grid-3366,
.grid-xs-3366 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 2fr;
    -ms-grid-columns: 1fr 2fr;
}

.grid-6633,
.grid-xs-6633 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 2fr 1fr;
    -ms-grid-columns: 2fr 1fr;
}

.grid-255025,
.grid-xs-255025 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 2fr 1fr;
    -ms-grid-columns: 1fr 2fr 1fr;
}

.grid-252550,
.grid-xs-252550 {
    display: grid;

    display: -ms-grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 2fr;
    -ms-grid-columns: 1fr 1fr 2fr;
}

.grid-20n,
.grid-n20,
.grid-40n,
.grid-n40,
.grid-60n,
.grid-n60,
.grid-80n,
.grid-n80,
.grid-100n,
.grid-n100,
.grid-120n,
.grid-n120,
.grid-140n,
.grid-160n,
.grid-180n,
.grid-n180,
.grid-200n,
.grid-n200,
.grid-300n,
.grid-40n40,
.grid-60n60,
.grid-100n40,
.grid-100n60,
.grid-100n80,
.grid-80n40,
.grid-80n60,
.grid-80n80 {
    display: grid;
    grid-gap: 10px;
}

.grid-20n {
    grid-template-columns: 20px 1fr;
}

.grid-n20 {
    grid-template-columns: 1fr 20px;
}

.grid-40n {
    grid-template-columns: 40px 1fr;
    -ms-grid-columns: 40px 1fr;
}

.grid-n40 {
    grid-template-columns: 1fr 40px;
    -ms-grid-columns: 1fr 40px;
}

.grid-60n {
    grid-template-columns: 60px 1fr;
    -ms-grid-columns: 60px 1fr;
}

.grid-n60 {
    grid-template-columns: 1fr 60px;
    -ms-grid-columns: 1fr 60px;
}

.grid-80n {
    grid-template-columns: 80px 1fr;
    -ms-grid-columns: 80px 1fr;
}

.grid-n80 {
    grid-template-columns: 1fr 80px;
    -ms-grid-columns: 1fr 80px;
}

.grid-100n {
    grid-template-columns: 100px 1fr;
    -ms-grid-columns: 100px 1fr;
}

.grid-n100 {
    grid-template-columns: 1fr 100px;
    -ms-grid-columns: 1fr 100px;
}

.grid-120n {
    grid-template-columns: 120px 1fr;
    -ms-grid-columns: 120px 1fr;
}

.grid-n120 {
    grid-template-columns: 1fr 120px;
    -ms-grid-columns: 1fr 120px;
}

.grid-140n {
    grid-template-columns: 140px 1fr;
    -ms-grid-columns: 140px 1fr;
}

.grid-n140 {
    grid-template-columns: 1fr 140px;
    -ms-grid-columns: 1fr 140px;
}

.grid-160n {
    grid-template-columns: 160px 1fr;
    -ms-grid-columns: 160px 1fr;
}

.grid-n160 {
    grid-template-columns: 1fr 160px;
    -ms-grid-columns: 1fr 160px;
}

.grid-180n {
    grid-template-columns: 180px 1fr;
    -ms-grid-columns: 180px 1fr;
}

.grid-n180 {
    grid-template-columns: 1fr 180px;
    -ms-grid-columns: 1fr 180px;
}

.grid-200n {
    grid-template-columns: 200px 1fr;
    -ms-grid-columns: 200px 1fr;
}

.grid-n200 {
    grid-template-columns: 1fr 200px;
    -ms-grid-columns: 1fr 200px;
}

.grid-300n {
    grid-template-columns: 300px 1fr;
}

.grid-40n40 {
    grid-template-columns: 40px 1fr 40px;
    -ms-grid-columns: 40px 1fr 40px;
}

.grid-60n60 {
    grid-template-columns: 60px 1fr 60px;
}

.grid-100n40 {
    grid-template-columns: 100px 1fr 40px;
}

.grid-100n60 {
    grid-template-columns: 100px 1fr 60px;
}

.grid-100n80 {
    grid-template-columns: 100px 1fr 80px;
}

.grid-80n40 {
    grid-template-columns: 80px 1fr 40px;
}

.grid-80n60 {
    grid-template-columns: 80px 1fr 60px;
}

.grid-80n80 {
    grid-template-columns: 80px 1fr 80px;
}

@media screen and (max-width: 576px) and (orientation: portrait) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-2575,
    .grid-3366,
    .grid-7525,
    .grid-6633,
    .grid-255025 {
        grid-template-columns: 1fr;
        -ms-grid-columns: 1fr;
    }
}

.gg0{
    grid-gap: 0;
}

.gg3 {
    grid-gap: 24px;
}

.gg100 {
    grid-gap: 200px;
}

.cg1{
    column-gap: 8px;
}

.cg2{
    column-gap: 16px;
}

p,
li {
    margin-bottom: 0.5rem;
}

.navbar-nav li.nav-item {
    margin-bottom: 0;
}

.m0 {
    margin: 0;
}
.p0 {
    padding: 0;
}

.mb0 {
    margin-bottom: 0;
}

.ml-1 {
    margin-left: 0.5rem;
}
.ml-2 {
    margin-left: 1rem;
}
.ml1{
    margin-left: 8px !important;
}
.ml2 {
    margin-left: 16px !important;
}
.ml3 {
    margin-left: 24px !important;
}
.ml4 {
    margin-left: 32px !important;
}
.ml5 {
    margin-left: 40px !important;
}
.mt1{
    margin-top: 8px !important;
}
.mt2 {
    margin-top: 16px !important;
}
.mt3 {
    margin-top: 24px !important;
}
.mt4 {
    margin-top: 32px !important;
}
.mt5 {
    margin-top: 40px !important;
}
.mbHalf {
    margin-bottom: 4px;
}

.mtHalf {
    margin-top: 4px;
}

.mrHalf {
    margin-right: 4px;
}

.mlHalf {
    margin-left: 4px;
}


.mb1{
    margin-bottom: 8px !important;
}
.mb2 {
    margin-bottom: 16px !important;
}
.mb3 {
    margin-bottom: 24px !important;
}
.mb4 {
    margin-bottom: 32px !important;
}
.mb5 {
    margin-bottom: 40px !important;
}
.pl1 {
    padding-left: 8px !important;
}
.pl2 {
    padding-left: 16px !important;
}
.pl3 {
    padding-left: 24px !important;
}
.pl4 {
    padding-left: 32px !important;
}
.pl5 {
    padding-left: 40px !important;
}

.pr1 {
    padding-right: 8px !important;
}
.pr2 {
    padding-right: 16px !important;
}
.pr3 {
    padding-right: 24px !important;
}
.pr4 {
    padding-right: 32px !important;
}
.pr5 {
    padding-right: 40px !important;
}
.ml7{
    margin-left: 56px;
}
.ml8 {
    margin-left: 64px;
}
.ml60{
    margin-left: 60px;
}

.mr-5 {
    margin-right: 2.5rem;
}

.noTextDecoration {
    text-decoration: none;
}

.align-right {
    text-align: right;
}

/* INHALTS-STYLES */

body {
    background-color: #fff;
    margin: 0 0 0 0;
}

.main .navbar.fixed-top {
    /*width: 100vw;
    height: 60px;
    padding-top: 8px;*/
    background-color: #fff !important;
    box-shadow: var(--default-shadow);
}
.navbar.fixed-top {
    z-index: 2;
}

.navbar.fixed-top.bg-light {
    background-color: #fff !important;
    /*background-color: rgba(255,255,255, 0.7)!important;*/
}

.addShadow {
    box-shadow: var(--strong-shadow);
}

.container.main {
    margin-top: 36px;
    min-height: calc(100vh - 400px);
}

.list-group-flush > .list-group-item {
    background-color: transparent;
    padding-left: 0;
}

.bg-primary {
    background-color: #1769b6 !important;
}

.btn-primary {
    padding: 0.45rem 3rem;
    line-height: 1.5;
    border-radius: var(--input-field-border-radius);
    background-color: #1769b6;
    border-color: #1769b6;
}
.btn-group .btn-primary{
    padding: 6px 12px;
}

.btn-outline-primary {
    color: #1769b6;
    border-color: #1769b6;
}

a {
    color: #1769b6;
}

a.noUnderline,
.breadcrumb-item a {
    text-decoration: none;
}

a.anchor {
    display: block;
    position: relative;
    top: -84px;
    visibility: hidden;
}

a.anchor.anchor-first {
    top: -234px;
}

a.linkliste {
    line-height: 1.2;
    margin-bottom: 16px;
    display: block;
}

.breadcrumb-item + .breadcrumb-item:before {
    content: ">";
}

.list-group-flush > a.active {
    color: #1769b6;
    font-weight: bold;
    border-color: rgba(0, 0, 0, 0.125);
}

.toc {
    position: sticky;
    top: 150px;
    right: 0;
    z-index: 2;
    height: calc(100vh - 7rem);
    overflow-y: auto;
}

.badge {
    font-weight: normal;
    font-size: 1rem;
}

h1 {
    font-size: 2.5rem;
    /* 40px */
}

h2 {
    font-size: 2rem;
    /* 32px */
}

h3 {
    font-size: 1.625rem;
    /* 26px */
}

h4 {
    font-size: 1.25rem;
    /* 20px */
}

h5 {
    font-size: 1.125rem;
    /* 18 px */
}

h6 {
    font-size: 1rem;
    /* 16px */
}

h2,
h3 {
    margin-top: 32px;
}

h4 {
    margin-top: 32px;
    margin-bottom: 8px;
}

h3.popover-header {
    margin-top: 0;
}

.block-type-heading + .block-type-heading h3 {
    margin-top: 16px;
}

.block-type-markdown img {
    max-width: 100%;
    height: auto;
}

.micropadding {
    height: 8px;
    display: block;
}

.noWrap {
    white-space: nowrap;
}

.mainContainer {
    margin-bottom: 240px;
}

.public .datepicker-dropdown {
    margin-top: 50px;
}

.datepicker td,
.datepicker th {
    padding: 6px 8px;
}

.ptHalf {
    padding-top: 4px;
}

.pt0 {
    padding-top: 0;
}

.pb0 {
    padding-bottom: 0;
}

.pt1 {
    padding-top: 8px;
}

.mt1 {
    margin-top: 8px;
}

.ml1 {
    margin-left: 8px;
}

.ml2 {
    margin-left: 16px;
}

.rowhover:hover {
    background-color: #f6f6f6;
}

.verticalCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
}
.verticalCenterItem {
    display: flex;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.hide {
    display: none;
}
.verticalCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-container{
    flex-direction: row-reverse;
}
/* ----------------- CLASSES ADDED FOR DEIGN OF USERPOOL -----------------*/
/* -------------------------- GENERAL COMPONENTS -------------------------*/

h3 {
    color: var(--color-blue-kisim);
    font-weight: 400;
}

.h3-form {
    display: flex;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

p {
    hyphens: auto;
}
p+h1{
    margin-top: 24px;
}
h1+p {
    margin-top: 8px;
}

.p-ch-55 {
    max-width: 55ch;
}

.p-ch-45 {
    max-width: 45ch;
}

.p-ch-30 {
    max-width: 30ch;
}

@media (max-width: 850px) {
    p {
        max-width: 100%;
    }
}

.a-datenschutz {
    color: var(--color-blue-kisim);
}

.custom-control-label {
    font-size: 1.125rem;
    margin-left: 0.5rem;
    margin: 0;
    cursor: pointer;
    padding-left: 0.5rem;
}

/* --------------------------------- HERO --------------------------------*/

.hero {
    width: 95vw;
    height: 160px;
    background: linear-gradient(158deg, #5ec2e0 0%, #4c83b9 100%);
    /* text-align: center; */
    border-radius: 0 80px 80px 0;
}

.hero-text, .hero-title {
    display: inline-flex;
    align-items: center;
    max-width: 600px;
    /* height: 100%; */
    padding: 0 15px;
    /*     margin-right: -5vw; */
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 200;
    line-height: 1.125;
    letter-spacing: 1.5px;
}
.hero-title{
    font-size: 2.25rem;
}
.herocontent-links{
    height:160px;
    /* position: absolute; */
    top: 50%;
}

@media (min-width: 576px) and (max-width: 900px) {
    .hero-text {
        font-size: 1.5rem;
    }
}
@media (max-width: 576px) {

.herocontent-links{
    height:120px;
}
    .hero-text {
       display: none;
    }
    .hero-title {
        font-size: 1.5rem;
    }
    .hero {
        height: 120px;
        border-radius: 0 60px 60px 0;
    }
    .container.main {
    margin-top: 24px;
    }
}


.infofeld {
    margin-bottom: 1.5rem;
}

/* --------------------------------- FORM GRID & Container --------------------------------*/

.form-grid-container {
    margin: 3.6rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2rem;
    justify-content: center;
}

.form-grid:nth-child(1) {
    padding-right: 5rem;
}

@media (max-width: 992px) {
    .form-grid-container {
        margin: 2.4rem 0;
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 4rem;
    }

    .form-grid:nth-child(1) {
        padding-right: 0rem;
    }
}

@media (max-width: 576px) {
    .form-grid-container {
        margin: 2.4rem 0;
        row-gap: 3rem;
    }

    .form-grid {
        padding: 0;
        border-left: none;
    }
}

/* --------------------- BTN ------------------------*/

.btn-submit {
    grid-column: 2 / -1;
}

@media (max-width: 992px) {
    .btn-submit {
        grid-column: 1 / -1;
    }
}


.btn-group-xs>.btn, .btn-xs {
    padding: 2px 4px;
    font-size: .875rem;
    line-height: 1.2;
    border-radius: .2rem;
}
/* ----------------- NUMBERS IN CIRCLES ----------------- */

.section-label-container {
    display: flex;
    margin: 0 0 1.5rem 0;
}

.section-label-circle {
    position: relative;
    height: 2.4rem;
    width: 2.4rem;
    margin-right: 1rem;
    border-radius: 50%;
    border: 3px solid var(--color-blue-kisim);
}

.section-label-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-blue-kisim);
}

/* ----------------- FIELD-TEXT ----------------- */

.form-check{
    padding-left: 0;
}
.public .form-group {
    margin-bottom: 0.75rem !important;
}

.public .form-control {
    border: none;
    border: var(--input-field-border-size) solid var(--input-field-border-color);
    height: var(--input-field-height);
    border-radius: var(--input-field-border-radius);
    color: #444;
    font-size: 1.125rem;
}
.input-group-text{
    border: var(--input-field-border-size) solid var(--input-field-border-color);
    border-radius: var(--input-field-border-radius);
}

.public .form-label-group,
.public .select-label-group {
    display: flex;
    justify-content: space-between;
}

.public .form-label {
    margin-bottom: 0.1rem;
}

.required-text {
    color: var(--color-blue-kisim);
    padding-left: 0.25rem;
    font-weight: 500;
    font-size: 1.25rem;
}

.help-icon img {
    height: 20px;
    width: auto;
}

.form-text {
    hyphens: auto;
    font-size: 0.8rem;
    line-height: 1rem;
    padding: 0rem 0.5rem;
    transition: all 250ms;
}

.form-text:hover {
    hyphens: auto;
    font-size: 1.125rem;
    line-height: 1.4rem;
    padding: 0rem 0.5rem;
}

/* ----------------- RADIO-INLINE ----------------- */

/* SPACING */

.radio-inline-group {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* PRESIZING (NOT SURE IF NECESSARY) */

.custom-radio .custom-control-input,
.custom-radio .custom-control-label:after,
.custom-radio .custom-control-label:before {
    top: 0;
    height: var(--input-filed-size-checkbox-and-radio);
    width: var(--input-filed-size-checkbox-and-radio);
}

/* DEFAULT STATE */
.custom-radio .custom-control-label:before {
    top: 0;
    height: var(--input-filed-size-checkbox-and-radio);
    width: var(--input-filed-size-checkbox-and-radio);
    border: var(--input-field-border-size) solid var(--input-field-border-color) !important;
    border-radius: 50%;
    transition: all 300ms;
}

.custom-radio .custom-control-label:hover:before {
    background-color: var(--color-input-filed-hover);
}

/* WHEN CHECKED */
.custom-radio .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--color-blue-kisim);
}

.custom-radio .custom-control-input:checked ~ .custom-control-label:after {
}

/* WHEN PRESSED */
.custom-radio .custom-control-input:active ~ .custom-control-label:before {
    background-color: var(--color-blue-kisim);
}

/* FOCUS */
.custom-radio .custom-control-input:focus ~ .custom-control-label:before {
    outline: none;
    border: var(--input-field-border-size) solid #80bdff !important;
    box-shadow: 0 0 0 0.2rem #bfdeff !important;
}

@media screen and (max-width: 1082px) {
    .custom-radio .custom-control-label {
        padding-left: 1rem;
    }

    .custom-radio .custom-control-label:after,
    .custom-radio .custom-control-label:before {
        top: -5px;
    }
}

/* ----------------- FIELD-CHECKBOX ----------------- */

.checkbox-group {
    margin-top: 1.5rem;
    transition: all 300ms;
    hyphens: auto;
}

.custom-checkbox .custom-control-label:after,
.custom-checkbox .custom-control-label:before,
.custom-checkbox .custom-control-input {
    top: 0;
    height: var(--input-filed-size-checkbox-and-radio);
    width: var(--input-filed-size-checkbox-and-radio);
}

@media (max-width: 850px) {
    .custom-checkbox .custom-control-label:after,
    .custom-checkbox .custom-control-label:before,
    .custom-checkbox .custom-control-input {
        top: 0;
        height: var(--input-filed-size-checkbox-and-radio);
        width: var(--input-filed-size-checkbox-and-radio);
    }
}

.custom-checkbox .custom-control-label:hover:before {
    background-color: var(--color-input-filed-hover);
}

.custom-checkbox .custom-control-input ~ .custom-control-label:before {
    border-radius: var(--input-field-border-radius);
    border: var(--input-field-border-size) solid var(--input-field-border-color);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label:after {
    border-radius: var(--input-field-border-radius);
    color: greenyellow !important;
    background-color: var(--color-blue-kisim);
}

@media screen and (max-width: 1082px) {
    .custom-checkbox .custom-control-label {
        padding-left: 1.5rem;
    }

    .custom-checkbox .custom-control-label:after,
    .custom-checkbox .custom-control-label:before {
        top: -5px;
    }
}

/* ----------------- FIELD-SELECT ----------------- */

.public .bootstrap-select button {
    height: var(--input-field-height);
    border-radius: var(--input-field-border-radius);
    transition: all 300ms;
}

.filter-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.select-group-dropdown {
    margin-bottom: 1.25rem;
}

.bootstrap-select > .dropdown-toggle {
    border: var(--input-field-border-size) solid var(--input-field-border-color);
}
.btn.dropdown-toggle, 
.dropdown-menu  {
    font-size: 1.125rem;
}


/* ------------- MAKE DROPDOWN NOT GO OUT OF SCREEN ------------- */

.dropdown-menu .inner .show {
    max-width: 90vw;
}

/* ----------------- DROPDOWN FOCUS-STYLE -------------------- */

.btn.btn-light,
.btn.btn-light:active,
.btn.btn-light:focus {
    background-color: var(--color-white);
}

.dropdown-toggle.btn-light:focus {
    border: var(--input-field-border-size) solid #80bdff !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem #bfdeff !important;
}

.dropdown-toggle.btn-light:hover {
    background-color: var(--color-input-filed-hover);
}

.show .btn-light:focus {
    background-color: var(--color-white);
    color: #000;
}

.dropdown-menu {
    border: var(--input-field-border-size) solid var(--input-field-border-color);
    z-index:1111;
}

.dropdown-item:active {
    background-color: var(--color-blue-kisim);
}

.dropdown-item span.text small {
    display: block;
    padding-left: 0;
}
.dropdown-item.active  span.text small.text-muted {
    color: white;
}

.bootstrap-select .dropdown-menu li.active small {
    color: white !important;
}

.select-group-dropdown {
    margin-bottom: 1.8rem;
}

.bs-searchbox{
    margin-bottom: 0;
    padding: 0 8px;
}

.dropdown-menu.show {
    max-height: 440px !important;
    padding-bottom: 0;
}
/* ----------------- BEMERKUNG ----------------- */

#bemerkung {
    width: 100%;
    border: var(--input-field-border-size) solid var(--input-field-border-color);
    border-radius: var(--input-field-border-radius)
        var(--input-field-border-radius) 0 var(--input-field-border-radius);
}

/* DONT DISPLAY ARROW-UP/-DOWN IN NUMBER INPUT-FIELDS */

/* Chrome, Safari, Edge, Opera */
input:-webkit-outer-spin-button,
input:-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    transition: all 300ms;
    color: #444;
}

textarea:focus {
    border: var(--input-field-border-size) solid #80bdff !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem #bfdeff !important;
}

/* ----------------- ALERT ----------------- */

.alert,
.alert-text {
    max-width: 66ch;
}

.alert-success,
.alert-danger,
.alert-info {
    display: grid;
    grid-template-columns: 2em 90%;
    gap: 1rem;
    align-items: center;
}

/* ---------------- CONTACT ------------------*/

.contact-main-container {
    margin-top: 4rem;
    width: 100%;
}

.contact-inner-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-img-container {
    max-width: 300px;
    height: auto;
}

.contact-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-btn-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    align-self: center;
}

@media (max-width: 992px) {
    .contact-main-container {
        padding: 0;
    }

    .contact-inner-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 852px) {
    .contact-inner-container {
        grid-template-columns: 1fr 1.5fr;
    }
}

@media (max-width: 532px) {
    .contact-inner-container {
        grid-template-columns: 1fr;
    }

    .contact-img-container {
        max-width: 100%;
        height: auto;
    }
}

.btn-contact:link,
.btn-contact:visited {
    display: inline-block;
    padding: 0.45rem 1.5rem;
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
    border-color: #2ec6ab;
    color: var(--color-blue-kisim);
    border: 2px solid var(--color-blue-kisim);
    border-radius: var(--input-field-border-radius);
    transition: all 300ms;
}

.btn-contact:hover,
.btn-contact:active {
    color: var(--color-white);
    background-color: var(--color-blue-kisim);
}

.container-persoenliche-angaben,
.container-arbeits-angaben {
    max-width: 524px;
    border-radius: 1rem;
    background-color: #fff;
    margin-bottom: 0rem;
    padding: 1rem 0rem;
}

@media (max-width: 992px) {
    .container-persoenliche-angaben,
    .container-arbeits-angaben {
        max-width: 100%;
    }
}
h4.modal-title {
    font-size: 1.8rem;
    font-weight: 400;
    //color: var(--color-blue-kisim);
    margin: 0;

}

/* Target the modal container with the "modal-body numbered" class */
.numbertext .numbered,
.modal-body.numbered {
    /* Define the counter for h1 elements */
    counter-reset: h1-counter;
}

/* Style h1 elements inside the modal container */
.numbertext .numbered h1,
.modal-body.numbered h1 {
    /* Add styles for h1 headings here */
    font-size: 24px; /* Change the font size as needed */
    color: #212121; /* Change the text color as needed */
    /* Add any other styles you want for h1 headings */
}

/* Style h2 elements inside the modal container */
.numbertext .numbered h2,
.modal-body.numbered h2 {
    /* Add styles for h2 headings here */
    font-size: 20px; /* Change the font size as needed */
    /* Add any other styles you want for h2 headings */
}

/* Style h3 elements inside the modal container */
.numbertext .numbered h3,
.modal-body.numbered h3 {
    /* Add styles for h3 headings here */
    font-size: 18px; /* Change the font size as needed */
    color: #212121 !important; /* Change the text color as needed */
    /* Add any other styles you want for h3 headings */
}

/* Add numbering for h1 headings */
.numbertext .numbered h1:before,
.modal-body.numbered h1:before {
    /* Counter-increment will increase the h1-counter by 1 for each h1 element */
    counter-increment: h1-counter;
    /* Display the numbering using the counter */
    content: counter(h1-counter) ". ";
}

/* Reset the counter for h2 elements */
.numbertext .numbered h1,
.modal-body.numbered h1 {
    counter-reset: h2-counter;
}

/* Add numbering for h2 headings */
.numbertext .numbered h2:before,
.modal-body.numbered h2:before {
    /* Counter-increment will increase the h2-counter by 1 for each h2 element */
    counter-increment: h2-counter;
    /* Display the numbering using the counter */
    content: counter(h1-counter) "." counter(h2-counter) ". ";
}

/* Reset the counter for h3 elements */
.numbertext .numbered h2,
.modal-body.numbered h2 {
    counter-reset: h3-counter;
}

/* Add numbering for h3 headings */
.numbertext .numbered h3:before,
.modal-body.numbered h3:before {
    /* Counter-increment will increase the h3-counter by 1 for each h3 element */
    counter-increment: h3-counter;
    /* Display the numbering using the counter */
    content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter)
        ". ";
}
.modal-content{
    line-height: 1.33;
}
.modal-content li{
    margin-bottom: 0;
}
.modal-content ul{
  margin-bottom: 24px;
}
.modal-footer{
    justify-content: start;
}

div[contenteditable="true"]:hover {
    background-color: #edf8ff;
}
.formgrid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px;
}

.dropdown-toggle.forEditInPlace::after {
    display: none;
}

[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    font-style: italic;
    pointer-events: none;
}
.grid-2auto {
    display: grid;
    grid-template-columns: max-content max-content;
}
/* */

        .form-control {
            border: none;
            border: var(--input-field-border-size) solid var(--input-field-border-color);
            height: 31px;
            border-radius: 3px;
            color: #444;
        }


        .grid-researchActions {
            display: grid;
            /* grid-template-columns with 4 columns, the first 3 just as wide as the content, the last one takes the rest of the space */
            grid-template-columns: auto 120px auto auto;
            grid-gap: 10px;
            /* adjust as needed */
        }
        .footerbar{
            position: relative;
            z-index: 1000;
        }


.scrollTable {
            /* height: calc(100vh - 160px);
            width: calc(100vw - 40px); */
            overflow: scroll;
        }

        .scrollTable table {
            border-spacing: 0;
        }

        .scrollTable th {
            position: sticky;
            top: -2px;
            background: #f8f8f8;
            z-index: 99;
        }

.left0 {
    left: 0;
}
.left40 {
    left: 40px;
}
.left120{
    left: 120px;
}
.left160{
    left: 160px;
}
.left180{
    left: 180px;
}
.left200{
    left:200px;
}
.left220{
    left:220px;
}
.left240{
    left:240px;
}
.left260{
    left:260px;
}
.left280{
    left:280px;
}
.minW120{
    width: 120px;
    min-width: 120px;
}
.left300{
    left:300px;
}
.left320{
    left:320px;
}
.left420{
    left:420px;
}
.left520{
    left:520px;
}
.left540{
    left:540px;
}
.left620{
    left:620px;
}
.left660{
    left:660px;
}
.left720{
    left:720px;
}
.left780{
    left:780px;
}
[class^="minW"]{
    overflow: scroll;
} 

.minW40{
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.minW80{
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}

.minW100{
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.minW120{
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}
.minW140{
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}
.minW160{
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}

.minW240{
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}
.minW240{
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}
.maxW400{
    width: fit-content;
    max-width: 400px;
    min-width: 400px;
}
        .scrollTable.stickyChild1 td:nth-child(1),
        .scrollTable.stickyChild2 td:nth-child(2),
        .scrollTable.stickyChild3 td:nth-child(3),
        .scrollTable.stickyChild4 td:nth-child(4),
        .scrollTable.stickyChild5 td:nth-child(5),
        .scrollTable.stickyChild6 td:nth-child(6),
        .scrollTable.stickyChild7 td:nth-child(7),
        .scrollTable.stickyChild8 td:nth-child(8),
        .scrollTable.stickyChild9 td:nth-child(9) {
            background: #f8f8f8;
            z-index: 99;
            position: sticky;
        }

        .scrollTable.stickyChild1 tr:hover td:nth-child(1),
        .scrollTable.stickyChild2 tr:hover td:nth-child(2),
        .scrollTable.stickyChild3 tr:hover td:nth-child(3),
        .scrollTable.stickyChild4 tr:hover td:nth-child(4),
        .scrollTable.stickyChild5 tr:hover td:nth-child(5),
        .scrollTable.stickyChild6 tr:hover td:nth-child(6),
        .scrollTable.stickyChild7 tr:hover td:nth-child(7),
        .scrollTable.stickyChild8 tr:hover td:nth-child(8),
        .scrollTable.stickyChild9 tr:hover td:nth-child(9) {
            background: #ececec;
        }


        .scrollTable.stickyChild1 th:nth-child(1),
        .scrollTable.stickyChild2 th:nth-child(2),
        .scrollTable.stickyChild3 th:nth-child(3),
        .scrollTable.stickyChild4 th:nth-child(4),
        .scrollTable.stickyChild5 th:nth-child(5),
        .scrollTable.stickyChild6 th:nth-child(6),
        .scrollTable.stickyChild7 th:nth-child(7),
        .scrollTable.stickyChild8 th:nth-child(8),
        .scrollTable.stickyChild9 th:nth-child(9) {
            z-index: 100;
            position: sticky;

        }

.debugborder {
    border: 1px solid red;
}

.dateColWidth {
    width: 140px;
    max-width: 140px;
}

.oneliner-box {
  container-type: inline-size;
}


.oneliner {
    /* width: calc(100% - 8px); */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oneliner:focus{
    text-overflow: clip;
}

@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 20px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 30px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 40px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 50px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 60px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 70px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 80px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 90px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 100px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 110px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 120px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 130px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 140px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 150px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 160px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 170px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 180px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 190px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 200px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 210px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 220px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 230px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 240px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 250px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 260px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 270px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 280px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 290px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 300px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 310px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 320px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 330px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 340px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 350px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 360px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 370px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 380px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 390px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 400px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 410px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 420px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 430px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 440px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 450px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 460px;
  }
}
@container (max-width: calc($i * $boxUnit)) {
  .oneliner {
    width: 470px;
  }
}
.badge-info {
    color: #fff;
    background-color: #1C7CD6;
}
.badge-light {
    color: #212529;
    background-color: #dadada;
}
.migros, .coop{
    color: #ff6600;
    font-weight: bold;
}
.orell, .galaxus{
    color: #000;
    font-weight: bold;
}
.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label{
    color: #212529;
}

.form-control.is-valid, .was-validated .form-control:valid,
.bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select select:valid+.dropdown-toggle,
.custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
    border-color: rgb(175,175,175);
    background-image: none;
}
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before{
    background-color: var(--color-blue-kisim);
}
.invalid-feedback, .formularFeedback{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    padding-left: 20px;
    background-position: 0 4px;
    font-size: 16px;
}
.formularFeedback{
    color: #dc3545;
}
.borderBottom{
    border-bottom: 1px solid #212121;
}
.printOnly{
    display: none;
}
.header-container {
        display: flex;
        margin: 0 auto;
        padding: 0 15px;
        max-width: 1140px;
    }

    .header {
        background-color: #fff;
    }

    .cistec-logo {
        width: 180px;
        height: auto;
        padding: 1.5rem 0;
    }
@media print {
    @page{
        size: A4;
        margin: 20mm 25mm 25mm 25mm;
        }
    html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .row{
        display: block;
        width: 100vw;
        margin-left: 0;
        padding-left: 0;
    }
    .row.hideOnPrint, .hideOnPrint {
        display: none !important;
    }
    .printOnly {
        display: block;
    }
    .col-8 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    ul{
        break-inside: avoid;
        break-before: avoid;
    }
    ul.breakInside{
        break-inside: auto;
    }
    .noBreakInside{
        break-inside: avoid;
    }
    .header-container {
        max-width: 90vw;
    }
    h2 {
        break-after: avoid-page; 
    }
}

.notizenBox .tabelle div{
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.grid-notizen {
    display: grid;
    grid-template-columns: auto minmax(100px, max-content) 80px;
    row-gap: 8px;
}
.radiologiegebiet{
    // put elements off the screen
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    
}

.resultrow.warning {
    background-color: #f8d7da;
    color: #38050a;
}
.pull-right {
    float: right;
}