html {
    position: relative;
    min-height: 100%;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    font-family: Menlo, Consolas, "Roboto Mono", monospace !important;
    font-size: 0.94em;
}

@media (max-width: 767.98px) {
    svg .shift {
        transform: translate(7.5px, 0) scale(1.6);
    }

    div.gryd-grid span.option a {
        width: 1.2em !important;
        height: 1.2em !important;
        font-size: 0.750em !important;
    }

    .exit-button {
        position: relative;
        transform: none;

    }

    .grydr-exit {
        display: none;
    }

    .exit-dropdown {
        display: block;
        margin-top: 10px;
        font-size: 1em;
        width: 14em;
        height: 3.3em;
        background-color: var(--bs-purple);
        border-radius: 0em 0em 2em 2em;
        padding: 1em;
        margin-top: 0;
        border: 1px solid #fff;
        border-top: none;
    }
}


.hidden {
    display: none;
}

.submenu-bg {
    background-color: rgba(255, 193, 7, 0.35);
    border-radius: 2em;
}

.gryd-confirm-modal {
    z-index: 10;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.gryd-confirm-modal-content {
    background: #000;
    padding: 20px;
    width: 300px;
    margin: 120px auto;
    border-radius: 2em;
    border: 1px solid var(--bs-purple);
    
}

#card-element {
    
    min-height: 40px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.StripeElement {
    width: 100%;
}

.floating-panel h3 {
    font-size: 1em;
}

.floating-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 300px;
    background: #222;
    color: #fff;
    padding: 10px;
    z-index: 999;
    border-radius: 2em;
    border: 2px solid var(--bs-yellow-gryd);
}

    .floating-panel.minimized {
        height: 30px;
        overflow: hidden;
    }

.streaming-plyr {
    border-radius: 2em;
    border: 1px solid var(--bs-purple);
    padding: 0.5em 1em;
}

.streaming-frm {
    width: 100%;
    border-radius: 2em;
    border: 2px solid var(--bs-purple);
    padding: 1em;
}

.toggle-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
}

p.quick-nav {
    padding: 0 1em;
    line-height: 2em;
}

    p.quick-nav a {
        border: 2px solid var(--bs-purple);
        border-top: 0;
        border-bottom: 0;
        border-radius: 1em;
        padding: 0 1em;
    }

.detail-block {
    border: 1px solid var(--bs-yellow);
    padding: 1em;
    border-radius: 2em 2em 0 0;
    background-color: rgba(255, 193, 7, 0.20) !important;

}

.detail-full {
    border-radius: 2em !important;
    margin-bottom: 1em;
}

    .detail-block p {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.detail-title {
    border: 1px solid var(--bs-yellow-gryd);
    border-radius: 0;
    padding: 0.2em 1em;
    background: rgba(255, 193, 7, 0.80) !important;
    color: #000;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .detail-top {
        border-radius: 1em 0 0 0 !important;
    }

.detail-bottom {
    border-radius: 0 0 0 1em !important;
}

.make-booking a {
    border: 2px solid var(--bs-yellow-gryd);
    border-radius: 1em;
    padding: 0.5em 1em;
    display: inline-block;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    transition: 
        border 0.8s ease-in-out, 
        background-color 0.8s ease-in-out, 
        border-top 0.8s ease-in-out, 
        border-left 0.8s ease-in-out, 
        border-right 0.8s ease-in-out, 
        border-bottom 0.8s ease-in-out;
}

.make-booking a:hover {
    border: 2px solid var(--bs-yellow-gryd);
    background-color: var(--bs-purple);
    border-top:;
    border-left: 0;
    border-right: 0;
}

button.action-btn {
    margin-top: 1em;
}

button.new-button-short {
    border: 2px solid var(--bs-yellow-gryd);
    border-radius: 1em;
    padding: 0.3em 0.5em;
    display: inline-block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: border 0.8s ease-in-out, background-color 0.8s ease-in-out, border-top 0.8s ease-in-out, border-left 0.8s ease-in-out, border-right 0.8s ease-in-out, border-bottom 0.8s ease-in-out, border 0.8s ease-in-out;
    background-color: rgba(255, 172, 5, 0.5);
}

button.new-button-short:hover {
    border: 2px solid var(--bs-yellow-gryd);
    background-color: rgba(175, 130, 241, 0.7);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

button.new-button {
    border: 2px solid var(--bs-yellow-gryd);
    border-radius: 1em;
    padding: 0.5em 1em;
    display: inline-block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: border 0.8s ease-in-out, background-color 0.8s ease-in-out, border-top 0.8s ease-in-out, border-left 0.8s ease-in-out, border-right 0.8s ease-in-out, border-bottom 0.8s ease-in-out, border 0.8s ease-in-out;
    background-color: rgba(255, 172, 5, 0.5);
}

button.new-button:hover {
    border: 2px solid var(--bs-yellow-gryd);
    background-color: rgba(175, 130, 241, 0.7);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}


a.new-button {
    color: #fff;
    border: 2px solid var(--bs-yellow-gryd);
    border-radius: 1em;
    padding: 0.5em 1em;
    display: inline-block;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: border 0.8s ease-in-out, background-color 0.8s ease-in-out, border-top 0.8s ease-in-out, border-left 0.8s ease-in-out, border-right 0.8s ease-in-out, border-bottom 0.8s ease-in-out, border 0.8s ease-in-out;
    background-color: rgba(255, 172, 5, 0.5);
}

a.new-button:hover {
    border: 2px solid var(--bs-yellow-gryd);
    background-color: rgba(175, 130, 241, 0.7);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

.new-button-short svg {
    height: 1.5em;
    padding-top: 0;
}

.new-button-short svg path {
    fill: #000; /* default color */
    transition: fill 0.8s ease;
}

.new-button-short:hover svg path {
    fill: #fff !important; /* hover color */
}

.avatar-choice {
    width: 100%;
    transition: transform 0.8s ease-in-out;
}

    .avatar-choice:hover {
        cursor: pointer;
        transform: scale(1.2);
    }


.dollar-char {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #999;
}

.dollar-field {
    padding-left: 20px;
}

.doorway {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 220px;
    border: 3px solid var(--bs-purple);
    transform: rotate(270deg);
    border-radius: 0em 4em 0em 0em;
    border-style: solid;
    border-bottom: 5px solid var(--bs-purple);
    border-left: #000 3px dotted;
}

.exit-button-right {
    padding: 0.3em 1.5em 0.3em 1.5em;
    border-radius: 2em 2em 2em 2em;
    margin: 0.3em 0.5em;
    text-wrap-mode: nowrap;
    text-transform: uppercase;
    font-weight: bold;
    background-color: rgba(111, 66, 193, 0.3);
    transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
    border: 3px solid var(--bs-purple);
    
}

.exit-button {
    padding: 0.3em 1.5em 0.3em 1.5em;
    border-radius: 2em 2em 2em 2em;
    margin: 0.3em 0.5em;
    text-wrap-mode: nowrap;
    text-transform: uppercase;
    font-weight: bold;
    background-color: rgba(111, 66, 193, 0.3);
    transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
    border: 3px solid var(--bs-purple);
    
}

.exit-button-right span {
    transform: rotate(180deg);
    display: inline-block;
}

.event-panel-btn {
    border: 3px solid var(--bs-yellow-gryd);
    padding: 0.5em 1em;
}

.btn-first {
    border-radius: 1em 0em 0em 1em;
}

.btn-last {
    border-radius: 0em 1em 1em 0em;
}

.event-panel-btn:hover {
    background-color: var(--bs-purple-gryd);
}

.drop-inner {
    width: 49%;
    padding-left: 1em;
}

.send-inner {
    width: 49%;
    text-align: right;
    padding-right: 2em;
}

@media (min-width: 767.98px) {
    .exit-button {
        transform: rotate(270deg);
        height: 45px;
        top: 204px;
        position: absolute;
        border-radius: 0em 2em 2em 0em;
        border-left: var(--bs-purple) 3px solid;
        transform-origin: bottom left;
    }

    .exit-button-right {
        transform: scaleY(-1) scaleX(-1) rotate(270deg);
        height: 45px;
        top: 203px;
        position: absolute;
        border-radius: 2em 0em 0em 2em;
        border-left: var(--bs-purple) 3px solid;
        transform-origin: bottom right;
    }

    .grydr-exit {
        position: relative;
    }

    .exit-dropdown {
        display: none;
    }


}

.pulse-once {
    animation: pulse 1.5s ease-out;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.dropdown-menu {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    display: block; /* important: let Bootstrap handle visibility */
    visibility: hidden;
}

    .dropdown-menu.show {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

.dropdown-menu {
    border-radius: 2em;
    border: 1px solid var(--bs-purple-gryd);
    padding-top: 2em;
    padding-bottom: 2em;
    min-width: 8em;

}

.dropdown-menu {
    left: 50% !important;
    transform: translateX(-50%) translateY(100px) !important;
}

.dropdown-menu li {
    transition: background-color ease-in-out 1s;
}

.dropdown-menu li:hover {
    background-color: var(--bs-purple-gryd);
}

    .dropdown-menu li a {
        transition: background-color ease-in-out 1s;
    }

    .dropdown-menu li a:hover {
        background-color: var(--bs-purple-gryd);
    }

    /* iPhone / iPad */
    @supports (-webkit-touch-callout: none) {
        body {
            font-size: 0.94em; /* Menlo baseline */
        }
    }

    /* Windows (Consolas baseline) */
    @media screen and (min--moz-device-pixel-ratio:0) {
        body {
            font-size: 0.94em;
        }
    }

    /* Android (Roboto Mono is larger → scale down) */
    @supports (-webkit-appearance: none) and (not (-webkit-touch-callout: none)) {
        body {
            font-size: 0.89em; /* adjust until visually perfect */
        }
    }

.options-grid-close {
    position: absolute;
    border: 3px solid var(--bs-yellow-gryd);
    margin-left: 0.3em;
    border-radius: 2.5em 0em 1em 0em;
    margin-top: 0em;
    line-height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    cursor: pointer;
    transition: background-color 0.8s ease-in-out, border 0.8s ease-in-out;
}

.options-grid-close:hover {
    background-color: var(--bs-purple);
    border: 3px solid var(--bs-purple);
}

.options-grid-close2 {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
}

#options-grid {
    position: relative;
    
}
.js-alert-theme {
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    transition: opacity .3s ease;
}

.popup-alert {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .3s ease;
}

    .popup-alert.visually-hidden {
        opacity: 0;
        pointer-events: none;
    }

.popup-content {
    background: #1a1a1a;
    color: #fff;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    border: 2px solid var(--bs-purple);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    text-align: center;
    max-width: 300px;
    width: 90%;
}

.popup-close-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bs-yellow-gryd);
    color: #000;
    border: none;
    border-radius: 1em;
    cursor: pointer;
    transition: background 0.8s ease-in-out, color 0.8s ease-in-out;
}

    .popup-close-btn:hover {
        background: var(--bs-purple);
        color: #fff;
    }



.profile-grid-close {
    position: absolute;
    border: 3px solid var(--bs-yellow-gryd);
    margin-left: 0.3em;
    border-radius: 2.5em 0em 1em 0em;
    margin-top: 0em;
    line-height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    cursor: pointer;
    transition: background-color 0.8s ease-in-out, border 0.8s ease-in-out;
}

.profile-grid-close:hover {
    background-color: var(--bs-purple);
    border: 3px solid var(--bs-purple);
}

.profile-grid-close2 {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    z-index: 10;
}

#profile-grid {
    position: relative;
}


.grydr-option-btn {
    background-color: var(--bs-yellow-gryd);
    padding: 0.5em 1em;
    border-radius: 2em;
    color: #000;
    border: 2px solid #fff;
}
.follow-btn {
    border: 2px solid var(--bs-purple-gryd);
    border-radius: 1em;
    padding: 0.5em 1em;
    background-color: var(--bs-purple);
    border-top: 0;
    border-bottom: 0;
    transition: background-color ease-in-out 0.8s, border ease-in-out 0.8s, color ease-in-out 0.8s;
}
    .follow-btn:hover {
        border: 2px solid var(--bs-yellow-gryd);
        background-color: var(--bs-yellow);
        color: #000;
        border-top: 0;
        border-bottom: 0;
        
    }
.options-dropdown {
        
        margin-top: 10px;
        font-size: 1em;
        width: 14em;
        height: 3.3em;
        background-color: var(--bs-purple);
        border-radius: 0em 0em 2em 2em;
        padding: 1em;
        margin-top: 0;
        border: 1px solid var(--bs-purple);
        border-top: none;
}
.avatar-select-outer {
    background-color: rgba(111, 66, 193, 0.3);
    border: 3px solid var(--bs-purple);
    margin: 0.3em;
    border-radius: 2.5em;
    padding: 0.8em;
    padding-top: 3em;
}

    .character-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 2em;
        margin: 2em;
    }

    .character-card {
        border: 2px solid #333;
        padding: 15px;
        border-radius: 1em;
        text-align: center;
        cursor: pointer;
        background: #1a1a1a;
        color: #fff;
        transition: 0.8s;
    }

    .character-card.locked {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .character-card:hover:not(.locked) {
        transform: scale(1.05);
        border-color: var(--bs-purple);
    }

    .sys-chat {
        color: #999;
        font-style: italic;
    }

    .chat-outer {
        padding-right: 0.2em;
        border: 3px solid var(--bs-purple);
        background-color: rgba(111, 66, 193, 0.3);
    }

    .chat-detail {
        overflow: auto !important;
        height: 400px;
        overflow-y: scroll;
        line-height: 1.4em;
        padding: 1.5em 2em 0.5em 2em;
    }

    .grydr-inventory button {
    }

    .grydr-item {
        height: 38px;
    }



    .grydr-item button {
        border: 1px solid #ffac05;
        margin: 0.3em 0.5em;
        padding: 0.3em 0.5em 0.3em 0.5em;
        border-radius: 1em;
    }

    .grydr-exit {
        position: relative;
        z-index: 10;
    }

.dropdown-toggle::after {
    display: none;
}

.exit-button:hover {
    background-color: rgba(111, 66, 193, 0.8);
    color: var(--bs-yellow-gryd);
}

.exit-button-right:hover {
    background-color: rgba(111, 66, 193, 0.8);
    color: var(--bs-yellow-gryd);
}

.grydr-action {
    text-align: center;
}
.grydr-action button {
    border: 1px solid #fff;
    margin: 1em 0.2em;
    padding: 0.5em 1em;
    border-radius: 2em;
    background-color: var(--bs-purple);
}

    .grydr-area-name {
        justify-content: center;
        display: flex;
    }

    .grydr-area-name .item {
        position: relative;
        justify-content: center;
        display: flex;
        width: 100%;
        text-align: center;
        height: 250px;
    }

    .grydr-area-name .item img {
        position: absolute;
        height: 300px;
        z-index: 5;
        cursor: pointer;
    }

    .grydr-area-name .item img:hover {
        transform: scale(1.10);
        transition: transform 0.8s ease-in-out;
    }

    .grydr-area-name .item span {
        border: 5px solid var(--bs-yellow-gryd);
        height: 4em;
        border-radius: 2em;
        padding: 0.3em 2em;
        vertical-align: top;
        display: flex;
        text-transform: uppercase;
        font-weight: bold;
        font-size:;
        background-color: transparent;
        z-index: 0;
        top: -2em;
        position: absolute;
        font-size: 2em;
        color: var(--bs-yellow);
    }

    .system-message {
        color: #ccc;
        font-style: italic;
        white-space: pre-wrap;
    }

    .grydr-player {
        position: relative;
        height: 320px;
        display: flex;
        overflow: scroll;
        padding: 2em;
        padding-bottom: 1em;
        overflow: auto;
    }

    .player-outer {
        padding: 1em;
    }

    .grydr-player .entity {
        position: absolute;
    }

        .grydr-player .entity .avatar {
            height: 100px;
            border-radius: 50px;
            transition: transform 0.8s ease-in-out;
        }

   .grydr-player .player .avatar {
        background: rgba(255, 172, 5, 0.5);
        border: 1px solid var(--bs-yellow-gryd);
    }

    .grydr-player .npc .avatar {
        background: rgba(175, 130, 241, 0.5);
        border: 1px solid var(--bs-purple-gryd);
    }

    .grydr-player .bot .avatar {
        background: rgba(53, 191, 16, 0.5);
        border: 1px solid var(--bs-green-gryd);
    }

    .grydr-player .alt .avatar {
        background: rgba(54, 128, 212, 0.5);
        border: 1px solid var(--bs-blue-gryd);
    }

    .grydr-select .avatar {
        height: 100px;
        border-radius: 50px;
        background: rgba(255, 172, 5, 0.5);
        border: 1px solid var(--bs-yellow-gryd);
    }
.grydr-transport .icon {
    background: rgba(54, 128, 212, 0.5);
    border: 1px solid var(--bs-blue-gryd);
    height: 100px;
    border-radius: 50px;
    transition: transform 0.8s ease-in-out;
    
}
    .grydr-transport .icon:hover {
        transform: scale(1.10);
        
    }
.grydr-transport .transport {
    position: relative;
    justify-content: center;
    display: flex;
    text-align: center;
    width: 100%;
    z-index: 3;
    transition: z-index 0.8s ease-in-out;
    cursor: pointer;
}
    .grydr-transport .transport:hover {
        z-index: 7;
    }
    .grydr-transport .transport-inner-0 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 130px;
        transition: margin-left 0.8s ease-in-out;
        top: 30px;
    }
    .grydr-transport .transport-inner-0:hover {
        margin-left: 180px;
    }
    .grydr-transport .transport-inner-1 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: -130px;
        top: 30px;
    }
    .grydr-transport .transport-inner-1:hover {
        margin-left: -180px;
    }
    .grydr-transport .transport-inner-2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 150px;
        top: 50px;
    }
    .grydr-transport .transport-inner-2:hover {
        margin-left: 200px;
    }
    .grydr-transport .transport-inner-3 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: -150px;
        top: 50px;
    }
    .grydr-transport .transport-inner-3:hover {
        margin-left: -200px;
    }

    .player:hover {
        z-index: 998;
        cursor: pointer;
    }

.bot:hover {
    z-index: 998;
    cursor: pointer;
}

.npc:hover {
    z-index: 998;
    cursor: pointer;
}

    .entity .avatar:hover {
        z-index: 999;
        transform: scale(1.15);
    }

    .player:hover .player-inner span {
        background-color: var(--bs-purple-gryd);
    }

    .grydr-player .entity span {
        transform: rotate(90deg);
        position: absolute;
        top: 120px;
        text-align: center;
        left: 65px;
        text-transform: uppercase;
        font-size: 1.2em;
        color: #000;
        font-weight: bold;
        background-color: #ffac05;
        border: 1px solid #fff;
        padding: 0.1em 0.5em;
        border-radius: 1em;
        transform-origin: top left;
        height: 30px;
        text-wrap: nowrap;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .grydr-player .player span {
        background-color: #ffac05;
    }

    .grydr-player .npc span {
        background-color: #a378e2;
    }

    .grydr-player .bot span {
        background-color: #35bf10;
    
    }

    .grydr-player .alt span {
        background-color: #05acff;
    }

    .send-outer {
        width: 100%;
        justify-content: right;
        display: flex;
    }
    .here2 {
        background-color: rgba(175, 130, 241, 0.2);
    }
    .here {
    
        background-color: rgba(255, 172, 5, 0.2);
        border-radius: 2em;
        border: 1px solid var(--bs-yellow-gryd);
    }
    .tag {
        opacity: 0;
        transition: opacity 0.5s ease;
        font-family: monospace;
    }

    .tag.visible {
        opacity: 1;
    }

    .tag text {
        font-size: 1.4em;
        stroke: none;
        stroke-width: 0.1;
    }

    .carousel-img {
        border-radius: 2.5rem 2.5rem 0em 0em;
    }

    .hero {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9; /* or whatever your hero uses */
        overflow: hidden;
    }

    .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* remove if you want clickable tags */
        z-index: 100;
        border-radius: 2.5rem;
    }

    .admin-list {
        margin-bottom: 2em;
    }

    .admin-list .admin-area a {
        border: 1px solid var(--bs-purple);
        border-radius: 2em;
        padding: 0.5em 1em;
        margin-left: 0.2em;
        line-height: 2.5em;
        text-wrap: nowrap;
        transition: background-color 1.2s ease-in-out, color 1.2s ease-in-out;
    }

    .admin-list .admin-area a:hover {
        background-color: var(--bs-purple-gryd);
    }


    .chat-send {
        margin-top: 0;
        width: 14em;
        margin-bottom: 1em;
        line-height: 3em;
        border-radius: 0em 0em 2em 2em;
        font-size: 1em;
        background-color: var(--bs-purple);
        border: 1px solid #fff;
        border-top: none;
    }

    .chat-box {
        background-color: #ffac05;
        width: 100%;
        padding: 1em;
        font-family: monospace;
        border-radius: 2em;
        margin-top: 0em;
        border: 2px #fff solid;
        color: #000;
        font-weight: bold;
    }

.share-lnk {
    position: absolute;
    bottom: -1.25em;
    border: 2px solid var(--bs-yellow-gryd);
    padding: 0.5em 1.5em;
    right: -0.8em;
    border-radius: 2.5em 0 2.5em 0;
    cursor: pointer;
    color: #000;
    background-color: var(--bs-yellow-gryd);
    transition: background-color 0.8s ease-in-out, border 0.8s ease-in-out, color ease-in-out 0.8s;
}

    .share-lnk:hover {
        background-color: var(--bs-purple);
        border: 2px solid var(--bs-purple-gryd);
        color: #fff;
    }

.share-btn {
    position: absolute;
    top: -0.1em;
    border: 2px solid var(--bs-yellow-gryd);
    padding: 0.5em 1em;
    left: -0.1em;
    border-radius: 1.5em 0 1.5em 0;
    cursor: pointer;
    color: #000;
    background-color: var(--bs-yellow-gryd);
    transition: background-color 0.8s ease-in-out, border 0.8s ease-in-out, color ease-in-out 0.8s;
}

    .share-btn:hover {
        background-color: var(--bs-purple);
        border: 2px solid var(--bs-purple-gryd);
        color: #fff;
    }

.share-btn-rt {
    position: absolute;
    top: -0.1em;
    border: 2px solid var(--bs-yellow-gryd);
    padding: 0.5em 1em;
    right: -0.1em;
    border-radius: 0 1.5em 0 1.5em;
    cursor: pointer;
    color: #000;
    background-color: var(--bs-yellow-gryd);
    transition: background-color 0.8s ease-in-out, border 0.8s ease-in-out, color 0.8s ease-in-out;
}

.share-icon {
    transition: filter 0.8s ease-in-out;
}

    .share-btn-rt:hover {
        background-color: var(--bs-purple);
        border: 2px solid var(--bs-purple-gryd);
        color: #fff;
    }
        .share-btn:hover .share-icon,
        .share-btn-rt:hover .share-icon {
            filter: invert(100%) brightness(200%);
        }

.area-detail {
    font-family: monospace;
    max-width: 800px;
    margin: 20px auto;
    padding: 0.5em;
    margin-bottom: 0.5em;
}

    .register-cb {
        accent-color: var(--bs-border-color);
    }

    .cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.85);
        color: #fff;
        padding: 12px 16px;
        z-index: 9999;
    }

    .cookie-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        text-align: center;
    }

    .carousel-caption {
        color: #fff !important;
    }

    .carousel-caption p,
    .carousel-caption small,
    .carousel-caption h5 {
        color: #fff !important;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: transparent; /* keep background clean */
        background-size: 100%, 100%;
        width: 3rem;
        height: 3rem;
        /*filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));*/
    }

    /* LEFT ARROW */
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 16 16'%3e%3cpath stroke-width='3' stroke='%23000' d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    }

    /* RIGHT ARROW */
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 16 16'%3e%3cpath stroke-width='3' stroke='%23000' fill='%23af82f1' d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 1 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        /*background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'> <path stroke-width='3' stroke='%23af82f1' fill='af82f1' d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/> </svg>");*/
    }

    .carousel-caption {
        background: rgba(0, 0, 0, 0.45);
        padding: 1.5rem;
        border-radius: 0.5rem;
        max-width: 700px;
        margin: 0 auto;
    }

    #heroCarousel .carousel-item img {
        max-height: none;
    }

    .carousel-item img {
        max-height: 400px;
        object-fit: cover;
        width: 90%;
        border-radius: 2rem 2rem 0rem 0rem;
    }
    .steam-preview-wrapper {
        text-align: center;
    }
.steam-preview-wrapper img {
    border-radius: 2rem;
    width: 75%;
}

.reveal {
    
    
    overflow: hidden;
}

    .reveal img {
        width: 100%;
        /*height: 100%;
        object-fit: cover;
         Start as a tiny circle in the center */
        clip-path: circle(0% at 50% 50%);
        /* Animate to full reveal */
        animation: revealCircle 4.2s ease-out forwards;
        opacity: 0;
    }

/* Reveal (circle expands + fade in) */
.reveal-in {
    animation: revealCircle 8.2s ease-out forwards;
}

/* Hide (circle collapses + fade out) */
.reveal-out {
    animation: hideCircle 8.2s ease-in forwards;
}

@keyframes revealCircle {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }

    40% {
        opacity: 0.4;
    }

    100% {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }
}

@keyframes hideCircle {
    0% {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }

    60% {
        opacity: 0.4;
    }

    100% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }
}

.filtered {
    filter: url(#cubeWave);
}

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

.hero-item {
    /*padding: 0.15em 0.3em 0.25em 0em;*/
}

    .top img {
        border-radius: 2.5em 2.5em 0em 0em;
    }

.bottom img {
    border-radius: 0em 0em 2.5em 2.5em;
}

.chat-embed-youtube {
    position: relative;
    display: inline-block;
    vertical-align:top;
    width: 100%;
}

.chat-embed-giphy {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.chat-embed-tenor {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.chat-embed-steam {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width:100%;

}

.yt-thumb-wrapper {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.chat-embed-thumb {
    width: 240px;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}

.steam-text-link {
    cursor: pointer;
    color: var(--bs-purple-gryd);
}

    .steam-text-link:hover {
        color: var(--bs-yellow);
    }

.giphy-text-link {
    cursor: pointer;
    color: #4ea3ff;
    text-decoration: underline;
}

    .giphyy-text-link:hover {
        color: #82c3ff;
    }

.giphy-embed {
    border-radius: 2em;
    border: 2px solid var(--bs-yellow-gryd);
}

.giphy-text-wrapper {
    cursor: pointer;
}

.giphy-iframe-wrapper {
    text-align: center;
}

.tenor-text-link {
    cursor: pointer;
    color: #4ea3ff;
    text-decoration: underline;
}

    .tenor-text-link:hover {
        color: #82c3ff;
    }

.tenor-text-wrapper {
    cursor: pointer;
}

.tenor-iframe-wrapper {
    text-align: center;
}

.tenor-iframe-wrapper iframe {
    border-radius: 2em;
    border: 2px solid var(--bs-yellow-gryd);
}

.yt-text-wrapper span {
    color: var(--bs-purple-gryd);
    cursor: pointer;
}

.yt-title {
    margin-top: 6px;
    font-size: 14px;
    color: #ddd;
    text-align: center;
}

.yt-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    pointer-events: none;
}

.yt-iframe-wrapper {
    text-align: center;
}
    .yt-iframe-wrapper iframe {
        width: 75%;
        border: 2px solid var(--bs-yellow-gryd);
        border-radius: 2em;
        height: 200px;
    }


    .promo-ad a.venue-name {
        font-weight: bolder;
    }

    .promo-ad a.venue-address {
        font-size: 75%;
    }

    .promo-ad {
        padding-left: 0em;
    }

        .promo-ad li {
            border: 1px solid var(--bs-purple-gryd);
            border-top: 0px;
            border-bottom: 0px;
            border-radius: 1em;
            padding-left: 0em;
            margin-right: 0em;
            transition: background-color 0.8s ease-in-out;
            list-style: none;
            font-size: 2em;
            text-align: center;
            font-size: clamp(0.8em, 2.5vw, 1.2em);
            margin-top: 1em;
        }

            .promo-ad li > a.promo-ad-standard {
                display: block;
                width: 100%;
                height: 100%;
                transition: color 0.8s ease-in-out;
            }

                .promo-ad li > a.promo-ad-standard:hover {
                    color: var(--bs-yellow-gryd);
                }

            .promo-ad li > a.ads {
                transition: color 0.8s ease-in-out, background-color 0.8s ease-in-out, border 0.8s ease-in-out, border-radius 0.8s ease-in-out;
                border: 1px solid none;
                border-top: 0px;
                border-bottom: 0px;
                border-radius: 1em;
                padding-left: 1em;
                padding-right: 1em;
                margin-right: 0em;
            }

                .promo-ad li > a.ads:hover {
                    border: 2px solid var(--bs-yellow-gryd);
                    border-top: 0px;
                    border-bottom: 0px;
                    border-radius: 1em;
                    padding-left: 1em;
                    padding-right: 1em;
                    margin-right: 0em;
                    color: var(--bs-yellow-gryd);
                }

            .promo-ad li:hover > a.ads {
                background-color: #000;
            }

            .promo-ad li > a.promo-ad-special {
                transition: color 0.8s ease-in-out, background-color 0.8s ease-in-out, border 0.8s ease-in-out;
                border: 1px solid #000;
                border-top: 0px;
                border-bottom: 0px;
                border-radius: 1em;
                padding-left: 1em;
                padding-right: 1em;
                margin-right: 0em;
            }

                .promo-ad li > a.promo-ad-special:hover {
                    color: var(--bs-yellow-gryd);
                }

            .promo-ad li:hover > a.promo-ad-special {
                background-color: #000;
            }

            .promo-ad li:hover {
                background-color: var(--bs-purple-gryd);
            }

    .rotate-90 {
        transform: rotate(90deg);
        transform-origin: left top;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
    }

    .vertical-wrapper-a {
        position: absolute;
        top: 1em;
        left: 2em;
    }

    .vertical-wrapper {
        position: absolute;
        bottom: -1em;
        right: 2em;
    }

    .flip-180 {
        transform: rotate(180deg);
        transform-origin: center;
        display: inline-block;
    }

    .vertical-up {
        transform: rotate(90deg);
        transform-origin: bottom right;
        white-space: nowrap;
        display: inline-block;
    }

    .vertical-down {
        transform: rotate(90deg);
        transform-origin: top left;
        white-space: nowrap;
        display: inline-block;
    }

    .clip-mask {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px; /* hides last 20px */
        background: inherit; /* matches parent background */
        z-index: 10; /* sits above rotated text */
    }

    .rotate-n90 {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: rotate(-90deg);
        transform-origin: bottom right;
        white-space: nowrap;
        display: inline-block;
        overflow: hidden;
        /*position: relative;
    top: 0;
    right: -100%;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;*/
    }

    .gg-ad-font {
        font-size: 2em;
        text-align: justify;
        font-size: clamp(1.1em, 2.5vw, 1.5em);
    }

    .my-card {
        background: rgba(255, 255, 255, 0.15); /* your translucent style */
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .consent-highlight {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        padding: 14px 18px;
        border-radius: 10px;
        margin-bottom: 20px;
        font-size: 0.95rem;
        color: #fff;
    }

    .payment-container {
        max-width: 420px;
        margin: 40px auto;
        padding: 24px;
        border-radius: 12px;
        background: #1e1e1e;
        border: 1px solid #333;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        /*background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e5;*/
    }

        .payment-container h2 {
            margin-bottom: 12px;
            font-size: 22px;
            font-weight: 600;
            color: #f0f0f0;
        }

    .payment-summary {
        margin-bottom: 20px;
        font-size: 16px;
        color: #f0f0f0;
    }

    #payment-element {
        margin-bottom: 24px;
        background: #2a2a2a;
        border: 1px solid #444;
    }

    .pay-button {
        width: 100%;
        padding: 14px;
        background: #635bff;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .pay-button:hover {
            background: #5146ff;
        }

    #payment-message {
        margin-top: 16px;
        font-size: 14px;
        color: #444;
    }

    span.short-desc {
        padding-right: 3em;
    }

    .gryd-layout {
        margin: 1em;
    }

    .nav-item {
        border: 1px solid var(--bs-purple-gryd);
        border-top: 0px;
        border-bottom: 0px;
        border-radius: 1em;
        padding-left: 1em;
        margin-right: 1em;
        transition: background-color 0.8s ease-in-out;
    }

        .nav-item-hover {
            background-color: var(--bs-purple-gryd);
        }

        .nav-item:hover {
            background-color: var(--bs-purple-gryd);
        }

    a.g-nav {
        fill: #af82f1;
        transition: fill 0.8s ease-in-out;
    }

        a.g-nav:hover {
            fill: #ffac05;
        }

    a.g-svg-btn {
        fill: #fff;
        transition: fill 1.3s ease-in-out;
    }

        a.g-svg-btn:hover {
            fill: #ffac05;
        }

    .levelcontent {
        max-width: 670px;
    }

    @keyframes electric-flicker {
        0% {
            stroke-dasharray: 20, 1;
            stroke: #ffac05;
        }

        50% {
            stroke-dasharray: 1, 1;
            stroke: #000;
        }
    }

    .bullets-left {
        list-style: none;
        text-align: left;
    }

        .bullets-left li {
            position: relative;
            padding-left: 0.8em; /* space for bullet on the right */
        }

            /* remove default marker (for safety) */
            .bullets-left li::marker {
                content: none;
            }

            /* custom bullet on the right */
            .bullets-left li::before {
                content: "•";
                position: absolute;
                left: 0;
                top: 0;
                color: var(--bs-purple-gryd);
            }

    .angle-heading {
        height: 0;
    }

    .bounding-angle {
        margin-left: 1em;
    }

    .angle-heading svg {
        transform: rotate(90deg);
        transform-origin: top left;
        margin-top: 0em !important;
    }

    .inner-test {
        margin-left: 3em;
    }

    .inner-mid {
        margin-left: 4em;
        margin-right: 2em;
        margin-top: 1em;
    }


    .bullets-right {
        list-style: none;
        text-align: right;
        padding-right: 2rem;
    }

        .bullets-right li {
            position: relative;
            padding-right: 0.8em; /* space for bullet on the right */
        }

            /* remove default marker (for safety) */
            .bullets-right li::marker {
                content: none;
            }

            /* custom bullet on the right */
            .bullets-right li::before {
                content: "•";
                position: absolute;
                right: 0;
                top: 0;
                color: var(--bs-purple-gryd);
            }

    .nav-link {
        transition: transform 0.5s ease-in-out, color 0.5s ease-in-out;
    }

        .nav-link:hover {
            /*transform: scale(1.1);*/
            color: #ffac05 !important;
        }

    a.electric-path:hover {
        stroke-width: 0.01em;
        stroke: #ffac05;
        animation: electric-flicker 2.5s infinite alternate;
    }

    .opacity-80 {
        background: rgba(0, 0, 0, 0.70) !important;
        /*opacity: 0.80 !important;*/
    }

    .opacity-85 {
        background: rgba(0, 0, 0, 0.75) !important;
        /*opacity: 0.85 !important;*/
    }

    .opacity-90 {
        background: rgba(0, 0, 0, 0.80) !important;
        /*opacity: 0.90 !important;*/
    }

    .accordion-item {
        border: 0;
        border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
        background-color: transparent !important;
    }

    .accordion-header {
        border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    }

    .opacity-95 {
        background: rgba(0, 0, 0, 0.85) !important;
        /*opacity: 0.95 !important;*/
    }

    h1.gg-h1 {
    }

    span.gg-h2 svg {
        line-height: 1.2em;
        height: 0.8em;
        display: inline-block;
        fill: var(--bs-yellow-gryd);
    }

    span.gg-h1 svg {
        line-height: 1.2em;
        height: 0.8em;
        display: inline-block;
        fill: var(--bs-yellow-gryd);
    }

span.playing svg {
    line-height: 2.2em;
    height: 1.8em;
    display: inline-block;
    fill: var(--bs-yellow-gryd);
    margin-top: 1em;
    display: inline-block;
}

    .gg-font-c ul {
        padding-left: 0;
        margin: 0;
    }

    .gg-font-c li {
        list-style: none;
        border: 1px solid var(--bs-purple-gryd);
        border-top: 0px;
        border-bottom: 0px;
        border-radius: 1em;
        padding-left: 0em;
        margin-right: 0em;
        margin-top: 0.6em;
        transition: background-color 0.8s ease-in-out;
        padding: 0em;
    }

        .gg-font-c li a {
            display: block;
            padding: 0.2em 0.8em;
            transition: transform 0.8s ease-in-out, color 0.8s ease-in-out;
        }

    .gg-font-c {
        /*font-family: Consolas;*/
    }

        .gg-font-c li:hover {
            color: #ffac05 !important;
            background-color: #af82f1;
        }

    .accordion .accordion-collapse {
        transition: height 0.8s ease; /* slower + smoother */
    }

.mbr-btn {
    border-radius: 2em;
    transition: background-color ease-in-out 0.8s, color ease-in-out 0.8s;
}

.mbr-btn:hover {
    background-color: var(--bs-purple-gryd);
}

.mbr-btn:hover svg {
    fill: var(--bs-yellow-gryd);
}

.mbr-btn svg {
    height: 1.5em;
    padding-top: 0.5em;
    fill: var(--bs-purple-gryd);
    transition: fill ease-in-out 0.8s;
}

.pricing-btn {
    transition: background-color ease-in-out 0.8s, color ease-in-out 0.8s;
    border: 2px solid var(--bs-purple);
    border-radius: 2em;
}

.pricing-btn:hover {
    background-color: var(--bs-purple-gryd);
}

    .pricing-btn a {
        width: 100%;
        height: 100%;
        display: inline-block;
        padding: 0.5em 1em;
    }

.pricing-btn:hover svg {
    fill: var(--bs-yellow-gryd);
}

.pricing-btn svg {
    height: 1.5em;
    padding-top: 0.5em;
    fill: var(--bs-purple-gryd);
    transition: fill ease-in-out 0.8s;
}

.pricing-yours-btn {
    transition: background-color ease-in-out 0.8s, color ease-in-out 0.8s;
    padding: 0.5em 1em;
    border: 2px solid var(--bs-yellow-gryd);
    border-radius: 2em;
}

.pricing-yours-btn:hover {
    background-color: var(--bs-yellow-gryd);
}

.pricing-yours-btn:hover svg {
    fill: var(--bs-yellow-gryd);
}

.pricing-yours-btn svg {
    height: 1.5em;
    padding-top: 0.5em;
    fill: var(--bs-purple-gryd);
    transition: fill ease-in-out 0.8s;
}

.card-head-special {
    border-radius: 2em 2em 0 0 !important;
}

    .accordion-body {
        background-color: var(--bs-purple-gryd);
        color: #fff;
        margin: 0.1em 2em 1em 2em;
        border-radius: 0em 0em 1em 1em;
    }

        .accordion-body a {
            border: 1px solid var(--bs-purple-gryd);
            border-top: 0px;
            border-bottom: 0px;
            border-radius: 1em;
            padding: 0.2em 0.8em;
            background-color: #000;
            transition: background-color ease-in-out 0.8s, color ease-in-out 0.8s, border-color ease-in-out 0.8s;
        }

            .accordion-body a:hover {
                background-color: var(--bs-purple-gryd);
                border-color: var(--bs-yellow-gryd);
            }

    .accordion {
        /*font-family: Consolas;*/
    }

    .gg-avatar {
        border-radius: 20% !important;
        transition: transform 1.2s ease-in-out;
    }

.gg-avatar:hover {
    transform: scale(1.10);
}

    .gg-yb {
        border: 0.1em solid #ffac05;
        border-radius: 0.6em;
    }

    .gg-yf svg {
        fill: #ffac05 !important;
    }

    .gg-pf svg {
        fill: #af82f1 !important;
    }

    .gg-svg-head svg {
        height: 1.5em;
        padding-top: 0.5em;
        fill: #ffac05;
    }

div.day-desc {
    height: 5.5em;
    overflow: auto;
}

    span.day-box {
        border: 3px solid var(--bs-yellow-gryd) !important;
        margin-left: 0.2em;
        border-radius: 0.8em 0em 1em 0em;
        margin-top: 1.1em;
        line-height: 2em;
        padding-left: 1em;
        padding-right: 1em;
    }

    span.book-so svg {
        height: 3.5em;
        padding-top: 0;
        fill: #ffac05;
    }

    span.current-book svg {
        fill: var(--bs-yellow-gryd) !important;
    }

    span.book-button svg {
        height: 1.5em;
        padding-top: 0;
        fill: #000;
    }

    span.book-button-yellow svg {
        height: 1.5em;
        padding-top: 0;
        fill: var(--bs-yellow-gryd);
    }

    span.book-button-short svg {
        padding-top: 0;
        fill: #f11524;
    }

    span.book-button-red svg {
        height: 1.5em;
        padding-top: 0;
        fill: #f11524;
    }


    span.book-button-blue svg {
        height: 1.5em;
        padding-top: 0;
        fill: #00a;
    }

    span.book-button svg:hover {
        transition: transform 1s ease-in-out, fill 1s ease-in-out;
        fill: #ffac05 !important;
    }


    h1.gg-h1 svg {
        height: 1.5em;
        margin-top: 0.5em;
        padding-top: 0;
        fill: #ffac05;
    }

    h2.gg-h2 svg {
        height: 1.4em;
        margin-top: 0.5em;
        padding-top: 0;
        fill: #ffac05;
    }

    h3.gg-h3 svg {
        height: 1.4em;
        margin-top: 0.5em;
        padding-top: 0;
        fill: #ffac05;
    }

    .angle-heading h1 {
        margin-left: 1.3em;
    }

    .angle-heading h2 {
        margin-left: 1.1em;
    }

    .angle-heading h3 {
        margin-left: 0.75em;
    }

    h1.gg-h1p svg {
        height: 1.5em;
        margin-top: 0.5em;
        padding-top: 0;
        fill: #af82f1;
    }

        h1.gg-h1p svg:hover {
            transition: transform 1s ease-in-out, fill 1s ease-in-out;
            fill: #ffac05 !important;
        }

    h1.gg-h2 svg {
        height: 1.2em;
        margin-top: 0.4em;
        padding-top: 0;
        fill: #ffac05;
    }

    h1.gg-h3 svg {
        height: 1.0em;
        margin-top: 0.3em;
        padding-top: 0;
        fill: #ffac05;
    }


    .caption-mobile {
        position: absolute;
        top: 100px;
    }



    ul.filter-option {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

        ul.filter-option li {
            margin: 0.5em 0.3em;
            background: rgba(175, 130, 241, 0.20) !important;
            border: 1px solid #af82f1;
            border-radius: 0.6em;
            cursor: pointer;
        }

            ul.filter-option li:hover {
                border: 1px solid #af82f1;
                border-radius: 0.6em;
                fill: #ffac05;
            }

            ul.filter-option li a.current svg {
                fill: #ffac05;
            }

            ul.filter-option li:hover svg {
                transition: fill 1s ease-in-out;
                border-radius: 0.6em;
                fill: #ffac05;
            }

            ul.filter-option li:hover {
                transition: background 1s ease-in-out, border 1s ease-in-out;
                background: rgba(255, 219, 88, 0.20) !important;
                border: 1px solid #ffac05;
                border-radius: 0.6em;
            }

    .sub-filter a svg {
        fill: #af82f1;
    }

        .sub-filter a svg:hover {
            transition: transform 1s ease-in-out, fill 1s ease-in-out;
            fill: #ffac05 !important;
        }

    h1.gg-h4 svg {
        height: 0.8em;
        margin-top: 0.2em;
        padding-top: 0;
        fill: #ffac05;
    }

    .gg-h {
        border-radius: 0 0 2.5em 2.5em;
    }

    .gg-c {
        border-radius: 2.5em;
    }

    .gg-br-f-s {
        border-radius: 1em;
    }

    .gg-br-f-m {
        border-radius: 1.5em;
    }

    .gg-br-f-lg {
        border-radius: 2em;
    }

    .gg-br-f-xl {
        border-radius: 2.5em;
    }

    .gg-f {
        border-radius: 2.5em 2.5em 0 0;
    }


    .full-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('/images/fullbg.jpg');
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    @media (max-width: 576px) {
        .levelcontent {
            max-width: 420px;
        }
    }

    @media (max-width: 768px) {
        .levelcontent {
            max-width: 620px;
        }
    }

    @media (min-width: 992px) {
        .levelcontent {
            max-width: 310px;
        }
    }

    @media (min-width: 1200px) {
        .levelcontent {
            max-width: 370px;
        }
    }

    @media (min-width: 1400px) {
        .levelcontent {
            max-width: 430px;
        }
    }

    span.g-building2 {
        height: 200px;
        width: 100%;
        display: inline-block;
        min-height: 20em;
        border: 1px solid #000;
        padding: 0.5em;
        border-radius: 1.5em;
        background-color: #ffac05;
        background-image: url('/images/building3.jpg');
        background-size: cover;
        transition: background-image 2.5s ease-in-out;
    }

        span.g-building2:hover {
            background-image: url('/images/building3hover.jpg')
        }

    img.g-building {
        min-height: 20em;
        border: 1px solid #000;
        padding: 0.5em;
        border-radius: 1.5em;
        background-color: #ffac05;
        background-image: url('/images/building3.jpg');
        transition: background-image 0.5s ease-in-out;
    }

    .first-col {
        padding-left: 2rem !important;
    }

    .list-phone {
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius-xxl) !important;
        padding: 0.25rem !important;
    }

    .base-list-row {
        margin-top: 0.5rem;
    }

    .base-list-col-data {
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 2rem;
    }

    #gryd-content > .row {
        margin-left: 0;
        margin-right: 0;
    }


    .base-list-col {
        height: 2.5em;
        position: relative;
    }

    .base-list-col-vert {
        height: 2em;
        position: relative;
    }

    .vert-heading {
        position: absolute;
        top: 0em;
    }

        .vert-heading span {
            /*height: 1.2em;
        display: inline-flex;*/
            width: 0;
            height: 0;
            display: inline-block;
            position: relative;
            overflow: visible;
        }

            .vert-heading span svg {
                transform: rotate(90deg);
                transform-origin: top left;
                left: 0;
                top: -1em;
                height: 1.2em;
                position: absolute;
            }

    .g-img-main {
        position: relative;
        box-sizing: border-box;
        border-radius: 1.5em;
        border: 0.1em solid #ffac05;
        padding: 1em;
        margin: var(--gryd-s-2);
    }

    .g-img-main-2 {
        position: relative;
        box-sizing: border-box;
        border-radius: 1.5em;
        border: 0.1em solid #ffac05;
        padding: 1em;
        margin: var(--gryd-s-1);
    }

    .g-img-main-3 {
        position: relative;
        box-sizing: border-box;
        border-radius: 1.5em;
        border: 0.1em solid #ffac05;
        padding: 1em;
        margin: 0.1rem;
    }

    .g-img-main img {
        border-radius: 1em;
        width: 100%;
    }


    .g-img-main-2 img {
        border-radius: 1em;
        width: 100%;
    }

    .g-img-main-3 img {
        border-radius: 1em;
        width: 100%;
    }

    .image-container {
        position: relative;
        min-height: 20em;
        box-sizing: border-box;
        padding-top: 1.4em;
    }

        .image-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 1.5em;
            border: 0.2em solid #ffac05;
            box-sizing: border-box;
            transition: opacity 1.5s ease-in-out, border 1.5s ease-in-out;
        }

        .image-container img:hover {
            border: 0.2em solid var(--bs-purple);
        }

    .image-hover {
        opacity: 0;
    }

    .image-container:hover .image-hover {
        opacity: 1;
    }

    .image-container:hover .image-default {
        opacity: 0;
    }

    img.g-building:hover {
        background-image: url('/images/building3hover.jpg')
    }

    a.g-nav-current {
        fill: #ffac05;
        transition: background-color 0.5s ease-in-out;
    }

    div.gryd-layout-row {
        margin: 0;
        padding: 0;
        line-height: 0.5em;
    }

        div.gryd-layout-row span {
            display: inline-block;
            width: 0.9em;
            height: 0.9em;
            padding: 0;
            margin: 0;
            border-color: #ffac05 !important;
        }


    .g-aa {
        background-color: #af82f1;
    }


    .g-n {
        height: 1.0em;
        width: 1.0em;
    }

    path.hasdata:hover {
        fill: #af82f1;
        cursor: pointer;
    }

    .ee {
        background-color: #444;
    }

    .dd {
        background-color: #faa;
    }

    .g-otl {
        border: 0.2em solid #fff;
        border-radius: 1.2em;
    }

    .g-l {
        border-left: 0.1em solid #fff;
    }

    .g-r {
        border-right: 0.1em solid #fff;
    }

    .g-b {
        border-bottom: 0.1em solid #fff;
    }

    .g-t {
        border-top: 0.1em solid #fff;
    }

    .g-tl {
        border-top: 0.1em solid #fff;
        border-left: 0.1em solid #fff;
        border-top-left-radius: 0.3em;
    }

    .g-tr {
        border-top: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
        border-top-right-radius: 0.3em;
    }

    .g-bl {
        border-bottom: 0.1em solid #fff;
        border-left: 0.1em solid #fff;
        border-bottom-left-radius: 0em;
    }

    .g-br {
        border-bottom: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
        border-bottom-right-radius: 0.3em;
    }

    .g-tlr {
        border-top: 0.1em solid #fff;
        border-left: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
        border-top-left-radius: 0.3em;
        border-top-right-radius: 0.3em;
    }

    .g-blr {
        border-bottom: 0.1em solid #fff;
        border-left: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
        border-bottom-left-radius: 0.3em;
        border-bottom-right-radius: 0.3em;
    }

    .g-lr {
        border-left: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
    }

    .g-tb {
        border-top: 0.1em solid #fff;
        border-bottom: 0.1em solid #fff;
    }

    .g-tbr {
        border-top: 0.1em solid #fff;
        border-bottom: 0.1em solid #fff;
        border-right: 0.1em solid #fff;
        border-bottom-right-radius: 0.3em;
        border-top-right-radius: 0.3em;
    }

    .g-tbl {
        border-top: 0.1em solid #fff;
        border-bottom: 0.1em solid #fff;
        border-left: 0.1em solid #fff;
        border-bottom-left-radius: 0em;
        border-top-left-radius: 0em;
    }

    .gryd-sub-heading {
        border: 0.1em solid #ffac05;
        padding: 0.5em;
        display: inline-block;
        border-radius: 0.5em;
    }

        .gryd-sub-heading strong:not(:first-child) {
            padding-left: 1em;
        }

    .gryd-box-art {
        width: 18em;
        float: right;
        border-radius: 2em;
        border: 0.1em solid #ffac05;
        padding: 0.5em;
    }

    .gryd-small-outer {
        border: 0.1em solid #ffac05;
        padding: 0.3em;
        border-radius: 0.8em;
        width: 16.7em;
    }

    .g-ty {
        color: var(--bs-yellow-gryd) !important;
    }

    .g-tp {
        color: var(--bs-purple-gryd) !important;
    }

    .gryd-small-box {
        background-color: #af82f1;
        color: #000;
        padding: 1em;
        border-radius: 0.6em;
        width: 16em;
    }

        .gryd-small-box span {
            display: block;
            color: #ffac05;
            font-weight: bolder;
            padding: 0.3em;
        }

            .gryd-small-box span strong {
                color: #fff;
                padding-right: 0.3em;
            }

    .gryd-video-container {
        padding: 1em;
        border: 0.1em solid #af82f1;
        border-radius: 0.6em;
        margin: 1em 0em;
    }

    .ffs {
        font-family: Times New Roman, Georgia, Garamond, Palatino, Baskerville
    }

    body {
        margin: 0;
        min-height: 100%;
        /*font: 400 16px / 1.25 Metric, Arial, Helvetica, sans-serif;*/
        font: 400 100% / 1.55 'Exo 2', 'Roboto', sans-serif;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }

    .receipt-number {
        font-size: 2em;
        color: var(--bs-yellow-gryd);

    }

.receipt-capture {
    color: var(--bs-purple);
    font-weight: bold;
    border: 3px solid var(--bs-yellow-gryd);
    display: inline-block;
    padding: 0em 2em;
    border-radius: 2em;
    border-top: 0px;
    border-bottom: 0px;
    margin: 1em 0em;
}

.gg-cal-box {
    border: 0.2em solid var(--bs-grey-gryd);
    border-radius: 1em;
    height: 8em;
    padding: 0.1em;
}

    .gg-cal-box p {
        margin: 0em 0.4em;
    }

.gg-cal-box-a {
    border: 0.2em solid var(--bs-yellow-gryd) !important;
    border-radius: 1em 1em 0 1em;
    height: 8em;
    padding: 0.1em;
}

    .business-detail p {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .gg-cal-box-l {
        border: 0.2em solid var(--bs-purple-gryd) !important;
        border-radius: 1em;
        height: 8em;
        padding: 0.1em;
    }

    .gg-cal-row {
        margin-top: 1em;
    }

    .gg-soc-link {
    }

        .gg-soc-link a {
            border: 0.2em solid var(--bs-purple-gryd);
            display: inline-block;
            padding: 0em 1em;
            border-radius: 1em;
        }

            .gg-soc-link a:hover {
                border: 0.2em solid var(--bs-yellow-gryd);
            }

                .gg-soc-link a:hover span svg {
                    fill: var(--bs-purple-gryd);
                }

                .gg-soc-link a:hover span i {
                    color: var(--bs-yellow-gryd);
                }

            .gg-soc-link a span svg {
                fill: var(--bs-yellow-gryd);
                transition: fill 0.4s ease;
            }

            .gg-soc-link a span i {
                color: var(--bs-purple-gryd);
                transition: color 0.4s ease;
            }

    .gi-size-1 {
        font-size: 1rem;
    }

    .gi-size-2 {
        font-size: 2rem;
    }

    .gi-size-3 {
        font-size: 3rem;
    }

    .gi-yellow-1 {
        font-size: 1rem;
        color: var(--bs-yellow-gryd);
    }

    .gi-yellow-2 {
        font-size: 2rem;
        color: var(--bs-yellow-gryd);
    }

    .gi-yellow-3 {
        font-size: 3rem;
        color: var(--bs-yellow-gryd);
    }

    .gi-purple-1 {
        font-size: 1rem;
        color: var(--bs-purple-gryd);
    }

    .gi-purple-2 {
        font-size: 2rem;
        color: var(--bs-purple-gryd);
    }

    .gi-purple-3 {
        font-size: 3rem;
        color: var(--bs-purple-gryd);
    }

    .bi {
        vertical-align: -.125em;
        fill: currentColor;
    }

    .gryd-soc {
    }

    .gryd-soc i {
        transition: color 0.8s ease-in-out, transform 0.8s ease-in-out;
    }

    .gryd-soc i:hover {
        transform: scale(1.5);
        color: var(--bs-purple-gryd);
    }

        .gryd-soc span {
            margin-left: 0.8em;
        }

    :root {
        --gryd-ff: inherit;
        --gryd-fs: 0.875rem;
        --gryd-lh: 1.4285714286;
        --gryd-fw: 400;
        --gryd-ls:;
        --gryd-fs--3: 0.5rem;
        --gryd-fs--2: 0.625rem;
        --gryd-fs--1: 0.75rem;
        --gryd-fs-0: 0.875rem;
        --gryd-fs-1: 1rem;
        --gryd-fs-2: 1.25rem;
        --gryd-fs-3: 1.5rem;
        --gryd-lh-1: 1;
        --gryd-lh-2: 1.25;
        --gryd-lh-3: 1.4285714286;
        --gryd-lh-4: 1.5;
        --gryd-fw--3: 100;
        --gryd-fw--2: 200;
        --gryd-fw--1: 300;
        --gryd-fw-0: 400;
        --gryd-fw-1: 500;
        --gryd-fw-2: 600;
        --gryd-fw-3: 700;
        --gryd-ls--3: -0.15px;
        --gryd-ls--2: -0.1px;
        --gryd-ls--1: -0.5px;
        --gryd-ls-0: 0px;
        --gryd-ls-1: 0.5px;
        --gryd-ls-2: 0.1px;
        --gryd-ls-3: 0.15px;
        --gryd-ff-sans: Arial, Verdana, Tahoma, Trebuchet MS, Helvetica, Impact, Gill Sans;
        --gryd-ff-serif: Times New Roman, Georgia, Garamond, Palatino, Baskerville;
        --gryd-ff-sans-serif: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
        --gryd-ff-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Roboto Mono, Ubuntu Mono, Lucida Console, Courier New, monospace;
        --gryd-ss--1: -0.1rem;
        --gryd-ss--2: -0.2rem;
        --gryd-ss--3: -0.3rem;
        --gryd-ss--4: -0.4rem;
        --gryd-ss--5: -0.5rem;
        --gryd-ss--6: -0.6rem;
        --gryd-ss--7: -0.7rem;
        --gryd-ss--8: -0.8rem;
        --gryd-ss--9: -0.9rem;
        --gryd-ss--0: 0rem;
        --gryd-ss-1: 0.1rem;
        --gryd-ss-2: 0.2rem;
        --gryd-ss-3: 0.3rem;
        --gryd-ss-4: 0.4rem;
        --gryd-ss-5: 0.5rem;
        --gryd-ss-6: 0.6rem;
        --gryd-ss-7: 0.7rem;
        --gryd-ss-8: 0.8rem;
        --gryd-ss-9: 0.9rem;
        --gryd-s-1: 1rem;
        --gryd-s-2: 2rem;
        --gryd-s-3: 3rem;
        --gryd-s-4: 4rem;
        --gryd-s-5: 5rem;
        --gryd-s-6: 6rem;
        --gryd-s-7: 7rem;
        --gryd-s-8: 8rem;
        --gryd-s-9: 9rem;
        --gryd-s-10: 10rem;
        --gryd-s-11: 11rem;
        --gryd-s-12: 12rem;
        --gryd-s-13: 13rem;
        --gryd-s-14: 14rem;
        --gryd-s-15: 15rem;
        --gryd-s-16: 16rem;
        --gryd-s-17: 17rem;
        --gryd-s-18: 18rem;
        --gryd-s-19: 19rem;
        --gryd-s-20: 20rem;
        --gryd-s-21: 21rem;
        --gryd-s-22: 22rem;
        --gryd-s-23: 23rem;
        --gryd-s-24: 24rem;
        --gryd-s-25: 25rem;
        --gryd-s-26: 26rem;
        --gryd-s-27: 27rem;
        --gryd-s-28: 28rem;
        --gryd-s-29: 29rem;
        --gryd-s-30: 30rem;
        --gryd-s-31: 31rem;
        --gryd-s-32: 32rem;
        --gryd-s-33: 33rem;
        --gryd-s-34: 34rem;
        --gryd-s-35: 35rem;
        --gryd-s-36: 36rem;
        --gryd-s-37: 37rem;
        --gryd-s-38: 38rem;
        --gryd-s-39: 39rem;
        --gryd-s-40: 40rem;
        --gryd-s-41: 41rem;
        --gryd-s-42: 42rem;
        --gryd-s-43: 43rem;
        --gryd-s-44: 44rem;
        --gryd-s-45: 45rem;
        --gryd-s-46: 46rem;
        --gryd-s-47: 47rem;
        --gryd-s-48: 48rem;
        --gryd-s-49: 49rem;
        --gryd-s-50: 50rem;
    }

    /* #region Footer styles */
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        font-size: 0.85em;
    }

    a {
        text-decoration: none;
    }

    div.b-card {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .basic-edit {
        position: relative;
        width: 200px;
        margin-left: 100px;
    }

        .basic-edit input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }

        .basic-edit label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            transition: 0.3s;
            color: gray;
            pointer-events: none;
        }

        .basic-edit input:focus + label,
        .basic-edit input:not(:placeholder-shown) + label {
            top: 5px;
            font-size: 12px;
            color: blue;
        }

    div.scrollable {
        width: 300px;
        height: 200px;
        overflow-y: auto; /* Enables vertical scrolling */
        border: 1px solid #ccc;
        padding: 10px;
    }


    #configure {
        display: none;
    }

    .k-panelbar .k-content {
        padding: 20px;
    }

    p .k-button {
        margin: 0 15px 0 0;
    }

    .k-state-active .label {
        font-size: 1em;
    }

.code-container {
    margin: 20px auto;
    text-align: center;
}

.code-fields {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.code-box {
    width: 100%;
    height: 80px;
    background: #222;
    color: #fff;
    font-size: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-yellow-gryd);
    background-color: rgba(255, 193, 7, 0.5) !important;
    transition: background 1000ms ease-out, transform 1000ms ease-out;
}

.key-flash {
    background-color: rgba(111, 66, 193, 1) !important; /* translucent highlight */
    border: 2px solid #0af;
    transform: scale(1.05);
    transition: all 250ms ease-in-out;
}

.code-flash {
    background: rgba(255, 193, 7, 1) !important;
    transform: scale(1.1);
    transition: all 500ms ease-out;
}

.keypad-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.keypad-alert-box {
    background: rgba(34,34,34,0.9);
    padding: 20px 30px;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    min-width: 250px;
    transition: transform 150ms ease-out;
    border: 2px solid var(--bs-purple);
}

    .keypad-alert-box.flash {
        transform: scale(1.05);
    }

#keypadOkBtn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 6px;
    color: #fff;
    transition: background 150ms ease-out, transform 150ms ease-out;
}

    #keypadOkBtn.key-flash {
        background: rgba(255,255,255,0.25);
        transform: scale(1.05);
    }

.keypad .row {
    display: flex;
    justify-content: center;
    
    margin-bottom: 10px;
}

.keypad .col {
    margin-left: 2em;
}

.keypad button {
    font-size: 2em;
    line-height:2.2em;
    background: var(--bs-purple);
    color: #fff;
    border-radius: 0.5em;
    border: 2px solid var(--bs-purple);
    width: 100%;
    min-width: 75px;
    background-color: rgba(111, 66, 193, 0.5);
}

    .keypad button.control {
        background-color: rgba(111, 66, 193, 0.5);
    }

    .keypad button.verify {
        background-color: rgba(111, 66, 193, 0.5);
    }

#keypadPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    font-size: 24px;
    text-align: center;
    z-index: 9999;
    display: none;
}


.np-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
}

.np-thumb {
    width: 75px;
    height: 75px;
    border-radius: 2em;
}

.np-info {
    display: flex;
    flex-direction: column;
}

.np-title {
    font-size: 20px;
    font-weight: bold;
}

.np-artist {
    font-size: 16px;
    opacity: 0.8;
}

.np-album {
    font-size: 14px;
    opacity: 0.6;
}

#lastPlayedList {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}
.lp-wrapper {
    position: relative;
    width: 100%;
}

/* Collapsed view */
.lp-collapsed {
    cursor: pointer;
}

/* Expanded overlay */
.lp-expanded {
    position: absolute;
    top: 0;
    right: 0; /* right aligned */
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 10px;
    border-radius: 0 2.5em;
    z-index: 999;
    border: 2px solid var(--bs-purple);
}

    .lp-expanded.hidden {
        display: none;
    }

.lp-close {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .lp-close:hover {
        opacity: 1;
    }

/* Track item */
.lp-item {
    display: flex;
    justify-content: flex-end; /* right align everything */
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
}

/* Thumbnail on the RIGHT */
.lp-thumb {
    width: 75px;
    height: 75px;
    border-radius: 2em;
    order: 2; /* move image to the right */
}

/* Text on the LEFT */
.lp-info {
    display: flex;
    flex-direction: column;
    text-align: right; /* right align text */
    order: 1;
}

.lp-title {
    font-size: 16px;
    font-weight: bold;
}

.lp-artist {
    font-size: 14px;
    opacity: 0.8;
}

.lp-time {
    font-size: 12px;
    opacity: 0.6;
}

#loadingContainer {
    width: 100%;
    height: 50px;
    border-radius: 2em;
    overflow: hidden;
    position: relative;

    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center;
}

#loadingBar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, var(--bs-purple), var(--bs-purple-gryd));
    transition: height 0.5s ease;
}

#openingStatus {
    z-index: 2;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

    @media (max-width: 767px) {
        #responsive-panel {
            transition: all linear .2s;
        }

        #configure {
            display: block;
            float: right;
        }

        .k-rpanel {
            width: 100%;
        }

        .k-rpanel-expanded {
            margin-top: 1rem;
        }

        .navbar-header {
            width: 100%;
        }

        .footer {
            height: 60px;
        }

        .k-menu .k-item,
        .k-menu .k-link {
            width: 100%;
        }

        .k-menu .k-link {
            box-sizing: border-box;
        }

        .k-rpanel-expanded ul {
            flex-direction: column;
        }
    }