: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: "➔";
}