.form-control {
    border-color: var(--secondary-accent-color);
    border-bottom: 1px solid var(--primary-accent-color);
    -webkit-box-shadow: 0 1px 0 0 var(--primary-accent-color);
    box-shadow: 0 1px 0 0 var(--primary-accent-color);
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
    min-height: 43px;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
}

.well {
    background-color: var(--secondary-background-color);
    border: 1px solid var(--primary-text-color);
    border-radius: 4px;
    padding: 15px;
}

body {
    background-image: var(--background-image);
    background-size: cover;
    background-position: center top;
}

.icon-bar {
    background-color: var(--primary-text-color);
}
.close {
    color: var(--primary-text-color);
    opacity: 1;
}
a {
    color: var(--primary-accent-color);
}

.height-auto {
    height: auto !important;
}

@keyframes textPulse {
    0% { color:  var(--secondary-accent-color); } /* First color (red in this example) */
    50% { color: var(--primary-text-color); } /* Second color (blue in this example) */
    100% { color:  var(--secondary-accent-color); } /* Back to first color */
}

.pulse-text {
    animation: textPulse 2s infinite;
    font-weight:900;
}


.blur {
    filter: blur(10px);
    transform: scale(1.1);
}
.image-container {
    display: block;
    width: 100%;
    min-height: 50px;
    position: relative;
    overflow: hidden; /* Prevents blurring from extending beyond the image */
}

.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-lg);
    opacity: 0;
    transition: opacity 0.3s;
}

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

.lock-icon {
    font-size: var(--font-xxl);
    margin-bottom: 10px;
    color: var(--primary-accent-color);
}

.blur-overlay-message {
    padding: 0 15px;
    text-align: center;
    font-size: var(--font-sm);
    margin: 0;
}


.avatar {

    display: inline-block;
}

.shead a:focus, a:hover {
    text-decoration: none;
    color: var(--primary-text-color);
}

body {
    background-color: var(--secondary-background-color);
}

.input-group-addon {
    padding-bottom: 8px;
    background-color: transparent;
    border: 1px solid var(--secondary-accent-color);
    border-bottom: 2px solid var(--primary-accent-color);
    height:44px;
    color: var(--primary-accent-color);
}

.choices__input {
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
}
.choices__inner {
    background-color: var(--secondary-background-color);
}

.flex-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Align items to the top of the row */
}

.flex-grid .break {
    flex-basis: 100%; /* Forces a new row */
    height: 0; /* Optional: Ensures it doesn't take extra space */
}

/* Profile image grids (search results, who-viewed-me, friends, group members,
   featured members, who's online, matches, event attendees) wrap to a varying
   number of columns per row depending on viewport width, leaving empty space that
   flex-start pins to the left. Center each row as a block instead — rows keep
   align-items: flex-start from .flex-grid, so images stay vertically aligned with
   the row above; only the horizontal position of the row changes. Any full-width
   (col-xs-12 etc.) header/pagination rows mixed into the same container are
   unaffected since they already span the full row width. Applies at all viewport
   widths, not just mobile, for visual consistency. */
.flex-grid.profile-grid {
    justify-content: center;
}

input[type="checkbox"] {
    background-color: var(--secondary-background-color);
    color: var(--secondary-background-color);
    accent-color: var(--primary-accent-color);
}

.choices__list--multiple .choices__item {
    background-color: var(--primary-accent-color);
    border: 1px solid var(--secondary-accent-color);
    color: var(--secondary-text-color);
}

.panel {
    background-color: var(--primary-background-color);
}

.panel-primary {
    background-color: var(--primary-background-color);
    border-color: var(--primary-accent-color);
    color: var(--primary-text-color);
}

.panel-default {
    background-color: var(--primary-background-color);
    border-color: var(--primary-text-color);
    color: var(--primary-text-color);
}

.panel-info {
    background-color: var(--primary-background-color);
}

.panel-success {
    background-color: var(--primary-background-color);
}

.panel-warning {
    background-color: var(--primary-background-color);
}

.panel-primary > .panel-heading {
    background-color: var(--primary-accent-color);
    border-color: var(--secondary-accent-color);
    color: var(--secondary-text-color);
}

.panel-default > .panel-heading {
    background-color: var(--secondary-accent-color);
    border-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
}

.panel-default > .panel-heading small,
.panel-primary > .panel-heading small {
    color: inherit;
    opacity: 0.8;
}

.thumbnail {
    background-color: var(--primary-background-color);
    border: 1px solid var(--primary-text-color);
    color: var(--primary-text-color);
}
.thumbnail > .caption {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
}

.panel-footer {
    background-color: var(--primary-background-color);
}

.table .table {
    background-color: transparent;
}

.table-hover > tbody > tr:hover {
    background-color: var(--secondary-background-color);
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--secondary-background-color);
}
.table-striped>tbody>tr:nth-of-type(odd):hover {
    background-color: var(--primary-background-color);
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: var(--primary-text-color);
    border-top-color: transparent;
    background-color: transparent;
    border: 0;
}

.nav-tabs > li > a:hover {
    background-color: var(--secondary-accent-color);
    color: var(--primary-text-color);
}

.nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover {
    border: 0;
    border-bottom: 8px solid var(--primary-accent-color);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
}

select.form-control option:active,
select.form-control option:checked,
select.form-control option:focus,
select.form-control option:hover {
    background-color: var(--primary-accent-color);

}

.modal-content {

    background-color: var(--secondary-background-color);
    
    border: 1px solid rgba(0, 0, 0, .2);
    /*border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    outline: 0;*/
}

.choices[data-type*=select-one] .choices__input {
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
}

@media (max-width: 768px) {
    .badge {
        font-size: var(--font-xs);
    }

    .submenu-button {
        padding-left: 6px;
        padding-right: 6px;
    }
}
.submenu .dropdown-menu a {
    color: var(--primary-text-color) !important;
}
img.gift {
    //height: 100px;
}

.gift-wrapper > .badge {
    display: inline-block;
    padding: 5px 10px;
    bottom: 100px;
    left: 85%;
    transform: translateX(15%) translateY(-25%);

}

.checkbox-container {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.checkbox-container-small {
    min-height: 40px;
}

summary {
    display: list-item !important;
    cursor: pointer;
}

:root {
    --ck-color-base-foreground: var(--primary-background-color);
    --ck-color-base-background: var(--primary-background-color);
    --ck-color-button-default-background: var(--primary-background-color);
    --ck-color-button-default-disabled-background: var(--primary-background-color);
    --ck-color-button-on-background: var(--primary-text-color);
    --ck-color-button-on-disabled-background: var(--secondary-text-color);
    --ck-color-button-action-text: var(--secondary-background-color);
    --ck-color-dropdown-panel-background: var(--primary-background-color);
    --ck-color-dropdown-panel-border: var(--secondary-text-color);
    --ck-color-dialog-background: var(--primary-background-color);
    --ck-color-dialog-form-header-border: var(--secondary-accent-color);

    --ck-color-split-button-hover-border: var(--secondary-text-color);
    --ck-color-input-background: var(--primary-background-color);
    --ck-color-labeled-field-label-background: var(--primary-background-color);
    --ck-color-list-background: var(--primary-background-color);

    --ck-color-list-button-on-text: var(--secondary-background-color);
    --ck-color-panel-background: var(--primary-background-color);
    --ck-color-panel-border: var(--secondary-accent-color);
    --ck-color-toolbar-background: var(--primary-background-color);
    --ck-color-toolbar-border: var(--secondary-accent-color);
    --ck-color-widget-editable-focus-background: var(--secondary-background-color);
    --ck-color-focus-border: var(--secondary-accent-color);
    --ck-color-text: var(--primary-text-color);

}
.ck-source-editing-area > textarea {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
}
.ck-editor__editable {
    min-height: 200px;
}


/*
--ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
--ck-color-list-button-on-background: var(--ck-color-base-active);
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);*/

.list-group-item {
    background-color: var(--secondary-background-color);
}

.label-primary {
    background-color: var(--primary-accent-color);
}

.label {
    color: var(--secondary-text-color);
}

.profile-label {
    text-align: center;
    padding: 3px;
}

.profile-content {
    text-align: center;
    min-height: 25px;
    padding: 3px;
    border: 1px solid var(--primary-text-color);
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
    border-radius: 5px;
}

@media (max-width:767px) {
    .tight-profile-wide-content {
        padding-left:20px !important;
        font-size: var(--font-xxs);
    }
    .tight-profile-wide-label {
        padding-left:15px !important;
        font-size: var(--font-xxs);
    }
}
@media (max-width:991px) and (min-width:768px) {
    .tight-profile-wide-content {
        font-size: var(--font-xs);
    }
    .tight-profile-wide-label {
        font-size: var(--font-xs);
    }
}

.profile-question-container {
    min-height:100px;
}

.profile-question-view {
    margin-bottom:10px;
}


 .question-preview-container {
     position: relative;
     margin-bottom: 12px;
     cursor: move;
     transition: all 0.3s ease;
 }

.question-preview-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.edit-button-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
    border-radius: 4px;
}

.question-preview-container:hover .edit-button-overlay {
    opacity: 1;
    pointer-events: all;
}

.edit-button {
    background: var(--primary-accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.edit-button:hover {
    background: var(--secondary-accent-color);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.question-preview-overlay {
    position: relative;
    border: 2px solid var(--primary-accent-color);
    border-radius: 4px;
    padding: 15px;
    background-color: var(--primary-background-color);
    transition: all 0.3s ease;
    min-height: 135px;
    overflow: hidden;
    opacity: 0.7;
}
.question-preview-overlay.muted {
    opacity: 0.5;
}

.question-preview-container:hover .question-preview-overlay {
    filter: blur(1px);
    opacity: 0.6;
}

.question-preview-overlay input,
.question-preview-overlay select,
.question-preview-overlay textarea,
.question-preview-overlay button {
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    border-color: var(--primary-text-color) !important;
}

/* Override Bootstrap column classes to prevent nested width issues */
.question-preview-overlay .col-xs-12,
.question-preview-overlay .col-sm-6,
.question-preview-overlay .col-sm-12,
.question-preview-overlay .col-md-6,
.question-preview-overlay .control-wrapper {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: static !important;
}



body {
    font-family: var(--site-font), Geneva, Arial, Helvetica, sans-serif;
    color: var(--primary-text-color);
    font-weight: 400;

}
h1, h2, h3, h4, h5 {
    font-family: var(--header-font), Geneva, Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.header-font {
    font-family: var(--header-font), Geneva, Arial, Helvetica, sans-serif;
}

.dropdown-menu {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
    border: 1px solid var(--primary-text-color);
}
.dropdown-menu>li>a, .dropdown-menu>li>a {
    color: var(--primary-text-color);
    text-decoration: none;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: var(--primary-text-color);
    text-decoration: none;
    background-color: var(--secondary-accent-color);
}

.dropdown a {
    color: var(--primary-text-color);
}

.ilink a {
    color: var(--primary-text-color);
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: var(--secondary-accent-color);
    border-color: #337ab7;
}

input.skip {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.text-tiny {
    font-size: var(--font-xs);
}

.text-small {
    font-size: var(--font-sm)em;
}
.text-big {
    font-size: var(--font-lg);
}

.text-huge {
    font-size: 1.8em;
}

.gslide-description {
    background-color: var(--primary-background-color) !important;
}

.gslide-inline {
    background-color: var(--primary-background-color) !important;
    max-height:140px; !important;
}

/* Ensure the lightbox content matches the image size */
.audio-lightbox {
    text-align: center;
    max-height:140px; !important;
}

.grid-sizer,
.grid-item {
    float: left;
    width: 200px;
    border: 2px solid transparent;
    /*center image*/
    display: flex;
    justify-content: center;
    align-items: center;
}
/* make the image darken slightly on hover */
.grid-item:hover {
    filter: brightness(70%);
}

.item-fill {
    width: 100%;
    height: 100%;
    object-fit: contain ;
}

.video-thumbnail {
    position: relative;
    display: block;
    width: 100%;
}

.video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;  /* Adjust size as needed */
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail .play-icon::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 20px solid white; /* Triangle shape */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 5px;
}



/* Resize the audio player to fit the thumbnail width */
.audio-lightbox audio {
    width: 100%;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--primary-text-color);
}

.separator::before {
    margin-right: 10px;
}

.separator::after {
    margin-left: 10px;
}

.google-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary-text-color);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.google-btn i {
    color: #4285F4;
    font-size: 1.7rem;
}

.vc { /*calendar*/
    z-index:1000;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index:3;

}
.breadcrumb {
    background-color: var(--secondary-background-color);
    color: var(--primary-text-color);
}

.breadcrumb > .active {
    color: var(--primary-text-color);
}

.list-group-item.active {
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
    border-color: var(--secondary-accent-color);
}

/* hover */
.list-group-item.active:hover {
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
    border-color: var(--secondary-accent-color);
}

.event-image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.event-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease; /* Smooth transition */
}

.event-image-container:hover img {
    transform: scale(1.1); /* Zoom in by 10% */
}

.event-container {
    height: 400px;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
}

.event-flow-container {
    padding: 2px;
}

.caption > .heading {
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.button-container {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.event-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

.extended-event-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-size: var(--font-md);
    -webkit-line-clamp: 10; /* Number of lines to show */
    -webkit-box-orient: vertical;
}

/* Group-specific styles for groups view */
.group-card .event-image-container {
    height: 175px;
}

.group-card .caption {
    padding: 10px 15px 80px 15px;
    line-height: 1.3;
}

.group-card .caption h4 {
    margin: 5px 0 8px 0;
    font-size: var(--font-md);
    line-height: 1.2;
}

.group-card .caption p {
    margin: 4px 0;
    font-size: var(--font-sm);
    line-height: 1.2;
}

.group-card .event-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--font-sm);
    line-height: 1.3;
    margin-bottom: 10px;
}

.info-sheet {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-background-color);
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    text-align: center;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.info-sheet > *:not(.close-btn) {
    flex-shrink: 1;
    min-height: 0;
    font-size: var(--font-sm);
}

.info-sheet p {
    margin: 3px 0;
}

.info-sheet .extended-event-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.info-sheet .event-modal-image {
    max-height: 150px;
    overflow: hidden;
    margin: 5px 0;
}

.info-sheet .event-modal-image img {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.info-sheet .close-btn {
    margin-top: auto;
    flex-shrink: 0;
    padding: 8px 15px;
}

.info-sheet.open {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .nav-justified > li {
        display: table-cell;
        float: none;
        width: 1%;
    }
    .nav-justified {
        display: block;
    }
}

/* Admin Sidebar Navbar Styles */
.sidebar-nav {
    background-color: var(--primary-background-color);
    position: relative;
    padding: 0;
    margin: 0;
}

/* Make all navbar elements full width and equal */
.sidebar-nav .navbar-nav {
    float: none;
    margin: 0;
    display: block;
}

.sidebar-nav .navbar-nav > li {
    float: none;
    position: relative;
    display: block;
}

.sidebar-nav .navbar-nav > li > a {
    /* em-based so padding/spacing shrinks and grows with the site font scale */
    padding: 0.7em 1.5em 0.7em 1em;
    color: var(--secondary-text-color);
    background-color: var(--secondary-accent-color);
    border-bottom: 1px solid var(--primary-accent-color);
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
}

.sidebar-nav .navbar-nav > li > a i {
    margin-right: 0.6em;
    width: 1.1em;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav .navbar-nav > li > a .menu-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav .navbar-nav > li > a:hover,
.sidebar-nav .navbar-nav > li > a:focus {
    background-color: var(--secondary-accent-color);
    color: var(--secondary-text-color);
}

.sidebar-nav .navbar-nav > li.active > a {
    background-color: var(--secondary-accent-color);
    color: var(--secondary-text-color);
    border-left: 3px solid var(--primary-background-color);
}

/* Dropdown Menu Styles - ALWAYS flyout to the right */
.sidebar-nav .dropdown-menu {
    font-size:0.85rem;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: 0;
    border-radius: 0;
    padding: 0;
    border: 1px solid var(--secondary-accent-color);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
    z-index:1052;
}

.sidebar-nav .dropdown-menu > li > a {
    padding: 5px 15px;
    color: var(--primary-text-color);
    border-bottom: 1px solid var(--secondary-background-color);
    background-color: var(--primary-background-color);
    white-space: nowrap;
}

.sidebar-nav .dropdown-menu > li > a:hover,
.sidebar-nav .dropdown-menu > li > a:focus {
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
}

.sidebar-nav .dropdown-menu > li.active > a {
    background-color: var(--primary-accent-color);
    color: var(--secondary-text-color);
}

/* Show caret to indicate dropdown - always to the right */
.sidebar-nav .dropdown > a:after {
    content: "\f105"; /* FontAwesome chevron right */
    font-family: "FontAwesome", serif;
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
}

.adminsidebar {
    /* Shrink-to-fit: sidebar width follows its content (icons + labels), so it
       naturally grows/shrinks with font size instead of using a fixed guess. */
    width: fit-content;
    min-width: 70px;
    max-width: 260px;
    float: left;
    min-height:1000px;
    transition: width 0.2s ease;
}

#wrapperinadmin {
    /* Establish a new block formatting context so this column automatically
       fills the remaining space next to the floated sidebar, regardless of
       the sidebar's actual (now dynamic) width. flow-root (unlike
       overflow:hidden) does this without clipping dropdowns/tooltips.
       Use padding, not margin, for the gutter: a margin next to a float is
       absorbed by the float's exclusion zone and produces no visible gap. */
    float: none !important;
    display: flow-root;
    width: auto !important;
    margin-left: 0 !important;
    padding-left: 20px;
}

.flipdown {
    width:100%;
}
.flipdown .rotor-group {
    width:100%;
}

.flipdown .rotor-group:nth-child(-n+3) {
    display: none; /* Hides days (1), hours (2), and minutes (3) */
}
.flipdown .rotor {
    width:49%;
    height:auto;
    aspect-ratio: 1 / 1;
    container-type: inline-size;

}
.flipdown .rotor-leaf {
   width: 100%;
   height: 100%;
    line-height:100%;

}

.flipdown .rotor-top {
    font-size: 100cqw !important;
    width:100%;
    height:50%;
    line-height:100%;
}

.flipdown .rotor-bottom {
    font-size: 100cqw !important;
    width:100%;
    height:50%;
    line-height:0%;
}
.flipdown .rotor-leaf-rear {
    font-size: 100cqw !important;
    width:100%;
    height:50%;
    line-height:0;
}
.flipdown .rotor-leaf-front {
    font-size: 100cqw !important;
    width:100%;
    height:50%;
    line-height:100%;
}

.flip-clock-container {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    max-width: 600px; /* Limit the width for better appearance */

}

.dv_home_box {
    padding: 11px 11px 0px;
    height:100%;
}

.dashboard-column {
    padding-left:7px;
    padding-right:7px;
}

.dashboard-frame {
    padding-top:15px;
    width:100%;

}

@media (max-width: 767px) {
    /* Tighten Bootstrap's grid gutters site-wide on mobile. Bootstrap 3 pairs every
       .row's -15px margin with 15px of padding on each .col-*, so the two cancel out
       for side-by-side columns and only the 15px shows at the row's outer edges.
       On mobile, most columns stack full-width, so that 15px just wastes horizontal
       real estate along the screen edges without separating anything. Shrinking both
       halves of the pair to 5px preserves the same cancellation (columns that do sit
       side-by-side on mobile, e.g. dashboard/quick-search.latte's un-rowed Age pair,
       still get a visible 10px gap instead of losing it entirely) while reclaiming
       10px per edge everywhere else.
       Also covers the page-wide content wrapper emitted by every layouts/navstyle/*
       header.php ("col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1") — that
       div has no .row ancestor to cancel its padding at all, so on mobile its 15px
       shows up as plain wasted margin around the *entire* page. Reducing its own
       col-xs-* padding directly (independent of the .row/margin pairing above) fixes
       that too.
       !important is needed here (rather than relying on cascade order alone) because
       Bootstrap itself loads from a CDN (html_header.php) with a JS onerror fallback
       that, on failure, re-injects the local bootstrap.min.css via
       document.head.appendChild — which appends it at the very end of <head>, after
       this stylesheet, regardless of where the CDN <link> originally sat. Without
       !important, a CDN failure would silently put Bootstrap's un-shrunk .col-*
       padding back on top (same specificity, later in source order). */
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    [class*="col-xs-"],
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

@media (max-width: 767px) {
    /* Mobile icon-only sidebar */
    .sidebar-nav {
        width: 60px; /* Small width when collapsed */
        transition: width 0.3s ease;
    }
    .adminsidebar {
        width: 50px;
        min-width: 50px;
    }

    #wrapperinadmin {
        width: calc(100% - 80px) !important;
    }

    .sidebar-nav.expanded {
        width: 100%; /* Full width when expanded */
    }

    /* Hide text and show only icons when collapsed */
    .sidebar-nav .navbar-nav > li > a .menu-text {
        display: none;
    }

    .sidebar-nav.expanded .navbar-nav > li > a .menu-text {
        display: inline-block;
    }

    /* Center icons when collapsed */
    .sidebar-nav .navbar-nav > li > a {
        justify-content: center;
        padding: 15px 5px;
    }

    .sidebar-nav.expanded .navbar-nav > li > a {
        justify-content: flex-start;
        padding: 12px 15px;
    }

    /* Make icons bigger and centered for mobile */
    .sidebar-nav .navbar-nav > li > a i {
        font-size: var(--font-lg);
        margin: 0;
    }

    .sidebar-nav.expanded .navbar-nav > li > a i {
        font-size: var(--font-sm);
        margin: 0 5px 0 0;
    }

    /* Hide dropdown arrow on mobile */
    .sidebar-nav .dropdown > a:after {
        display: none !important;
    }

    /* Mobile dropdown style - appear to the right */
    .sidebar-nav .dropdown.open > .dropdown-menu {
        display: block !important;
        position: absolute !important;
        left: 100% !important;
        top: 0 !important;
        width: auto !important;
        min-width: 200px !important;
        margin-top: 0 !important;
        border: 1px solid var(--secondary-accent-color) !important;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.1) !important;
    }
}




/* ========================================
   Bootstrap Variant Overrides - Calculated Colors
   ======================================== */

/* Button variants */
.btn {
    transition: transform 0.3s ease;
}
.btn:hover {
    transform: translateY(2px);

}

.btn-info {
    color: var(--bs-info-color) !important;
    background-color: var(--bs-info-bg) !important;
    border-color: var(--bs-info-border) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
    color: var(--bs-info-color) !important;
    background-color: var(--bs-info-bg) !important;
    border-color: var(--bs-info-border) !important;
    opacity: 0.8;
}

.btn-success {
    color: var(--bs-success-color) !important;
    background-color: var(--bs-success-bg) !important;
    border-color: var(--bs-success-border) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    color: var(--bs-success-color) !important;
    background-color: var(--bs-success-bg) !important;
    border-color: var(--bs-success-border) !important;
    opacity: 0.8;
}

.btn-warning {
    color: var(--bs-warning-color) !important;
    background-color: var(--bs-warning-bg) !important;
    border-color: var(--bs-warning-border) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
    color: var(--bs-warning-color) !important;
    background-color: var(--bs-warning-bg) !important;
    border-color: var(--bs-warning-border) !important;
    opacity: 0.8;
}

.btn-danger {
    color: var(--bs-danger-color) !important;
    background-color: var(--bs-danger-bg) !important;
    border-color: var(--bs-danger-border) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
    color: var(--bs-danger-color) !important;
    background-color: var(--bs-danger-bg) !important;
    border-color: var(--bs-danger-border) !important;
    opacity: 0.8;
}

/* Update default button to use calculated colors */
.btn-default {
    color: var(--bs-default-color) !important;
    background-color: var(--bs-default-bg) !important;
    border-color: var(--bs-default-border) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color: var(--bs-default-color) !important;
    background-color: var(--bs-default-bg) !important;
    border-color: var(--bs-default-border) !important;
    opacity: 0.8;
}
/* Alert variants */
.alert-info {
    background-color: var(--bs-info-bg) !important;
    color: var(--bs-info-color) !important;
    border: 1px solid var(--bs-info-border) !important;
}

.alert-success {
    background-color: var(--bs-success-bg) !important;
    color: var(--bs-success-color) !important;
    border: 1px solid var(--bs-success-border) !important;
}

.alert-warning {
    background-color: var(--bs-warning-bg) !important;
    color: var(--bs-warning-color) !important;
    border: 1px solid var(--bs-warning-border) !important;
}

.alert-danger {
    background-color: var(--bs-danger-bg) !important;
    color: var(--bs-danger-color) !important;
    border: 1px solid var(--bs-danger-border) !important;
}

/* Panel variants */
.panel-info > .panel-heading {
    background-color: var(--bs-info-bg) !important;
    color: var(--bs-info-color) !important;
    border-color: var(--bs-info-bg) !important;
}

.panel-success > .panel-heading {
    background-color: var(--bs-success-bg) !important;
    color: var(--bs-success-color) !important;
    border-color: var(--bs-success-bg) !important;
}

.panel-warning > .panel-heading {
    background-color: var(--bs-warning-bg) !important;
    color: var(--bs-warning-color) !important;
    border-color: var(--bs-warning-bg) !important;
}

.panel-danger > .panel-heading {
    background-color: var(--bs-danger-bg) !important;
    color: var(--bs-danger-color) !important;
    border-color: var(--bs-danger-bg) !important;
}

/* Label variants */
.label-info {
    background-color: var(--bs-info-bg) !important;
    color: var(--bs-info-color) !important;
}

.label-success {
    background-color: var(--bs-success-bg) !important;
    color: var(--bs-success-color) !important;
}

.label-warning {
    background-color: var(--bs-warning-bg) !important;
    color: var(--bs-warning-color) !important;
}

.label-danger {
    background-color: var(--bs-danger-bg) !important;
    color: var(--bs-danger-color) !important;
}

/* Badge variants */
.badge-info {
    background-color: var(--bs-info-bg) !important;
    color: var(--bs-info-color) !important;
}

.badge-success {
    background-color: var(--bs-success-bg) !important;
    color: var(--bs-success-color) !important;
}

.badge-warning {
    background-color: var(--bs-warning-bg) !important;
    color: var(--bs-warning-color) !important;
}

.badge-danger {
    background-color: var(--bs-danger-bg) !important;
    color: var(--bs-danger-color) !important;
}
/* Primary and Default Button Overrides */
.btn-primary {
    color: var(--secondary-text-color) !important;
    background-color: var(--primary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
}

/* Button gradient style when enabled */
body.gradient-buttons-enabled .btn-primary {
    background-image: linear-gradient(to right, var(--primary-accent-color), var(--gradient-accent-color)) !important;
    border-color: var(--secondary-accent-color) !important;
    background-color: transparent !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: var(--secondary-text-color) !important;
    background-color: var(--primary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
    opacity: 0.8;
    transform: translateY(2px);
}

.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-image: none !important;
}

/* ========================================
   Pagination Override for Site Colors
   ======================================== */
.pagination > li > a,
.pagination > li > span {
    color: var(--primary-accent-color) !important;
    background-color: var(--primary-background-color) !important;
    border-color: var(--secondary-accent-color) !important;
    transition: all 0.3s ease;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: var(--secondary-text-color) !important;
    background-color: var(--primary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    color: var(--secondary-text-color) !important;
    background-color: var(--primary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span:focus {
    color: var(--primary-text-color) !important;
    background-color: var(--secondary-background-color) !important;
    border-color: var(--secondary-accent-color) !important;
    opacity: 0.6;
}


.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
    color: var(--primary-text-color) !important;
    background-color: var(--primary-accent-color) !important;
    border-color: var(--secondary-accent-color) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Forum Styles */
.like-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #999;
    font-size: var(--font-sm);
    padding: 5px 8px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.like-toggle:hover {
    color: #e74c3c;
    text-decoration: none;
    background-color: rgba(231, 76, 60, 0.1);
}

.like-toggle.liked {
    color: #e74c3c;
}

.like-toggle.liked:hover {
    color: #c0392b;
}

.like-count {
    font-size: var(--font-sm);
    font-weight: 500;
}

span[data-timestamp] {
    color: var(--primary-text-color);
    font-size: var(--font-sm);
}

/* Forum Topic Listing Styles */
.forum-topics-container {
    margin-top: 10px;
}

.forum-topic-row {
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #dad8d8;
}

/* Content Search Result Styles */
.content-search-result {
    border-left: 3px solid var(--primary-accent-color);
    padding-left: 10px;
}

.post-excerpt {
    margin-bottom: 10px;
    padding: 8px;
    background-color: var(--secondary-background-color);
    border-left: 2px solid #dad8d8;
    border-radius: 3px;
    transition: background-color 0.2s, border-left-color 0.2s;
}

.post-excerpt:hover {
    background-color: var(--bs-info-bg);
    border-left-color: var(--primary-accent-color);
    cursor: pointer;
}

.post-excerpt-meta {
    font-size: var(--font-sm);
    color: var(--secondary-text-color);
    margin-bottom: 5px;
}

.post-excerpt-text {
    font-size: var(--font-sm);
    line-height: 1.4;
}

.search-section-header {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: var(--font-lg);
    font-weight: bold;
    color: var(--primary-text-color);
}

/* Scroll target animation */
.forum-post-row:target {
    animation: highlight-post 2s ease-in-out;
}

@keyframes highlight-post {
    0% { background-color: var(--bs-warning-bg); }
    100% { background-color: transparent; }
}

.forum-posts-container {
    margin-top: 10px;
}

.forum-post-row {
    margin-bottom: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #dad8d8;
}

/* Forum Dropdown Menu Styling */
.forum-post-row .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.forum-post-row .dropdown-menu a i {
    width: 14px;
    text-align: center;
}

.top-left {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile Forum Styles */
@media (max-width: 767px) {
    .registerimg {
        display: none; /* Hide desktop headers on mobile */
    }

    .forum-topic-row {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
    .forum-post-row {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .topic-title-section,
    .post-title-section {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
    }

    .topic-title-section .forumlinks,
    .post-title-section .forumlinks {
        font-size: var(--font-md);
        font-weight: 500;
        margin-top: 5px;
    }

    .posts-section,
    .likes-section,
    .author-section,
    .date-section,
    .menu-section,
    .date-menu-section {
        text-align: left;
        padding: 5px 0;
    }
    
    .post-image {
        float: left;
        margin: 0 10px 10px 0;
        max-width: 120px;
    }
    
    .post-image img {
        max-width: 100%;
        height: auto;
    }
    
    .post-text {
        overflow: hidden;
    }

    .time-section {
        text-align: left;
        padding: 10px 0 0 0;
        margin-top: 10px;
    }

    .mobile-label {
        font-weight: bold;
        color: var(--primary-accent-color);
        margin-right: 8px;
        font-size: var(--font-xs);
        display: inline;
    }

    .forum-likes-section {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }

    .like-toggle {
        font-size: var(--font-xs) !important;
    }
    

    .post-menu {
        position: relative;
        right: auto;
        top: auto;
        margin-top: 5px;
        border: none;
        box-shadow: none;
        background: transparent;
    }
    
    .post-menu .menu-item {
        border: 1px solid #ddd;
        border-radius: 3px;
        margin-bottom: 5px;
        background: white;
    }
}

@media (min-width: 768px) {
    .mobile-label {
        display: none;
    }

    .posts-section,
    .likes-section,
    .time-section,
    .author-section,
    .date-section,
    .menu-section,
    .date-menu-section {
        text-align: center;
    }
    
    .post-date {
        font-size: var(--font-sm);
        color: var(--primary-text-color);
    }
    
    .post-date span[data-timestamp] {
        color: var(--primary-text-color);
        font-size: var(--font-xs);
    }
    
    .post-content-section {
        position: relative;
    }
    
    .post-image {
        float: left;
        margin-right: 15px;
        margin-bottom: 10px;
        max-width: 150px;
    }
    
    .post-text {
        overflow: hidden;
    }

    .post-date-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    
    .date-menu-section {
        position: relative;
    }
}

/* ========================================
   Shared Post Styles - Forum & Groups
   ======================================== */

/* Post type distinction styles */
.first-post,
.main-topic-post {
    border-left: 4px solid var(--primary-accent-color, #007bff);
}



.post-type-label {
    font-size: var(--font-xs, 0.7rem);
    font-weight: bold;
    margin-top: 5px;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}

.topic-label {
    background-color: var(--primary-accent-color, #007bff);
    color: var(--secondary-text-color, #fff);
}

/* Topic-specific styles */
.main-topic-header {
    margin-bottom: 10px;
}

.topic-title {
    margin: 0 0 10px 0;
    color: var(--primary-accent-color, #007bff);
    font-size: var(--font-lg, 1.2rem);
    font-weight: bold;
}

.main-topic-post .group_post_text {
    font-size: var(--font-md, 1rem);
    line-height: 1.5;
}

.reply-post .group_post_text {
    font-size: var(--font-sm, 0.85rem);
}



/* Mobile responsiveness for subtle indentation */
@media (max-width: 768px) {
    .reply-content {
        padding-left: 6px;
        margin-left: 4px;
    }
}

/* Gallery Like Button Styles */
.gallery-like-container {
    position: absolute;
    bottom: 8px;
    left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

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

.gallery-like-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 15px;
    padding: 6px 10px;
    color: #fff;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.gallery-like-button:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.gallery-like-button.liked {
    color: #e74c3c;
}

.gallery-like-button.liked:hover {
    color: #c0392b;
}

.gallery-like-button .like-count {
    font-size: var(--font-sm);
    font-weight: 500;
    color: inherit;
}

.gallery-like-button i {
    font-size: 14px;
}

/* Ensure relative positioning for image container */
.image-container {
    position: relative;
}

/* Lightbox action buttons container */
.gallery-lightbox-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 15px !important;
}

/* Style like button for lightbox */
.gallery-like-lightbox {
    position: static !important;
    opacity: 1 !important;
    display: inline-block !important;
    margin: 0 !important;
}

.gallery-like-lightbox .gallery-like-button {
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 6px 10px !important;
    color: #fff !important;
    font-size: var(--font-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    position: static !important;
    opacity: 1 !important;
}

.gallery-like-lightbox .gallery-like-button:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    transform: scale(1.05) !important;
}

.gallery-like-lightbox .gallery-like-button.liked {
    color: #e74c3c !important;
}

.gallery-like-lightbox .gallery-like-button.liked:hover {
    color: #c0392b !important;
}

.gallery-like-lightbox .like-count {
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
}

.gallery-like-lightbox .gallery-like-button i {
    font-size: 14px !important;
}

/* ========================================
   Progress Bar Overrides for Site Colors
   ======================================== */

/* Base progress bar styling */
.progress {
    background-color: var(--secondary-background-color) !important;
    border: 1px solid var(--primary-text-color) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress-bar {
    background-color: var(--primary-accent-color) !important;
    color: var(--secondary-text-color) !important;
    transition: width 0.6s ease;
}

/* Progress bar variants */
.progress-bar-success {
    background-color: var(--bs-success-bg) !important;
    color: var(--bs-success-color) !important;
}

.progress-bar-info {
    background-color: var(--bs-info-bg) !important;
    color: var(--bs-info-color) !important;
}

.progress-bar-warning {
    background-color: var(--bs-warning-bg) !important;
    color: var(--bs-warning-color) !important;
}

.progress-bar-danger {
    background-color: var(--bs-danger-bg) !important;
    color: var(--bs-danger-color) !important;
}

/* Striped progress bars */
.progress-striped .progress-bar,
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important;
    background-size: 40px 40px;
}

/* Animated striped progress bars */
.progress.active .progress-bar,
.progress-bar.active {
    animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

/* Three-field date input styling */
.date-triple-container {
    flex-wrap: nowrap;
}

.date-triple-container > div {
    margin-bottom: 0;
}

.date-field-month,
.date-field-day,
.date-field-year {
    font-size: var(--font-md);
    height: 34px;
}

.date-field-month {
    cursor: pointer;
}

.date-field-day::-webkit-outer-spin-button,
.date-field-day::-webkit-inner-spin-button,
.date-field-year::-webkit-outer-spin-button,
.date-field-year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.date-field-day[type=number],
.date-field-year[type=number] {
    -moz-appearance: textfield;
}



/* Google reCAPTCHA styling - ensure proper display */
.g-recaptcha {
    display: block;
    clear: both;
}


/*
 * Site-wide footer: fix overlap of footer link columns.
 * .footer_cell has a fixed 280px width in template.css, which works when it
 * floats freely, but overflows its parent when nested inside Bootstrap
 * .col-sm-4 / .col-xs-6 columns (member footer) that are narrower than
 * 280px, causing the cell to bleed into the next column. Let it fill its
 * column instead so it widens/shrinks with the available space.
 */
.col-sm-4 .footer_cell,
.col-xs-6 .footer_cell {
    width: 100%;
    float: none;
    display: block;
}

/* Give the member footer container more breathing room so its Bootstrap
 * columns have realistic space to work with, instead of a cramped fixed
 * 550px. Scoped to the member footer only (via .footer_inner--member) so
 * the affiliate footer's #footer_inner - which lays plain 280px
 * .footer_cell floats side by side without Bootstrap columns - keeps its
 * original wrapping behavior. */
#footer_inner.footer_inner--member {
    width: 100%;
    max-width: 970px;
}

/*
 * Page background media (image or video) for admin-configured Pages
 * (see MSS\PageTemplate). Rendered as a fixed full-viewport layer behind
 * the page content, which is given position: relative + a z-index above it.
 */
.page-background-media {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-color: #000;
}

.page-background-media img,
.page-background-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-background-media + .page-content-wrapper {
    position: relative;
    z-index: 1;
}

.page-unmute-btn {
    position: fixed;
    top: 66%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 32px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: page-unmute-pulse 2s ease-in-out infinite;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.1s;
}

.page-unmute-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) scale(1.05);
}

@keyframes page-unmute-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* Dashboard "Connect" widget card */
.connect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 4px 12px 12px;
    box-sizing: border-box;
}

.connect-card-photo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Wraps just the photo (not the username/meta text below) so the Skip/Connect buttons can be
   pinned to its bottom corners — this avoids needing a separate row for them, keeping the card
   compact inside the dashboard widget's fixed-height frame and letting the photo use the
   freed-up space. */
.connect-card-photo-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.connect-card-photo-link {
    display: inline-block;
    max-width: 100%;
}

.connect-card-btn {
    position: absolute;
    bottom: 4px;
    width: clamp(36px, 11vw, 48px);
    height: clamp(36px, 11vw, 48px);
    border-radius: 50%;
    font-size: clamp(15px, 4.5vw, 20px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.connect-card-btn--skip {
    left: 4px;
}

.connect-card-btn--connect {
    right: 4px;
}

.connect-card-username {
    font-size: var(--font-md);
    font-weight: 600;
    margin-top: 7px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connect-card-username-link {
    color: inherit;
    text-decoration: none;
}

.connect-card-meta {
    font-size: var(--font-xs);
    /* Use the primary (not secondary) text color — this text sits on the widget's own
       .whtbg/.dv_home_box white background, not on the secondary-accent background that
       --secondary-text-color is meant to contrast against, so using it here could render
       unreadably light-on-white depending on the configured theme colors. This mirrors the
       convention already used for the equivalent text in the rich-profile popup card
       (.profile-expanded-card .profile-details, below). */
    color: var(--primary-text-color, #333);
    margin-top: 2px;
}

.connect-card-type {
    margin-top: 5px;
}