:root {
    --mixer-color-blue-standard: #286EA0;
    --mixer-color-blue-darker: #28506E;
    --mixer-color-gray: #666666;
    --mixer-color-gray-light: #F2F2F2;
    --mixer-color-red: #FF2800;
    --mixer-header-h-font-weight: 300;
}


/* --------------- HEADER SECTION -----------*/

#header-panel {
    background: var(--mixer-color-blue-standard);
    color: white;
}

#header-panel a:not(.btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}


#header-panel a:not(.alert a) {
    color: white;
}

#header-panel a:hover:not(.btn) {
    opacity: 60%;
}

#header-panel h1,
#header-panel h2 {
    font-weight: var(--mixer-header-h-font-weight);
    text-underline-offset: 8px;
}

#menu-section-cart {
    margin-bottom: -20px;
    z-index: 1000;
    color: var(--bs-primary);
}

/* ------------TABS------------- */

#header-tabs-container {
    background: var(--mixer-color-blue-standard);
}

#header-tabs-padding {
    background-color: var(--mixer-color-blue-darker);
    height: 25px;
}

#header-tabs {
    border: none;

}

#header-tabs .nav-link:not(.active) {
    opacity: 50%;
}

#header-tabs .nav-link,
#header-tabs .nav-link.active,
#header-tabs .nav-link.active .btn:focus {
    background-color: var(--mixer-color-blue-darker);
    color: #FFF;
    border: 0;
    border-radius: 0;
    padding-left: 70px;
    padding-right: 70px;
    margin-bottom: 0;
}

/* --------------- HEADER SECTION EVENT CONTEXTUAL MENU -----------*/
#event-contextual-menu-darker {
    --margin-shade: calc((100vw - 1280px - var(--scrollbar-width)) / 2); /*--scrollbar-width is created in app.js*/
    background-color: var(--mixer-color-blue-darker);
    margin-right: calc(-1 * var(--margin-shade));
    padding-right: var(--margin-shade);
}

/* ---------------- GUEST VIEWS ---------*/
#guest-title-bar {
    background: var(--mixer-color-gray-light);
}

.demo-event-watermark {
    color: red;
    text-align: center;
    opacity: 0.1;
    position: absolute;
    /*z-index: 1000;*/
}
@media (min-width: 1200px) {
    .demo-event-watermark {
        font-size: 195px;
    }
}

@media (max-width: 1199px) {
    .demo-event-watermark {
        font-size: 100px;
    }
    #event-detailed-description img {
        max-width: 100%;
    }
}

#preview_modal .demo-event-watermark {
    font-size: 160px;
}
/* --------------- FOOTER -----------*/

#website-footer {
    background: var(--mixer-color-gray);
}

/* --------------- OTHER -----------*/

.cursor-pointer {
    cursor: pointer;
    user-select: none;
}

/* SMALL FIX FOR BS5 icon vertical position */
.bs5-icon svg.bi {
    margin-top: -4px;
}

.progress-bar-smooth-motion {
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.text-mixer-gray,
.text-mixer-gray td,
.text-mixer-gray th {
    color: var(--mixer-color-gray);
}

/* this fixes js events when clicking on spans with svg icons inside */
svg {
    pointer-events: none;
}

.text-danger .sub-required-message a {
    color: var(--bs-danger) !important;
}


/*-----------------------------------TOAST---------------------------------------------*/
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: var(--bs-border-radius); /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 10000; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    /*-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
    /*animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }
    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 30px;
        opacity: 1;
    }
    to {
        top: 0;
        opacity: 0;
    }
}

/* --------------------------- PULSING -------------------------*/

.pulsing {
    -webkit-animation: pulsing 0.5s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 1;
}

@-webkit-keyframes pulsing {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0;
    }
}

/* --------------- SELECT2 -----------*/

.select2-container .select2-selection,
.select2-dropdown {
    border-radius: var(--bs-border-radius);
}

.select2-search__field,
.select2-selection {
    box-shadow: none !important;
}