* {
    box-sizing: border-box;
}

:root {
    font-size: 10px;
    --content-background-color: #ffffff;
    --secondary-background-color: #f2f2f2;
    --accent-background-color: #e9ecff;
    --primary-text-color: #343434;
    --secondary-text-color: #898989;
    --accent-blue: #626c92;
    --accent-teal: #72b5bb;
    --accent-plum: #944e72;
    --accent-complete: #b2b2b2;
    --accent-success: #56944e;
    --inner-width-max: 1700px;
    --inner-width: 95%;
    --button-color: var(--accent-blue);
    --input-border-color: #8a8a8a;
}

body {
    font-size: 1.4rem;
    font-family: 'Lato', sans-serif;
}

a {
    cursor: pointer;
}

.white-text {
    color: var(--content-background-color);
}

.white-text:hover {
    color: var(--content-background-color);
}

.accent-blue {
    color: var(--accent-blue);
}

.accent-blue-bg {
    background-color: var(--accent-blue);
}

.accent-plum {
    color: var(--accent-plum);
}

.accent-plum-bg {
    background-color: var(--accent-plum);
    border: 2px solid var(--accent-plum);
}

.accent-teal {
    color: var(--accent-teal);
}

.accent-teal-bg {
    background-color: var(--accent-teal);
    border: 2px solid var(--accent-teal);
}

.accent-success {
    color: var(--accent-success);
}

.accent-success-bg {
    background-color: var(--accent-success);
    border: 2px solid var(--accent-success);
}


.new-theme #announcement-bar-down {
    z-index: 150;
}

.payment .input-wrap input, .payment .input-wrap select{
    border-color: var(--button-color);
}

span.select2-results ul {
    background: var(--button-color);
}

.vendor-row .vendor-item input, .vendor-row .vendor-item select, .select2-container--default .select2-selection--single, select#set-default-cc,
.card-pop-row input[type=text], .card-pop-row select, .form-row input[type=text], .form-row input[type=number], .form-row input[type=password], .form-row select,
.new-theme .gold-borders, .vendors .new-vendor-form, .cards-content .card-form-wrapper {
    border-color: var(--button-color);
}

.new-theme .gold-borders .corner {
    background-image: none;
}

.new-theme .happy-wrap label {
    background-color: var(--button-color);
    opacity: 0.5;
}

.new-theme .progress-bar-wrap .progress-bar {
    background-color: var(--button-color);
}

.new-theme .happy-wrap input:checked + label {
    background-color: var(--button-color);
    opacity: 1;
}

.new-theme .gold-button, .new-theme .payment #log .input-wrap .gold-button, .new-theme .new-vendor-form #add-vendor, .new-theme .new-vendor-form #update-vendor {
    background-color: var(--button-color);
    padding: 1.6rem 4.8rem;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1rem;
    max-width: unset;
    width: auto;
    height: auto;
}

button.btn , a.btn {
    padding: 1.6rem 4.8rem;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1rem;
    max-width: unset;
    width: auto;
    height: auto;
    display: inline-block;
}

a.btn:hover {
    opacity: .9;
}

button.btn-outline, a.btn-outline  {
    padding: 1.4rem 4.6rem;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1rem;
    max-width: unset;
    width: auto;
    height: auto;
    border: 2px solid;
    background-color: var(--content-background-color);
    display: inline-block;
}

.new-theme .vendors .outline-button, .new-theme .cards-content .outline-button, .new-theme .transaction .outline-button {
    color: var(--button-color);
    padding: 1.6rem 4.8rem;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1rem;
    border-width: 2px;
}

.new-theme .page-bg {
    background-color: var(--secondary-background-color);
    background-image: none;
}

.new-theme .body-wrap {
    padding-top: 2em;
    /* max-width: 1700px; */
    max-width: 1400px;
}

.inner-wrapper {
    width: 90%;
}

.new-theme .inner-width {
    margin: 0 auto;
    width: var(--inner-width);
    max-width: var(--inner-width-max);
}

.todo-card .dismiss__dialog {
    position: fixed;
    top: 20%;
    /* bottom: 0; */
    margin: 0 auto;
    padding: 2rem;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
}

.todo-card .dialog-text {
    margin: 1rem auto 2rem;
    font-size: 1.75rem;
    text-align: center;
}

.todo-card-btns.button-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 2rem;
}

.todo-card input::file-selector-button {
    background-color: #944e71;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-size: 1.8rem;
    padding: 1rem 1rem;
    width: 100%;
    border: none;
    border-radius: 5px;
    margin: 0.5rem auto;
}

/* ---- Start Header content --- */

.new-theme .header-content {
    background-color: var(--content-background-color);
    margin-bottom: 0;
}

.new-theme .logo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.new-theme .logo-wrap {
    align-self: flex-start;
    display: flex;
    gap: 3rem;
}

.new-theme .logo-wrap svg {
    width: 100%;
    max-width: 16rem;

}
.header-content .event-producer-info {
    flex: 1 1;
    align-self: center;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.6rem;
}

.header-content .event-producer-info h2 {
    font-weight: 400;
    margin: 0 0 0.5rem;
}

.header-content .event-producer-info .event-producer-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}



.new-theme .logout-wrap a {
    background-color: var(--accent-blue);
    color: var(--content-background-color);
    display: inline-block;
    padding: 1.6rem 4.8rem;
    font-size: 2rem;
    line-height: 1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1rem;
}

.new-theme .mobile-sticky-header {
    display: contents;
}

@media screen and (max-width: 960px){
    .new-theme .mobile-sticky-header {
        display: block;
        top: 0;
        background-color: var(--accent-background-color);
        border-radius: 0 0 50% 50%;
        min-height: 12.4rem;
        position: sticky;
        z-index: 100;
    }
    .belltower #announcement-bar-down {
        top: 0px;
    }

    .belltower #announcement-bar-down.up {
        top: -40px;
    }

    .new-theme .header-content {
        background-color: transparent;
    }

    .new-theme .logout-wrap {
        display: none;
    }

    .new-theme .logo-row {
        justify-content: center;
    }

    .new-theme .logo-wrap {
       text-align: center;
    }
    .new-theme .logo-wrap svg {
        max-width: 10rem;
    }

    .header-content .event-producer-info {
        display: none;
    }

    .new-theme .logo-wrap svg .st1{fill:#000;}
    .new-theme .logo-wrap svg .st3{fill:#000;}
    .new-theme .logo-wrap svg .st4{fill:#000;}
    .new-theme .logo-wrap svg .st6{fill:#000;}
}

/* --- End Header Content --- */

/* --- Start Menu Bar --- */
.new-theme .menu-bar {
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    width: 100%;
    position: sticky;
    top: 0;
    background-color: var(--content-background-color);
    z-index: 20;
}

.new-theme .menu-bar .inner-width {
    display: flex;
    justify-content: space-between;
}

.new-theme .menu-bar .main-navigation {
    display: flex;
    gap: 4rem
}

.new-theme .menu-bar .user-header {
    justify-self: flex-end;
    align-self: center;
    flex: 1 1 auto;
}


.new-theme .menu-bar a,  .new-theme .menu-bar button{
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    color: var(--secondary-text-color);
    text-decoration: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.new-theme .menu-bar .circle-icon, .primary-menu .circle-icon {
    display: inline-block;
    font-size: 2rem;
    line-height: 1.5;
    width: 3rem;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: var(--accent-plum);
    flex-shrink: 0;
    background-color: #ffffff;
}

.new-theme .menu-bar .circle-icon.menu-icon {
    background-color: var(--accent-plum);
    color: var(--content-background-color);
}

.new-theme .menu-bar .user-image {
    display: inline-block;
    margin-right: 0.5rem;
}

.new-theme .menu-bar .user-image .img-container {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    border: 2px solid var(--accent-plum);
    max-width: 42px;
    vertical-align: middle;
}

.new-theme .menu-bar .user-image .img-container img {
    object-fit: contain;
    width: 100%;
}

.new-theme .menu-bar .user-menu:before {
    display: none;
}

.new-theme .menu-bar .user-menu {
    font: 600 1.6rem "Source Sans Pro", sans-serif;
    color: var(--secondary-text-color);
}

.new-theme .menu-bar .user-menu .material-icons-outlined {
    color: var(--accent-plum);
    vertical-align: middle;
}

@media screen and (max-width: 1100px){
    .new-theme .menu-bar a,  .new-theme .menu-bar button {
        font-size: 1.2rem;
    }
}

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

    .new-theme .menu-bar a, .new-theme .menu-bar button {
        font-size: 0.8rem;
        text-align: center;
    }

    .new-theme .menu-bar .user-menu {
       font-size: 0.4rem;
        line-height: 1;
        margin: 0;
    }

    .new-theme .menu-bar .user-menu .material-icons-outlined {
        display: none;
    }
    .mobile-header-background {
        height: 400px;
        background-color: #ffffff;
        margin-top: -100px;
    }
    .mobile-header-observer {
        height: 30%;
    }
    .new-theme .menu-bar {
        position: static;
        background-color: transparent;
        box-shadow: none;
    }

    .new-theme .menu-bar .main-navigation {
        display: contents;
    }


    .new-theme .menu-bar .user-header {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .new-theme .menu-bar .user-image .img-container {
        max-width: 4rem;
        border-width: 1px;
    }

    .new-theme .menu-bar .user-image {
        display: block;
        margin-right: 0;
    }


    .new-theme .menu-bar .inner-width{
        display: grid;
        max-width: 320px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "empty payment account menu email details avatar";
    }

    span.hide-onscroll {
        white-space: nowrap;
        position: absolute;
        bottom: -1px;
        left: 50%;
        text-align: center;
        transform: translate(-50%, 100%);
    }

    .new-theme .scrolled .hide-onscroll {
        display: none;
    }
    .new-theme .menu-bar .inner-width .nav-item .material-icons {
        font-size: 2.8rem;
        width: 40px;
        height: 40px;
        display: inline-block;
        /*transform: scale(calc(1 * var(--dw)), calc(1 * var(--dh)));*/
    }

    .new-theme .menu-bar .inner-width .nav-item .user-image {
        /*transform: scale(calc(1 * var(--dw)), calc(1 * var(--dh)));*/
    }

    .new-theme .menu-bar .inner-width .nav-item[data-location="avatar"] {
        --dx-start: -137;
        --dy-start: 47;
        --dw-start: 2.5;
        --dh-start: 2.5;
        --dx-end: 0;
        --dy-end: -50;
        --dw-end: 1;
        --dh-end: 1;
        --dx: -130;
        --dy: 47;
        --dw: 2.5;
        --dh: 2.5;
        grid-area: avatar;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy)))
        scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }
    .new-theme .menu-bar .inner-width .nav-item[data-location="payment"] {
        --dx-start: 0;
        --dy-start: 150;
        --dw-start: 1.5;
        --dh-start: 1.5;
        --dx-end: 0;
        --dy-end: 0;
        --dw-end: 1;
        --dh-end: 1;
        --dx: 0;
        --dy: 200;
        --dw: 1.5;
        --dh: 1.5;
        grid-area: payment;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy)))
        scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }
    .new-theme .menu-bar .inner-width .nav-item[data-location="menu"] {
        grid-area: menu;
        --dx-start: 0;
        --dy-start: 150;
        --dw-start: 1.5;
        --dh-start: 1.5;
        --dx-end: 0;
        --dy-end: 10;
        --dw-end: 1;
        --dh-end: 1;
        --dx: 130;
        --dy: 0;
        --dw: 1.5;
        --dh: 1.5;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy)))
        scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }
    .new-theme .menu-bar .inner-width .nav-item[data-location="email"] {
        grid-area: email;
        --dx-start: 0;
        --dy-start: 250;
        --dw-start: 1.5;
        --dh-start: 1.5;
        --dx-end: 0;
        --dy-end: 7;
        --dw-end: 1;
        --dh-end: 1;
        --dx: 130;
        --dy: 0;
        --dw: 1.5;
        --dh: 1.5;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy)))
        scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }
    .new-theme .menu-bar .inner-width .nav-item[data-location="account"] {
        grid-area: account;
        --dx-start: 0;
        --dy-start: 250;
        --dw-start: 1.5;
        --dh-start: 1.5;
        --dx-end: 0;
        --dy-end: 7;
        --dw-end: 1;
        --dh-end: 1;
        --dx: 130;
        --dy: 0;
        --dw: 1.5;
        --dh: 1.5;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy)))
        scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }
    .new-theme .menu-bar .inner-width .nav-item[data-location="details"] {
        grid-area: details;
        --dx-start: 0;
        --dy-start: 150;
        --dw-start: 1.5;
        --dh-start: 1.5;
        --dx-end: 0;
        --dy-end: 0;
        --dw-end: 1;
        --dh-end: 1;
        --dx: 130;
        --dy: 0;
        --dw: 1.5;
        --dh: 1.5;
        transform: translate(calc(1px * var(--dx)), calc(1px * var(--dy))) scale(calc(1 * var(--dw)), calc(1 * var(--dh)));
    }

    .new-theme .menu-bar a, .new-theme .menu-bar button {
        flex-direction: column;
        gap: 0;
    }


}


/* --- End Menu Bar --- */

/* --- Start Primary Menu --- */

.new-theme .primary-menu-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: .3s ease-in-out;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
}


.new-theme .primary-menu-overlay.shown {
    opacity: 1;
    visibility: visible;
}

.new-theme .primary-menu {
    position: fixed;
    transform: translateX(-300px);
    background-color: var(--content-background-color);
    font-size: 1.6rem;
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--secondary-text-color);
    transition: .3s ease-in-out;
    transition-property: width, transform;
    flex-shrink: 0;
    width: 0;
    height: 100%;
    z-index: 300;
    overflow-y: auto;
}


.new-theme .primary-menu.shown {
    transform: none;
    width: 320px;
}

.new-theme .primary-menu .primary-menu__content {
    top: 6.5rem;
    padding-bottom: 1rem;
}

.new-theme .primary-menu .menu-header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
}

.new-theme .primary-menu .menu-heading{
    color: var(--accent-blue);
    position: relative;
}
.new-theme .primary-menu .menu-heading h2 {
    text-align: center;
    font-size: 2rem;
    line-height: 2;
}

.new-theme .primary-menu .menu-heading .circle-icon {
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    box-shadow: none;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    line-height: 1.4;
}

.new-theme .primary-menu a {
    color: var(--secondary-text-color);
}

.new-theme .primary-menu li {
    border-bottom: 1px solid var(--accent-background-color);
    padding: 0.2rem 1.5rem;
}

.new-theme .primary-menu li li {
    background-color: #ffffff;
}

.new-theme .primary-menu li.hidden {
    display: none !important;
}

.new-theme .primary-menu li .material-icons,
.new-theme .primary-menu li .material-icons-outlined {
    font-size: 2rem;
    vertical-align: middle;
}

.new-theme .primary-menu .section-heading {
    background-color: var(--accent-background-color);
    color: var(--primary-text-color);
    font-weight: 700;
    padding: 0.5rem 1rem;
}

.new-theme .primary-menu .filter-input {
    margin: 1rem 1rem 0.2rem;
    position: relative;
}

.new-theme .primary-menu .filter-input input {
    width: 100%;
    font-size: 1.6rem;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    border: 1px solid var(--accent-blue);
    border-radius: 0.5rem;
    outline: none;
}

.new-theme .primary-menu  .filter-input .material-icons {
    position: absolute;
    color: var(--accent-blue);
    top: 0.3rem;
    left: 0.5rem
}

/* --- End Primary Menu --- */



@media screen and (max-width: 1100px) {
    .hide-at-1100 {
        display: none;
    }
}


@media screen and (max-width: 680px){
    .new-theme .user-header {
        display: block;
    }
}


/* --- Todos List --- */

.todo-section__title {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    color: var(--accent-blue);
    text-transform: none;
}

.todos-overdue .todo-section__title {
    color: var(--accent-teal)
}

.todo-section__count {
    font-weight: bold;
}

.todo-section__title .material-icons {
    display: inline-block;
    background-color: var(--accent-blue);
    color: #fff;
    font-size: 3rem;
    line-height: 1.33;
    border-radius: 50%;
    width: 4rem;
    text-align: center;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.todos-overdue .todo-section__title .material-icons {
    background-color: var(--accent-teal);
}

.todo-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    position: relative;
    padding-left: 2rem;
}

.todo-list:before {
    content: "";
    display: block;
    width: 1rem;
    height: 100%;
    background-color: var(--accent-blue);
    border-radius: 0.5rem;
    position: absolute;
}

.todos-overdue .todo-list:before {
    background-color: var(--accent-teal);
}

.todo-card {
    display: flex;
    flex-flow: column wrap;
    min-height: 30rem;
    align-content: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.todo-card * {
    margin: 0;
}

.todo-card-head {
    display: flex;
    justify-content: space-between;
}

.todo-card-head .todo-card-date {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--secondary-text-color);
}

.todo-card-head .todo-card-icon .material-icons {
    font-size: 3rem;
    color: var(--accent-blue);
}

.todos-overdue .todo-card-head .todo-card-icon .material-icons {
    color: var(--accent-teal);
}

.todo-card-title h4 {
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2rem;
}

.todo-card-btns {
    justify-self: flex-end;
    margin-top: auto;
}

.todo-card-btns button, .todo-card-btns .button {
    font-family: 'Raleway', sans-serif;
    font-size: 1.8rem;
    padding: 1rem 1rem;
    margin: .5rem auto;
    display: inline-block;
    text-align: center;
}

.todo-card-content {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 1.5;
}

.todo_file_uploader input[type="file"] {
    width: 100%;
}

.see-all {
    text-align: center;
}

.see-all__link {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.todo-card-footer {
    margin-top: auto;
}


.todo-card.todo-card--completed {
    min-height: 20rem;
    color: var(--accent-complete);;
}

.todo-card-content.completed-icon {
    text-align: center;
    margin: 2rem 0 0;
}

.todo-card-content.completed-icon .material-icons {
    font-size: 6rem;
}

.todos-completed .todo-section__title {
    color: var(--accent-complete);
}

.todos-completed .todo-section__title .material-icons{
    background-color: var(--accent-success);
}

.todos-completed .todo-card-head .todo-card-icon .material-icons {
    color: var(--accent-complete);
}

.todos-completed .todo-list:before {
    background-color: var(--accent-success);
}

/* --- End Todos List --- */


/* --- Explore List --- */


.explore-more {
    max-width: 1250px;
    margin: 5rem auto;
}

h3.explore-more__title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: 5rem;
}

h3.explore-more__title .material-icons {
    font-size: 4.2rem;
    vertical-align: middle;
}

.explore-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.explore-more__slider {
    background-color: var(--accent-background-color);
    border-radius: 0.5rem;
    position: relative;
}

.explore-item__icon {
    flex-grow: 0;
}

.explore-item__icon .material-icons {
    font-size: 11.8rem;
}

.explore-item__title {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--secondary-text-color);
}

.explore-item__description {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--primary-text-color);
}

.explore-more__slider:before {
    content: "";
    display: block;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}
.glide {
    padding-top: 3rem;

}


.glide__slide {
    background-color: var(--content-background-color);
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    align-self: stretch;
    height: auto;
    padding: 3rem 2.5rem 3rem 1rem;
}

.glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--content-background-color);
    z-index: 5;
    border: none;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.glide__arrow .material-icons {
    font-size: 1.7rem;
    color: var(--primary-text-color);
    display: inline-block;
    border: 1px solid var(--primary-text-color);
    border-radius: 50%;
    padding: 0.5rem;
}

.glide__arrow--left {
    left: 0;
    transform: translate(-50%, -50%);
}

.glide__arrow--right {
   right: 0;
    transform: translate(50%, -50%);
}

.glide__bullets {
   text-align: center;
    margin: 0;
}

button.glide__bullet {
    background-color: var(--accent-teal);
    opacity: 0.5;
    width: 1rem;
    height: 1rem;
    border: none;
    border-radius: 50%;
    margin: 2rem 0.4rem;
}

button.glide__bullet.glide__bullet--active {
    opacity: 1;
}

.center-text{
    text-align: center;
}

/* --- End Explore List --- */

/* --- Welcome Questionnaire --- */
.welcome-page, .confirm-info {
    min-height: 100vh;
    background: url('./images/welcome_bg.jpg') no-repeat fixed center center/cover;
}

.welcome__content, .confirm__content, .message__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.welcome__content-inner, .confirm__content-inner, .message__content-inner {
    background-color: var(--content-background-color);
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 5rem 2rem;
    border-radius: 0.75rem;
}

.message__content-inner {
    max-width: 800px;
}

.welcome_logo, .message_logo {
    text-align: center;
}

.welcome__questionnaire {
    display: flex;
    position: relative;
    max-width: 120rem;
    overflow: hidden;
}

.welcome__question {
    text-align: center;
    flex-grow: 0;
    transform: translateX(1200px);
    flex-shrink: 0;
    transition: 0.7s ease-in-out;
    background-color: var(--content-background-color);
    position: absolute;
    width: 100%;
    min-height: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    font-family: "Source Sans Pro", sans-serif;
    padding: 1rem;
    box-sizing: border-box;
}

.welcome__question.active {
    width: 100%;
    transform: none;

}

.welcome__question.inactive{
    width: 100%;
    transform: none;
    z-index: 0;
}

.welcome__question.start {
    position: static;
    width: 100%;
    transform: none;
}

.welcome__question-header h1{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16rem;
    font-weight: 200;
    color: var(--primary-text-color);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.welcome__question-header h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 4.8rem;
    font-weight: 300;
    color: var(--primary-text-color);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.welcome__question-header h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.6rem;
    font-weight: 000;
    color: var(--secondary-text-color);
    margin-bottom: 1rem;
    margin-top: 3rem;
    text-transform: uppercase;
}

.welcome__question-body, .message__text {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--primary-text-color);
    max-width: 84rem;
    margin: 0 auto 1rem;
}

.message__text h1 {
    text-align: center;
}

.message__text a {
    color: var(--accent-blue);

}

.welcome__question-body.wide {
    max-width: 100rem;
}

.welcome__question-actions {
    margin: 5rem auto 2rem;
}

.event-details, .guest-user, .event-vendor-list__vendor-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
}

.guest-user, .event-vendor-list__vendor-info {
    grid-template-columns: 1fr 3fr;
    margin-bottom: 5rem;
}

.event-vendor-list__vendor-info {
    max-width: 32rem;
    margin: 0 auto 5rem;
}

.event-details__row, .guest-user__row, .vendor-info__row  {
    display: contents;
    font-family: 'Lato', sans-serif;
    font-size: 1.8rem;
}

.event-details__label, .guest-user__row-label, .vendor-info__row-label {
    font-weight: 700;
    text-align: right;

}

.event-details__value, .guest-user__row-data, .vendor-info__row-data {
    text-align: left;
    font-weight: 300;
}

.welcome__question-flex-item-header {
    font-family: 'Lato', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: underline;
}

.welcome__question-flex {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.welcome__question-flex .event-details {
    grid-template-columns: 1fr 2fr;
}


.welcome__question-flex-item {
    flex-grow: 0;
}

.welcome__question-flex-item textarea {
    width: 100%;
    height: 19.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border-color: var(--secondary-text-color);
}

.welcome__question-more {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    text-transform: uppercase;
    text-decoration: underline;
    margin-top: 3rem;
}

.welcome__question-slide-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.welcome__question-slideup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(500px);
    transition: 0.7s ease-in-out;
    opacity: 0;
}

.welcome__question-slideup.active {
    transform: translateY(0px);
    opacity: 1;
}

.welcome__question-slideup-text {
    font-family: 'Lato', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.welcome__question-actions-additional {
    margin-bottom: 2rem;
}

.welcome__question-form-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0 0 1rem;
}

.welcome__question-form-input {
    flex-grow: 1;
}

.welcome__question-form-input.welcome__question-form-checkgroup {
    align-self: flex-start;
    text-align: left;
}

.welcome__question-form-input.welcome__question-form-checkgroup label {
    display: inline-block;
}

.welcome__question-form-input input:not([type=checkbox]), .welcome__question-form-input select {
    width: 100%;
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--input-border-color);
}

.welcome__question-form-input label {
    display: none;
}

.welcome__question .loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome__question .loader.active {
    display: flex;
    opacity: 1;
}

.welcome__question .loader .material-icons {
    font-size: 4rem;
    color: var(--primary-text-color);
    animation: spinner 1s infinite;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.vendor-search-area {
    position: relative;
}

ul#vendor-list {
    position: absolute;
    list-style: none;
    text-align: left;
    background-color: var(--content-background-color);
    top: 100%;
    overflow-y: auto;
    max-height: 300px;
    margin: 0;
    box-shadow: 0 0 10px var(--accent-background-color);
    padding: 1rem;
    border-radius: 0.5rem;
    pointer-events: none;
    visibility: hidden;
}

ul#vendor-list.active {
    visibility: visible;
    pointer-events: all;
}

.vendor-list__item {
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem
}

.vendor-list__item:hover {
    background-color: var(--accent-background-color);
}

.vendor-list-question {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.vendor-list-question .welcome__question-header,
.vendor-list-question .welcome__question-actions{
    flex: 0 0 auto;
}

.vendor-list-question .welcome__question-body {
    flex: 1 1 auto;
    overflow-y: auto;
    width: 100%
}

/* .message-content, .message-logo{
    max-width: 500px;;
} */


/* --- End Welcome Questionnaire --- */


@media all and (max-width: 1080px){

    .todo-list {
        grid-template-columns: repeat(3, 1fr);
    }
    
}

@media all and (max-width: 980px){

    .welcome__question-header h1 {
        font-size: 10rem;
    }

}

@media all and (max-width: 900px){
    .more-info .welcome__question-flex {
        flex-direction: column;
        max-width: 550px;
        margin: auto;
    }
}

@media all and (max-width: 800px){

    .todo-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .explore-item__icon .material-icons {
        font-size: 8.5rem;
    }

    button.btn, button.btn-outline, a.btn, a.btn-outline {
        font-size: 1.5rem;
    }

    .welcome__question-header h2 {
        font-size: 3.5rem;
    }

}

@media all and (max-width: 650px){
    .welcome__question-form-row {
        display: block;
        margin: 0 auto;
    }
    .welcome__question-form-input {
        margin: 1rem 0;
    }
    .welcome__question-header h2 {
        font-size: 3rem;
    }
}

@media all and (max-width: 500px){
    .todo-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .welcome__question-header h1 {
        font-size: 7.5rem;
    }
    .event-details__row, .guest-user__row, .vendor-info__row {
        font-size: 1.5rem;
    }

    button.btn, button.btn-outline, a.btn, a.btn-outline {
        padding: 1rem 4rem;
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

}