body, html {
    height: 100%;
}

body {
    padding-top: 59px;
}

body.dashboard {
    background-color: #F5F5FA;
}

body.light-background {
    background: var(--swoogo-gray-100);
}

.page-body {
    background-color: #F5F5FA;
    height: 100%;
}

#sidebar-modal {
    z-index: 1100 !important;
}

.nav-margin-no-menu .full-width {
    width: calc(100vw - 30px);
}

.icon-nav-margin .full-width {
    width: calc(100vw - 59px);
}

.nav-margin .full-width {
    width: calc(100vw - 295px);
}

.nav-margin .full-width.secondary-collapsed {
    width: calc(100vw - 60px);
}

#content-container {
    position: fixed;
    top: 60px;
    transition: width .3s;
}

#account-details {
    text-align: center;
    width: 40%;
    z-index: 1030;
    position: fixed;
    top: 20px;
    left: calc(60vw / 2);
}

#content-container.no-menu {
    position: fixed;
    top: 60px;
    transition: width .3s;
    margin-right: 15px;
}

.website-margin {
    margin-top: -65px;
}

.event-details {
    text-align: center;
    background-color: white;
    padding: 10px;
    position: relative;
    z-index: 999;
}

.event-details .btn-link {
    color: var(--swoogo-blue-semantic-200);
}

.event-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.event-details .favorite-container {
    margin-left: 10px;
}

.event-details .event-set-favorite {
    font-size: 15px;
}

.event-url {
    display: inline-block;
    width: 75%;
    overflow: hidden;
    vertical-align: top;
}

.event-details .btn-sm {
    padding: 0 4px;
    border: transparent;
}

.event-details .copy-to-clipboard {
    position: absolute;
    right: 10px;
}

.event-details .fa-clipboard:hover {
    color: var(--swoogo-blue-contrast-100);
}

#breadcrumb-container {
    margin: 16px 0 0 0;
}

#breadcrumb-container.full-width {
    padding: 0 15px;
}

#breadcrumb-container > div:first-child {
    background-color: white;
    border-radius: 8px;
    margin: 0 auto;
    float: none !important;
    padding: 1px 15px;
}

.breadcrumb {
    background-color: white;
    margin: 9px 0;
    width: 100%;
}

.breadcrumb .event-icon {
    background-size: contain;
    display: inline-block;
    filter: grayscale(1);
    height: 20px;
    margin-bottom: -5px;
    margin-right: 12px;
    width: 20px;
}

.grid-view .breadcrumb {
    width: 100%;
    padding: 12px 15px;
    margin-top: 0px;
    margin-bottom: 9px;
}

.breadcrumb .event-icon {
    background-size: contain;
    display: inline-block;
    filter: grayscale(1);
    height: 20px;
    margin-bottom: -5px;
    margin-right: 12px;
    width: 20px;
}

#main-container, #sidebar {
    transition: all 0.4s ease;
}

#main-container {
    margin-top: 16px;
}

body.dashboard .account #main-container {
    margin-top: 0;
}

#inner {
    overflow-x: initial;
}

/*Event Dashboard*/
body.dashboard #inner {
    max-height: calc(100svh - 120px);
}

/*Account Dashboard*/
body.dashboard .account #inner, body.dashboard .account #main-content {
    max-height: calc(100svh - 80px);
}

#main-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100svh - 210px);
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    float: none !important;
}

#main-content.new-main-content {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100svh - 210px);
    background-color: #F5F5FA;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    float: none !important;
}

.account #inner, .account #main-content {
    max-height: calc(100vh - 165px);
}

body.dashboard #main-content {
    background-color: #F5F5FA;
    padding: 0;
}

.website-margin #main-content, .website-margin #inner {
    max-height: unset;
}

body > .wrap:before {
    content: "";
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1038;
}

.wrap.sidebar-open:before {
    display: block;
}

#sidebar .page-body {
    background-color: white;
}

#sidebar {
    position: fixed;
    right: -90px;
    width: 0;
    bottom: -10px;
    height: calc(100svh + 60px);
    background: white;
    z-index: 1039; /* before bootstrap modal */
    overflow-y: auto;
    box-shadow: -5px 0 10px 0 var(--swoogo-gray-600);
}

.iframe #yii-debug-toolbar {
    display: none;
    visibility: hidden !important;
}

.sidebar-form {
    margin-top: 65px;
    margin-left: 10px;
}

#sidebar-loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#sidebar-content {
    height: 100%;
    position: relative;
    z-index: 101;
}

#sidebar.open {
    right: 0;
    top: 0;
    padding-bottom: 1%;
}

#sidebar.open.large {
    width: 50%;
}

#sidebar.small.open {
    width: 33%;
}

#sidebar-modal .modal-content {
    height: 90svh;
    max-height: 1200px;
}

#sidebar-modal .modal-body {
    height: calc(90svh - 44px);
    max-height: 1156px;
    overflow-y: auto;
}

#sidebar-modal .modal-body.rendered {
    height: calc(90svh - 144px);
}

#sidebar-modal .modal-title {
    float: left;
}

#sidebar .iframe-modal-footer {
    background: white;
    position: revert;
    width: 100%;
    border: transparent;
}

.wrap {
    height: auto;
    margin: 0 auto -45px;
    min-height: 100%;
    padding: 0;
}

.header {
    border-bottom: 1px solid var(--swoogo-lavender-100);
    color: var(--swoogo-gray-600);
    margin-bottom: 10px;
}

.footer {
    height: 45px;
    padding: 12px 15px;
}

#sidebar .iframe {
    margin-top: 4%;
}

.sidebar-title {
    position: fixed;
    width: 100%;
    background-color: white;
    top: 0;
    z-index: 1039;
    padding-left: 10px;
    padding-top: 15px;
}

.sidebar-title h4 {
    color: var(--swoogo-pacifica-100);
}

.sidebar-title .btn-close {
    padding-right: 40px;
    padding-top: 7px;
    font-size: 1.5em;
}

.sidebar-title .btn-close:hover {
    color: var(--swoogo-lavender-100);
}

.sidebar-footer {
    position: fixed;
    width: 100%;
    bottom: 20px;
    z-index: 1039;
    background-color: white;
    margin-left: -25px;
    padding-left: 10px;
}

.sidebar-footer .btn-container {
    margin-right: 25px;
    margin-bottom: 40px !important;
    margin-top: 20px;
}

.sidebar-title .close {
    margin-right: 25px;
    margin-top: 10px;
}

.support-dropdown {
    position: fixed;
    right: 41px;
    bottom: 35px;
}

.support-dropdown > .support-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 14px */
    color: white;
    border: 0 !important;
    width: 111px !important;
    height: 40px !important;
    border-radius: 9999px !important;
    background: var(--swoogo-lavender-100);
}

.support-dropdown.open > .support-button {
    background: var(--swoogo-prelude-200) !important;
    color: white !important;
}

.support-dropdown:not(.open) > .support-button:hover {
    background: var(--swoogo-lavender-100) !important;
    color: white !important;
}

.support-dropdown > .support-button .support-icon {
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><g clip-path=\"url(%23clip0_4111_14205)\"><path d=\"M15.8447 4.14044C15.4225 2.53693 14.1799 1.2732 12.6041 0.843805C11.0603 0.425005 9.42035 0.850323 8.00793 2.01465C6.97766 1.15831 5.83603 0.694699 4.67037 0.666996C3.40376 0.649071 2.22208 1.12083 1.33121 2.02606C-0.343983 3.72978 -0.709304 6.80642 1.83192 9.39093L7.43992 15.0944C7.59614 15.2533 7.80124 15.3332 8.00633 15.3332C8.21142 15.3332 8.41651 15.2533 8.57274 15.0944L14.1807 9.39093C15.7077 7.83794 16.3142 5.92401 15.8447 4.14044Z\" fill=\"white\"/></g><defs><clipPath id=\"clip0_4111_14205\"><rect width=\"16\" height=\"16\" fill=\"white\"/></clipPath></defs></svg>");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: left;
    padding: 8px 12px;
    justify-content: left;
}

.support-dropdown > .support-button .support-text {
    display: block;
}

.support-dropdown > .dropdown-menu {
    padding: 0 !important;
}

.support-dropdown ul.support-list {
    width: 195px;
    border-radius: 16px !important;
    background: white;
    border: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 4px 0;
    margin-bottom: 17px !important;
}

.support-dropdown ul.support-list > li > a {
    color: var(--swoogo-gray-900) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 150%; /* 21px */
    padding: 8px 20px !important;
}

.support-dropdown ul.support-list > li:first-child a:hover {
    border-radius: 16px 16px 0 0;
}

.support-dropdown ul.support-list > li:last-child a:hover {
    border-radius: 0 0 16px 16px;
}

.btn-container .btn-group, .btn-container a {
    margin-right: 5px;
}

.event-index {
    margin-top: 15px;
}

.manage-page .radio-name {
    font-size: 14px;
}

#event-wizard-container .btn-container .breadcrumb-btn.btn-primary {
    top: 230px
}

.btn-container .wizard-btn-back {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 230px;
    margin-left: -320px;
}

.btn-container .wizard-btn-next {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 230px;
    margin-left: -210px;
}

.btn-container .breadcrumb-btn-next {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -210px;
}

.btn-container .breadcrumb-btn-back {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -210px;
}

.btn-container .breadcrumb-btn-back-multiple {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -320px;
}

.no-save-button .breadcrumb-btn-back-multiple {
    margin-left: -210px;
    padding-top: 8px;
}

.no-save-button .breadcrumb-btn-next {
    margin-left: -100px;
}

#event-wizard-container #main-content {
    max-height: calc(100svh - 315px);
}

#step-container {
    margin: 16px 0 0 0;
}

#step-container .wizard {
    box-shadow: none !important;
    border-radius: 8px;
}

#step-container > div:first-child {
    border-radius: 8px;
    margin: 0 auto;
    float: none !important;
    padding: 0;
}

.wizard-container .btn-container .cfs-wizard-btn-back {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -320px;
}

.wizard-container .btn-container .cfs-wizard-btn-next {
    width: 100px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -210px;
}

.wizard-container .btn-container .cfs-wizard-btn-finish {
    width: 210px;
    height: 38px;
    position: fixed;
    top: 126px;
    margin-left: -210px;
}

.dashlet-actions {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping of columns */
    width: 100%;
    gap: 15px;
}

.dashlet-item {
    flex: 0 0 33.33%;
    max-width: 175px;
}

#pjax-grid {
    clear: both;
}

#pjax-grid .img-thumbnail {
    max-width: 75px;
}

#error-msg {
    background-color: var(--swoogo-red-100);
    border-radius: 5em;
    top: 15%;
    color: white;
    padding: .5em 1em;
    position: fixed;
    right: 50px;
    text-align: center;
    width: 125px;
    z-index: 1005;
}

#error-msg, #set-default-colors.bsv__3 input[name*=accent_color], #set-default-colors.bsv__3 input[name*=primary_color], .dropdown li.admin {
    display: none;
}

.d-none {
    display: none !important;
}

.reorder-handle {
    cursor: ns-resize;
}

#error-msg.done .fa-check, #saving.error .fa-exclamation-triangle {
    display: inline;
}

.saving-ajax {
    background-color: rgba(83, 74, 235, 0.58) !important;
    border-color: var(--swoogo-lavender-100);
    color: white;
}

.submenu-responsive {
    top: 50%;
    color: var(--swoogo-lavender-100);
    display: block;
    position: fixed;
    margin-left: 235px;
    padding: 20px 5px 20px 0;
    z-index: 1999;
    background-color: white;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.submenu-responsive .fal {
    font-size: 20px;
    font-weight: 800 !important;
}

.submenu-responsive:hover {
    color: var(--swoogo-lavender-300);
}

#secondary-nav.account-nav .submenu-responsive {
    margin-left: 285px;
}

.submenu-responsive .collapsed .nav {
    display: none;
}

.responsive-account-setup.secondary-collapsed.nav-margin {
    margin-left: 1px !important;
    padding-left: 45px;
}

.secondary-collapsed.nav-margin {
    margin-left: 60px !important;
}

.collapsed .opened {
    display: none !important;
}

#secondary-nav.account-nav.collapsed .submenu-responsive {
    margin-left: 2px;
}

.collapsed .submenu-responsive {
    margin-left: 10px;
}

#secondary-nav.collapsed, #secondary-nav.account-nav.collapsed {
    width: 0;
    overflow: hidden;
    padding: 1px;
}

#modal-breadcrumbs {
    background-color: white;
    margin: 0;
    padding: 0 10px;
    width: 100%;
    min-height: 45px;
    position: fixed;
    z-index: 1040;
    top: 0;
    right: 0;
}

.scroll-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

.js-scrollbar {
    position: fixed;
    right: 40%;
    bottom: 12px;
    z-index: 1200;
}

.js-scrollbar #scrollable-btn {
    width: 150px;
    height: 35px;
    border-radius: 8px;
    color: var(--swoogo-pacifica-100);
    border-color: var(--swoogo-lavender-300);
}

.js-scrollbar #scrollable-btn .fa-chevron-up {
    padding-right: 5px;
}

#permissions-title .input-container {
    position: relative;
    display: inline-block;
}

#clear-search {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: gray;
    display: none;
    z-index: 3;
}

#clear-search:hover {
    color: black;
}

#suggestion-box {
    border: 1px solid #CCC;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    background-color: white;
    display: none;
    width: 70%;
    z-index: 999;
    top: 35px;
    right: 15px;
    border-radius: 8px;
}

.role-settings {
    font-size: 24px;
    padding-bottom: 5px;
    color: var(--swoogo-pacifica-100);
}

.suggestion {
    padding: 10px;
    cursor: pointer;
}

.suggestion:hover {
    background-color: #F0F0F0;
}

.search-match-bar {
    width: 5px;
    position: absolute; /* Position the child relative to the parent */
    left: 0; /* Align to the left */
    height: 75px; /* Set the height to match the parent */
    background-color: var(--swoogo-lavender-300);
}

.single-role {
    align-self: normal;
}

.role-group-single {
    padding-right: 20px;
}

.permission-box {
    width: 24px;
    margin-top: 2px;
}

.full-width.theme-update {
    max-width: 100%;
}

.full-width.theme-update.row {
    max-width: calc(100% - 30px);

}

@media (min-width: 992px) {
    #sidebar.large.open {
        min-width: 815px !important;
    }

    #sidebar.small.open {
        min-width: 400px !important;
    }
}

@media (max-width: 1550px) {
    #sidebar.large.open {
        width: 55% !important;
    }

    #sidebar.small.open {
        width: 33% !important;
    }
}

@media (min-width: 1200px) {
    #main-content, #breadcrumb-container > div {
        min-width: 750px;
    }

    #sidebar.large.open {
        width: 65%;
    }

    .event-details .dropdown-menu {
        left: -20vw;
    }
}

@media (min-width: 991px) and (max-width: 1200px) {
    .breadcrumb-main-page {
        display: none;
    }

    .event-icon.setup {
        margin-right: 0 !important;
    }
}

@media (max-width: 991px) {
    #breadcrumb-container, #main-content {
        margin-right: 25px;
        margin-left: 20px;
    }

    .website-margin #main-content {
        margin: 0;
        overflow-x: auto;
    }

}

@media (max-width: 992px) {
    #content-container.account.secondary-collapsed {
        margin-left: 250px;
    }

    .js-scrollbar {
        right: 48%;
    }

    #main-container.col-sm-7 + #sidebar {
        width: 41%;
    }

    .nav-margin .full-width {
        width: calc(100vw - 55px);
    }

    #sidebar.large.open {
        width: 85% !important;
    }

    #sidebar.small.open {
        width: 55% !important;
    }

    #event-wizard-container .btn-container .breadcrumb-btn.btn-primary,
    .btn-container .wizard-btn-back, .btn-container .wizard-btn-next {
        top: 225px !important;
        width: 85px !important;
    }

    .btn-container .wizard-btn-next {
        margin-left: -205px;
    }

    .btn-container .wizard-btn-back {
        margin-left: -310px;
    }
}

@media (max-width: 767px) {
    /*Account Dashboard*/
    body.dashboard .account #inner, body.dashboard .account #main-content {
        max-height: calc(100vh - 180px);
    }

    .account #inner, .account #main-content {
        max-height: calc(100svh - 220px);
    }

    #main-container {
        margin: 8px 0 0;
    }

    #main-content {
        margin: 0 !important;
        padding: 15px;
    }

    .support-dropdown {
        display: none;
    }

    #account-details {
        width: 60%;
        left: calc(40vw / 2);
        max-height: 40px;
    }

    .event-details .dropdown-menu {
        max-width: 80vw;
        white-space: unset;
        left: -50vw;
    }

    .icon-nav-margin .full-width, .nav-margin .full-width {
        width: 100vw;
        padding: 0;
    }

    .nav-margin, .secondary-collapsed.nav-margin, .icon-nav-margin {
        margin-left: 0 !important;
    }

    .col-sm-12 {
        padding: 0;
    }

    .row {
        margin: 0;
    }

    #content-container {
        top: 158px;
        left: 0;
    }

    #content-container.account {
        top: 100px;
    }

    .event-details {
        text-align: center;
        width: 66%;
        z-index: 1030;
        position: fixed;
        top: 0;
        left: 17%;
        max-height: 40px;
    }

    .event-details .dropdown-menu {
        overflow: hidden;
    }

    #breadcrumb-container {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 6px 0 0 0;
        z-index: 3;
        width: 100vw;
        border-top: 1px solid #E6E9EB;
        padding-left: 20px;
    }

    #breadcrumb-container > div:first-child {
        padding: 1px 0;
    }

    .breadcrumb {
        margin: 9px 0;
    }

    .breadcrumb li, .breadcrumb > li + li:before {
        display: none;
    }

    .breadcrumb li:last-child {
        display: block;
    }

    #event-wizard-container .btn-container .breadcrumb-btn.btn-primary,
    .btn-container .wizard-btn-back, .btn-container .wizard-btn-next {
        top: unset !important;
        width: 75px !important;
    }

    #event-wizard-container .btn-container .wizard-btn-back, .btn-container .wizard-btn-next {
        bottom: 0;
        position: fixed;
        top: unset !important;
        z-index: 4;
        margin-bottom: 15px;
    }

    .btn-container .wizard-btn-next {
        margin-left: -150px;
    }

    .btn-container .wizard-btn-back {
        margin-left: -240px;
    }

    .js-scrollbar {
        bottom: 0px;
    }
}

@media (max-width: 400px) {
    #account-details {
        top: 10px;
    }
}