:root {
    --nav-item-color: rgba(0, 115, 255, 0.30);
    --is-stageListItem-hover-bg: rgb(59 130 246);
    --is-stageListItem-hover-color: rgb(239 246 255);
    --bg-opacity: 1;
}
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Raleway/static/Raleway-Regular.ttf');
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/static/Roboto-Regular.ttf');
}
body > * {
    font-family: 'Roboto', 'Raleway', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.noneStyle{
    all: unset;
}

.btn-blue {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6af0;
    --bs-btn-border-color: #0d6af0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3141f2;
    --bs-btn-hover-border-color: #3141f2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d81f0;
    --bs-btn-active-border-color: #0d81f0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #5c7cbd;
    --bs-btn-disabled-border-color: #5c7cbd;
}

.biggerFont{
font-size: 1.4rem;
}

.onHoverGreen:hover{
    color: green;
}

.paginationButton
{
    width: 75px;
    min-width: 10px;
    height: 20px;
    padding: 0px;

    font-size: 0.8rem;

    border: 1px solid #dddddd;
}
.paginationActiveButton
{
    background-color: #666666;
    color: white;
}



.paginationButtonFirst
{
    border-radius: 100px 0px 0px 0px;
}

.paginationButtonLast
{
    border-radius: 0px 100px 0px 0px;
}



.checkboxSwitch
{
    position: relative;
    background: white;
    -webkit-appearance: initial;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    border-color: #ced4da;
    height: auto;
    min-height:37px;
    max-height:37px;
}

    .checkboxSwitch:after
    {
        position: absolute;
        top: 5%;
        left: 2%;
        display: block;
        line-height: 32px;
        width: 45%;
        height: 90%;
        background: #fff;
        box-sizing: border-box;
        text-align: center;
        transition: all 0.5s ease 0.0s;
        border-style: solid;
        border-width: 1px;
        border-color: #888;
        border-radius: 5px;
    }

    .checkboxSwitch:after
    {        
        content: "Nein";
        color: #495057;
    }

    .checkboxSwitch:checked:after
    {
        left: 53%;
        content: "Ja";
        background-color: #7b7b7b;
        color: white;
    }

.checkboxSwitchGreen
{
    transition: all 0.5s ease 0.0s;
    position: relative;
    -webkit-appearance: initial;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    border-color: #ced4da;
    border-radius: 50px;
    height: auto;
    min-height: 37px;
    max-height: 37px;
    min-width: 90px;
}
/*.checkboxSwitchGreen
{
    background-color: #f8f9fa;
}*/
.checkboxSwitchGreen:checked
{
    background-color: lightgreen;
}

.checkboxSwitchGreen:after
{
    transition: all 0.5s ease 0.0s;
    position: absolute;
    top: 5%;
    display: block;
    line-height: 28px;
    width: 35%;
    height: 90%;
    background: #fff;
        
    text-align: center;
    color: white;
    border-style: solid;
    border-width: 2px;
    border-color: #ced4da;
    border-radius: 50px;
    box-sizing: border-box;
}
/*.checkboxSwitchGreen:after
{
    left: 3%;
    content: "✖";
    background-color: red;
}*/
.checkboxSwitchGreen:checked:after
{
    left: 62%;
    content: "✓";
    background-color: green;
}

.checkboxSwitchGreen:before
{
    transition: all 0.5s ease 0.0s;
    position: absolute;
    top: 7%;
    display: block;
    line-height: 32px;
    width: 35%;
    height: 90%;
    text-align: center;
    color: black;
}
.checkboxSwitchGreen:before
{
    left: 55%;
    content: "Nein";
}
.checkboxSwitchGreen:checked:before
{
    left: 3%;
    content: "Ja";
}


.skinnyElement
{
    font-size: 0.8rem;
}

.fieldSpanMinSize
{
    min-width: 20%;
}

.togglebutton{
    position: relative;
}

.stageHeader {
    font-size: 24px;
    border-bottom: 1px solid black;
    margin-bottom: 5px;
}

.stageButtons{
    margin-top:auto;
    margin-left: auto;
}

.stageHinzu {
    position: relative;
    left: 590px;
}

.stageEntfernen {
    position: relative;
}

.stageListItemElement, .subStageListItemElement {
    padding: 3px;
    border-radius: 4px;
    cursor: pointer;
    display: inline;
}

.stageListItemElement:not(:has(.subStageListItemElement:hover)):hover {
    background-color: var(--is-stageListItem-hover-bg);
    color: var(--is-stageListItem-hover-color);
}
.subStageListItemElement:hover {
    background-color: var(--is-stageListItem-hover-bg);
    color: var(--is-stageListItem-hover-color);
}

.stageListItem::before, .subStageListItem::before {
    content: "•";
    font-weight: bold;
    font-size: 18px;
    margin-right: 5px;
}
.stageListItem[accept]::before, .subStageListItem[accept]::before {
    content: "✓";
    font-weight: bold;
    color: green;
}

.stageListItem[done]::before, .subStageListItem[done]::before {
    content: "✓";
    font-weight: bold;
    color: green;
}
.stageListItem[decline]::before, .subStageListItem[decline]::before {
    content: "✕";
    font-weight: bold;
}
.stageListItem[error]::before, .subStageListItem[error]::before {
    content: "✕";
    font-weight: bold;
    color: red;
}
.stageListItem[active]::before, .subStageListItem[active]::before {
    content: "➔";
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2026 — Globale Modal / Form Overrides
   Gilt für ALLE Bootstrap-Modals im Partnerportal
   ════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
    --ds-green:       #16a34a;
    --ds-green-dark:  #15803d;
    --ds-green-ring:  rgba(22, 163, 74, .12);
    --ds-border:      #e4e4e7;
    --ds-radius:      8px;
    --ds-text:        #18181b;
    --ds-muted:       #71717a;
    --ds-label:       #a1a1aa;
    --ds-surface:     #f4f4f5;
}

/* ── Modal Container ────────────────────────────────────────────────── */
.modal-content {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05) !important;
    overflow: hidden;
}

/* ── Modal Header ───────────────────────────────────────────────────── */
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ds-border) !important;
    padding: 1rem 1.4rem .75rem !important;
}
.modal-title {
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: var(--ds-text) !important;
}

/* ── Modal Footer ───────────────────────────────────────────────────── */
.modal-footer {
    border-top: 1px solid var(--ds-border) !important;
    padding: .75rem 1.4rem 1rem !important;
    background: #fff !important;
}

/* ── Form Labels (in Modals und Formularen) ─────────────────────────── */
.modal .form-label,
.modal label.form-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    color: var(--ds-label) !important;
    text-transform: uppercase !important;
    margin-bottom: .3rem !important;
}

/* ── Inputs & Selects (in Modals) ───────────────────────────────────── */
.modal .form-control,
.modal .form-select {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    font-size: .87rem !important;
    color: var(--ds-text) !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--ds-green) !important;
    box-shadow: 0 0 0 3px var(--ds-green-ring) !important;
    outline: none !important;
}

/* ── Buttons in Modals ──────────────────────────────────────────────── */
.modal .btn-primary,
.modal .btn-success {
    background: var(--ds-green) !important;
    border-color: var(--ds-green) !important;
    border-radius: var(--ds-radius) !important;
    font-weight: 600 !important;
    padding: .45rem 1.1rem !important;
}
.modal .btn-primary:hover,
.modal .btn-success:hover {
    background: var(--ds-green-dark) !important;
    border-color: var(--ds-green-dark) !important;
}
.modal .btn-secondary,
.modal .btn-outline-secondary {
    background: #fff !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text) !important;
    border-radius: var(--ds-radius) !important;
    font-weight: 500 !important;
    padding: .45rem 1rem !important;
}
.modal .btn-secondary:hover,
.modal .btn-outline-secondary:hover {
    background: var(--ds-surface) !important;
}

/* ── Globale Input-Focus Ringe (auch außerhalb Modals) ──────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--ds-green) !important;
    box-shadow: 0 0 0 3px var(--ds-green-ring) !important;
    outline: none !important;
}

/* ── qa-lbl: Globales Uppercase-Label ──────────────────────────────── */
.qa-lbl {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ds-label);
    text-transform: uppercase;
    margin-bottom: .3rem;
    display: block;
}