/* Custom page CSS
  -------------------------------------------------- */

/* Not required for template or sticky footer method. */

@media screen {

    body {
        overflow: hidden;
        padding: 0;
        margin: 0;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        overflow: auto;
    }

        body.navbar-collapse-show {
            overflow: hidden;
        }

    h1.h2 {
        margin-bottom: 1.5rem;
    }

    .hidden {
        display: none;
    }

    header nav {
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
    }

    .page-container {
        margin-top: 76px;
        overflow: visible;
        min-height: calc(100vh - 76px);
        background-color: #fff;
        background-color: #e8ecef;
        /* Hintergrund-Bild */
        position: relative;
        background-image: url(../images/Background_Regale_single.svg);
        background-attachment: fixed;
        background-size: 10% auto;
        background-position: 0 90%;
        background-repeat: repeat-x;
        z-index: 1;
    }

        .page-container.page-container-login {
            min-height: calc(100vh);
            z-index: 0;
            pointer-events: none;
        }

            .page-container.page-container-login .page-container-login-content {
                width: 600px;
                max-width: calc(90vw);
                max-height: calc(90vh);
                pointer-events: all;
            }

        .page-container:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(232, 236, 239, 0.9);
            background: linear-gradient(180deg, rgba(232, 236, 239, 1) 40%, rgba(232, 236, 239, 0.85) 70%, rgba(232, 236, 239, 1) 100%);
            opacity: 1;
            z-index: -2;
        }

    /* Animation nur auf Login-Screen*/
    /*.page-container.page-container-login:after {
            content: " ";
            position: fixed;
            top: 0;
            left: -10%;
            height: 100%;
            width: 7%;
            background-image: url(../images/gabelstapler.svg);
            opacity: 1;
            z-index: -1;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left 92%;
            background-clip: border-box;
            background-origin: border-box;
            animation-name: gabelstapler-animation;
            animation-delay: 1s;
            animation-duration: 10s;
            animation-timing-function: linear;
            animation-iteration-count:infinite;
            filter: drop-shadow( 0 0 10px rgba(255, 255, 255));
        }*/

    @keyframes gabelstapler-animation {
        0% {
            left: -10%;
        }

        60% {
            left: calc(110vw);
        }

        100% {
            left: calc(110vw);
        }
    }

    .bg-color-page {
        background-color: #e8ecef;
    }

    .container.container-main {
        min-height: inherit;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.15);
    }

    .loading-container {
        width: calc(100vw);
        height: calc(100vh);
        font-family: Arial, Helvetica, sans-serif;
    }

        .loading-container .spinner-border {
            width: 56px !important;
            height: 56px !important;
            border: 8px solid gray !important;
            border: 8px solid var(--primary) !important;
            border-right-color: transparent !important;
        }

    /* DIALOG - Element (z.B. Error-Meldungen)*/
    dialog {
        border: none;
        padding: 0;
        min-width: 300px;
        width: min(500px, 90vw);
    }

        dialog::backdrop {
            background-color: rgba(0,0,0,0.2);
        }

        dialog .btn-abbrechen,
        dialog .btn-abbrechen:hover,
        dialog .btn-abbrechen:focus {
            box-shadow: none;
        }


    .img-fluid {
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 200px);
    }

    .img-contactperson {
        width: auto;
        min-width: 100px;
        max-width: calc(100%);
        min-height: 100px;
        height: auto;
        border: 1px solid #ced4da;
    }

        .img-contactperson.img-not-found {
            background-image: url(../images/broken-img.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: contain;
        }

    .image-container-contactperson {
        height: 200px;
        max-height: 100%;
        width: 100%;
        /*background-color: #f2f2f2;*/
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    input.is-invalid ~ .custom-control-label a {
        text-decoration: underline;
        color: #dc3545;
    }

    .input-error-message {
        color:#dc3545;
        font-size: 12px;
    }

    .form-group-user-products .form-group-user-products-item {
        padding-left: 2rem !important;
        border-bottom: 1px solid #dee2e6;
    }

        .form-group-user-products .form-group-user-products-item:nth-child(2n+1) {
            background-color: rgba(0, 0, 0, 0.05);
        }

    .custom-control-label::before {
        background-color: #fff;
        border: 1px solid #6c757d;
    }

    .form-control::-webkit-input-placeholder {
        color: #ccc;
    }

    .form-control::-moz-placeholder {
        color: #ccc;
    }

    .form-control:focus:-ms-input-placeholder,
    .form-control:-ms-input-placeholder {
        color: #ccc;
    }

    .form-control:focus::-ms-input-placeholder,
    .form-control::-ms-input-placeholder {
        color: #ccc;
    }

    .form-control:-ms-input-placeholder,
    .form-control:placeholder,
    .form-control::placeholder {
        color: #ccc;
    }

    .form-label-required::after {
        content: ' *';
    }

    /* Input type = number */
    /* Hide HTML5 Up and Down arrows. */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

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


    /* CURSOR Formularelemente */
    .custom-control input,
    .custom-control label[for],
    .form-group .custom-control ~ label,
    .col-form-unit[for] span,
    .col-form-label[for] span,
    .col-form-label[for] h2.h3 span,
    .custom-control-label[for] span,
    .custom-checkbox .custom-control-label::after,
    .custom-radio .custom-control-label::after,
    .custom-select {
        cursor: pointer;
    }

    .col-form-unit {
        margin-left: -10px;
    }

    /* damit der Help-Button nicht unter das Label springt */
    .col-form-label {
        display: flex;
        justify-content: flex-start;
    }

    .custom-checkbox .col-form-label {
        display: inline-block;
    }

    .custom-checkbox {
        margin-top: 2px;
        margin-left: 16px;
        padding-top: 5px;
    }

        .custom-checkbox.custom-checkbox-without-label .custom-control-label::before,
        .custom-checkbox.custom-checkbox-without-label .custom-control-label::after {
            left: -0.5rem;
        }

    textarea.form-control.textarea-anmerkungen {
        min-height: 8rem;
    }

    .main-container {
        overflow: visible;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: calc(100vh - 100px);
        flex-grow: 1;
    }

    .alert {
        padding-left: 2.8rem;
    }

    .alert-icon {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0.8rem;
    }

    .alert-errorinfo {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid #721c24;
    }

    .navbar {
        padding: 0;
        line-height: 20px;
    }

        .navbar > .container {
            height: 76px;
        }

    .navbar-brand {
        background-repeat: no-repeat;
        background-position: 10px center;
        height: 76px;
        text-align: center;
        line-height: 42px;
        padding-left: 60px !important;
        color: #fff;
    }

    .btn-row .btn {
        margin-right: 0.5rem;
    }

    .btn-row:last-child {
        margin-right: 0;
        align-items: center;
    }

    .main-button-row {
        margin-top: auto;
        height: 56px;
        margin-bottom: 0.5rem;
    }

        .main-button-row .text-copyright {
            display: flex;
            color: #fff;
            opacity: 0.5;
            margin-right: 1rem;
        }

        .main-button-row .link-feedback {
            color: #fff;
            opacity: 0.5;
            margin-left: 1rem;
            margin-right: 1rem;
            align-items: center;
        }

            .main-button-row .link-feedback:hover {
                opacity: 1;
            }

    .main-button-col {
        background-color: #343a40;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
    }

    .btn-has-tooltip {
        position: relative;
    }

        .btn-has-tooltip .tooltip-trigger {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

    /* Popover */
    .popover {
        border: 1px solid var(--secondary);
    }

    .popover-header {
        background-color: var(--secondary);
        color: white;
    }

    .bs-popover-right > .arrow::before,
    .bs-popover-auto[x-placement^="right"] > .arrow::before {
        border-right-color: var(--secondary);
    }

    .bs-popover-left > .arrow::before,
    .bs-popover-auto[x-placement^="left"] > .arrow::before {
        border-left-color: var(--secondary);
    }

    .icon-sprite {
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: 576px 1008px;
        background-position: 0 0;
        background-clip: border-box;
        background-origin: border-box;
        display: inline-block;
        position: relative;
        height: 24px;
        width: 24px;
        margin-right: 0.3rem;
    }

        .icon-sprite:before {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            display: block;
        }

    h5.header-message-icon {
        display: flex;
        align-items: center;
    }

        h5.header-message-icon .icon-sprite {
            padding-left: 22px;
            cursor: default;
            margin-top: 2px;
        }

    table .btn.btn-sm {
        padding-block: 0.1rem;
        padding-inline: 0.2rem;
        border-radius: 2px;
    }

    .link-icon.link-icon-delete .icon-sprite,
    .btn-delete .icon-sprite {
        background-position-y: -288px;
    }


    .btn-data .icon-sprite {
        background-position-y: -912px;
    }

    .btn-delete .icon-sprite {
        background-position-x: 0px;
    }

    .link-icon.link-icon-archive-add .icon-sprite {
        background-position-y: -672px;
    }

    .link-icon.link-icon-archive-remove .icon-sprite {
        background-position-y: -696px;
    }

    .link-icon.link-icon-info .icon-sprite {
        background-position-y: -576px;
    }

    .link-icon.link-icon-info .icon-sprite,
    .link-icon.link-icon-archive-add .icon-sprite,
    .link-icon.link-icon-archive-remove .icon-sprite,
    .link-icon.link-icon-delete .icon-sprite {
        /*margin-right: 0rem;*/
        font-size: 1.5rem;
    }

    .link-icon.link-icon-copy .icon-sprite {
        background-position-y: -408px;
    }

    .link-icon.link-icon-price .icon-sprite {
        background-position-y: -960px;
    }
    /* Rot: Soll für alle Themes gelten */
    .link-icon.link-icon-price.invalid .icon-sprite {
        background-position-x: -24px !important;
    }
    /* Rot: Soll für alle Themes gelten */
    .link-icon.link-icon-price.invalid .icon-sprite {
        background-position-x: -48px !important;
    }

    .link-icon.link-icon-angebot .icon-sprite {
        background-position-y: -454px;
        line-height: 1.6rem;
    }

    .link-icon.link-icon-positionen .icon-sprite {
        background-position-y: -144px;
    }

    .btn-kaufen .icon-sprite,
    .link-icon.link-icon-kaufen .icon-sprite {
        background-position-y: -936px;
    }

    .link-icon.link-icon-pdf .icon-sprite {
        background-position-y: -432px;
        margin-right: 0.3rem;
        font-size: 1.4rem;
    }

    .link-icon.link-icon-readonlyview .icon-sprite {
        background-position-y: -984px;
        margin-right: 0.3rem;
        font-size: 1.4rem;
    }

    .link-icon-copy-url {
        margin-left: -0.1rem;
    }

        .link-icon-copy-url .icon-sprite {
            background-position-y: -528px;
            margin-left: 0;
            width: 21px;
        }

    .link-icon-konfigurator {
        margin-left: -0.1rem;
    }

        .link-icon-konfigurator .icon-sprite {
            background-position-y: -862px;
        }

    .link-icon.link-icon-error .icon-sprite {
        background-position-x: -24px;
        background-position-y: -792px;
        margin-left: 0;
        margin-right: 0;
        width: 24px;
    }

    .link-icon.link-icon-error:hover .icon-sprite {
        background-position-x: -48px;
    }

    .startscreen-dealer-card-projects table {
        position: relative;
        max-height: 100%;
    }

        .startscreen-dealer-card-projects table thead {
            position: sticky;
            top: 1px;
        }

        .startscreen-dealer-card-projects table th {
            background-color: var(--primary);
            z-index: 1000;
            position: relative;
        }

    .startscreen-dealer-card-projects .table-responsive {
        max-height: 400px;
    }

    .startscreen-dealer-card-contactperson {
        border: none;
    }

        .startscreen-dealer-card-contactperson .card-body {
            overflow-y: auto;
        }

    .startscreen-dealer-message:first-child {
        border-top: 1px solid #dee2e6;
    }

    .startscreen-dealer-message {
        border: 1px solid #dee2e6;
        border-top-width: 0px;
    }

        .startscreen-dealer-message:nth-child(odd) {
            background-color: #f2f2f2;
        }

    .startscreen-dealer-message-content {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem;
    }

        .startscreen-dealer-message-content > img {
            --img-width: 150px;
            min-width: var(--img-width);
            width: var(--img-width);
            max-width: var(--img-width);
            margin: 0.4rem 15px 15px 0;
        }

        .startscreen-dealer-message-content > div {
            flex-shrink: 1;
        }

    .dealer-content-row {
        border-bottom-color: #dee2e6;
    }

        .dealer-content-row:last-child {
            border-bottom-color: transparent !important;
        }

        .dealer-content-row img {
            max-height: 100px;
        }

    .table th,
    .table td {
        padding: 0.5rem;
    }

        .table td.error,
        .table td.error a {
            color: #ff0000;
        }

    th .link-icon-sortable .icon-sprite {
        background-position-x: 0;
        background-position-y: -768px;
        margin-left: 0;
        margin-right: 0;
        width: 18px;
        opacity: 0.6;
    }

    th .link-icon-sorted-up .icon-sprite {
        background-position-x: 0;
        background-position-y: -720px;
        margin-right: 0;
        width: 18px;
    }

    th .link-icon-sorted-down .icon-sprite {
        background-position-x: 0;
        background-position-y: -744px;
        margin-right: 0;
        width: 18px;
    }

    th .link-icon:hover .icon-sprite {
        background-position-x: 0;
        opacity: 1;
    }

    .table-user_search-result .table-user_row-name {
        width: 100% !important;
    }

    .link-icon .icon-sprite.cursor-default {
        cursor: default;
    }

    .btn-send .icon-sprite {
        background-position-y: -384px;
    }

    .btn-add-position .icon-sprite,
    .link-icon-add-position .icon-sprite {
        background-position-y: -480px;
    }

    .btn-abbrechen .icon-sprite {
        background-position-y: -192px;
    }

    .btn-ok .icon-sprite,
    .btn-uebernehmen .icon-sprite,
    .link-icon-ok .icon-sprite {
        background-position-y: -168px;
    }

    .btn-prev .icon-sprite {
        background-position-y: -504px;
    }

    .btn-next .icon-sprite {
        background-position-y: -504px;
        transform: scaleX(-1);
    }

    .btn-next .icon-sprite {
        background-position-y: -504px;
    }

    .btn-angebot .icon-sprite {
        background-position-y: -454px;
    }

    .link-icon-pw .icon-sprite,
    .link-icon-pw .icon-sprite {
        background-position-y: -216px;
    }

    .btn-messages .icon-sprite {
        background-position-y: -646px;
    }

    .btn-user .icon-sprite {
        background-position-y: -360px;
    }

    .btn-home .icon-sprite {
        background-position-y: -816px;
    }

    .btn-projects .icon-sprite {
        background-position-y: -240px;
    }

    .btn-products .icon-sprite {
        background-position-y: -120px;
    }

    .btn-account .icon-sprite {
        background-position-y: -336px;
    }

    .btn-edit-user .icon-sprite {
        background-position-y: 0;
    }

    .btn-logout .icon-sprite {
        background-position-y: -48px;
    }


    .btn-login .icon-sprite {
        background-position-y: -48px;
    }

    .btn-newuser .icon-sprite {
        background-position-y: -264px;
    }

    .btn-groups .icon-sprite {
        background-position-y: -840px;
    }

    .link-icon-edit .icon-sprite {
        background-position-y: 0;
    }

    .link-icon-search .icon-sprite {
        background-position-y: -888px;
    }

    .link-icon.link-icon-feedback:hover .icon-sprite,
    .link-icon.link-icon-feedback .icon-sprite {
        background-position-y: -645px;
    }

    .link-icon-projects .icon-sprite {
        background-position-y: -240px;
    }

    /*  .navbar-light .navbar-nav .nav-link {
        color: #fff;
        opacity: 0.6;
    }  */

    .link-icon,
    .btn-icon {
        display: flex;
        flex-basis: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        text-decoration: none;
    }

    table .link-icon,
    table .btn-icon {
        align-items: flex-start;
    }

    .link-icon:hover,
    .link-icon:active,
    .link-icon:focus {
        text-decoration: none;
    }


    .link-icon.link-icon-only {
        align-items: center;
        justify-content: center;
    }

        .link-icon.link-icon-only i {
            margin: 0;
        }

    .link-icon.disabled i,
    .link-icon.disabled {
        pointer-events: none;
        cursor: default;
        color: #000;
        opacity: 0.5;
    }

    .navbar-collapse .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar-collapse .navbar-nav .dropdown-menu .nav-link {
        padding-left: 5px;
        padding-right: 5px;
    }

    .navbar-collapse .navbar-nav .nav-link.dropdown-toggle {
        /* max-width: 500px; */
        margin-right: 1px !important;
    }

        .navbar-collapse .navbar-nav .nav-link.dropdown-toggle i {
            flex: 0 0 auto;
        }

        .navbar-collapse .navbar-nav .nav-link.dropdown-toggle .dropdown-btn-label {
            flex: 0 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .navbar-collapse .navbar-nav .nav-link.dropdown-toggle:after {
            margin-left: 8px;
            flex: 0 0 auto;
            align-self: center;
        }

    .navbar-collapse .dropdown .dropdown-menu {
        margin: 0;
        padding: 0.2rem;
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
        min-width: 100%;
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
    }

    .navbar-collapse .nav-item.dropdown {
        white-space: nowrap;
    }

    /* DISABLED */
    fieldset.disabled,
    fieldset.disabled * {
        pointer-events: none;
    }

        fieldset.disabled label {
            color: #aaa;
        }

        fieldset.disabled input {
            color: #aaa;
        }

    .custom-control-input:disabled ~ .custom-control-label {
        cursor: default;
        pointer-events: none;
    }

        .custom-control-input:disabled ~ .custom-control-label::before {
            background: rgba(170, 170, 170, 0.3);
            border-color: rgba(170, 170, 170, 0.8);
        }

    /* TABLE */
    .table-responsive {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        min-height: 300px;    
    }

        .table-responsive .table {
            margin-bottom: 0;
        }

            /*Mehrzeiliger Inhalt in Zellen (z.B.: #projectTable - mehrere Kaufen-Buttons für eine Projekt-Nr)*/
            .table-responsive .table td > div:not(:first-child) {
                margin-top: 0.2rem;
            }

            .table-responsive .table td > div > a:not(:first-child) {
                margin-left: 0.5rem;
            }

    /* Tabellen table-striped mit Verborgenen Zeilen */
    .table-striped tbody > tr.filtered-table__even {
        background-color: rgba(0, 0, 0, .05);
    }

    .table-striped tbody > tr.filtered-table__odd {
        background-color: rgb(255, 255, 255);
    }

    .table-responsive thead {
        position: sticky;
        top: -1px;
        z-index: 1;
    }
    /* Tabelle mit sticky header */
    .table__sticky-header {
        position: relative;
    }

        .table__sticky-header > thead {
            position: sticky;
            top: -1px;
            z-index: 1;
        }

    .table-col-icon {
        width: 65px;
    }

    .table th.table-cell-empty,
    .table td.table-cell-empty {
        padding: 0;
    }

    .table th div.sortable {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .modal-price__body {
        display: grid;
        grid-template-columns: min-content max-content;
        grid-column-gap: 40px;
    }

    .modal#ModalMain iframe,
    .modal#ModalConfigurator iframe,
    .modal#pwPopup iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: none;
    }

    .modal#ModalMain .modal-dialog,
    .modal#ModalConfigurator .modal-dialog,
    .modal#pwPopup .modal-dialog {
        min-height: calc(100vh);
        margin-top: auto;
        margin-bottom: auto;
        max-height: calc(100vh);
        height: calc(100vh);
        overflow: hidden;
        max-width: calc(90vw);
    }

    .modal#ModalMain .modal-content,
    .modal#ModalConfigurator .modal-content,
    .modal#pwPopup .modal-content {
        height: 400px;
        width: 600px;
        max-height: 100%;
    }



    .modal-iframe-html {
        height: 100%;
    }

        .modal-iframe-html body {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .modal-iframe-html .modal-body {
            flex-grow: 1;
            min-height: 50px;
            overflow: auto;
        }

    .modal-header .modal-title {
        color: #fff;
        font-size: 1rem;
    }

    .modal-header .close span {
        color: #fff;
    }

    /* MODAL VOLLE GROESSE */
    .modal#ModalMain.modal-full,
    .modal#ModalConfigurator.modal-full {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        margin: auto;
        vertical-align: middle;
    }

        .modal#ModalMain.modal-full .modal-dialog.modal-dialog-centered,
        .modal#ModalConfigurator.modal-full .modal-dialog.modal-dialog-centered {
            max-width: 100%;
            max-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal#ModalMain.modal-full .modal-content,
        .modal#ModalConfigurator.modal-full .modal-content {
            height: 100%;
            width: 100%;
            max-height: calc(100% - 4rem);
            max-width: calc(100% - 4rem);
        }

        .modal#ModalMain.modal-full .modal-body .img-fluid,
        .modal#ModalConfigurator.modal-full .modal-body .img-fluid {
            max-height: calc(100vh - 150px);
        }

    .modal-help-image {
        min-height: 200px;
    }

    .modal-help-image-legend {
        font-size: 0.8rem;
        margin-top: 0.3rem;
        text-align: right;
        margin-right: 1rem;
    }

    /* MODAL SHOP ARTICLES (KUNDENARTIKEL)*/
    .modal-shop-liebherr-body {
        display: grid;
        grid-template-rows: auto auto minmax(200px, 1fr) auto;
        max-height: 100%; 
        min-height: 500px;
    }

    .modal-shop-liebherr-body .liebherr-result {
        gap: 1rem;
        font-weight: bold;
        margin-top: 1rem;
    }

    .modal-shop-articles-body {
        display: grid;
        grid-template-rows: auto auto minmax(200px, 1fr) auto minmax(200px, 1fr);
        max-height: 100%; 
        min-height: 500px;
    }

    .modal-shop-articles-row-table {
        overflow: hidden;
    }

        .modal-shop-articles-row-table > .col-12 {
            max-height: 100%;
        }

        .modal-shop-articles-row-table .table-responsive {
            border: 1px solid var(--secondary) !important;
            min-height: 100%;
            max-height: 100%;
        }

        .modal-shop-articles-row-table .table-bordered th {
            border-color: var(--secondary);
        }

    .page-container #errorMessage.alert {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 1rem;
        opacity: 1;
    }

        .page-container #errorMessage.alert:empty {
            display: none;
        }

    /*Card Startseite*/

    .card .card-img-overlay .card-title.mma-card-title-overlay {
        background-color: rgba(255, 255, 255, 0.9);
        font-size: 1.2rem;
    }

    /*
    ##############################
        Views InfoEdit / MessagesEdit
    ##############################
    */
    .info-language-block {
        background-color: #f4f4f4;
    }

    .info-language-switch {
        margin: 0 1px;
        flex: 1;
    }

        .info-language-switch input[type="radio"] {
            display: none;
        }

            .info-language-switch input[type="radio"] ~ label {
                cursor: pointer;
                height: 100%;
                display: block;
                position: relative;
                background-color: var(--secondary);
                border-color: var(--secondary);
                padding-right: 0;
                margin-bottom: 0;
                justify-content: center;
            }

            .info-language-switch input[type="radio"]:checked ~ label {
                background-color: var(--primary);
                border-color: var(--primary);
            }

            .info-language-switch input[type="radio"] ~ label .btn-icon.hidden {
                cursor: inherit;
                visibility: hidden;
                opacity: 0;
            }

    #AbbildungURL {
        display: block;
    }

    #DokumentFilenameContainer span {
        display: block;
    }

        #DokumentFilenameContainer span:empty,
        img#AbbildungURL[src=""],
        #AbbildungURL:not([src]),
        #AbbildungFilename:empty {
            height: 0;
            overflow: hidden;
            display: none;
        }


    .hr-text-container .hr-text-text {
        color: #aaa;
    }

    .hr-text-container .hr-text-line div {
        border-none;
        border-top: 1px solid #ccc;
    }

    hr.hr-standard {
        border: none;
        border-top: 1px solid #ccc;
        width: 100%;
    }

    /*
    #############################################
    VIEW KONFIGURATOR
    #############################################
    */
    .form-configurator {
        overflow-y: auto;
    }

    #configurator_container-form #Templates {
        background-color: gray;
        display: none;
    }

    .form-configurator {
        height: 100%;
    }

    #ConfiguratorMainContainer {
        max-height: 100%;
        min-height: 100%;
        display: grid;
        grid-template-columns: minmax(400px, 40%) 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas: 'left-container right-container'
            'left-container right-container-footer';
    }

        #ConfiguratorMainContainer #ConfiguratorLeftContainer {
            grid-area: left-container;
            border-right: 1px solid var(--gray);
            padding: 1rem;
            overflow-y: auto;
            background-color: var(--light);
        }

        #ConfiguratorMainContainer #ConfiguratorRightContainer {
            grid-area: right-container;
            overflow-y: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #ConfiguratorMainContainer #ConfiguratorLeftContainer .form-section {
            box-shadow: 0 0 1rem 0 rgba(56, 115, 167, 0.25);
        }

            #ConfiguratorMainContainer #ConfiguratorLeftContainer .form-section > h3 {
                margin-top: -8px;
            }

        #ConfiguratorMainContainer #ConfiguratorFooter {
            grid-area: right-container-footer;
            background: #dee2e6;
        }

        #ConfiguratorMainContainer .ConfiguratorImage-Container {
            width: 100%;
            height: 100%;
        }

        #ConfiguratorMainContainer #ConfiguratorRightContainer img {
            object-fit: contain;
            height: calc(100%);
            width: calc(100%);
        }

        #ConfiguratorMainContainer select,
        #ConfiguratorMainContainer input[type=text] {
            width: clamp(200px, 100%, 400px);
        }

            #ConfiguratorMainContainer input:not(:disabled),
            #ConfiguratorMainContainer select:not(:disabled),
            #ConfiguratorMainContainer input:not(:disabled) label[for] {
            }
}

/*
  MEDIA QUERIES
*/

/*@media screen and (min-width: 992px) {

}*/

/* IE10 nav responsive */
/*  Extra large devices (large desktops, 1200px and up) */


/*  Large devices (desktops, 992px and up) */
/* @media screen and (max-width: 991px) { */
@media screen and (max-width: 1199px) {

    .navbar > .container,
    .container.container-main {
        width: calc(100%);
        max-width: 100%;
    }

    .page-container {
        background-size: 15% auto;
    }


        .page-container.page-container-login:after {
            width: 12%;
            animation-duration: 6s;
        }

    .navbar {
        justify-content: space-between;
        padding-right: 0;
    }

        .navbar > * {
            z-index: 1;
        }

        .navbar .navbar-collapse {
            z-index: 0;
            box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
            max-height: calc(100vh - 80px);
        }

    body.navbar-collapse-show .navbar .navbar-collapse {
        overflow-y: auto;
    }

    header nav {
        box-shadow: none;
    }

    .navbar-responsive-inner {
        height: 76px !important;
        width: 100%;
    }

    .navbar-collapse {
        padding: 0 0.5rem;
    }

        .navbar-collapse .dropdown .dropdown-menu {
            box-shadow: none;
        }
}

/*  Medium devices (tablets, 768px and up) */
@media screen and (max-width: 767px) {
    .page-container {
        /* Hintergrund-Bild */
        background-size: 22% auto;
    }

        .page-container.page-container-login:after {
            width: 15%;
            animation-duration: 3s;
        }

    .btn.btn-md-responsive span {
        display: none;
    }

    .btn.btn-md-responsive i {
        margin-right: 0;
    }

    .btn-row.btn-row-feedback {
        flex-direction: column;
        align-items: flex-start;
    }

        .btn-row.btn-row-feedback .link-feedback {
            margin-left: 0;
            margin-right: 0;
        }

    .modal#ModalMain.modal-full .modal-content,
    .modal#ModalConfigurator.modal-full .modal-content {
        height: 100%;
        width: 100%;
        max-height: calc(100% - 2rem);
        max-width: calc(100% - 1rem);
    }

    #ConfiguratorMainContainer #ConfiguratorLeftContainer {
        padding-bottom: 0;
        border-right: none;
    }

    #ConfiguratorRightContainer {
        padding: 1rem;
        background: transparent;
        padding: 1rem;
    }

    #ConfiguratorMainContainer .ConfiguratorImage-Container {
        background: white;
        padding: 1rem;
        box-shadow: 0 0 1rem 0 rgba(56, 115, 167, 0.25);
    }

    #ConfiguratorMainContainer {
        max-height: unset;
        min-height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
        grid-template-areas: 'left-container'
            'right-container'
            'right-container-footer';
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 575px) {

    .page-container {
        /* Hintergrund-Bild */
        background-size: 22% auto;
    }

        .page-container.page-container-login:after {
            width: 15%;
            animation-duration: 3s;
        }

    .navbar-collapse .navbar-nav .nav-link.dropdown-toggle {
        max-width: 370px;
        margin-right: 1px !important;
    }

    .modal#ModalMain .modal-dialog,
    .modal#pwPopup .modal-dialog {
        max-width: calc(100%);
        margin-left: 0;
        margin-right: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/*@media screen and (max-width: 400px) {
 
}

@media screen and (max-width: 350px) {

}

@media screen and (max-width: 575px) {
}*/
/* sm */
/*@media screen and (min-width: 576px) {
}*/
/* md */
/*@media screen and (min-width: 768px) {
}*/
/* lg */
/*@media screen and (min-width: 992px) {
}*/
/* xl */


@media screen and (min-width: 1200px) {
    .navbar > .container,
    .container.container-main {
        width: 100%;
        max-width: 1600px;
    }
}

/*
    #######################
    IE 10 & 11 Bug-Fixes
    #######################
    https://community.pega.com/knowledgebase/articles/user-interface/troubleshooting-flex-based-layout-issues-internet-explorer-11
*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .page-container {
        background-image: none !important;
    }

        .page-container:before {
            content: none !important;
        }

        .page-container.page-container-login:after {
            background-image: none;
            animation: none;
        }
}