*,
*::before,
*::after {
    box-sizing: border-box;
    /*Highlight color für mobile devices entfernt*/
    -webkit-tap-highlight-color: transparent;
}

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/*#region Allgemein HTML-Struktur */

:root {
    --qvar-gerneral-font-family: 'Roboto';
    --qvar-gerneral-font-family-alternative: sans-serif;
    --qvar-gerneral-font-weight: 400;
    --qvar-gerneral-font-style: normal;

    --qvar-controls-input-margin-topbottom: 2px;
}

html, body {
    font-family: var(--qvar-gerneral-font-family), var(--qvar-gerneral-font-family-alternative), 'Roboto';
    font-weight: var(--qvar-gerneral-font-weight);
    font-style: var(--qvar-gerneral-font-style);
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    max-height: 100vh;
    line-height: 19px;
    font-size: 13px;
    position: relative;
    background-color: white;
}

/* Deaktiverit Pull-to-Refresh */
.qsc-base-no-overscroll {
    overscroll-behavior: none;
}

body #app {
    height: 100%;
    max-height: 100%;
}

.qsc-main-window {
    zoom: var(--qvar-general-zoom-factor);
}

main {
    flex: 1;
    height: calc(100vh / var(--qvar-general-zoom-factor));
    width: 100%;
}

h1:focus {
    outline: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

label {
    color: var(--qvar-base-label-color);
}

input:disabled {
    color: var(--qvar-base-text-color);
}


.h5, h5 {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: white;
}

a, .qsc-base-button-link {
    color: #0071c1;
}

/*.qsc-main-page-mobile *:has(:hover) {
    background-color: inherit !important;
    background: inherit !important;
}*/

/* Für Webkit-basierte Browser wie Chrome, Safari und neuere Versionen von Edge */
* {
    scrollbar-width: thin; /* Für Firefox */
    scrollbar-color: #bfbfbf #f1f1f1; /* Farbe des Scrollbalkens und der Hintergrundfarbe */
}

*:focus-within{
    outline: none;
}

::-webkit-scrollbar {
    width: 8px; /* Breite des Scrollbalkens */
}

/* Griff (der bewegliche Teil) */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Farbe des Griffs */
    border-radius: 10px; /* Abgerundete Ecken */
}

/* Scrollbalken-Hintergrund */
::-webkit-scrollbar-track {
    background-color: #bfbfbf; /* Hintergrund des Scrollbalkens */
}

/* Hover-Effekt für den Griff */
::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}

/*#endregion Allgemein HTML-Struktur */

/*#region Grid */

/*Wird von Server Repository als Klasse übergeben*/
.grid {
    display: grid;
    overflow: hidden;
    background: transparent;
    height: 100%;
}

.grid > * {
    min-width: 0;
    min-height: 0;
}

.grid > span:first-child {
    margin-left: 5px;
}

/*.qsc-ct62-content > .grid:first-child {
    overflow: auto;
}*/

/*#endregion Grid */

/*#region Blazor-Default Klassen */

/* wird bei den login-seiten verwendet */
/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}*/

#qsc-base-blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#qsc-base-blazor-error-ui .qsc-base-dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.qsc-base-loading-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 8rem;
    height: 8rem;
    transform: translate(-50%, -50%);
}

.qsc-base-loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.qsc-base-loading-progress circle:last-child {
    stroke: rgb(0,76,140);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.qsc-base-loading-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    font-weight: bold;
    transform: translate(-50%, -50%);
    /*inset: calc(20vh + 3.25rem) 0 auto 0.2rem;*/
}

.qsc-base-loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.qsc-base-loading-logo {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

/*#endregion Blazor-Default Klassen */
/*#region Navbar */
.qsc-base-navbar {
    --qsc-base-navbar-emphasis-color-rgb: 255,255,255;
    --qsc-base-navbar-padding-x: 0;
    --qsc-base-navbar-padding-y: 0.5rem;
    --qsc-base-navbar-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 0.65);
    --qsc-base-navbar-hover-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 0.8);
    --qsc-base-navbar-disabled-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 0.3);
    --qsc-base-navbar-active-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 1);
    --qsc-base-navbar-brand-padding-y: 0.3125rem;
    --qsc-base-navbar-brand-margin-end: 1rem;
    --qsc-base-navbar-brand-font-size: 1.25rem;
    --qsc-base-navbar-brand-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 1);
    --qsc-base-navbar-brand-hover-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 1);
    --qsc-base-navbar-nav-link-padding-x: 0.5rem;
    --qsc-base-navbar-toggler-padding-y: 0.25rem;
    --qsc-base-navbar-toggler-padding-x: 0.75rem;
    --qsc-base-navbar-toggler-font-size: 1.25rem;
    --qsc-base-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --qsc-base-navbar-toggler-border-color: rgba(var(--qsc-base-navbar-emphasis-color-rgb), 0.15);
    --qsc-base-navbar-toggler-border-radius: var(--bs-border-radius);
    --qsc-base-navbar-toggler-focus-width: 0.25rem;
    --qsc-base-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--qsc-base-navbar-padding-y) var(--qsc-base-navbar-padding-x)
}

.qsc-base-navbar > .container, .qsc-base-navbar > .container-fluid, .qsc-base-navbar > .container-lg, .qsc-base-navbar > .container-md, .qsc-base-navbar > .container-sm, .qsc-base-navbar > .container-xl, .qsc-base-navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between
}

.qsc-base-navbar-brand {
    padding-top: var(--qsc-base-navbar-brand-padding-y);
    padding-bottom: var(--qsc-base-navbar-brand-padding-y);
    margin-right: var(--qsc-base-navbar-brand-margin-end);
    font-size: var(--qsc-base-navbar-brand-font-size);
    color: var(--qsc-base-navbar-brand-color);
    text-decoration: none;
    white-space: nowrap
}

.qsc-base-navbar-brand:focus, .qsc-base-navbar-brand:hover {
    color: var(--qsc-base-navbar-brand-hover-color)
}

.qsc-base-navbar-nav {
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.5rem;
    /*--bs-nav-link-font-weight:;*/
    --bs-nav-link-color: var(--qsc-base-navbar-color);
    --bs-nav-link-hover-color: var(--qsc-base-navbar-hover-color);
    --bs-nav-link-disabled-color: var(--qsc-base-navbar-disabled-color);
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.qsc-base-navbar-nav .nav-link.active, .qsc-base-navbar-nav .nav-link.show {
    color: var(--qsc-base-navbar-active-color);
}

.qsc-base-navbar-nav .dropdown-menu {
    position: static;
}

.qsc-base-navbar-text {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--qsc-base-navbar-color);
}

.qsc-base-navbar-text a, .qsc-base-navbar-text a:focus, .qsc-base-navbar-text a:hover {
    color: var(--qsc-base-navbar-active-color);
}

.qsc-base-navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.qsc-base-navbar-toggler {
    padding: var(--qsc-base-navbar-toggler-padding-y) var(--qsc-base-navbar-toggler-padding-x);
    font-size: var(--qsc-base-navbar-toggler-font-size);
    line-height: 1;
    color: var(--qsc-base-navbar-color);
    background-color: transparent;
    border: var(--bs-border-width) solid var(--qsc-base-navbar-toggler-border-color);
    border-radius: var(--qsc-base-navbar-toggler-border-radius);
    transition: var(--qsc-base-navbar-toggler-transition);
}

.qsc-base-navbar-toggler:hover {
    text-decoration: none;
}

.qsc-base-navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 var(--qsc-base-navbar-toggler-focus-width);
}

.qsc-base-navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--qsc-base-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.qsc-base-navbar-nav-scroll {
    max-height: var(--bs-scroll-height,75vh);
    overflow-y: auto;
}

.qsc-base-navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-nav {
    flex-direction: row;
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-nav .dropdown-menu {
    position: absolute;
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-nav .nav-link {
    padding-right: var(--qsc-base-navbar-nav-link-padding-x);
    padding-left: var(--qsc-base-navbar-nav-link-padding-x);
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-nav-scroll {
    overflow: visible;
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}

.qsc-base-navbar-expand-lg .qsc-base-navbar-toggler {
    display: none;
}

.qsc-base-navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
}

.qsc-base-navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
}

.qsc-base-navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
}

main .qsc-base-navbar {
    background-color: #d9e3ed;
    padding: 0;
    height: 3.5rem;
    border-bottom: 1px solid #ccc;
}

/*#endregion Navbar */

/*#region qsc-base Klassen */
.qsc-base-form-control {
    width: 100%;
    font-size: 13px;
    padding: 0 4px;
    border-bottom: 1px solid var(--qvar-base-border-color);
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 0px;
    background-color: var(--qvar-base-background);
    text-overflow: ellipsis;
    font-family: var(--qvar-gerneral-font-family), var(--qvar-gerneral-font-family-alternative), 'Roboto';
}

/* Sonderlogik, damit Text und ClearText-Button nicht overflowt */
.qsc-main-page-mobile .qsc-ct01-form-control:not([disabled]),
.qsc-main-page-mobile .qsc-ct00-form-control:not([disabled]) {
    /*padding-right: 18px;*/
}

.qsc-base-form-control-error {
    position: relative;
}

.qsc-base-form-control-error .qsc-base-form-control {
    border-bottom: 1px solid var(--qvar-base-error-color) !important;
}

.grid_input_overlay .qsc-base-form-control-error .qsc-base-form-control {
    border-bottom: none !important;
}

.qsc-base-error-triangle-wrapper-show, .qsc-base-grid-overlay-error-triangle-wrapper-show, .qsc-base-tooltip-triangle-wrapper-show {
    display: block !important;
}

/*Im EditableDG kein Error Icon im Control, das wird über das Overlay Error Triangle gelöst*/
.grid_input_overlay .qsc-base-error-triangle-wrapper-show, .grid_input_overlay .qsc-base-tooltip-triangle-wrapper-show {
    display: none !important;
}

.qsc-base-triangle-wrapper, .qsc-base-grid-overlay-error-triangle-wrapper {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: transparent;
    cursor: default;
    pointer-events: all;
}

.qsc-base-triangle-wrapper {
    top: var(--qvar-controls-input-margin-topbottom);
}

.qsc-ct20-input-wrapper .qsc-base-triangle-wrapper {
    top: calc(var(--qvar-controls-input-margin-topbottom) + 3px);
}

.qsc-main-page-mobile .qsc-base-triangle-wrapper {
    width: 10px;
    height: 10px;
}

.qsc-main-page-mobile .qsc-base-grid-overlay-error-triangle-wrapper {
    width: calc(10px * var(--qvar-general-zoom-factor));
    height: calc(10px * var(--qvar-general-zoom-factor));
}

.grid_input_overlay .qsc-base-triangle-wrapper,
.qsc-base-dropdown-control .qsc-base-triangle-wrapper,
.qsc-cell .qsc-base-triangle-wrapper,
.qsc-ct31-container .qsc-base-triangle-wrapper {
    top: 0px;
}

.qsc-base-triangle {
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 30% 0, 100% 70%);
}

.qsc-base-error-triangle-wrapper-show .qsc-base-triangle, .qsc-base-grid-overlay-error-triangle-wrapper-show .qsc-base-triangle {
    background-color: var(--qvar-base-error-color);
}

.qsc-base-tooltip-triangle-wrapper-show .qsc-base-triangle {
    background-color: var(--qvar-base-tooltip-triangle-color);
}

.qsc-base-form-control:active, .qsc-base-form-control:focus {
    border-bottom-color: var(--qvar-base-primary-color );
    outline: none;
}

/*.qsc-base-form-control[disabled] {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}*/

.qsc-base-form-control[disabled] {
    pointer-events: none;
}

.qsc-base-form-label {
    align-self: center; /*Wenn kein Alignment programmierung hier ist, muss dies gesetzt werden!!*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px;
    transition: font-weight 0.3s;
    margin-top: 1px; /*Label nach unten verschieben damit selbe höhe wie eingabefelder TODO korrigieren / richtig stellen nach Alignment implementierung*/
}

.qsc-base-label-error {
    color: var(--qvar-base-error-color);
}

.qsc-base-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid;
    border-color: var(--qvar-base-button-border-color);
    border-radius: 5px;
    padding: 0 2px;
    margin: 0 1px;
    background-color: var(--qvar-base-button-background);
    opacity: 1;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.qsc-base-button:hover {
    background-color: var(--qvar-base-button-background-hover);
}

    .qsc-base-button:disabled, .qsc-base-button[disabled] {
        pointer-events: none;
        cursor: pointer;
        height: 100%;
        user-select: none;
        opacity: 0.7;
        background-color: var(--qvar-base-protected-background-color);
    }

.qsc-base-button-link {
    border: none !important;
    margin: auto;
    text-decoration: underline;
    background: transparent;
}

.qsc-base-button-container {
    gap: 5px;
}

.qsc-base-button-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    background-color: transparent;
    color: black;
    border: 0;
    border-radius: .375rem;
    opacity: 0.5;
    padding: calc(1rem * .5) calc(1rem * .5);
    margin: calc(-.5* 1rem) calc(-.5* 1rem) calc(-.5* 1rem) auto;
}

.qsc-base-bold{
    font-weight: bold;
}

.qsc-base-card {
    border: none;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 24px;
    padding: 2rem;
    height: 24rem;
    width: 30rem;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #212529;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

.qsc-base-wrapper {
    position: relative;
    height: 24px;
    overflow: hidden;
    height:100%;
}

.qsc-base-control-container {
    padding-left: 5px; /* Muss mit dem QscBaseControlContainerPaddingLeft Wert im QscInputLabelControl übereinstimmen, damit das Layout passt*/
    min-height: 24px !important;
    height: 24px;
}

.qsc-base-empty-control {
    display: none !important;
}

.qsc-base-portal-dropdown-hide {
    display: none;
}

.qsc-base-portal-dropdown-show {
    display: block;
}

.qsc-base-qsc-base-ui-icon {
    width: 16px;
    height: 16px;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: block;
    vertical-align: baseline;
    margin-top: 0;
}

.qsc-base-textbox-input {
    font-family: var(--qvar-gerneral-font-family), var(--qvar-gerneral-font-family-alternative), 'Roboto';
}

/* Tooltips */
.tippy-box[data-theme~='qsc-tooltip-theme'] {
    background-color: white !important;
    color: black !important;
    border: 1px solid #333 !important;
    border-radius: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px;
}

.tippy-box[data-theme~='qsc-tooltip-theme'] .tippy-content {
    padding: 2px 3px !important;
    margin: 0 !important;
}

/*.qsc-base-input-control {
    width: 100%;
    padding: 0.375rem 0.75rem;
    border: none;
    border-bottom: 2px solid #ccc;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    background-clip: padding-box;
    border: 1px solid var(--qvar-base-border-color);
    border-radius: 0.375rem;
    line-height: 1.5;
    font-weight: 400;
    display: block;
}*/

/*.qsc-base-input-control:focus {
    border-bottom-color: var(--qvar-base-primary-color); 
}*/

.qsc-base-input-control {
    height: calc(calc(100% - var(--qvar-controls-input-margin-topbottom)) - var(--qvar-controls-input-margin-topbottom));
    margin-top: var(--qvar-controls-input-margin-topbottom);
    margin-bottom: var(--qvar-controls-input-margin-topbottom);
}

.qsc-base-mb-2 {
    margin-bottom: .5rem !important;
}

.qsc-base-mb-lg-0 {
    margin-bottom: 0 !important;
}

.qsc-base-me-auto {
    margin-right: auto !important;
}

.qsc-app-main-display > .grid > div{
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.qsc-app-main-display > div {
    background-color: var(--qvar-base-background);
    border-radius: 7px 0px 0px 0px;
    padding-right: 1px;
    padding-bottom: 3px;
}

.qsc-base-disabled {
    pointer-events: none;
    cursor: pointer;
    height: 100%;
    user-select: none;
}

.qsc-base-display-none {
    display: none !important;
}

.qsc-base-clearbutton {
    right: 0;
    top: 0;
    position: absolute;
    color: var(--qvar-ct15-icon-color);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    width: 18px;
    height: 100%;
    padding: 2px;
}

.qsc-main-page-mobile .gridWrapper .qsc-base-clearbutton {
    width: calc(18px * var(--qvar-general-zoom-factor)) !important;
}

.qsc-base-clearicon {
    width: 20px !important;
    height: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qsc-base-scannericon {
    width: 20px !important;
    height: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qsc-main-page-mobile .gridWrapper .qsc-base-clearicon {
    width: calc(20px * var(--qvar-general-zoom-factor)) !important;
    height: calc(20px * var(--qvar-general-zoom-factor)) !important;
    font-size: calc(var(--qvar-grid-font-size) * var(--qvar-general-zoom-factor))
}

.qsc-main-page-mobile .gridWrapper .qsc-base-scannericon {
    margin-bottom: 1px;
}

.qsc-base-scannerbutton {
    width: 18px;
    margin: 0px;
    color: var(--qvar-ct15-icon-color);
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
    opacity: 1;
    display: flex;
    align-items: center;
    padding: 0px;
    height: 100%;
}


.qsc-popup-modal {
    display: block;
    position: fixed;
    width: fit-content;
    height: fit-content;
    padding: 0 !important;
}

.qsc-main-page-mobile .qsc-popup-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.qsc-main-page-mobile + .qsc-popup-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

body:has(.qsc-mobile-login, .qsc-main-page-mobile) * {
    cursor: url('/images/cursor/cursor.cur'), pointer !important;
}

.qsc-mobile-login + .qsc-popup-modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.qsc-popup-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    border-radius: 0.5rem;
    outline: 0;
    box-shadow: 0.8px 0.8px 2.2px rgba(0, 0, 0, 0.02), 2px 2px 5.3px rgba(0, 0, 0, 0.028), 3.8px 3.8px 10px rgba(0, 0, 0, 0.035), 6.7px 6.7px 17.9px rgba(0, 0, 0, 0.042), 12.5px 12.5px 33.4px rgba(0, 0, 0, 0.05), 30px 30px 80px rgba(0, 0, 0, 0.07);
}

.qsc-popup-modal-content .qsc-base-form-label{
    white-space: pre-wrap;
}

.qsc-popup-modal-dialog {
    max-width: calc(80vw / var(--qvar-general-zoom-factor));
    margin: 0;
    background: var(--qvar-popup-header-backcolor, #4a5157);
    border-radius: 7px;
}

.qsc-popup-modal-title {
    margin: 0;
    line-height: 1.5;
}

.qsc-popup-modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6px 16px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background-color: var(--qvar-popup-header-backcolor, #4a5157);
    color: var(--qvar-popup-header-color, #fafafa);
    cursor: grab;
}

    .qsc-popup-modal-header:active {
        cursor: grabbing;
    }

.qsc-popup-modal-body {
    max-height: calc(80vh / var(--qvar-general-zoom-factor));
    padding: 2px;
    overflow: auto;
    text-overflow: ellipsis !important;
    line-height: 0.95rem;
    white-space: pre !important;
    background-color: var(--qvar-popup-body-backcolor, #fafafa);
    color: var(--qvar-popup-body-color, #000000);
    border-bottom: 2px solid var(--qvar-popup-header-backcolor, #4a5157);
    border-left: 2px solid var(--qvar-popup-header-backcolor, #4a5157);
    border-right: 2px solid var(--qvar-popup-header-backcolor, #4a5157);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.qsc-main-page-mobile .qsc-popup-modal-body {
    padding: 0;
}

.qsc-popup-modal-body .mobile-drop-zone {
    overflow: auto !important;
}

.qsc-popup-modal-body .mobile-drop-zone > .grid{
    height: unset !important;
    min-height: 100%;
}

.qsc-popup-modal-body .grid {
    height: 100%;
}

.qsc-popup-modal-body .qsc-base-button {
    margin: 0 !important;
}

.qsc-popup-modal-button-close {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--qvar-popup-header-color, #4a5157);
    transition: opacity ease 0.5s;
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
}

.qsc-popup-modal-button-close:active, .qsc-popup-modal-button-close:hover{
    opacity: 1;
    border: 0;
    box-shadow: none;
}

.qsc-popup-button {
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 5px;
    padding: 0.5px;
    margin: 0 1px;
}

/* Für InteractiveGraphicClientCode darf die GroupBox nicht display:grid gesetzt haben damit das Scrollen richtig funktioniert */
div:has(> .qsc-ig-clientcode) {
    display: block !important;
}

div:has(> .qsc-app-main-display > .drop-zone > :is(.C1QI00, .C1WL50)) .qsc-toolbar {
    display: none;
}

div:has(> .qsc-app-main-display > .mobile-drop-zone > :is(.C1XS50)) .qsc-toolbar .qsc-toolbar-item-container {
    background: transparent;
}


div:has(> .qsc-app-main-display > .mobile-drop-zone > :is(.C1XS50)) .qsc-toolbar .qsc-toolbar-area-home {
    visibility: hidden;
}

.qsc-base-protected {
    cursor: default;
    pointer-events: none;
}

    .qsc-base-protected .qsc-base-form-control:disabled, .qsc-base-protected .qsc-base-form-control:disabled + * {
        border-bottom: 1px solid transparent;
        opacity: 0.85;
        background: var(--qvar-base-protected-background-color);
    }

.qsc-base-input-icon-protected {
    cursor: default;
    pointer-events: none;
}

.qsc-ct42-link {
    cursor: pointer; /* Standard-Cursor für Links (Finger) */
}

    .qsc-ct42-link:hover {
        cursor: pointer; /* Sicherstellen, dass der Cursor bei Hover auf Finger wechselt */
    }

/* Joinable control removing padding */
.qsc-jc-container div .qsc-base-control-container:first-child {
    padding-left: 0px !important;
}

/* #region ct20 / checkbox */
.qsc-ct20-container {
    display: flex;
    align-items: center;
    height: 24px;
}

.qsc-ct20-checkbox-text-right {
    display: flex;
    flex-direction: row-reverse;
}

/* Mindesthöhe und Padding für das Icon*/
.qsc-ct20-navbar > button {
    min-height: 24px;
    padding-left: 2px;
    padding-right: 2px;
}

/* Margin-Top entfernen, damit das zentrieren in der NavBar funktioniert */
.qsc-ct20-navbar > input {
    margin-top: 0px;
}

/* Textbox */
.qsc-ct20-form-check-label {
    margin-left: 5px;
}

.qsc-ct20-form-check-input {
    appearance: none;
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    accent-color: var(--qvar-ct20-checked-color );
    margin: 0 0 0 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    border: 1px solid var(--qvar-ct20-border-color);
    border-radius: 2px;
    background-color: var(--qvar-ct20-background-color);
    cursor: pointer;
}

.qsc-ct20-label-left .qsc-ct20-form-check-input{
    margin-left: 0;
}

    .qsc-ct20-form-check-input:checked {
        background-color: var(--qvar-ct20-checked-color );
        border-color: transparent;
    }

        .qsc-ct20-form-check-input:checked:disabled {
            background-color: #ccc;
        }

    .qsc-ct20-form-check-input::before {
        content: "";
        width: 12px;
        height: 12px;
        clip-path: polygon(12.14% 55.23%, 25.34% 42.03%, 37.34% 55.23%, 75.74% 16.83%, 88.94% 30.03%, 37.34% 80.43%, 12.14% 55.23%);
        transform: scale(0);
        background-color: var(--qvar-ct20-background-color);
    }

    .qsc-ct20-form-check-input:checked::before {
        transform: scale(1);
    }

    .qsc-ct20-form-check-input:hover {
        background: var(--qvar-ct20-hover-backcolor);
    }

    .qsc-ct20-form-check-input.qsc-ct20-activ:hover {
        background-color: var(--qvar-ct20-checked-color);
    }

.qsc-ct20-disabled {
    pointer-events: none;
    cursor: default;
    user-select: none;
    background-color: transparent;
    border: 1px solid #e8e8e8;
}


.qsc-ct20-button-toggle {
    width: 24px;
    height: 24px;
    border: 1px solid var(--qvar-base-border-color);
    /*background: var(--qvar-ct20-background-color);
	border: 1px solid transparent;*/
    background: transparent;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

    .qsc-ct20-button-toggle:disabled {
        opacity: 0.7;
    }

    .qsc-ct20-button-toggle:hover {
        background: var(--qvar-ct20-hover-backcolor);
        /*border-color: var(--qvar-ct20-hover-border-color);*/
    }

    /*.qsc-ct20-button-toggle[aria-pressed="true"] {*/
    /*	background: linear-gradient(var(--qvar-base-border-color), white);*/
    /*background: var(--qvar-ct20-active-background-color);
	border: 1px solid var(--qvar-ct20-checked-color);
}*/

    .qsc-ct20-button-toggle[aria-pressed="true"] {
        /*	border: 1px solid transparent;
	border-radius: 3px;*/
    }

        .qsc-ct20-button-toggle[aria-pressed="true"]:before {
            content: '';
            position: absolute;
            top: 0;
            width: 75%;
            border-top: 2px solid var(--qvar-ct20-checked-color);
        }

.qsc-ct20-navbar .qsc-ct20-button-toggle[aria-pressed="true"]:before {
    top: calc(50% - 12px);
}

.qsc-ct20-input-wrapper {
    width: min-content;
    height: min-content;
    height: 100%;
    align-items: center;
    display: flex;
    position: relative;
}

.grid_input_overlay .qsc-ct20-input-wrapper {
    justify-content: center;
}

.qsc-ct20-label-left {
    order: 1;
}

.qsc-ct20-navbar > .qsc-ct20-button-toggle {
    border: none;
    border-radius: 0px;
    height: 100%;
}

    .qsc-ct20-navbar > .qsc-ct20-button-toggle:hover {
        border: none;
        border-radius: 0px;
        background: var(--qvar-ct20-button-navbar-hover);
    }

.qsc-ct20-focus {
    border-color: var(--qvar-ct60-button-border-focus-color);
}

.qsc-ct20-navbar.qsc-ct20-container {
    height: 100%;
}

.qsc-ct60-navbar > .qsc-base-button:disabled, .qsc-base-button[disabled] {
    opacity: 0.4;
    background-color: transparent;
}

.grid_input_overlay .qsc-base-control-container {
    padding-left: 0px;
    height: 100%;
    min-height: 100% !important;
}

.grid_input_overlay .qsc-ct20-container {
    margin: 0px;
    height: 100%;
    border: none;
    /*padding-left: 2px;*/
}

/*Muss hier gemacht werden, da Input element selbst ein padding hat*/
.grid_input_overlay .qsc-ct20-form-check-input {
    /*padding-right: 2px;*/
}

.qsc-main-page-mobile .grid_input_overlay .qsc-ct20-form-check-input {
    zoom: var(--qvar-general-zoom-factor);
}
/* #endregion CHECKBOX CSS*/



.qsc-ddl-bottomleft::before, .qsc-ddl-bottomright::before {
    clip-path: inset(-1px -10px -10px -10px); /* Nur auf drei Seiten */
}

.qsc-ddl-topleft::before, .qsc-ddl-topright::before {
    clip-path: inset(-10px -10px -1px -10px); /* Nur auf drei Seiten */
}

:root {
    --qvar-login-container-shadow: 0px 0px 14px -7px #fafafa71, 2px 2px 15px 2px #fafafa7a;
    --qvar-login-backcolor: black;
    --qvar-login-right-backcolor: white;
    --qvar-login-left-backcolor: #191a1b;
    --qvar-login-input-label-color: white;
    --qvar-login-portal-label-color: #b7b7b7;
    --qvar-login-logintext-label-color: white;
    --qvar-login-input-backcolor: transparent;
    --qvar-login-input-color: #fafafa;
    --qvar-login-input-border-color: #ddd;
    --qvar-login-input-border-color-active: #4473c4;
    --qvar-login-button-backcolor: #092869;
    --qvar-login-button-color: black;
    --qvar-login-button-backimage: linear-gradient(45deg, #d3d3d3 0%, white 51%, #d3d3d3 100%);
    --qvar-login-version-color: #6c757d;
}

.qsc-login-background {
    font-family: 'Roboto';
    background-color: var(--qvar-login-backcolor);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    line-height: normal;
}

.qsc-login-background::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../images/login/combs_banner_small.svg);
    background-size: 47%;
    background-repeat: no-repeat;
    background-position: top right;
    transform: rotate(0deg);
    transform-origin: center;
}

/* Am Desktop den Warben-Background ausblenden, da er hier im .qsc-apparea-main-page::before gesetzt werden muss */
.qscc-C1XS50-wrapper.qsc-login-background::before {
    display: none;
}

.qsc-main-page-mobile:has(.C1XS50) .qsc-apparea-main-page::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../images/login/combs_banner_small.svg);
    background-size: 47%;
    background-repeat: no-repeat;
    background-position: top right;
    transform: rotate(0deg);
    transform-origin: center;
}

.qsc-login-container {
    width: 90%;
    max-width: 750px;
    height: 450px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    box-shadow: var(--qvar-login-container-shadow);
    overflow: hidden;
    position: relative;
}

.qsc-mailtoken-login-container {
    height: auto;
    max-width: 850px;
}

    .qsc-mailtoken-login-container .qsc-login-right {
        height: auto;
    }

.qsc-login-left, .qsc-login-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qsc-login-left {
    background-color: var(--qvar-login-left-backcolor);
    border-radius: 15px 0 0 15px;
    padding: 0px;
    justify-content: flex-start;
    width: 50%;
    height: 100%;
}

.qsc-login-right {
    background-color: var(--qvar-login-right-backcolor);
    border-radius: 0 15px 15px 0;
    align-items: center;
    width: 50%;
    height: 100%;
    padding: 10px;
}

.qsc-login-left-container {
    overflow: hidden;
    position: relative;
    padding: 20px;
    padding-top: 0px;
    height: 100%;
    width: 100%;
    z-index: 3;
}

.qsc-mailtoken-login-container .qsc-login-left-container{
    padding-right: 0;
}

.qsc-login-form {
    padding: 0px 30px 30px 30px;
}

.qsc-login-left-background2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.qsc-login-left-background2::before {
    content: '';
    position: absolute;
    top: 40%;
    left: -28%;
    width: 100%;
    height: 100%;
    background-image: url('../images/login/combs_banner_login.svg');
    background-size: cover;
    background-position: center;
    transform: rotate(157deg);
    transform-origin: center;
    pointer-events: none;
}

.qsc-mailtoken-login-container .qsc-login-left-background2::before {
    top: 50%;
}

.qsc-login-right::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 0;
    bottom: 0;
    width: 10%;
    background: var(--qvar-login-right-backcolor);
    transform: skewX(-10deg);
    transform-origin: top;
}

.qsc-mailtoken-login-container .qsc-login-right::after {
    display: none;
}

.qsc-login-left::after {
    content: '';
    position: absolute;
    left: 44%;
    top: 0;
    bottom: 0;
    width: 15%;
    background: var(--qvar-login-left-backcolor);
    transform: skewX(-10deg);
    transform-origin: top;
}

.qsc-mailtoken-login-container .qsc-login-right::after {
    transform: skewX(-7deg);
}

.qsc-mailtoken-login-container .qsc-login-left::after {
    transform: skewX(-7deg);
}

.qsc-login-titel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.qsc-login-titel-logintext {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.qsc-login-avatar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

    .qsc-login-avatar-container img {
        width: 80px;
        max-width: 80px;
    }

.qsc-login-titel .qsc-login-text {
    color: var(--qvar-login-portal-label-color);
    font-size: 1.8rem;
    font-weight: normal;
    margin-top: 10px;
}

.qsc-login-titel-logintext .qsc-login-text {
    color: var(--qvar-login-logintext-label-color);
    font-size: 1rem;
}

.qsc-login-label {
    color: var(--qvar-login-input-label-color);
    font-size: 1rem;
}

form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.qsc-login-input-container {
    margin-bottom: 15px;
    border-bottom: 2px solid var(--qvar-login-input-border-color);
}

.qsc-login-input-box {
    position: relative;
    display: flex;
    align-items: center;
}

.qsc-login-input-container input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 0px;
    border: none;
    background-color: var(--qvar-login-input-backcolor);
    color: var(--qvar-login-input-color);
    font-size: 1rem;
    padding: 12px 0 8px 34px;
    outline: none;
    z-index: 2;
}

.qsc-login-input-container:has(input:disabled) {
    filter: brightness(0.5);
}

.qsc-login-input-container select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 0px;
    border: none;
    background-color: var(--qvar-login-input-backcolor);
    color: var(--qvar-login-input-color);
    font-size: 1rem;
    padding: 12px 0 8px 34px;
    outline: none;
    z-index: 2;
    cursor: pointer;
    text-overflow: ellipsis;
}

    .qsc-login-input-container select option {
        background: black;
        color: white;
        cursor: pointer;
    }

.qsc-login-input-container:has(input:focus) {
    border-bottom: 2px solid var(--qvar-login-input-border-color-active);
}

.qsc-login-input-user {
    text-transform: uppercase;
}

    .qsc-login-input-user::placeholder {
        text-transform: none;
    }

.qsc-login-input-container input:is(-webkit-autofill, :autofill),
.qsc-login-input-container input:is(-webkit-autofill, :autofill):hover,
.qsc-login-input-container input:is(-webkit-autofill, :autofill):focus,
.qsc-login-input-container input:is(-webkit-autofill, :autofill):active {
    transition: background-color 9999s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
    background: transparent !important;
}

.qsc-login-input-icon {
    position: absolute;
    left: 0;
    font-size: 18px;
    padding-left: 5px;
    z-index: 3;
}

.qsc-login-mail-suffix:empty {
    display: none;
}

.qsc-login-mail-suffix {
    /*position: absolute;
    right: 0;*/
    padding-right: 2px;
    z-index: 3;
    color: white;
    font-size: 1rem;
    font-family: Arial;
    margin-top: 7px;
    background: transparent;
    white-space: nowrap;
}

.qsc-login-button-container{
    width: 100%;
    position: relative;
}

.qsc-login-button {
    background-color: var(--qvar-login-button-backcolor);
    color: var(--qvar-login-button-color);
    padding: 15px 12px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    font-weight: 700;
    background-image: var(--qvar-login-button-backimage);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    z-index: 2;
    width: 100%;
    position:inherit;
}

    .qsc-login-button:hover {
        background-position: right center;
        color: black;
    }

    .qsc-login-button:active {
        transform: scale(0.95);
    }

    .qsc-login-button::after {
        content: '';
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 32%;
        left: 46%;
        border: 0.15rem solid transparent;
        border-right-color: black;
        border-radius: 50%;
        animation: animate 0.7s linear infinite;
        opacity: 0;
    }

.qsc-login-credentials {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.qsc-client-logout-button {
    cursor: pointer;
    filter: brightness(0.8);
    transition: filter 0.2s linear;
}

.qsc-client-logout-button:hover {
    filter: brightness(1);
}



@keyframes animate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.qsc-login-button.loading {
    color: transparent;
}

    .qsc-login-button.loading::after {
        opacity: 1;
    }

.qsc-login-version-info {
    color: var(--qvar-login-version-color);
    text-align: right;
    font-size: 11px;
    align-self: flex-end;
    display: block;
    margin-right: 5px;
}

.qsc-login-logo-container {
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: 13px;
    pointer-events: none;
}

.qsc-login-bottomleft-version-info {
    display: none;
}

.qsc-login-options-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
    width: 100%;
}

.qsc-login-options {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 36px;
}

.qsc-ct60-button-icon {
    margin-left: 2px;
    margin-right: 2px;
}

/*.qsc-update-banner {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
}

    .qsc-update-banner button {
        background-color: #0078d7;
        color: #fff;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        margin-left: 10px;
    }

        .qsc-update-banner button:hover {
            background-color: #005fa3;
        }

.qsc-update-banner-text {
    display: flex;
}

.qsc-update-banner-warning-icon {
    margin-top: -2px;
    margin-right: 10px;
    margin-left: 5px;
    align-self: center;
}*/

/*New Banner*/
.qsc-update-banner {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    z-index: 1000;
    display: none; /* Initially hidden */
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
}

    /* Style for buttons */
    .qsc-update-banner button {
        background-color: #0078d7;
        color: #fff;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        margin-left: 10px;
    }

        .qsc-update-banner button:hover {
            background-color: #005fa3;
        }

.qsc-update-banner-text {
    display: flex;
    align-items: center;
}

/* Icon adjustments */
.qsc-update-banner-warning-icon {
    margin-top: -2px;
    margin-right: 10px;
    margin-left: 5px;
    align-self: center;
    display: block;
}

/* Spinner Animation */
.qsc-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    display: none; /* Hidden by default */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Hide close button initially */
#qsc-close-banner-button {
    display: block;
}


.qsc-settings-combobox-popup {
    border: var(--qvar-client-settings-color) solid 1px;
}

.qsc-settings-combobox-dropdown-item {
    color: var(--qvar-client-settings-color);
    background-color: var(--qvar-client-settings-backcolor);
}

    .qsc-settings-combobox-dropdown-item:hover {
        background-color: var(--qvar-client-settings-color);
        color: var(--qvar-client-settings-backcolor);
    }

.qsc-settings-combobox-header {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--qvar-client-settings-border-color);
    background: transparent;
    color: var(--qvar-client-settings-color);
}

/* #region paging und paging header */


/*Dieser Code + GetLayoutStyle() in MobileHeader ist eine Sonderlogik, falls der Geader in einem Grid sein sollte. Siehe Anwendung: Barcode*/
.qsc-ct6A-mobile-header {
    display: block !important;
}

.qsc-ct6A-mobile-paging {
    margin-bottom: 2px;
}

.qsc-ct6A-mobile-paging-tab {
    box-sizing: border-box;
    border: 1px solid transparent;
    padding: 3px 9px 1px 9px;
    margin-bottom: -1px;
    cursor: pointer;
    display: block;
    white-space: nowrap;
    background-color: transparent;
    color: #999; /* TODO FM in Variable auslagern */
}

.qsc-ct6A-mobile-paging-tab-error {
    color: #d00 !important; /* TODO FM in Variable auslagern */
}

    .qsc-ct6A-mobile-paging-tab-error::before {
        background-color: #d00 !important; /* TODO FM in Variable auslagern */
    }

.qsc-ct6A-mobile-paging-tab-active {
    position: relative;
    color: white; /* TODO FM in Variable auslagern */
    padding: 3px 9px 1px 9px;
}

    .qsc-ct6A-mobile-paging-tab-active::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 0;
        height: 2px;
        width: 100%;
        background-color: white; /* TODO FM in Variable auslagern */
    }

.qsc-ct6A-mobile-paging-burger-tab-active {
    color: white; /* TODO FM in Variable auslagern */
    padding: 3px 9px 1px 9px;
}

.qsc-ct6A-mobile-paging-top-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    background-color: #191a1b; /* TODO FM in Variable auslagern */
    height: 31px;
}

.qsc-ct6A-mobile-paging-job-infos {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 5px;
    width: max-content;
    white-space: nowrap;
    background-color: white; /* TODO FM in Variable auslagern */
    border-radius: 5px 5px 0 0;
    height: 100%;
}

.qsc-ct6A-mobile-paging-job-infos-text {
    display: flex;
    flex-direction: column;
    margin: auto auto auto 5px;
    line-height: 15px;
    font-size: 13px;
}

.qsc-ct6A-mobile-paging-job-infos-desc {
    color: #888; /* TODO FM in Variable auslagern */
    font-size: 9px;
    line-height: 11px;
}

.qsc-ct6A-mobile-paging-tab-item-container {
    margin: 0 5px 0 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
    align-items: center;
}

.qsc-ct6A-mobile-paging-tabs-only-container {
    display: flex;
}

.qsc-ct6A-mobile-paging-tab-switch {
    padding-left: 3px;
    padding-right: 3px;
    height: 100%;
    background: transparent;
    border: none;
}

.qsc-ct6A-mobile-paging-devider-inner {
    width: 100%;
    height: 100%;
    background-color: white; /* TODO FM in Variable auslagern */
}

.qsc-ct6A-mobile-paging-devider-outer {
    height: 100%;
    width: 100%;
    background: #191a1b; /* TODO FM in Variable auslagern */
    border-bottom-left-radius: 5px;
    /*	position: relative;*/
}

/* Warben im Header funktionieren nicht richtig - platzierung sehr schwierig */

/*.qsc-ct6A-mobile-paging-devider-outer::before {
	content: '';
	position: absolute;*/
/* top: -902%; */
/* left: -10%; */
/* right: -50%; */
/*width: 100%;
	height: 100%;
	background-image: url(/images/login/combs_banner_login.svg);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: top center;*/
/* transform: rotate(289deg); */
/*background-attachment: fixed;*/
/* transform-origin: top center; */
/*}*/

.qsc-ct6A-mobile-paging-burger-menu-container {
    position: relative;
    display: flex;
    height: 100%;
}

.qsc-ct6A-mobile-paging-burger-menu-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.qsc-ct6A-mobile-paging-burger-menu-pop-up {
    /*position: absolute;
	display: flex;
	flex-direction: column;
	background: white;
	transform: translate(-50%, 100%);
	bottom: 0;
	border: 1px solid var(--qvar-base-border-color);
	border-radius: 5px;*/
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    max-height: inherit;
    background-color: #191a1b; /* TODO FM in Variable auslagern */
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: default;
    border: 1px solid var(--qvar-ct15-border-color);
    border-radius: 5px;
}

.qsc-ct6A-mobile-paging-burger-menu-tab-item {
    background-color: transparent;
    padding: 4px 10px;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999; /* TODO FM in Variable auslagern */
    color: #999;
}

    .qsc-ct6A-mobile-paging-burger-menu-tab-item:last-of-type {
        border-bottom: none;
    }

.qsc-ct6A-mobile-paging-burger-menu-tab-item-active {
    background-color: #333; /* TODO FM in Variable auslagern */
    color: white;
}


.qsc-ct6A-mobile-paging-childcontent-container {
    padding: 3px;
    background: var(--qvar-ct6a-background-color);
    border: 1px solid var(--qvar-ct6a-border-color);
    border-radius: 5px;
    align-items: center;
    align-content: space-around;
    width: calc(100% - 4px); /* margin left und right wegrechen */
    margin: 2px;
}

.qsc-ct6A-mobile-header-childcontent-container {
    margin: 2px;
    padding: 3px;
    background: var(--qvar-ct6a-background-color);
    border: 1px solid var(--qvar-ct6a-border-color);
    border-radius: 5px;
    align-items: center;
    align-content: space-around;
}

.qsc-ct6A-header-content {
    grid-column: 2;
    /*margin: 10px;*/
}




/* In PopUp */
.qsc-popup-modal-body .qsc-ct6A-mobile-paging-tab-active {
    color: var(--qvar-base-primary-color);
}


.qsc-popup-modal-body .qsc-ct6A-mobile-paging-tab-active::before {
    background-color: var(--qvar-base-primary-color);
}


.qsc-popup-modal-body .qsc-ct6A-mobile-paging-top-container {
    background-color: transparent;
}


.qsc-popup-modal-body .qsc-ct6A-mobile-paging-job-infos {
    background-color: transparent;
}


.qsc-popup-modal-body .qsc-ct6A-mobile-paging-devider-inner {
    background-color: transparent;
}


.qsc-popup-modal-body .qsc-ct6A-mobile-paging-devider-outer {
    background: transparent;
}

.qsc-popup-modal-body .qsc-ct6A-mobile-paging-burger-menu-button {
    background-color: transparent;
}

.qsc-popup-modal-body .qsc-ct6A-mobile-paging-burger-tab-active {
    color: black;
}

/* #endregion paging und paging header */

/* Responsive Styles */
@media (max-width: 768px) {
    .qsc-login-container {
        flex-direction: column-reverse;
        width: 60%;
        height: auto;
        max-width: 100%;
    }

    .qsc-login-left, .qsc-login-right {
        width: 100%;
        border-radius: 0;
        padding: 10px;
        flex-direction: column;
    }

    .qsc-login-left {
        padding: 0px;
    }

        .qsc-login-left::after {
            display: none;
        }

    .qsc-login-left-container {
        width: 100%;
        padding: 0px;
    }

    .qsc-login-left-background2 {
        padding: 10px;
        padding-top: 0px;
    }

    .qsc-login-right img {
        width: 150px;
    }

    .qsc-login-titel .qsc-login-text {
        font-size: 1.5rem;
    }

    .qsc-login-avatar-container img {
        width: 50px;
        display: none;
    }

    .qsc-login-label, .login .qsc-login-text {
        font-size: 0.9rem;
    }

    .qsc-login-button {
        padding: 12px;
        font-size: 1rem;
        border-radius: 5px;
    }

    .qsc-login-right::after {
        display: none;
    }

    .qsc-login-left::after {
        display: none;
    }

    .qsc-login-button {
        margin-top: 10px;
    }

    .qsc-login-titel-logintext {
        margin-bottom: 0px;
    }

    .qsc-login-button::after {
        top: 28%;
    }

    .qsc-login-version-info {
        display: none;
    }

    .qsc-login-logo-container {
        margin-top: 0px;
    }

    .qsc-login-bottomleft-version-info {
        position: absolute;
        bottom: 0px;
        color: var(--qvar-login-version-color);
        left: 0px;
        padding-left: 8px;
        padding-bottom: 5px;
        display: block;
        pointer-events: none;
    }

    .qsc-login-options {
        padding-top: 10px;
    }
}

@media (max-width: 480px) {

    .qsc-login-container {
        flex-direction: column-reverse;
        width: 80%;
        height: auto;
        max-width: 100%;
    }

    .qsc-login-left, .qsc-login-right {
        width: 100%;
        border-radius: 0;
        padding: 10px;
        flex-direction: column;
    }

    .qsc-login-left {
        padding: 0px;
    }

        .qsc-login-left::after {
            display: none;
        }

    .qsc-login-left-container {
        width: 100%;
        padding: 0px;
    }

    .qsc-login-left-background2 {
        padding: 0px;
        padding-top: 0px;
    }

    .qsc-login-right img {
        width: 150px;
    }

    .qsc-login-titel .qsc-login-text {
        font-size: 1.5rem;
    }

    .qsc-login-avatar-container img {
        width: 50px;
        display: none;
    }

    .qsc-login-label, .login .qsc-login-text {
        font-size: 0.9rem;
    }

    .qsc-login-button {
        padding: 12px;
        font-size: 1rem;
        border-radius: 5px;
    }

    .qsc-login-right::after {
        display: none;
    }

    .qsc-login-left::after {
        display: none;
    }

    .qsc-login-button {
        margin-top: 10px;
    }

    .qsc-login-titel-logintext {
        margin-bottom: 0px;
    }

    .qsc-login-titel .qsc-login-text {
        font-size: 1.2rem;
    }

    .qsc-login-titel-logintext .qsc-login-text {
        font-size: 0.8rem;
    }

    .qsc-login-button {
        padding: 10px;
        font-size: 0.9rem;
    }

    .qsc-login-right::after {
        display: none;
    }

    .qsc-login-left::after {
        display: none;
    }

    .qsc-login-button::after {
        top: 28%;
    }

    .qsc-login-version-info {
        display: none;
    }

    .qsc-login-logo-container {
        margin-top: 0px;
    }

    .qsc-login-bottomleft-version-info {
        position: absolute;
        bottom: 0px;
        color: var(--qvar-login-version-color);
        left: 0px;
        padding-left: 8px;
        padding-bottom: 5px;
        display: block;
        pointer-events: none;
    }
}

.qsc-job-user-name {
    font-size: 15px;
    color: #fafafa;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.grid_input_overlay .qsc-base-input-control {
    margin: 0px;
    height: 100%;
    border: none;
    font-size: calc(var(--qvar-grid-font-size) * var(--qvar-general-zoom-factor)) !important;
}

.qscicon {
    pointer-events: none;
}

.qsc-main-page-mobile .gridWrapper .rz-datepicker-trigger .rzi-calendar:before {
    height: calc(16px * var(--qvar-general-zoom-factor)) !important;
    width: calc(16px * var(--qvar-general-zoom-factor)) !important;
}

.qsc-main-page-mobile .gridWrapper .rzi-calendar {
    font-size: calc(16px * var(--qvar-general-zoom-factor)) !important;
}

.qsc-main-page-mobile .gridWrapper .rz-datepicker-trigger {
    height: calc(16px * var(--qvar-general-zoom-factor));
    width: calc(16px * var(--qvar-general-zoom-factor));
}

.qsc-ct80-editabledg-ct10, .qsc-ct80-editabledg-ct11 {
    padding-right: 20px;
}

.qsc-main-page-mobile .qsc-ct80-editabledg-ct10, .qsc-main-page-mobile .qsc-ct80-editabledg-ct11 {
    padding-right: calc(20px * var(--qvar-general-zoom-factor));
    margin-top: 1px;
}

/*Für Perfekte Positionierung von DatePicker Icon im Editable DG*/
.qsc-ct80-editable-content-container .rz-datepicker-trigger {
    margin-right: 0.4px;
}

.qsc-main-page-mobile .qsc-ct80-content-controltype-00 .text-wrapper {
    margin-top: 1px;
}

.qsc-main-page-mobile .qsc-ct80-content-controltype-01 .text-wrapper {
    margin-top: 1px;
}

.qsc-main-page-mobile .qsc-ct80-content-controltype-13 .qsc-grid-cell-key {
    margin-top: 1px;
}

.qsc-main-page-mobile .qsc-ct80-content-controltype-14 .qsc-grid-cell-key {
    margin-top: 1px;
}