:root {
    color-scheme: light dark; /* both supported */
}

.progress-bar-splash {
    background-color: #1b365d;
}

.loading-progress-text {
    color: white;
}

.splashscreen-outerbox {
    background-image: linear-gradient(180deg, #1B365D 60%, #71b1c7 100%);
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.splashscreen-innerbox {
    display: table-cell;
    vertical-align: middle;
}


.loginlogout {
    padding: 5px;
    text-decoration: none !important;
}

    .loginlogout:hover {
        color: white;
        text-decoration: none !important;
        background-color: #71b1c7;
        border-radius: 5px;
        padding: 5px;
    }

/* Start Overwrite Bootstrap */

.text-primary {
    color: #71b1c7 !important;
}

.form-check-input:checked {
    background-color: #71b1c7 !important;
    border-color: #71b1c7 !important;
}

/* End Overwrite Bootstrap */

@media (max-width: 600px) {

    .navbar-toggler {
        position: fixed;
        right: 5px;
        top: 13px;
        margin: 5px;
    }

    .top-row {
        font-size: 0.8em;
        justify-content: flex-start !important;
    }

        .top-row button {
            margin-left: 10px;
            font-size: 1.2em;
            position: fixed;
            right: 5px;
        }
}

@media (max-width: 400px) {

    .top-row .time-version {
        position: fixed;
        top: 76px;
    }

    .top-row .user {
        position: fixed;
        top: 93px;
    }
}

.show-immediately {
    display: initial !important;
    backdrop-filter: brightness(40%) !important;
    backdrop-filter: blur(5px);
}

.hca {
    font-size: xx-small;
    text-align: center;
}

.hca-below {
    font-size: small;
    text-align: center;
    background-color: #d81b2f !important;
    color: white !important;
}

.hca-above {
    font-size: small;
    text-align: center;
    color: black;
}


.hca-bad {
    background-color: #d81b2f;
    color: white;
}

.hca-good {
    background-color: #91afa0;
    color: black;
}

.hca-no {
    background-color: #dadada;
    color: white;
}

.btn-data-input, .btn-data-input:hover {
    background-color: #1aa9a7;
    border: 1px solid #1aa9a7;
    color: white;
}

.btn-data-mapping, .btn-data-mapping:hover {
    background-color: #ec7527;
    border: 1px solid #ec7527;
    color: white;
}

.btn-data-filter, .btn-data-filter:hover {
    background-color: #d81b2f;
    border: 1px solid #d81b2f;
    color: white;
}

.btn-data-aggregation, .btn-data-aggregation:hover {
    background-color: #71b1c7;
    border: 1px solid #71b1c7;
    color: white;
}

.btn-data-output, .btn-data-output:hover {
    background-color: #1b365d;
    border: 1px solid #1b365d;
    color: white;
}

.log {
    font-size: 0.9rem;
}


input.custom-file-input {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

input.toDrag {
    height: 174px;
}

.instruction {
    white-space: pre-line;
}

.file-selection {
    padding: 10px;
    font-size: small;
}

.fullscreen {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 56px;
    z-index: 10;
    margin: 0;
    background-color: rgba(100, 100, 100, 0.5);
}

.minimize {
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    background-color: #1b365d;
    padding: 0px;
}

/*Cytoscape*/
#cy {
    min-width: 100%;
    height: 400px;
    display: block;
    background-color: white;
    border: dotted 1px solid #ced4da;
    border-radius: .25rem;
    margin-top: .5rem;
}


    #cy > canvas {
        border: 1px solid #ced4da;
        border-radius: .25rem;
        height: 400px;
        position: absolute;
        top: 0;
    }

.context-menu {
    background-color: #6c757d;
    color: white;
    border-radius: 5px;
    padding: 15px;
    margin: 15px;
}

.context-menu-button {
    background-color: #71b1c7;
    color: white;
    border-color: white;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}

.processActionSelected {
    border: 5px solid black;
    background-color: black;
}


/*********** DataType Buttons ***********/

.mnqa select.btn {
    border: 1px solid #ced4da;
}

.badge-datatype {
    border-radius: 4px;
    font-weight: normal;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
}

/* grey */
.badge-datatype1, .badge-datamapactiontype0, .badge-instancetype0 {
    background-color: #c8c9c7;
    color: #000000;
    border-color: #c8c9c7;
}

    .mnqa select.btn-datatype1:hover,
    .mnqa select.btn-datatype1:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype1:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype1.dropdown-toggle {
        color: #000;
        background-color: #a2a3a0;
    }

    .mnqa select.btn-datatype1:focus,
    .mnqa select.btn-datatype1.focus {
        box-shadow: 0 0 0 0.2rem rgba(200, 201, 199, 0.5);
        border-color: #c8c9c7;
    }

    .mnqa select.btn-datatype1:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype1:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype1.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(162, 163, 160, 0.5);
    }
/* aqua */
.badge-datatype2, .badge-datamapactiontype2, .badge-instancetype1 {
    background-color: #1AA9A7;
    color: #ffffff;
    border-color: #1AA9A7;
}

    .mnqa select.btn-datatype2:hover,
    .mnqa select.btn-datatype2:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype2:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype2.dropdown-toggle {
        color: #fff;
        background-color: #106765;
    }

    .mnqa select.btn-datatype2:focus,
    .mnqa select.btn-datatype2.focus {
        box-shadow: 0 0 0 0.2rem rgba(26,169,167, 0.5);
        border-color: #1AA9A7;
    }

    .mnqa select.btn-datatype2:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype2:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype2.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(16,103,101, 0.5);
    }

/* blue */
.badge-datatype3, .badge-datamapactiontype3, .badge-instancetype2 {
    background-color: #71B1C7;
    color: #ffffff;
    border-color: #71B1C7;
}

    .mnqa select.btn-datatype3:hover,
    .mnqa select.btn-datatype3:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype3:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype3.dropdown-toggle {
        color: #fff;
        background-color: #438fa9;
    }

    .mnqa select.btn-datatype3:focus,
    .mnqa select.btn-datatype3.focus {
        box-shadow: 0 0 0 0.2rem rgba(113,177,199, 0.5);
        border-color: #71B1C7;
    }

    .mnqa select.btn-datatype3:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype3:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype3.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(67,143,169, 0.5);
    }

/* dark-blue */
.badge-datatype4, .badge-datamapactiontype1, .badge-instancetype3 {
    background-color: #1B365D;
    color: #ffffff;
    border-color: #1B365D;
}

    .mnqa .btn-datatype4:hover,
    .mnqa .btn-datatype4:not(:disabled):not(.disabled):active,
    .mnqa .btn-datatype4:not(:disabled):not(.disabled).active,
    .mnqa .show > .btn-datatype4.dropdown-toggle {
        color: #fff;
        background-color: #0a1422;
    }

    .mnqa .btn-datatype4:focus,
    .mnqa .btn-datatype4.focus {
        box-shadow: 0 0 0 0.2rem rgba(27,54,93, 0.5);
        border-color: #1B365D;
    }

    .mnqa .btn-datatype4:not(:disabled):not(.disabled):active:focus,
    .mnqa .btn-datatype4:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > .btn-datatype3.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(10,20,34, 0.5);
    }



/* orange */
.badge-datatype5, .badge-datamapactiontype4, .badge-instancetype4 {
    background-color: #EC7527;
    color: #ffffff;
    border-color: #EC7527;
}

    .mnqa select.btn-datatype5:hover,
    .mnqa select.btn-datatype5:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype5:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype5.dropdown-toggle {
        color: #fff;
        background-color: #b65210;
    }

    .mnqa select.btn-datatype5:focus,
    .mnqa select.btn-datatype5.focus {
        box-shadow: 0 0 0 0.2rem rgba(236,117,39, 0.5);
        border-color: #EC7527;
    }

    .mnqa select.btn-datatype5:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype5:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype5.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(182,82,16, 0.5);
    }

/* red */
.badge-datatype6 {
    background-color: #D81B2F;
    color: #ffffff;
    border-color: #D81B2F;
}

    .mnqa select.btn-datatype6:hover,
    .mnqa select.btn-datatype6:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype6:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype6.dropdown-toggle {
        color: #fff;
        background-color: #941320;
    }

    .mnqa select.btn-datatype6:focus,
    .mnqa select.btn-datatype6.focus {
        box-shadow: 0 0 0 0.2rem rgba(216,27,47, 0.5);
        border-color: #D81B2F;
    }

    .mnqa select.btn-datatype6:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype6:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype6.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(148,19,32, 0.5);
    }

/* yellow */
.badge-datatype7 {
    background-color: #f1be48;
    color: #000000;
    border-color: #f1be48;
}

    .mnqa select.btn-datatype7:hover,
    .mnqa select.btn-datatype7:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype7:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype7.dropdown-toggle {
        color: #000;
        background-color: #f1be48;
    }

    .mnqa select.btn-datatype7:focus,
    .mnqa select.btn-datatype7.focus {
        box-shadow: 0 0 0 0.2rem rgba(241,190,72, 0.5);
        border-color: #f1be48;
    }

    .mnqa select.btn-datatype7:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype7:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype7.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(241,190,72, 0.5);
    }

/* yellow */
.badge-datatype8 {
    background-color: #e4c7ec;
    color: #000000;
    border-color: #e4c7ec;
}

    .mnqa select.btn-datatype8:hover,
    .mnqa select.btn-datatype8:not(:disabled):not(.disabled):active,
    .mnqa select.btn-datatype8:not(:disabled):not(.disabled).active,
    .mnqa .show > select.btn-datatype8.dropdown-toggle {
        color: #000;
        background-color: #e4c7ec;
    }

    .mnqa select.btn-datatype8:focus,
    .mnqa select.btn-datatype8.focus {
        box-shadow: 0 0 0 0.2rem rgba(228,199,236, 0.5);
        border-color: #e4c7ec;
    }

    .mnqa select.btn-datatype8:not(:disabled):not(.disabled):active:focus,
    .mnqa select.btn-datatype8:not(:disabled):not(.disabled).active:focus,
    .mnqa .show > select.btn-datatype8.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(228,199,236, 0.5);
    }

.select-item {
    min-height: 20px;
}

.code-mirror {
    height: auto;
    border: 1px solid #d2d6de;
}

.code {
    white-space: pre-line;
    font-size: 0.8em;
    font-family: monospace;
}

.code-container {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.CodeMirror-scroll {
    padding-bottom : 0 !important;
}

.CodeMirror {
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;

    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.CodeMirror-errorLineNumber {
    background-color: red;
    color: white !important;
}

.vertical-center {
    vertical-align: middle;
}

.true {
    background-color: white;
    color: #008000;
    text-align: center;
}

.false {
    background-color: white;
    color: #dc0000;
    text-align: center;
}

/* SLIDER */
.slidecontainer {
    width: 100%; /* Width of the outside container */
    display: flex;
    flex-direction: row;
}

/* The slider itself */
.form-range {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%;
    height: 24px;
    background: #6fa1d1 !important;
    outline: none; /* Remove outline */
}

    /* Mouse-over effects */
    .form-range:hover {
        /*opacity: 1;*/ /* Fully shown on mouse-over */
        background-color: #71b1c7;
    }

    .form-range::-webkit-slider-thumb {
        width: 25px;
        height: 25px;
        border: 0;
        background-image: url('/images/icon-25.png');
        background-size: cover;
        cursor: pointer;
    }
    
    .form-range::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border: 0;
        background-color: black;
        cursor: pointer;
    }

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
*, ::after, ::before {
    box-sizing: border-box;
}
Benutzer-Agent-Stylesheet
input[type="range" i] {
    appearance: auto;
    cursor: default;
    color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
    padding: initial;
    border: initial;
    margin: 2px;
}

/* Neutrals */
/* black */
.bg-n1 {
    background-color: #000000 !important;
    color: #ffffff !important;
}
/* d-grey */
.bg-n2 {
    background-color: #888b8d !important;
    color: #ffffff !important;
}
/* l-grey */
.bg-n3 {
    background-color: #C8C9C7 !important;
}

/* xs-l-grey */
.bg-n4 {
    background-color: #C8C9C7 !important;
}

/* Primary Colours */
/* d-blue */
.bg-p1 {
    background-color: #6fa1d1 !important;
    color: #ffffff !important;
}
/* red */
.bg-p2 {
    background-color: #D81B2F !important;
    color: #ffffff !important;
}
/* orange */
.bg-p3 {
    background-color: #EC7527 !important;
    color: #ffffff !important;
}
/* l-blue */
.bg-p4 {
    background-color: #71B1C7 !important;
    color: #ffffff !important;
}
/* aqua */
.bg-p5 {
    background-color: #1AA9A7 !important;
    color: #ffffff !important;
}
/* yellow */
.bg-p6 {
    background-color: #FFD300 !important;
    color: #ffffff !important;
}

.bg-green {
    background-color: #1aa960 !important;
    color: #ffffff !important;
}

/* Start QueryBuilder */
.rules-group-container {
    width: 100%;
    border: 1px solid #79adbf;
    /*background: rgba(136, 139, 141, .5) !important;*/
}

.rules-group-container {
    border: 1px solid #cecece !important;
    border-radius: 5px;
    width: 100%;
    padding: 16px;
}

.rules-container {
    background-color: red;
}

.rules-group-container {
    /*background-color: #e2eff4 !important;*/
    border: none;
    border-radius: 5px;
    padding: 10px;
}

.rules-group-body {
    border: none;
    width: 100%;
}

.rule-container {
    background-color: #e2eff4 !important;
    margin-bottom: 5px;
    border: none;
    border-radius: 5px;
    padding: 10px;
}

.rule-filter-container {
    width: 40%;
    display: inline-flex;
}

.rule-container > div > select.form-control {
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.rule-operator-container {
    width: 10%;
    display: inline-flex;
}

.rule-value-container {
    width: 40%;
    display: inline-flex;
}

/* End QueryBuilder */

@media (prefers-color-scheme: dark) {
    .splashscreen-outerbox {
        background-image: none !important;
        background-color: black;
    }

    .CodeMirror, .CodeMirror-gutters {
        background-color: black !important;
    }

    .caret-color {
        color: white !important;
    }

    .CodeMirror-cursor {
        border-left: 1px solid orange !important;
    }
}