* {
    touch-action: pan-x pan-y;
}

body {
    background-color: white;
}

body:fullscreen, body::backdrop {
    background-color: black !important;
}


:root {
    --primary: #203650;
    --siteview-primary-on-white: #265081;
    --siteview-secondary: #798696;
    --siteview-light-blue-on-white: #1B8EDB;
    --siteview-light-blue-on-black: #7FC8F8;
    --success: #165931;
    --warning: #fdb10c;
    --danger: #9e021d;
}

.bg-siteview-primary {
    background-color: var(--siteview-primary-on-white);
}
.bg-siteview-primary:hover {
    background-color:  var(--siteview-light-blue-on-white);
}

.login-sidebar {
    background: var(--primary); /* fallback for old browsers */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 1024 1024'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M-43.44 824.24C78.34 818.54 158.01 602.43 394.24 609.2 630.47 615.97 663.41 1117.7 831.92 1181.11' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-45.84 103.41C111.6 129.22 165.09 414.1 443.53 513.01 721.97 611.92 574.04 943.78 688.21 1029.79' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-54.04 485.57C83 470.2 130.07 143.88 397.05 168.13 664.03 192.38 642.18 921.66 848.14 1065.14' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-6.39 194.23C110.67 259.3 34.74 529.84 266.87 655.03 498.99 780.22 425.07 1036.44 540.12 1096.57' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-166.15 354.86C14.25 391.6 97.74 795.68 372.89 856.62 648.04 917.56 547.68 1115.88 642.41 1140.31' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1024' height='1024' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.welcome-page-background {
    background: var(--primary); /* fallback for old browsers */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='600' height='300' preserveAspectRatio='none' viewBox='0 0 1024 1024'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M-43.44 824.24C78.34 818.54 158.01 602.43 394.24 609.2 630.47 615.97 663.41 1117.7 831.92 1181.11' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-45.84 103.41C111.6 129.22 165.09 414.1 443.53 513.01 721.97 611.92 574.04 943.78 688.21 1029.79' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-54.04 485.57C83 470.2 130.07 143.88 397.05 168.13 664.03 192.38 642.18 921.66 848.14 1065.14' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-6.39 194.23C110.67 259.3 34.74 529.84 266.87 655.03 498.99 780.22 425.07 1036.44 540.12 1096.57' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3cpath d='M-166.15 354.86C14.25 391.6 97.74 795.68 372.89 856.62 648.04 917.56 547.68 1115.88 642.41 1140.31' stroke='rgba(66%2c 138%2c 187%2c 0.45)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1024' height='1024' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-position: bottom;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.welcome-card {
    max-width: 42rem;
    background-color: #ffffff;
    border-radius: 2rem;
    border: 1px solid rgb(213, 213, 213);
}

.nav-link {
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 200px;
}

.navbar-light .navbar-nav .nav-item.active .nav-link {
    background-color: var(--primary);
    color: white;
}

.navbar-light .navbar-nav .nav-item:hover .nav-link {
    background-color: var(--siteview-light-blue-on-white);
    color: white;
}

.navbar-brand {
    transition: all 0.2s ease;
    cursor: pointer
}

.navbar-brand:hover {
    transform: scale(1.09)
}

/* Applies at lg+ (992px) to match the navbar-expand-lg breakpoint: the bottom border and the
   webclient-container height reservation are only wanted once the navbar expands into its full
   horizontal row. Below lg the navbar is a compact burger, so the app container uses plain
   flex-grow (as on mobile) and gets the full height. */
@media (min-width: 992px) {
    .navbar {
        border-bottom: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(199, 211, 229);
    }

    .webclient-container {
        max-height: calc(100% - 40px);
    }
}

.is-invalid .invalid-feedback {
    display: block;
}

.hover-image {
    transition: .5s ease;
    backface-visibility: hidden;
}

.hover-image-container {
    position: relative;
}

.hover-image-center-btn {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.5rem;
    color: var(--siteview-light-blue-on-white);
}

.hover-image-container:hover .hover-image {
    opacity: 0.3;
    cursor: pointer;
}

.hover-image-container:hover .hover-image-center-btn {
    opacity: 1;
    cursor: pointer;
}

.mail-activity-card {
    max-width: 40rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    word-break: break-word;
    background-color: var(--primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    color: white;
}

.mail-activity-card:hover {
    box-shadow: 5px 6px 10px 0 #84b4fa;
    transform: scale(1.024)
}

.mail-template-card {
    max-width: 50rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    word-break: break-word;
    background-color: var(--primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    color: white;
}

.mail-template-card:hover {
    box-shadow: 5px 6px 10px 0 #84b4fa;
    transform: scale(1.024)
}

.dashboard-card {
    max-width: 32rem;
    padding: 1rem;
    padding-left: 1.25rem;
    border-radius: 2rem;
    overflow: hidden;
    background-color: var(--primary);
    transition: all 0.2s ease;
    height: 100%;
    color: white;
}

.dashboard-card:hover {
    box-shadow: 5px 6px 10px 0px #a7c2ea;
    transform: scale(1.024)
}

.product-card {
    padding: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.project-card {
    padding: 1rem;
    border-radius: 2rem;
    overflow: hidden;
    background-color: var(--primary);
    transition: all 0.2s ease;
}

@media (max-width: 992px) {
    .project-card {
        max-width: 26rem;
    }

    .product-card {
        max-width: 26rem;
    }
}

@media (min-width: 1400px) {
    .project-card {
        padding: 2rem;
    }

}

.project-card:hover {
    box-shadow: 5px 6px 10px 0px #a7c2ea;
    transform: scale(1.024)
}

.project-card .img-cover {
    object-fit: cover;
    object-position: center;
    box-shadow: 0px 5px 50px 0px rgb(127, 200, 248), 0px 0px 0px 2px rgb(127, 200, 248);
}

.project-card .company-name {
    color: var(--siteview-light-blue-on-black);
}

.project-card.inactive {
    opacity: 60%;
    cursor: not-allowed;
}

.project-card.secondary {
    background-color: var(--siteview-secondary);
}

.display-on-card-hover {
    display: none;
}

.project-card.secondary:hover {
    background-color: var(--primary);
}

.project-card.secondary:hover .hide-on-card-hover {
    display: none;
}

.project-card.secondary:hover .display-on-card-hover {
    display: block;
}

.ribbon-date {
    width: 170px;
    height: 38px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background: var(--siteview-secondary);
    transform: rotate(45deg);
    position: absolute;
    right: -40px;
    top: 26px;
    padding-top: 6px;
}

.ribbon-date.new {
    background: var(--success);
}

.ribbon-date.over {
    background: var(--danger);
}

.ribbon-role {
    left: 25px;
    top: 20px;
    font-size: 20px;
    text-align: center;
    color: #ffffff;
    position: absolute;
}

.ribbon-role.manager {
    color: #D4AF37;
}

.ribbon-role.member {
    color: lightgray;
}

.btn-siteview-primary {
    background-color: var(--primary);
    color: var(--siteview-light-blue-on-black);
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-primary:hover, .btn-siteview-primary:focus, .btn-siteview-primary:active, .btn-siteview-primary.active {
    color: white;
    background-color: var(--siteview-light-blue-on-white);
}

.btn-siteview-secondary {
    background-color: #4a4f53;
    color: white;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-secondary:hover, .btn-siteview-secondary:focus, .btn-siteview-secondary:active, .btn-siteview-secondary.active {
    color: black;
    background-color: #d5d8da;
}

.btn-siteview-success {
    background-color: var(--success);
    color: #f6f2d5;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-success:hover, .btn-siteview-success:focus, .btn-siteview-success:active, .btn-siteview-success.active {
    color: black;
    background-color: #96d6b0;
}

.btn-siteview-danger {
    background-color: var(--danger);
    color: #f6f2d5;
    padding: 7px 20px;
    text-decoration: none;
    border-radius: 50px;
    align-items: center;
    justify-content: left;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-siteview-danger:hover, .btn-siteview-danger:focus, .btn-siteview-danger:active, .btn-siteview-danger.active {
    color: black;
    background-color: rgb(225, 87, 112);
}

.button-camera-select {
    background-color: #7FC8F8;
    color: white;
    text-decoration: none;
    border-radius: 58px;
    height: 58px;
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 6px;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    justify-content: left;
    overflow: hidden;
    width: auto;
    min-width: 58px;
    max-width: 58px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
    -webkit-transition: max-width 0.3s;
    transition: max-width 0.3s;
}

.button-camera-select.active {
    background-color: var(--primary);
    border-radius: 73px;
    height: 73px;
    min-width: 73px;
    max-width: 73px;
    margin-left: 0;
}

.button-camera-select.active .icon {
    padding: 0 7px;
}


.button-camera-select.disabled {
    background-color: #909ba8;
    cursor: default;
}

.button-camera-select .icon {
    padding: 0 3px;
    display: flex;
    align-items: center;
}

.button-camera-select .text {
    display: flex;
    white-space: nowrap;
    padding: 15px;
}


.button-camera-select:hover {
    color: white;
    max-width: 500px;
    overflow: visible;
}


.toastify {
    --background-rgb: 255, 255, 255;
    --background-alpha: 0.96;
    background: rgba(var(--background-rgb), var(--background-alpha));
    max-width: 450px;
    margin: 10px 10px 10px 20px;
    padding: 8px 8px 8px 8px;
    font-size: 0.95rem;
    color: #000000;
    cursor: auto;
    pointer-events: auto;
    background-clip: padding-box;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    border: 3px solid transparent;
}

.toastify:hover {
    --background-alpha: 1;
    .toast-close {
        opacity: 1;
    }
}

.toast-close {
    background: white;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: lighter;
    color: #5a5a5a;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    top: -0.9rem;
    right: -0.9rem;
    transition: opacity 0.2s ease;
    opacity: 0;
    @media (max-width: 767px) {
        opacity: 1 !important;
    }
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    padding-right: 0.4rem;
    padding-left: 0;
}

.toastify-success {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #00f260, #0575e6) border-box;

}

.toastify-info {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #00dbde, #2618f3) border-box;
}

.toastify-danger {
    background: linear-gradient(rgba(var(--background-rgb), var(--background-alpha)), rgba(var(--background-rgb), var(--background-alpha))) padding-box,
    linear-gradient(45deg, #c31432, #fdb10c) border-box;

}

.gridjs .gridjs-table {
    width: auto;
    min-width: 100%;
}

.gridjs .gridjs-th {
    padding: 14px 10px;
}

.gridjs .gridjs-td {
    padding: 3px 12px;
}

.stats-pill {
    position: relative;
    border-radius: 50rem;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.stats-pill:hover {
    background: #f0f4f8;
    border-color: #adb5bd;
}
.stats-pill.active {
    background: var(--siteview-primary-on-white);
    border-color: var(--siteview-primary-on-white);
    color: #fff;
}
.stats-pill.active:hover {
    background: var(--siteview-light-blue-on-white);
    border-color: var(--siteview-light-blue-on-white);
}
.stats-pill .stats-pill-count {
    position: absolute;
    top: -12px;
    right: -6px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.35rem;
    height: 1.5rem;
    line-height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 50rem;
    text-align: center;
    background: #6c757d;
    color: #fff;
    border: 2px solid #fff;
}
.stats-pill.active .stats-pill-count {
    background: var(--siteview-light-blue-on-white);
}
.stats-pill-icon {
    font-size: 1rem;
    margin-right: 0.2rem;
}

.stats-lock-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #6c757d;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.stats-lock-btn:hover {
    background: #f0f4f8;
}
.stats-lock-btn.locked,
.stats-lock-btn.paused {
    background: var(--siteview-primary-on-white);
    border-color: var(--siteview-primary-on-white);
    color: #fff;
}

.row-click-table {
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        border: 1px solid #ddd;
        border-bottom: 2px solid #ddd;
        background-color: #f2f2f2;
        padding: 8px;
    }

    tbody td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    tbody tr.clickable-row {
        transition: background 0.15s ease;
        cursor: pointer;
    }

    tbody tr.clickable-row:hover {
        background: var(--siteview-light-blue-on-black);
    }

    ::selection {
    background: var(--siteview-secondary);
    color: white; /* Set the color of the selected text */
    }

    tbody tr[visible='false'],
    .no-result {
        display: none;
    }

    tbody tr[visible='true'],
    .no-result {
        display: table-row;
    }

    .counter {
        color: #ccc;
    }
}
/* --- Wochentag-Auswahl / btn-check Gruppen -------------------------------------------------
   Bootstrap 5.1 rendert .btn-outline-primary:hover und .btn-check:checked + .btn-outline-primary
   mit identischen Deklarationen (#fff auf #0d6efd) - ein überfahrener Tag sieht damit exakt aus
   wie ein ausgewählter. Auf Touch-Geräten bleibt :hover nach dem Antippen zusätzlich hängen.
   Deshalb: Hover bekommt nur eine leichte Tönung (nie eine Vollfläche) und gilt ausschließlich
   für echte Zeigegeräte. Ausgewählt bleibt die Vollfläche und wird zusätzlich fetter gesetzt.
   Die Farben stehen hier als Literale, weil Bootstrap 5.1 Komponentenfarben als Hex kompiliert -
   bei einem Retheme des Backends müssen sie hier mitgeändert werden. */
.btn-check + .btn-outline-primary {
    --sv-day-accent: #0d6efd;
    --sv-day-hover-bg: rgba(13, 110, 253, 0.12);
    --sv-day-halo: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ausgewählt: Vollfläche (Bootstrap) + fetter -> eindeutig "an" */
.btn-check:checked + .btn-outline-primary {
    font-weight: 600;
}

/* Hover nur mit echtem Zeiger: kein hängenbleibender Hover-Zustand nach einem Tap */
@media (hover: hover) and (pointer: fine) {
    .btn-check:not(:checked) + .btn-outline-primary:hover {
        background-color: var(--sv-day-hover-bg);
        border-color: var(--sv-day-accent);
        color: var(--sv-day-accent);
    }

    /* Halo um den einzelnen Button beim Überfahren - macht zusätzlich sichtbar, welcher Tag
       gerade unter dem Zeiger liegt (auch bei bereits ausgewählten Tagen).
       z-index, weil sich die Buttons in einer .btn-group überlappen und der Schatten sonst
       vom Nachbarn beschnitten wird (Bootstrap vergibt dort selbst z-index: 1). */
    .btn-check + .btn-outline-primary:hover {
        box-shadow: var(--sv-day-halo);
        position: relative;
        z-index: 2;
    }
}

/* ein Tap hinterlässt Fokus auf dem versteckten Input - Ring nur für Tastaturbedienung */
/* ...aber nicht, solange der Zeiger darauf steht - sonst wuerde der Klick den Hover-Halo
   loeschen (die Regel ist spezifischer als die Halo-Regel oben). */
.btn-check:focus:not(:focus-visible) + .btn-outline-primary:not(:hover) {
    box-shadow: none;
}

/* Touch-Geräte: Bootstrap färbt .btn-outline-primary:active (und .btn-check:active + ...)
   exakt wie :checked - also Vollfläche. iOS/Safari behält :active nach dem Antippen bei, ein
   gerade abgewählter Tag sieht deshalb weiterhin ausgewählt aus. Auf groben Zeigern wird der
   Nicht-ausgewählt-Zustand daher erzwungen; die Auswahl selbst kommt allein aus :checked. */
@media (hover: none), (pointer: coarse) {
    .btn-check + .btn-outline-primary {
        -webkit-tap-highlight-color: transparent;
    }

    .btn-check:not(:checked):active + .btn-outline-primary,
    .btn-check:not(:checked):focus + .btn-outline-primary,
    .btn-check:not(:checked) + .btn-outline-primary:active,
    .btn-check:not(:checked) + .btn-outline-primary:focus,
    /* :hover ist der eigentliche Übeltäter - Bootstraps .btn-outline-primary:hover steht in
       KEINER Media Query, und iOS lässt :hover nach dem Antippen stehen, bis woanders getippt
       wird. Ein gerade abgewählter Tag bleibt dadurch vollflächig blau. */
    .btn-check:not(:checked) + .btn-outline-primary:hover {
        background-color: transparent;
        color: var(--sv-day-accent);
        border-color: var(--sv-day-accent);
        box-shadow: none;
    }
}