/*
    Color Palette:

    Page Background: #F6F9FB

    Main Color, Blue, use for Violoations
    Blue:         #96BFD9 (for charts and buttons)

    Accent Color, Yellow, use for Extra Tours
    Yellow:       #F8B552 (for charts)

    Red for Rejections
    Red:          #E2647B (for charts and buttons)

    Green for approvals and processing state
    Green:        #96D486 (for charts and buttons)

    Violet for AI
    Violet:       #A86FAA (for charts and buttons)
    Light Violet: #E5CEE8 (for background boxes etc.)
    Dark Violet:  #864F88 (for hover effects)

    Light Yellow: #FFEBB5 (use for background boxes, specifically for action areas)

    Shades of blue, from dark to light:
    #04247A, #295292, #4D81A9, #72A0C1
*/
@import url('site.css');



@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: "Segoe UI", "Helvetica Neue", "GeezaPro", "Roboto", "DejaVu Serif", "Noto Sans", "Ariel", "sans-serif", "-apple-system", "BlinkMacSystemFont";
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-color: #F6F9FB;
}

/* prevent page captions to show black border when page opens */
h1:focus {
    outline: none;
}

.topbar {
    background-color: #96BBDC;
}

.page-background {
    background-color: #F6F9FB;
}

.active-background {
    background-color: #96BBDC;
}

.inactive-background {
    background-color: #ECF2F7;
}

.below-top-bar {
    margin-top: 48px
}

.menu-bar-grey {
    background-color: #ECF2F7
}

h1 {
    font-size: 2rem;
}

/* active row in table shall be light blue */
.e-grid td.e-active {
    background: #c9def1;
    color: #333;
}

/* checkboxes shall be in yellow */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #F8B552;
    border-color: #F8B552;
    color: #fff;
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check {
    background-color: #F8B552;
    border-color: #F8B552;
    box-shadow: none;
    color: #fff;
}

e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame {
    background-color: #F8B552;
    border-color: #F8B552;
    box-shadow: none;
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop {
    box-shadow: none;
    color: #767676;
}

.e-checkbox-wrapper:hover .e-frame,
.e-css.e-checkbox-wrapper:hover .e-frame {
    background-color: #F6F9FB;
    border-color: #F8B552;
}

.e-checkbox-wrapper:hover .e-frame.e-check,
.e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #F6F9FB;
    border-color: #F8B552;
    color: #fff;
}

.e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.e-css.e-checkbox-wrapper .e-checkbox:focus + .e-frame {
    background-color: #F6F9FB;
    border-color: #F8B552;
    box-shadow: none;
}

.e-checkbox-wrapper:hover .e-frame.e-stop,
.e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
    color: #767676;
}

.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    background-color: #fff;
    border-color: #F8B552;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
}

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

.red-button {
    background-color: #e2647b;
}

.green-button {
    background-color: #96d486;
}

/* button in dialog boxes */
.e-footer-content .e-btn.e-primary.e-flat:not([DISABLED]) {
    background: #96BFD9;
    border-color: #96BFD9;
    color: #fff
}

.e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]) {
    background: #72A0C1
}

/* button red */

.e-btn.e-red,
.e-css.e-btn.e-red {
    background-color: #e2647b;
    border-color: #e2647b;
    color: #fff;
}

.e-btn.e-red:hover,
.e-css.e-btn.e-red:hover {
    background-color: #930000;
    border-color: #930000;
    box-shadow: none;
    color: #fff;
}

.e-btn.e-red:focus,
.e-css.e-btn.e-red:focus {
    background-color: #a80000;
    border-color: #fff;
    color: #fff;
    box-shadow: none;
}

.e-btn.e-red:active,
.e-css.e-btn.e-red:active {
    background-color: #7c0101;
    border-color: #7c0101;
    color: #fff;
    box-shadow: none;
}

.e-btn.e-red.e-active,
.e-css.e-btn.e-red.e-active {
    background-color: #7c0101;
    border-color: #7c0101;
    box-shadow: none;
    color: #fff;
}

.e-btn.e-red:disabled,
.e-css.e-btn.e-red:disabled {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    box-shadow: none;
    color: #a6a6a6;
}

.e-btn.e-red .e-ripple-element,
.e-css.e-btn.e-red .e-ripple-element {
    background-color: transparent;
}

/* button yellow */

.e-btn.e-yellow,
.e-css.e-btn.e-yellow {
    background-color: #F8B552;
    border-color: #F8B552;
    color: #fff;
}

    .e-btn.e-yellow:hover,
    .e-css.e-btn.e-yellow:hover {
        background-color: #C69142;
        border-color: #C69142;
        box-shadow: none;
        color: #fff;
    }

    .e-btn.e-yellow:focus,
    .e-css.e-btn.e-yellow:focus {
        background-color: #C69142;
        border-color: #fff;
        color: #fff;
        box-shadow: none;
    }

    .e-btn.e-yellow:active,
    .e-css.e-btn.e-yellow:active {
        background-color: #C69142;
        border-color: #C69142;
        color: #fff;
        box-shadow: none;
    }

    .e-btn.e-yellow.e-active,
    .e-css.e-btn.e-yellow.e-active {
        background-color: #C69142;
        border-color: #C69142;
        box-shadow: none;
        color: #fff;
    }

    .e-btn.e-yellow:disabled,
    .e-css.e-btn.e-yellow:disabled {
        background-color: #f4f4f4;
        border-color: #f4f4f4;
        box-shadow: none;
        color: #a6a6a6;
    }

    .e-btn.e-yellow .e-ripple-element,
    .e-css.e-btn.e-yellow .e-ripple-element {
        background-color: transparent;
    }


/* button green */

.e-btn.e-green,
.e-css.e-btn.e-green {
    background-color: #96d486;
    border-color: #96d486;
    color: #fff;
}

.e-btn.e-green:hover,
.e-css.e-btn.e-green:hover {
    background-color: #146511;
    border-color: #146511;
    box-shadow: none;
    color: #fff;
}

.e-btn.e-green:focus,
.e-css.e-btn.e-green:focus {
    background-color: #137c10;
    border-color: #fff;
    color: #fff;
    box-shadow: none;
}

.e-btn.e-green:active, .e-btn.e-green.e-active,
.e-css.e-btn.e-green:active,
.e-css.e-btn.e-green.e-active {
    background-color: #004b1d;
    border-color: #004b1d;
    color: #fff;
    box-shadow: none;
}

.e-btn.e-green:disabled,
.e-css.e-btn.e-green:disabled {
    background-color: #f4f4f4;
    border-color: #f4f4f4;
    box-shadow: none;
    color: #a6a6a6;
}

.e-btn.e-green .e-ripple-element,
.e-css.e-btn.e-green .e-ripple-element {
    background-color: transparent;
}

/* violet button */

.e-btn.e-violet,
.e-css.e-btn.e-violet {
    background-color: #a86faa;
    border-color: #a86faa;
    color: #fff;
}

    .e-btn.e-violet:hover,
    .e-css.e-btn.e-violet:hover {
        background-color: #864F88;
        border-color: #864F88;
        box-shadow: none;
        color: #fff;
    }

    .e-btn.e-violet:focus,
    .e-css.e-btn.e-violet:focus {
        background-color: #864F88;
        border-color: #fff;
        color: #fff;
        box-shadow: none;
    }

    .e-btn.e-violet:active, .e-btn.e-violet.e-active,
    .e-css.e-btn.e-violet:active,
    .e-css.e-btn.e-violet.e-active {
        background-color: #864F88;
        border-color: #864F88;
        color: #fff;
        box-shadow: none;
    }

    .e-btn.e-violet:disabled,
    .e-css.e-btn.e-violet:disabled {
        background-color: #f4f4f4;
        border-color: #f4f4f4;
        box-shadow: none;
        color: #a6a6a6;
    }

    .e-btn.e-violet .e-ripple-element,
    .e-css.e-btn.e-violet .e-ripple-element {
        background-color: transparent;
    }

.red-text {
    color: #e2647b;
}

.green-text {
    color: #96d486;
}

/* header items */
e-tab .e-tab-header .e-toolbar-items {
    background: #F6F9FB;
}

/* tab header */
e-tab .e-tab-header {
    background: #F6F9FB !important;
}

/* box around tab */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 40px;
    padding: 0px 24px 0px 0px;
    width: 100%;
}

/* tab content */
.e-tab .e-content {
    background: #F6F9FB !important;
}

/* tab item when hovering */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: #F6F9FB !important;
}

/* selected tab */
.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #F6F9FB;
}

/* selected tab item */
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: #F6F9FB;
    border-radius: 0;
    border-color: #F6F9FB;
}

/* border around tabs */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border-radius: 0;
    border: 0px;
}

/* tab text */
.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 1.25rem;
    font-weight: 400;
}

/* tab text selected */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    font-size: 1.25rem;
    font-weight: 400;
}

/* bar below selected tab text */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
    border: 2px solid #F8B552;
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    width: 100%;
}

.e-btn:hover,
.e-css.e-btn:hover {
    background-color: #eaeaea;
    border-color: none;
    box-shadow: none;
    color: #000;
}

/* buttons in filter bar */
.filter .e-btn {
    background-color: #fff;
    border-color: #525252;
    color: #333;
    outline: none !important;
    outline-offset: 0;
    font-size: 12px;
    font-weight: 600;
    border-radius: 25px;
    margin-left: 10px;
}

.filter .e-btn:focus, .e-css.e-btn:focus {
    background-color: #fff;
    border-color: #525252;
    color: #333;
    outline: none !important;
    outline-offset: 0;
}

/* special button in filter bar */
.filter-special .e-btn {
    background-color: #cddfea;
    border-color: #525252;
    color: #333;
    outline: none !important;
    outline-offset: 0;
    font-size: 12px;
    font-weight: 600;
    border-radius: 25px;
    margin-left: 10px;
}

.table-column-label {
    width: auto;
    text-align: left;
    white-space: nowrap;
    padding: .4rem .4rem .4rem 0 !important;
    vertical-align: middle !important;
    margin-left: 0;
    font-size: 14px;
}

.table-column-data {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: .4rem 0 .4rem .4rem !important;
    vertical-align: middle !important;
}

/* icons */
.e-icons {
    font-family: 'e-icons';
}

.e-icon-analysis::before {
    content: '\e669';
}

.e-icon-configure:before {
    content: '\e679';
}

.e-icon-info:before {
    content: '\e33c';
}

.bluebox {
    position: relative;
    color: white;
}

    .bluebox::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 5px;
        right: 5px;
        bottom: -5px;
        background: linear-gradient(40deg, #779ECB, #536E8E);
        border-radius: 5px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

.greybox {
    position: relative;
    color: white;
}

    .greybox::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 5px;
        right: 5px;
        bottom: -5px;
        background: linear-gradient(40deg, #AAAAAA, #888888);
        border-radius: 5px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

.storycaption {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    font-family: 'Candara', 'Gill Sans', 'Calibri', 'Trebuchet MS', 'Roboto', sans-serif
}

.storytext {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    font-family: 'Candara', 'Gill Sans', 'Calibri', 'Trebuchet MS', 'Roboto', sans-serif
}

.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Abstand zwischen den Chips */
    margin-top: 5px;
}

.chip {
    padding: 5px 10px;
    background-color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0; /* Verhindert, dass die Chips schrumpfen */
}

@media (max-width: 767.98px) {
}

@media (min-width: 768px) {
}


.extra-space-20::after {
    content: "";
    display: block;
    height: 20px;
}

.extra-space-50::after {
    content: "";
    display: block;
    height: 50px;
}

.extra-space-100::after {
    content: "";
    display: block;
    height: 100px;
}