@charset "utf-8";
/**
 * custom: CSS fuer XXXXX
 *
 *  BESCHREIBUNG
 *
 * @filesource custom.css
 * @project    SK_Wuppertal_BeraterTool
 * @package    local
 *
 * @copyright  (c) 2020 by pitcom GmbH | Bahnhofstraße 61 | D-08523 Plauen Germany
 * @author     Florian Schlichter, B.A. <florian.schlichter@pitcom.de>
 * @link       www.kundenleitsystem.de
 *
 * @version    1.0
 * @date       27.05.2020
 */


html body.pitcom {
    --primary: #E00 !important;

    --main-spk-color: var(--primary);
    --main-spk-color-transparent: rgba(255, 0, 0, 0.5);
    --main-background-color: #efefef;
    --main-background-color-rgba: rgba(0, 0, 0, 0.03);
    --main-background-color-layer: rgba(239, 239, 239, 0.9);
    --main-gray-color-rgba: rgba(0, 0, 0, 0.5);
    --main-gray-color: #777;
    --main-green-color: rgba(135, 168, 0, 1);
    --height-header: 80px;
    --height-menu: 48px;
    --height-main: calc(100vh - var(--height-header) - var(--height-menu));
    --width-dashboard-side: 112px;

    --main-redwhite: var(--primary);
}

@media (prefers-color-scheme: dark) {
    html body.pitcom {
        --main-redwhite: var(--white);
    }
}

@font-face {
    font-family: "SparkasseRg";
    src: url(../fonts/SparRg.woff) format("woff"),
    url(../fonts/SparRg.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "SparkasseRg";
    src: url(../fonts/SparBd.woff) format("woff"),
    url(../fonts/SparBd.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Pictos-IF";
    src: url(../fonts/pictos-if.woff) format("woff"),
    url(../fonts/pictos-if.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

body.pitcom.kundenleitsystem {
    font: 100%/1.5 SparkasseRg, Helvetica, Arial, sans-serif;
}

html a {
    color: var(--main-spk-color);
}

html a:hover {
    color: #C00;
}

html .btn-primary {
    background-color: var(--main-spk-color);
    border-color: var(--main-spk-color);
}

html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary.focus {
    background-color: #C00;
    border-color: #C00;
}

@media only screen and (min-width: 1600px) {
    #wrapper {
        width: 1600px;
        margin-left: auto;
        margin-right: auto;
        border-right: #CCCCCC solid 1px;
        border-left: #CCCCCC solid 1px;
    }
}

/* Layout */

.kundenleitsystem {
    .sparkassen-bg {
        background-color: var(--primary);

        h2 {
            color: var(--primary-contrast);
        }
    }

    h1 {
        color: var(--h1);
        margin-bottom: 32px;
        margin-top: 0;
        font-size: 32px;
    }

    h2 {
        margin-bottom: 32px;
        font-size: 32px;
    }

    header {
        display: flex;
        justify-content: space-between;
        height: var(--height-header);
        background-color: var(--main-spk-color);
        color: white;
        padding: 16px 32px;

        .time_and_date {
            display: flex;
            align-items: center;
        }

        .time_and_date .time, .time_and_date .and {
            font-size: 3em;
        }

        .time_and_date .and {
            margin-left: 16px;
            margin-right: 16px;
        }
    }


    menu {
        display: flex;
        height: var(--height-menu);
        padding: 0;
        margin: 0 12px;
        justify-content: space-between;
        align-items: center;

        li {
            list-style-type: none;

            a.role-change {
                margin-top: -16px;
                margin-right: 8px;
            }
        }

        li:first-of-type a:not(#nav-toggle) i.fa {
            color: var(--main-spk-color);
        }

        li a i.fa {
            font-size: 1.75em;
            padding-top: 8px;
        }

        li a:not(#nav-toggle) i.fa {
            color: var(--main-gray-color);
        }

        li a:not(#nav-toggle) i.fa:hover {
            color: var(--main-redwhite);
        }

        li .consultant-name {
            color: var(--main-redwhite);
            font-size: 1.25em;
        }

        #nav-toggle {
            color: var(--main-redwhite);
        }
    }


    main {
        position: relative;
        min-height: var(--height-main);
    }

    main > nav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        border: #CCCCCC solid 1px;
        border-left: none;
        border-top: none;
        background-color: var(--nav-bg);
    }

    .btn.btn-success {
        background-color: var(--main-green-color);
    }

    .nav-header,
    .navbar.navbar-static-top.white-bg,
    .btn-primary {
        background-color: var(--main-spk-color);
        border-color: var(--main-spk-color);
        color: #FFF;
    }

    .nav-header {
        padding: 20px 30px 10px 20px;
    }

    .nav.navbar-right > li > a {
        color: #FFF;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #FFF;
        border-color: #FFF;
        color: var(--main-spk-color);
    }
}


/* TOP */
body.kundenleitsystem .navbar.navbar-static-top,
body.kundenleitsystem .navbar.navbar-fixed-top {
    height: var(--height-header);
}

body.kundenleitsystem .minimalize-styl-2 {
    margin-top: 25px;
}

.row.wrapper.white-bg.page-heading {
    background: #f4f6fa;
}

/* FOOTER */
body.kundenleitsystem .footer {
    background: #f4f6fa;
}


/* CONTENT */
h1.main-head {
    color: var(--main-spk-color);
}

.ibox-content.nopadding img {
    max-width: 100%;
}


body.kundenleitsystem table#table-waiting-area tbody td:first-of-type span {
    font-size: smaller;
    color: var(--main-gray-color);
}


.btn-rotated-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.neo-info-icon {
    color: var(--main-spk-color);
    text-align: center;
}

.neo-btn,
.neo-btn-line .btn-primary {
    line-height: calc(2px + 2ex + 2px);
    background-color: var(--main-spk-color);
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 20px;
}

.neo-btn.neo-btn-inactiv {
    background-color: #999;
    cursor: not-allowed;
}

.neo-btn.neo-btn-activ {
    cursor: pointer;
}

.neo-btn.neo-btn-activ:hover {
    background-color: #00724b;
}

.neo-btn-line {
    text-align: right;
}


/* SEARCH */

.form-vali-activ-next:invalid ~ .input-group-append button.btn {
    pointer-events: none;
    background-color: #CCC;
    border-color: #e5e6e7;
}

/* FORM */

.kundenleitsystem select.form-control:not([size]):not([multiple]) {
    height: 2.25em;
}

.kundenleitsystem input.form-control:not(.form-no-valiinfo)[type="text"]:required:valid,
.kundenleitsystem select.form-control:not(.form-no-valiinfo):required:valid {
    border-left: 2px solid var(--main-green-color);
}

.form-group {
    align-items: start;
}

.form-group label {
    font-size: 1.25em;
}

.form-control {
    height: 2.25em;
}

.form-group .form-control {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: var(--main-spk-color-transparent) 2px solid;
    background-color: var(--main-background-color);
    font-size: 1.25em;
}

.kundenleitsystem .form-group .form-control:focus {
    border-bottom: var(--main-spk-color) 2px solid;
}

.kundenleitsystem .form-group select.form-control {
    -webkit-appearance: none;
}

#check-in-waiting-area {
    cursor: pointer;
}

.kundenleitsystem .kundenleitsystem-ul-select {
    position: absolute;
    top: 45px;
    z-index: 1000;
}

.kundenleitsystem .kundenleitsystem-ul-select > li {
    cursor: pointer;
}

.kundenleitsystem .kundenleitsystem-ul-select > li:hover {
    background-color: gainsboro;
}

.kundenleitsystem .login-button-container {
    display: flex;
    justify-content: right;
}

.kundenleitsystem .login-button-container button {
    margin-bottom: 12px;
}

.kundenleitsystem .login-button-container a {
    font-size: small;
}

.btn-login {
    width: 192px;
    height: 64px;
    font-size: 1.5em;
}

.login-bg {
    background-image: url("../../login/login-bg-berater.png");
    background-size: cover;
    background-position: center;
    height: var(--height-main);
}

.kundenleitsystem .navbar-static-side {
    width: 320px;
}

.kundenleitsystem main.login {
    background-color: var(--main-background-color-rgba);
    padding: 0;
}

.kundenleitsystem main.login > div.row:first-of-type {
    height: 100%;
}

.kundenleitsystem .password-toggle .input-group-append {
    cursor: pointer;
    border-bottom: var(--main-spk-color-transparent) 2px solid;
}

.kundenleitsystem .password-toggle .input-group-append i {
    padding-top: 4px;
    font-size: 1.25em;
    color: var(--main-gray-color);
}

.kundenleitsystem .kundenleitsystem-dashboard {
    display: flex;
}

.kundenleitsystem .kundenleitsystem-dashboard > div:nth-of-type(1) {
    flex-basis: var(--width-dashboard-side);
}

.kundenleitsystem .kundenleitsystem-dashboard.kundenleitsystem-dashboard-check-in > div:nth-of-type(1), #consultant-customer-board > div:nth-of-type(1) {
    background-image: url("../../login/login-bg-berater.png");
    background-size: cover;
    background-position: center;
    height: var(--height-main);
}

.kundenleitsystem .kundenleitsystem-dashboard.kundenleitsystem-dashboard-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--main-background-color-layer);
}

#waiting-area-board {
    background-color: var(--main-background-color);
}

#consultant-customer-board {
    background-color: var(--main-background-color);
}

.kundenleitsystem .consultant-customer-new {
    background-color: var(--main-background-color);
    position: absolute;
    width: 480px;
    right: var(--width-dashboard-side);
    bottom: 16px;
    border: 8px solid white;
    padding: 16px 16px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.kundenleitsystem .consultant-customer-new .form-group > div {
    font-size: 1em;
    margin-bottom: 0.5rem;
}

.kundenleitsystem .consultant-customer-new .form-group > label {
    font-size: 1em;
}

.kundenleitsystem .kundenleitsystem-dashboard > div:nth-of-type(2) {
    flex-basis: calc(100% - var(--width-dashboard-side) - var(--width-dashboard-side));
    padding: 32px;
    height: var(--height-main);
}

.kundenleitsystem .kundenleitsystem-dashboard > div:nth-of-type(3) {
    flex-basis: var(--width-dashboard-side);
}

#form-login {
    margin: 32px 48px 32px 32px;
}

.flex-align-items-center {
    align-items: center;
}

/** Floormanager */

.kundenleitsystem .toggle-floor {
    background-color: var(--main-green-color);
    color: white;
    height: var(--width-dashboard-side);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-top: 32px;
}

.kundenleitsystem .toggle-floor.toggle-floor-close {
    background-color: white;
    color: var(--main-gray-color);
}

.kundenleitsystem .toggle-floor > i {
    font-size: 2.5em;
}

.kundenleitsystem .concern-list {
    display: flex;
}

.kundenleitsystem .concern-list > label {
    flex-basis: 50%;
}

.kundenleitsystem .square-check-color {
    position: unset;
    height: 382.5px;
}

.kundenleitsystem .square-check-color > i:nth-of-type(1) {
    position: absolute;
    left: calc(50% - 8rem);
    top: calc(40% - 8rem);
    font-size: 16em;
    color: var(--main-gray-color);
}

.kundenleitsystem .square-check-color > i:nth-of-type(2) {
    position: absolute;
    left: calc(50% - 7rem);
    top: calc(40% - 10rem);
    font-size: 16em;
    color: var(--main-green-color);
}

.kundenleitsystem .square-check-color > button {
    position: absolute;
    bottom: 80px;
    right: 80px;
}

.kundenleitsystem .dataTables_wrapper {
    padding: 0;
}

.kundenleitsystem div.dataTables_wrapper div.dataTables_filter input {
    width: 250px;
}

.kundenleitsystem .table > thead > tr > th, .kundenleitsystem .table > tbody > tr > td {
    line-height: 2;
}

.kundenleitsystem .table > tbody > tr > td .fa {
    font-size: 1.25em;
    cursor: pointer;
}

.kundenleitsystem .page-item.active .page-link {
    background-color: var(--main-green-color);
    border-color: var(--main-green-color);
    z-index: unset;
}

.kundenleitsystem .modal-dialog .modal-header h4 {
    font-size: 24px;
}

.kundenleitsystem .modal-dialog {
    max-width: 640px;
}

.kundenleitsystem .modal-dialog .modal-content {
    min-height: 240px;
}

/** Checkboxen schick */

.kundenleitsystem .kundenleitsystem-input-check {
    cursor: pointer;
}

.kundenleitsystem .kundenleitsystem-input-check > input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.kundenleitsystem .kundenleitsystem-input-check > span:nth-of-type(1) {
    position: relative;
}

.kundenleitsystem .kundenleitsystem-input-check > span:nth-of-type(2) {
    margin-left: 32px;
}

.kundenleitsystem .kundenleitsystem-input-check > span:nth-of-type(1) > i {
    font-size: 1.25em;
    position: absolute;
    top: 0;
}

.kundenleitsystem .kundenleitsystem-input-check > span:nth-of-type(1) > i:nth-of-type(2) {
    color: var(--main-spk-color);
    top: -4px;
    left: 2px;
    opacity: 0;
}

.kundenleitsystem .kundenleitsystem-input-check > input[type="radio"]:checked + span:nth-of-type(1) > i:nth-of-type(2) {
    opacity: 1;
}

.kundenleitsystem .kundenleitsystem-input-check > input[type="checkbox"]:checked + span:nth-of-type(1) > i:nth-of-type(2) {
    opacity: 1;
}

.kundenleitsystem #customer-info > div {
    font-size: 1.25em;
}

.kundenleitsystem .copy-to-clip {
    cursor: pointer;
}