.landing-page {
    width: 330px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
/*    padding: 0;*/
    padding: 16px;
    background-color: var(--typography-white);
}

.landing-page-content {
    width: 328px;
    height: 608px;
    padding: 24px 0 7px;
}
.feed-comment .quick-add-menu-button {
    background: transparent !important;
}


.landing-page-default {
    width: 100%;
    height: 3238px;
    background-color: var(--landing);
}
#home_habit_content .content-section {
    width: 100%;
    overflow: hidden;
}

#today_header {
    margin-top: 20px;
    padding-left: 10px !important;
    margin-bottom: 20px !important;
    width: 100%;
    margin-left: 0px !important
}


.feed-menu-widget {
    width: auto;
}

@media only screen and (max-width: 480px) {
    .feed-menu-widget {
        flex:2;
    }

    .logo {
        /*        margin-top: 3px;*/
    }
}








.login-top-nav {
    width: 100%;
    height: 64px;
    margin: 0 0 16px;
    padding: 16px;
    display: block;
    background-color: var(--typography-white);
    box-shadow: 0px 3px 15px -4px rgba(17, 17, 15, 0.12);
}

.bottom-nav {
    width: 360px;
    height: 549px;
    margin: 200px 0 0;
    padding: 40px 24px 16px;
    background-color: var(--background-light-purple);
}



.section-header {
    /*    width: 296px;*/
    height: 26px;
    margin: 0 0 6px;
    font-family: var(--global-font-family);
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}




.comment-user {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-01);
}
.comment-date {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    margin-left: 10px;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-04);
}



.list-comment {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    margin-left: 10px;
    font-style: normal;
    line-height: 1.40;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-03);
}

.feed-comment-element {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.feed-checkbox {
/*    margin-top:3px;*/

}




.feed-daterange {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-04);
}

    .feed-comment-textbox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

.feed-tags {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-01);
}

    .feed-card {
        background-color: var(--card);
    }

.comment-text {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-01);
}


    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top: 10px;
    }

    .landing-page-blocks {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }

.form-element-label {
    font-family: var(--global-font-family);
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-01);
}

.form-element-body {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--typography-black);
}

    .content {
        width: 360px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 40px 16px 51px;
        background-color: var(--background-light-purple);
    }

    @media only screen and (min-width:600px) {
        .content {
            width: 700px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    }

    .add-new-interest-title {
        font-size: 18px;
    }

    @media only screen and (max-width:480px) {
        .add-new-interest-title {
            font-size: 12px;
        }
    }


.landing-page-font {
    font-weight: bold;
    font-family: var(--global-font-family);
    color:var(--label);
}


.dashboard-title {
    height: auto;
    margin: 0;
    font-family: var(--global-font-family);
    font-size: 32px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
    margin-top: 20px;
    margin-bottom: 20px;
}

    @media only screen and (max-width:480px) {
        .dashboard-title {
            font-size: 20px;
            margin-top: 0px;
            margin-bottom: 10px;
        }
    }


.add-journal-title {
    height: auto;
    margin: 0;
    font-family: var(--global-font-family);
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:1200px) {
        .add-journal-title {
            font-size: 16px;
        }
    }


.add-journal-subtitle {
    height: auto;
    margin: 0;
    font-family: var(--global-font-family);
    font-size: 16px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:1200px) {
        .add-journal-subtitle {
            font-size: 10px;
        }
    }

    .icon-circle {
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }

        .icon-circle.small {
            width: 30px;
            height: 30px;
        }

    @media only screen and (max-width:1200px) {
        .icon-circle {
            width: 25px;
            height: 25px;
            margin-bottom: 5px;
        }

            .icon-circle.small {
                width: 20px;
                height: 20px;
            }
    }

    .material-symbols-outlined.circle-icon {
        margin-top: 4px;
        margin-left: 6px;
        font-size: 48px;
        color: var(--colors-primary);
    }

        .material-symbols-outlined.circle-icon.small {
            margin-top: 3px;
            margin-left: 3px;
            font-size: 24px;
            color: var(--colors-primary);
        }


    @media only screen and (max-width:1200px) {
        .material-symbols-outlined.circle-icon {
            margin-top: 4px;
            margin-left: 3px;
            font-size: 20px;
        }

            .material-symbols-outlined.circle-icon.small {
                margin-top: 1px;
                margin-left: 0px;
                font-size: 18px;
            }
    }


    .dashboard-setup-icon {
        margin-left: 10px;
        margin-top: 28px;
    }

    @media only screen and (max-width:480px) {
        .dashboard-setup-icon {
            margin-top: 20px;
            font-size: 16px;
        }
    }

.home-page-greeting {
    font-size: 48px;
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    height: auto;
    font-family: var(--global-font-family);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:480px) {
        .home-page-greeting {
            font-size: 30px;
            margin-left: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            display: none;
        }
    }

    .content-page-title {
    }

    .carousel-caption {
        position: relative;
        left: 0;
        top: 0;
    }



    .carousel.tutorial {
        width: 95%;
        height: 95%;
    }

    .material-symbols-outlined.right-panel-back-button {
        font-size: 32px;
        margin-right: 10px;
/*        font-weight: bold;*/
    }

    .right-panel-content-title {
        font-size: 28px;
        font-weight: bold;
        color:var(--label);
    }



    @media only screen and (max-width:480px) {
        .carousel.tutorial {
        width: 95%;
        height: 95%;
        }

        .material-symbols-outlined.right-panel-back-button {
            font-size: 36px;

        }

        .right-panel-content-title {
            font-size: 20px;

        }
    }


    @media only screen and (max-width:480px) {
        .content-page-title {
/*            font-size: 20px;
            margin-top: 10px;
            margin-bottom: 10px;*/
        }
            .content-page-title.search-box {
/*                font-size: 16px;*/
            }
    }

.side-card-title {
    height: auto;
    margin: 0;
    font-family: var(--global-font-family);
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
    margin-top: 20px;
    margin-bottom: 20px;
}

    @media only screen and (max-width:480px) {
        .side-card-title {
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }

.landing-page-subtitle {
    width: 312px;
    height: 52px;
    margin: 16px 0 0;
    font-family: var(--global-font-family);
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

        .landing-page-subtitle.small {
            font-size: 14px;
        }

    .landing-textbox {
        width: 328px !important;
        height: 48px;
        margin: 3px 0 0;
        max-width: none;
        padding: 6px 16px;
        border-radius: 4px;
        border: solid 1px var(--greyscale-grey-04);
        background-color: var(--typography-white);
    }

        .landing-textbox.textarea {
            height: 200px;
        }

        .landing-textbox.narrow {
            width: 175px !important;
        }

    @media only screen and (max-width:480px) {
        .landing-textbox.narrow {
            width: 125px !important;
        }
    }

@media only screen and (max-width:480px) {
    .landing-textbox {
        font-size: 15px;
        height: 30px;
    }
}

    .results-region {
        width: 1000px;
        height: auto;
    }

.one-panel {
    width: 1000px;
    height: auto;
}

    .list-region {
        width: 800px;
        height: auto;
        flex: 7;
        background-color: white;
    }

.btn-with-badge {
    position: relative;
}


/* If your theme shifts padding/line-height on :active, freeze them */
.btn-with-badge:active {
    padding: .375rem .75rem; /* match your normal .btn padding */
    line-height: 1.5;
}
    .btn-with-badge .filter-icon-badge {
        position: absolute;
        top: 0px; /* adjust as needed */
        right: 0px; /* adjust as needed */
        transform: translate(50%, -50%); /* nudges into corner cleanly */
        pointer-events: none; /* keep clicks on button */
    }
@media only screen and (max-width:480px) {
    .btn-with-badge .filter-icon-badge {
        transform: translate(70%, -40%);  was 45%, nudged further right 
    }
}


.reset-filter:hover {
    cursor: pointer;
    color:green;
}

.log-row {
    font-size: 16px;
    padding-left: 5px;
}
.health-record-region {
    width: 1000px;
    height: auto;
    flex: 7;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

.contact-row{
    margin-bottom:5px;
}
.content-page-header {
    width: 84%;
}

.context-menu-hint {
    color: var(--greyscale-grey-03); 
    font-size: 14px;
}

@media only screen and (max-width:480px) {
    .context-menu-hint {
        display:none;
    }
    .content-page-header {
        width: 100%;
    }
}
input::placeholder {
    color: var(--greyscale-grey-04);
}
.count-element {

}



@media only screen and (max-width:1400px) {
    .results-region {
            width: 900px;
        }

        .list-region {
            width: 600px;
        }
    .content-page-header {
        width: 78%;
    }

        .health-record-region {
            width: 600px;
        }

    }

    @media only screen and (max-width:1300px) {
        .results-region {
            width: 800px;
        }
        .content-page-header {
            width: 81%;
        }

        .list-region {
            width: 500px;
        }

        .health-record-region {
            width: 500px;
        }
    }

    @media only screen and (max-width:1200px) {
        .results-region {
            width: 100%;
        }
        .content-page-header {
            width: 100%;
        }

        .list-region {
            width: 100%;
        }

        .health-record-region {
            width: 100%;
        }
    }

    

    @media only screen and (max-width:767px) {
        .results-region {
            width: 100%;
        }

        .list-region {
            width: 100%;
        }
        .content-page-header {
            width: 100%;
        }
        .health-record-region {
            width: 100%;
        }
    }

    @media only screen and (max-width:480px) {
        .results-region {
            width: 100%;
        }
        .content-page-header {
            width: 100%;
            margin-left:10px;
            margin-right:10px
        }
        .list-region {
            width: 100%;
        }

        .health-record-region {
            width: 100%;
        }
        .log-row {
            font-size: 10px;
        }

    }




.landing-textbox-label {
    width: 328px;
    height: 16px;
    font-family: var(--global-font-family);
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--greyscale-grey-01);
}

        .landing-textbox-label.error {
            color: var( --alert);
        }

.item-quantity-text {
}

.item-quantity-edit {
    max-width:100px;
}
.landing-texbox:focus {
    border-color: var(--alert) !important;
}

    .input.landing-textbox.error:focus {
        border-color: var( --alert) !important;
    }

    .landing-textbox.error {
        border: solid 1px var( --alert);
    }

.button-label {
    font-family: var(--global-font-family);
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -0.5px;
    text-align: center;
}


.snackbar {
    text-align: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background-color: #C7DDF2;
    color: #003C71; /* ConXus dark blue */
    padding: 12px 28px;
    border-radius: 10px;
    border: 1px solid #A3C4E3;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0;
    /*    transition: opacity .25s ease, transform .25s ease;*/
    transition: opacity .25s ease, top .25s cubic-bezier(.33,1,.68,1);
    top: -60px;
}

@media only screen and (min-width: 900px) {
    .snackbar {
        font-size: 17px;
        padding: 18px 34px;
        max-width: 420px; /* wider = looks bigger */
        min-width: 300px; /* ensures consistent feel */
        border-width: 1.5px; /* slightly stronger */
        box-shadow: 0 6px 18px rgba(0,0,0,0.18);
        border-radius: 10px;
    }
}

    @media only screen and (max-width:480px) {
        .snackbar {
            font-size: 16px;
            border: 1px solid #AFCDE6;
            padding: 12px 20px;
            top:60px;
            width: calc(100% - 40px); /* 20px margin on each side */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
    }
    .page-icon-button_title{

    }

@media only screen and (max-width:480px) {
    .page-icon-button_title {
        display:none;
    }
    .item-quantity-edit {
        max-width: 70px;
    }
}

.quantity-widget {
    width: 100px;
    margin-right: 5px;
    min-width: 100px;
    max-width: 100px;
    padding:5px;
    padding-left:10px;
}

@media only screen and (max-width:480px) {
    .quantity-widget {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
    }
}

.list-comment.item-time {
    margin-right:10px;
    margin-left:10px;
}

@media only screen and (max-width:480px) {
    .list-comment.item-time {
        margin-right: 5px;
        margin-left: 0px;
    }
}
/*SNACKBAR STYLES FOR TEMPALERT*/
/* The snackbar - position it at the bottom and in the middle of the screen */
/*#snackbar {
    visibility: hidden;*/ /* Hidden by default. Visible on click */
    /*min-width: 250px;*/ /* Set a default minimum width */
    /*margin-left: -125px;*/ /* Divide value of min-width by 2 */
    /*margin-left: auto;
    margin-right:auto;*/
    /*background-color: #333;*/ /* Black background color */
    /*color: #fff;*/ /* White text color */
    /*text-align: center;*/ /* Centered text */
    /*border-radius: 2px;*/ /* Rounded borders */
    /*padding: 16px;*/ /* Padding */
    /*position: fixed;*/ /* Sit on top of the screen */
    /*z-index: 1;*/ /* Add a z-index if needed */
    /*left: 50%;*/ /* Center the snackbar */
         /* 30px from the bottom */
/*}*/

/* Show the snackbar when clicking on a button (class added with JavaScript) */
    .snackbar.show {
        visibility: visible; /* Show the snackbar */
        top: 40px; /* final position */
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
        /* -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
    }


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

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

/*END SNACKBAR STYLES*/

.category-icon {
    color: blue;
    font-size: 24px;
    margin-left: 12px;
    margin-top: 12px;
}

@media only screen and (max-width:480px) {
    .category-icon {
        font-size: 12px;
        margin-left: 5px;
        margin-top: 5px;
    }

    .material-symbols {
        font-size: 12px;
    }
}

.list-header {
    font-family: var(--global-font-family);
    color:var(--label);
}
.list-count {
    font-family: var(--global-font-family);
    color: var(--label);
}

.edit-form-label {
    font-family: var(--global-font-family);
    font-size: 20px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: left;
    color: var(--label);
    margin-top: 10px;
}

.edit-form-label.in-box {
    font-size: 14px;
    font-style: normal;
    font-weight: lighter;
    margin-top: -2px;
    margin-left: 15px;
    background-color: white;
    position: absolute;
}

.photo-container {
    width:80%;
    margin:auto;
}
.search-photo-container {
    display: flex; /* activate flexbox */
    flex-wrap: wrap; /* allow wrapping to next row */
    gap: 10px; /* space between photos */
    align-items: flex-start; /* keep items top-aligned */
}

    .search-photo-container img {
        width: 300px;
        height: auto;
        border-radius: 6px;
        display: block; /* removes extra inline spacing */
    }

.photo-caption.search-photo {
    position: relative;
    bottom: 0;
    width: 300px;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: .8rem;
    padding-left: 10px;
    color:white;
    text-align: left;
    box-sizing: border-box;
}
    .search-photo-title {
        width:300px;
        margin-bottom:5px;
        margin-top:10px;
        font-weight: 500;
    }
        .search-photo-title
        {
            cursor:pointer;
        }

@media only screen and (max-width:480px) {
    .edit-form-label {
        font-size: 14px;
    }

    .photo-container {
        width: 100%;
    }

    .search-photo-container img {
        width: 150px;
    }

    .search-photo-title {
        width: 150px;
    }

    .photo-caption.search-photo {
        font-size: .6rem;
        width: 150px;
    }
}


.edit-form-label.error {
    color: var( --alert);
}

/*    .ag-xlarge.bold {
        font-weight: bold;
    }*/

.add-another-icon{
    font-size:30px;
}

@media only screen and (max-width:480px) {
    .add-another-icon {
        font-size: 16px;
    }
    .material-symbols-outlined {
        font-size: 24px;
    }
        .material-symbols-outlined.feed-context-menu {
            margin-right: -9px !important;
        }
}

.toggle-button-title {
    margin-right: 10px;
    color: black;
    font-size: 16px;
}

.profile-right-panel {
    padding-left:50px;
}

@media only screen and (max-width: 481px) {
    .profile-right-panel {
        padding-left: 10px;
    }
}

.toggle-button-title.important-button {
    margin-right: 10px;
    color: white;
    font-size: 16px;
}

.page-add-new-title {
    margin-right: 10px;
    color: white;
    font-size: 16px;
    margin-top: -5px;
}

.page-add-new-hint {
    display: none;
}
.page-add-new-hint.force-small{
    display:block;
}

@media only screen and (max-width:1200px) {
    .toggle-button-title {
        margin-right: 10px;
        color: black;
        font-size: 16px;
    }
}

.page-add-new-title.force-small {
    display: none;
}

.page-add-new-hint.force-small {
    font-size: 10px;
}

@media only screen and (max-width:800px) {
    .page-add-new-hint {
        display: block;
    }

    .page-add-new-title {
        display: none;
    }

    .page-add-new-title.keep-title {
        display: block;
    }

    .toggle-button-title {
        display: none;
        font-size: 16px;
        /*            margin-top: -3px;*/
    }

    .toggle-button-icon {
        display: none;
        font-size: 16px !important;
    }
}

.modal {
    overflow-y: auto !important;
}

.page-icon-button-title {
    margin-top: 0px;
}

.page-add-new-button {
    width: 128px;
    height: 40px;
    margin: 0 16px 0 0;
    padding: 8px 16px 8px 15px;
    border-radius: 6px;
    white-space: nowrap;
    color: black;
    background-color: var(--typography-white);
    font-family: var(--global-font-family);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin-top: 15px;
}

.page-add-new-button:focus {
    outline: none;
}

.page-add-new-button:active {
    transform: translateY(4px);
}

.page-add-new-button.force-small {
    width: 45px;
    min-width: 45px;
    height: 45px;
    padding: 3px 8px 3px 8px;
    border: none;
    background-color: transparent;
}
    .page-add-new-button:hover {
        background-color: #C7DDF2 !important;
        border-color: #7AAED4;
        color: var(--important-text);
        border: none;
        transform: scale(1.05);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    }

.align-elements {
    align-items:center;
}

.page-add-new-icon {
    padding-top: 0px;
    margin-top: -2px;
    font-size: 18px;
    margin-right: 0px;
    margin-left: 12px !important;
}

.page-add-new-icon.force-small {
    font-size: 18px;
    flex:1;
    margin-top:0px;
    margin-left:0px !important;
}


@media only screen and (max-width:1200px) {
    .page-add-new-button {
        width: 70px;
        height: 30px;
        font-size: 12px;
        text-align: center;
        padding: 4px 8px 4px 8px;
    }

    .page-add-new-icon {
        padding-top: 0px;
        font-size: 24px;
        margin-right: 0px
    }

    .page-add-new-title {
        margin-top: -2px;
        padding-top: 0px;
        font-size: 12px;
    }

    .page-icon-button-title {
        margin-top: 0px;
    }
}

.empty-list-message {
    font-size: 20px;
}


@media only screen and (max-width: 481px) {
    .empty-list-message {
        font-size: 16px;
    }

    .page-add-new-button {
        width: 40px !important;
        height: 40px;
        padding: 3px 4px 3px 4px;
        border:none;
        background-color:transparent;
    }
        .page-add-new-button.browser-add-recipe {
            width: 65px !important;
            height: 65px;
            border: 1px solid lightgray;
        }
    .page-add-new-icon {
        flex: 1;
        font-size: 18px;
    }
}





 




.button-bar {
    background-color: var(--button-bar);
    border-radius: 5px;
    padding: 5px;
    border: 1px solid black;
    flex: 9;
    min-height: 40px;
}
.edit-form-label-column {
    width: auto;
    flex: 2;
}

.edit-form-entry {
    width: auto;
    flex: 8;
}

@media only screen and (max-width: 768px) {
    .edit-form-label-column {
        width: auto;
        flex: 2;
    }

    .edit-form-entry {
        width: auto;
        flex: 4;
    }
}
.edit-popup-section .edit-form-entry .popup-form-section-row .twitter-typeahead{
    width:90% !important;
}
@media (max-width: 768px) {
    .edit-popup-section .edit-form-entry .popup-form-section-row .twitter-typeahead {
        width: 91% !important;
    }
}
@media (max-width: 480px) {
    .edit-popup-section .edit-form-entry .popup-form-section-row .twitter-typeahead {
        width: 83% !important;
    }
}

    #profile_interest_section .popup-form-section-row .twitter-typeahead {
        width: 93% !important;
    }

    @media (max-width: 768px) {
        #profile_interest_section .popup-form-section-row .twitter-typeahead {
            width: 92% !important;
        }
    }

    @media (max-width: 480px) {
        #profile_interest_section .popup-form-section-row .twitter-typeahead {
            width: 85% !important;
        }
    }

    @media only screen and (max-width: 481px) {
        .edit-form-label-column {
            width: auto;
            flex: 2;
            min-width: -webkit-fill-available;
        }

        .edit-form-entry {
            width: auto;
            flex: 4;
        }
    }

    @media only screen and (max-width: 385px) {
        .edit-form-label-column {
            width: auto;
            flex: 1;
        }

        .edit-form-entry {
            width: auto;
            flex: 3;
        }
    }

    .editing-group {
        border-style: solid;
        width: 100%;
        border-width: thin;
        border-radius: 10px;
        border-color: black;
        padding: 8px;
    }
    .editing-group.multiple {
        padding:5px;
        overflow:hidden;
    }

    .content-page-search {
        margin-top: 15px;
    }


    /*SEARCH WIDGET STYLES*/
    .search-bar-button {
        border-width: thin;
        border-right: none;
        height: 44px;
        /*border-bottom-color: var(--greyscale-grey-04);*/
        border-bottom: solid 1px var(--greyscale-grey-04);
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-color: var(--greyscale-grey-04);
        max-width: 90%;
    }

        .search-bar-button.right {
            border-left-style: none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .search-bar-button left {
            border-right-style: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

    .clear-search-button {
        display: flex;
        align-items: center;
        margin-top: 20px;
        margin-left: -35px;
    }

    @media only screen and (max-width: 481px) {
        .clear-search-button {
            margin-top: 0px;
        }
    }

    .seach-section {
        width: 100%;
    }

    .search-bar-textbox {
        margin: 3px 0 0;
        max-width: 90%;
        padding: 6px 16px;
        border-radius: 4px;
        border: solid 1px var(--greyscale-grey-04);
        margin-top: 0px;
        margin-right: 5px;
        border-left-style: none;
        /*    border-right-style: none;*/
        height: 44px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        background-color: var(--greyscale-grey-06);
    }

    @media only screen and (min-width: 481px) {
        .search-bar-textbox.content-page {
            margin-top: 15px;
        }
    }

    @media only screen and (min-width: 600px) {
        .search-bar-textbox {
            flex: 6;
        }
    }

    @media only screen and (max-width: 480px) {
        .search-bar-textbox {
            display: flex;
            flex: 1 0 80% !important;
            /*max-width: 200px;*/
        }

        .home_search_text {
            display: flex;
            flex: 0 0 65% !important;
        }

        .search-bar-button {
            display: flrx;
/*            flex: 0 0 15%;*/
        }

        .content-page-search {
            margin-top: 0px;
        }
    }

    /*END SEARCH WIDGET STYLES*/

    .selection-card {
        background-color: var(--card);
/*        border-width: thin;
        border-style: solid;*/
    }



    .light-blue-badge {
        background-color: var(--greyscale-grey-06); /*var(--background-light-purple);*/
        width: 40px;
        height: 40px;
        font-weight: bold;
        margin-top: -5px;
        padding: 5px 10px 10px 6px;
        border-radius: 10px;
        color: darkblue;
        font-size: 20px;
    }

    @media only screen and (max-width:480px) {
        .light-blue-badge {
            width: auto;
            height: 30px;
            font-weight: bold;
            margin-top: -5px;
            padding: 5px 10px 10px 6px;
            border-radius: 10px;
            color: darkblue;
            font-size: 16px;
        }
    }

    /* COMMUNITY PAGE STYLES*/
    .community-column {
        padding: 5px;
    }

        .community-column.left {
            width: 35%;
            margin-right: 20px
        }

        .community-column.right {
            width: 60%;
        }

    @media only screen and (max-width:480px) {
        .community-column.left {
            width: 100%;
            margin-right: 0
        }

        .community-column.right {
            width: 100%;
        }
    }

    /*END COMMUNITY PAGE STYLES*/

    @media print {
        .pagebreak {
            break-after: auto
        }
        /* page-break-after works, as well */
    }

    .selection-list {
        align-items: center;
    }

        .selection-list:hover {
            /*   background-color: var(--background-light-purple);*/
            background-color: var(--greyscale-grey-06) !important;
            cursor:pointer;
        }







    .page-nav-button {
        /*        //margin-top: 0;
       // margin-bottom: 20px;
        //font-size: 36px;*/
        font-weight: normal;
    }

        .page-nav-button:hover {
            cursor: pointer;
        }

    @media only screen and (max-width:480px) {
        .page-nav-button.large {
            font-size: 36px;
        }
    }

    /*TITLE TEXT AND TITLE ICON*/
    .title-icon {
        /*        //font-size: 24px;
        //margin-top: 10px;*/
        margin-right: 10px;
        display: inline-flex !important;
        vertical-align: text-bottom;
    }

        .title-icon.large {
            /*            //margin-top: 10px;*/
        }

    .title-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color:var(--label);
        font-weight: bold;
    }

        .title-text.small {
            /*            //font-size: 16px;*/
        }

        .title-text.home-card-title {
            /*            //font-size: 16px;*/
            font-weight: 500;
        }


        .title-text.truncated {
            width: 216px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


            .title-text.truncated.truncate-icon {
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    @media only screen and (max-width:480px) {
        .title-icon {
            /*            //font-size: 16px !important;
            //margin-top: 5px;*/
            margin-right: 5px;
        }

            .title-icon.large {
                /*                //font-size: 20px !important;
                //margin-top: 5px;*/
                margin-right: 5px;
            }

        .title-text {
            /*            //font-size: 14px;
            //margin-top: 0px*/
        }

            .title-text.large {
                /*                //font-size: 20px;*/
            }

            .title-text.truncated {
                width: 163px;
            }

                .title-text.truncated.truncate-icon {
                    width: 102px;
                }

            .title-text.home-card-title {
                margin-top: 0px;
            }
    }



    @media only screen and (max-width:768px) {
        .title-text {
            /*            //font-size: 16px;*/
            margin-top: 0px
        }

            .title-text.large {
                /*                //font-size: 20px;*/
            }

            .title-text.truncated {
                width: 140px;
            }

                .title-text.truncated.truncate-icon {
                    width: 102px;
                }
    }

    /*END OF TITLE TEXT AND TITLE ICON*/

    .feed-body.community-description {
        font-size: 14px;
        line-height: normal;
    }

    .community-description.truncated {
        width: 216px !important;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media only screen and (max-width:480px) {
        .community-description.truncated {
            width: 163px !important;
        }
    }

    @media only screen and (max-width:768) {
        .community-description.truncated {
            width: 140px !important;
        }

        .community-description {
            font-size: 10px
        }
    }

    .profile-edit-widget {
        /*        min-width: initial;
        max-width: inherit;*/
    }

    .navigation-card-title.truncated {
        width: 216px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media only screen and (max-width:480px) {
        .navigation-card-title.truncated {
            width: 163px !important;
        }
    }



    .title-count {
        background-color: var(--greyscale-grey-06);
        display: block;
        width: 40px;
        height: 40px;
        font-weight: bold;
        /*margin-top:10px;*/
        padding: 5px 10px 10px 6px;
        border-radius: 10px;
        color: darkblue;
        font-size: 20px;
        margin-left: 10px;
    }

    @media only screen and (max-width:480px) {
        .title-count {
            font-size: 16px;
            /*margin-top: 5px;*/
            height: 30px;
            width: auto;
            padding: 0px 5px 0px 5px;
        }
    }

    .modal-title-icon {
        /*        font-size: 24px;
        margin-top: 20px*/
    }

    @media only screen and (max-width:480px) {
        .modal-title-icon {
            /*            font-size: 16px;
            margin-top: 8px*/
        }
    }



    .raised-panel {
        border-radius: 20px;
        box-shadow: 1px 3px 15px -4px gray;
    }

    .material-symbols-outlined.close-panel {
        display: none;
    }

    @media only screen and (max-width:1024x) {
        .material-symbols-outlined.close-panel {
            font-size: 30px;
            font-weight: bold;
            display: block;
        }
    }

    .material-symbols-outlined.mobile-menu-icon {
        font-size: 24px;
    }

    @media only screen and (max-width:320px) {
        .material-symbols-outlined.mobile-menu-icon {
            font-size: 20px;
        }
    }


    /*HOME CARD*/
    .home-card {
        width: 195px;
        height: 195px;
        border-radius: 6px;
        margin-left: 0px;
        margin-bottom: 24px;
        box-shadow: 1px 3px 15px -4px rgba(17, 17, 15, 0.12);
        margin-right: 24px;
        background-color: #FFF8BC;
        flex-shrink: 0;
        padding: 10px;
    }

    .home-card-title {
        font-size: 24px;
    }

    .home-card-icon {
        font-size: 24px;
    }

    .home-card:hover {
        cursor: pointer;
    }

    .home-card:focus {
        outline: none;
    }

    .home-card:active {
        transform: translateY(4px);
    }

    /*HOME CARD BREAKPOINTS*/
    /*320px, 480px, 768px, 1024px, 1280px and 1440px*/

    @media only screen and (max-width:1440) {
        .home-card {
            width: 175px;
            height: 175px;
        }

        .home-card-title {
            font-size: 18px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 18px;
        }
    }

    @media only screen and (max-width:1280) {
        .home-card {
            width: 150px;
            height: 150px;
        }

        .home-card-title {
            font-size: 16px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 16px;
        }
    }

    @media only screen and (max-width:1024) {
        .home-card {
            width: 140px;
            height: 140px;
        }

        .home-card-title {
            font-size: 14px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 16px;
        }
    }

    @media only screen and (max-width:768) {
        .home-card {
            width: 125px;
            height: 125px;
        }

        .home-card-title {
            font-size: 12px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 16px;
        }
    }


    @media only screen and (max-width:480px) {
        .home-card {
            width: 94px;
            height: 94px;
        }

        .home-card-title {
            font-size: 8px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 24px;
        }
    }


    @media only screen and (max-width:320px) {
        .home-card {
            width: 135px;
            height: 135px;
        }

        .home-card-title {
            font-size: 13px;
            margin-top: 0px;
            line-height: 14px;
        }

        .home-card-icon {
            font-size: 24px;
        }
    }

    /* END HOME CARD BREAKPOINTS*/



    .core-content-region.one-panel {
        width: 1000px;
    }

    @media only screen and (max-width:1000px) {
        .core-content-region.one-panel {
            width: 100%;
        }
    }


    .no-style {
        text-decoration: none !important;
    }

    .home-card a:hover {
        text-decoration: none !important;
    }


    .home-card-body {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        padding: 5px;
        background-color: var(--typography-white);
    }


    .home-card-image-div {
        width: 80px;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }

    .home-card-image {
        /*    width:142px;
    height:102px;*/
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
        margin: auto;
    }

    .header-photo {
        width: 100%;
        height: 250px;
        margin-top: 0;
        position: relative;
        object-fit: cover;
    }

    .sample-photo {
        width: 100%;
        height: auto;
        margin-top: 0;
        position: relative;
        object-fit: cover;
    }

    @media only screen and (max-width: 480px) {
        .header-photo {
            height: 100px;
        }
    }


    .home-card-thumbnail {
        display: none;
    }

    @media only screen and (max-width: 1200px) {
        .home-card-thumbnail {
            display: block;
        }
    }

    @media only screen and (max-width: 480px) {
        .home-card-thumbnail {
            display: block;
        }
    }

    .home-card-top {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        height: 120px;
        /*    padding:10px*/
    }

    @media only screen and (max-width: 1200px) {
        .home-card-top {
            display: none;
        }
    }

    @media only screen and (max-width: 480px) {
        .home-card-top {
            display: none;
        }
    }

    .badge-button {
        border-radius: 10px;
        width: auto;
        height: 30px;
        padding: 0 5px 5px 5px;
        background-color: transparent;
    }

        .badge-button:focus {
            outline: none;
        }

    .edit-field-font {
        font-size: 20px;
        padding-left: 10px;
    }

    @media only screen and (max-width: 480px) {
        .edit-field-font {
            font-size: 14px;
        }
    }

    .email-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }


        .email-button:hover {
            background-color: #0056b3;
        }

    .context-menu-item {
    }

        .context-menu-item:hover {
            background-color: var(--background-light-purple);
        }

    /* Callout styles*/
    div.callout {
        width: 300px;
        float: left;
    }

    div.callout {
        background-color: var(--colors-primary);
        background-image: -moz-linear-gradient(top, var(--colors-primary), var(--colors-primary));
        position: relative;
        color: #ccc;
        padding: 10px;
        border-radius: 3px;
        box-shadow: 0px 0px 20px #999;
        margin: 25px;
        min-height: 50px;
        border: 1px solid #333;
        text-shadow: 0 0 1px #000;
        /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
    }

    .callout::before {
        content: "";
        width: 0px;
        height: 0px;
        /*border: 0.8em solid transparent;*/
        border: 1em solid transparent;
        position: absolute;
    }

    .callout.top::before {
        left: 45%;
        bottom: -25px;
        border-top: 10px solid var(--colors-primary);
    }

    .callout.bottom::before {
        left: 45%;
        top: -25px;
        border-bottom: 10px solid var(--colors-primary);
    }

    .callout.left::before {
        right: -25px;
        top: 40%;
        border-left: 10px solid var(--colors-primary);
    }

    .callout.right::before {
        left: -25px;
        top: 40%;
        border-right: 10px solid var(--colors-primary);
    }

    .callout.top-left::before {
        left: 7px;
        bottom: -25px;
        border-top: 10px solid var(--colors-primary);
    }

    .callout.top-right::before {
        right: 7px;
        bottom: -25px;
        border-top: 10px solid var(--colors-primary);
    }

    .callout.bottom-right::before {
        right: 7px;
        top: -25px;
        border-bottom: 10px solid var(--colors-primary);
    }

    .callout.bottom-left::before {
        left: 7px;
        top: -25px;
        border-bottom: 10px solid var(--colors-primary);
    }

.card-category {
    font-size: 12px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--greyscale-grey-03);
    margin-bottom: 5px;
}

.card-contributor {
    font-size: 12px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:480px) {
        .card-contributor {
            font-size: 12px;
        }
    }

    .explore-card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        /*        padding:0 20px 0 20px;*/
        margin-bottom: 30px;
    }

    @media only screen and (max-width:1400px) {
        .explore-card-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            padding: 0 5px 0 5px;
        }
    }

    @media only screen and (max-width:768px) {
        .explore-card-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            padding: 0 5px 0 5px;
        }
    }

    @media only screen and (max-width:480px) {
        .explore-card-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            padding: 0 5px 0 5px
        }
    }

    .explore-card-container.medium {
        width: 40%;
        flex-wrap: wrap;
    }


    @media only screen and (max-width:480px) {
        .explore-card-container.medium {
            width: 100%;
        }
    }

    .home-navigation-button {
        display: block;
    }

    @media only screen and (max-width:1400px) {
        .home-navigation-button {
            display: none !important;
        }
    }

    @media only screen and (max-width:1200px) {
        .home-navigation-button {
            display: none !important;
        }
    }

    @media only screen and (max-width:768px) {
        .home-navigation-button {
            display: none !important;
        }
    }

    @media only screen and (max-width:480px) {
        .home-navigation-button {
            display: none !important;
        }
    }

    .sticky-icon:hover {
        cursor: pointer;
    }

    .filter-menu-icon {
        font-size: 24px !important;
        /*        margin-top: 15px;*/
    }

        .filter-menu-icon:hover {
            cursor: pointer;
        }

    .contributor-widget {
        font-size: 24px;
    }

    @media only screen and (max-width:1200px) {
        .contributor-widget {
            font-size: 16px;
        }
    }


    .filter-button-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: 62px;
        padding: 10px;
        background-color: var(--background-light-purple);
        border-radius: 10px;
    }


    @media only screen and (max-width:1300px) {
        .filter-menu-icon {
            font-size: 16px;
            /*            margin-top: 5px;*/
        }

        .filter-button-menu {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: auto;
            overflow-x: scroll;
            height: 40px;
            padding: 5px;
        }
    }

    @media only screen and (max-width:480px) {
        .filter-button-menu {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: auto;
            overflow-x: scroll;
            height: 40px;
            padding: 5px;
        }
    }

    .tag-count-badge {
        width: auto;
        height: auto;
        border-radius: 10px;
        margin-top: 0;
        margin-left: 10px;
        padding: 3px 10px 5px 10px;
        background-color: white;
        font-weight: bold;
    }

    @media only screen and (max-width:480px) {
        .tag-count-badge {
            width: 30px;
            height: 30px;
            margin-top: -6px !important;
            /*padding: 4px 3px 2px 10px;*/
        }
    }

    /*Mobile (Smartphone) max-width: 480px
Low Resolution Tablets and ipads max-width: 767px
Tablets Ipads portrait mode max-width:1024px
Desktops max-width:1280px
Huge size (Larger screen) max-width: 1281px and greater*/

    .content-panel {
        background-color: var(--panel);
        border-radius: 20px;
        padding-right: 30px;
        padding-left: 30px;
        padding-bottom: 30px;
        padding-top: 15px;
        width: 100%;
        box-shadow: 10px 5px 10px grey;
    }
        .content-panel.navigation {
            margin-left: 0px;
            margin-top: 0px;
        }

        .content-panel.left-content-panel {
            background-color: white;
            margin-top: 20px;
            /*            padding: 10px 10px 80px 10px !important;*/
            padding: 10px 10px 10px 10px !important;
        }

    @media only screen and (max-width:768px) {
        .content-panel {
            padding: 20px 10px 10px 10px;
            margin-left: 5px;
        }
    }

    @media only screen and (max-width:480px) {
        .content-panel {
            padding: 20px 10px 10px 10px;
            margin-left: 0px;
            border-radius: 0px;
            box-shadow: none
        }
        #home_habit_content .content-section {
            padding: 20px 10px 65px 10px !important;
        }

    }

.rsvp-filter-button {
    margin-right: 15px;
    padding-left: 9px;
    padding-right: 9px;
    border: none;
    font-size: 16px;
    color: var(--important-text);
    background-color: var(--important-button);
    transition: transform 0.1s ease-out; /* Smooth transition for the effect */
}
    .rsvp-filter-button:active {
        transform: translateY(2px); /* Move the button down slightly */
        background-color: #e0e0e0; /* Optional: Darken the background */
    }

    .rsvp-filter-button:hover {
        transform: translateY(2px); /* Move the button down slightly */
        background-color: #C7DDF2 !important;
    }

    .panel-header {
        align-items: center;
    }

    @media only screen and (max-width:480px) {
        .panel-header {
            padding: 0 0px 0 0px;
        }

            .panel-header.right-panel {
                padding: 0 0 0 0;
            }

        .rsvp-filter-button {
            margin-right: 7px;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 11px;
        }
    }
    .mobile-button-container {
        text-align: center;
    }

    .mobile-wide {
        width: 100%;
        margin-left: 0px;
    }

    .nav-divider {
        width: 100%;
        height: 1px;
        margin: 0 1px 10px 0;
        background-color: var(--greyscale-grey-05);
    }

    .menu {
        width: 328px;
        height: 568px;
        margin: 8px 16px 0;
    }

    .description {
        width: 328px;
        height: 256px;
        padding: 0 0 78px;
    }

    @media only screen and (max-width: 480px) {
        .description {
            width: 328px;
            height: auto;
            padding: 0 0 78px;
        }
    }

    .flex-container {
        display: flex;
        flex-direction: column;
    }

    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: none;
    }

    .interest-button {
        width: 156px;
        height: 40px;
        margin: 0 0 12px;
        padding: 8px 10px;
        border-radius: 40px;
        font-weight: bold;
        white-space: nowrap;
        border: solid 1px var(--typography-black);
        color: var(--greyscale-grey-03);
        background-color: var(--typography-white);
    }

        .interest-button.small {
            width: 140px;
            height: 30px;
            margin: 0 0 5px;
            padding: 4px 8px;
            font-size: 14px;
            white-space: normal;
            border: none;
            background-color: var(--colors-secondary);
            color: var(--typography-white);
        }

    .tag-button {
        height: 30px;
        width: auto;
        margin: 0 0 5px;
        margin-right: 20px;
        margin-top: 10px;
        padding: 0px 8px;
        align-items: center;
        font-weight: bold;
        white-space: normal;
        border-radius: 5px;
        border: none;
        background-color: var(--background-light-purple);
        color: var(--typography-black);
    }

        .tag-button.member-tag-button {
            /*            font-size: 12px;*/
            /*            height: 25px;*/
            margin-right: 10px;
            margin-top: 3px;
            padding: 0px 8px;
        }

    @media only screen and (max-width: 480px) {
        .tag-button {
            /*            font-size: 12px;*/
            padding: 0px 6px;
        }

            .tag-button.member-tag-button {
                /*                font-size: 10px;*/
            }
    }

    .tag-button:hover {
        box-shadow: 10px 5px 10px grey;
    }

    .profile-tag-button {
        width: auto;
        height: 40px;
        padding: 0px 20px 0px 20px;
        border-radius: 20px;
        align-items: center;
        border: none;
        margin-right: 20px;
        margin-top: 20px;
        background-color: var(--background-light-purple);
    }

        .profile-tag-button:hover {
            box-shadow: 10px 5px 10px grey;
        }

    .interest-button-spacer {
        width: 16px;
        height: auto;
        display: inline-block;
    }

    .interest-textbox {
        width: 156px;
        height: 40px;
        margin: 0 0 12px;
        padding: 8px 10px;
        border-radius: 40px;
        border: solid 1px var(--typography-black);
    }

.page-filter-button {
    padding: 15px 15px 10px 15px;
    width: auto;
    height: 40px;
    margin-right: 20px;
    border-radius: 5px;
    font-size: 18px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: center;
    color: var(--greyscale-grey-03);
}



        .page-filter-button.active {
            background-color: var(--typography-white);
            font-weight: bold;
            color: var(--typography-black);
        }

        .page-filter-button:hover {
            cursor: pointer;
        }

    @media only screen and (max-width: 1300px) {
        .page-filter-button {
            font-size: 16px;
            width: auto;
            height: 30px;
            padding: 8px 3px 5px 3px;
            margin-right: 10px;
            flex-shrink: 0;
        }

            .page-filter-button.active {
                font-weight: bold;
                color: var(--typography-black);
            }
    }

    @media only screen and (max-width: 900px) {
        .page-filter-button {
            font-size: 14px;
            width: auto;
            height: 30px;
            padding: 8px 3px 5px 3px;
            margin-right: 10px;
            flex-shrink: 0;
        }

            .page-filter-button.active {
                font-weight: bold;
                color: var(--typography-black);
            }
    }

    @media only screen and (max-width: 480px) {
        .page-filter-button {
            font-size: 12px;
            width: auto;
            height: 30px;
            padding: 8px 3px 5px 3px;
            margin-right: 10px;
            flex-shrink: 0;
        }

            .page-filter-button.active {
                font-weight: bold;
                color: var(--typography-black);
            }
    }


.filter-label {
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: normal;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
}

    @media only screen and (max-width: 1300px) {
        .filter-label {
            font-size: 16px;
            margin-top: 5px;
        }
    }

    @media only screen and (max-width: 900px) {
        .filter-label {
            font-size: 14px;
            margin-top: 5px;
        }
    }

    @media only screen and (max-width: 480px) {
        .filter-label {
            display: none;
        }
    }


    .landing-page-text {

    }

.error-message {
    font-family: var(--global-font-family);
    margin-right: 30px;
    margin-top: 2px;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -0.5px;
    color: var(--alert);
}

#login_error_message {
    font-family: var(--global-font-family);
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
    width: 100%;
    line-height: 1.5;
    margin-right: 30px;
    letter-spacing: -0.5px;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 12px;
    display: none;
}

    .landing-page-link {
        font-weight: bold;
        color: var(--link);
    }
    .landing-page-link:hover{
        cursor:pointer;
    }

.landing-page-link-small {
    width: 328px;
    height: 16px;
    margin: 8px 0 0;
    font-family: var(--global-font-family);
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.5px;
    text-align: left;
    color: var(--link);
}


    .user-profile-box {
        background-color: white;
        border-radius: 8px;
        padding: 0px;
        margin-top: 20px;
        /*        width: 400px;*/
    }

    .user-profile-right-bar {
        margin-left: 24px;
    }

    .user-profile-container {
        flex-direction: row;
        z-index: 10000;
        width: 1200px;
    }

    .user-profile-content {
        width: 800px;
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        margin-top: 0px;
    }

    @media only screen and (max-width:768px) {
        .user-profile-content {
            width: 100%;
        }

        .user-profile-container {
            width: 100%;
        }

        .user-profile-box {
            width: 100%;
            margin-left: 0px;
        }

        .user-profile-container {
            flex-direction: column;
        }

        .user-profile-right-bar {
            margin-left: 0px;
        }
    }


    @media only screen and (max-width:480px) {
        .user-profile-content {
            width: 100%;
        }

        .user-profile-box {
            width: 100%;
            margin-left: 0px;
        }

        .user-profile-container {
            flex-direction: column;
        }

        .user-profile-right-bar {
            margin-left: 0px;
        }
    }

    .add-new-card {
        margin-left: 0px;
    }




    .xlarge-wide {
        width: 100%;
        height: 56px;
        margin: 0 0 16px;
        padding: 16px 125.5px;
        border-radius: 16px;
        color: white;
        white-space: nowrap;
        background-color: var(--colors-primary);
    }



    .landing-button {
        margin: 10px 10px 10px 10px;
        width: 300px;
    }

    .landing-textbox:hover {
        border: solid 1px var(--greyscale-grey-01);
    }

    .landing-textbox:focus {
        border: solid 1px var(--colors-primary);
    }

    .list-title {
    }

.shared-by-text {
    font-size: 16px;
    font-family: var(--global-font-family);
    /*    font-weight: 700;*/
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:480px) {
        .shared-by-text {
            font-size: 12px;
        }

        .list-title {
            font-size: 16px;
        }
    }

.grid-title {
    font-size: 30px;
    font-family: var(--global-font-family);
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width:480px) {
        .grid-title {
            font-size: 24px;
        }
    }

    .event-details-icon {
        font-size: 40px;
    }

    .community-details-icon {
        font-size: 40px;
    }

    .event-details-container {
        padding: 20px;
    }

    .community-details-container {
        padding: 20px;
    }

    .grid-title {
        line-height: 50%;
    }

    .feed-title {
        font-weight: 600;
    }

        .feed-title.medium {
            /*        font-size:20px;*/
        }

        .feed-title.search {
            font-size: 18px;
        }

        .feed-title .a {
            color: black;
        }

    .community-details-photo {
        flex: 4;
    }

    .community-details-container {
        flex: 2;
    }

    @media only screen and (max-width:480px) {
        .feed-title {
            /*            font-size: 18px;*/
        }

            .feed-title.medium {
                /*                font-size: 14px;*/
            }

            .feed-title.search {
                font-size: 14px;
            }

        .event-details-icon {
            font-size: 20px;
        }

        .community-details-icon {
            font-size: 20px;
        }

        .event-details-container {
            padding: 10px;
            margin-top: 10px;
            flex: none;
            width: 100%;
        }

        .community-details-container {
            padding: 10px;
            margin-top: 10px;
            flex: none;
            width: 100%;
        }

        .community-details-photo {
            flex: none;
            width: 100%;
        }

        .event-details-photo {
            flex: none;
            width: 100%;
        }
    }

.navigation-card-title {
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
    /*    padding:10px 10px 0 10px;*/
}



    .card-title {
        font-weight: bold;
    }

    @media only screen and (max-width:480px) {
        .navigation-card-title {
            font-size: 14px;
            padding: 0;
        }
    }

    .list-binding {
        width: 800px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    @media only screen and (max-width:480px) {
        .list-binding {
            width: 100%;
            height: 30px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
    }

    .notification-item {
        background-color: var(--typography-white);
        width: 100%;
        padding: 10px;
    }

        .notification-item:hover {
            background-color: var(--greyscale-grey-06);
        }

    .pane-center {
        z-index: inherit !important;
    }

    .splash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh !important;
        background: var(--background-light-purple);
        z-index: 200;
        color: black; /*var(--colors-primary);*/
        text-align: center;
        line-height: 90vh;
    }

        .splash.display-none {
            position: fixed;
            top: 0;
            opacity: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: var(--background-light-purple);
            z-index: -10;
            color: var(--colors-primary);
            text-align: center;
            line-height: 90vh;
            transition: all 0.5s;
        }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

    .fade-in {
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
    }

    .community-detail-header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    @media only screen and (max-width:480px) {
        .community-detail-header {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            width: 100%;
        }
    }

    .feed-item {
        left: 0;
        right: 0;
        padding: 10px;
        width: 100%;
        border-radius: 8px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 5px;
    }
.feed-item.list-item {
    padding: 0px;
    padding-top:10px;
    margin-left: 0px;
    margin-right: 0px;
}

        .feed-item.journal {
            box-shadow: none;
            margin-bottom: 0px;
            border-radius: 0px;
            padding: 15px;
        }

        .feed-item.feed-card {
            margin-bottom: 24px;
            box-shadow: 5px 10px 10px 5px lightgray;
            border: 0;
        }

    .list-panel {
        background-color: white;
    }

    @media only screen and (max-width:480px) {
        .feed-item.journal {
            padding: 0px;
        }
    }

    .search-page-title {
        /*    margin-top: 2px;*/
    }

    /*    .card {
        flex: 0 0 auto;
        max-width: 350px;
    }*/

    /*NEW PEOPLE CARD STYLES*/
.people-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.person-card {
    width: 180px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

    /* Wrapper for image + overlay */
    .person-card .image-wrapper {
        position: relative;
        width: 100%;
    }

    /* Image */
    .person-card .photo {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Overlay controls (Pinterest style) */
    .person-card .overlay-controls {
        position: absolute;
        top: 6px;
        right: 6px;
        display: flex;
        gap: 6px;
        padding: 4px 6px;
        border-radius: 20px;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .person-card:hover .overlay-controls {
        opacity: 1;
    }

    /* checkbox */
    .person-card .overlay-controls .feed-checkbox {
        width: 18px;
        height: 18px;
        accent-color: white;
    }

    /* menu icon */
    .person-card .overlay-controls .feed-context-menu {
        color: white;
        font-size: 20px;
        cursor: pointer;
    }

    /* Always show overlay when checkbox is checked */
    .person-card .overlay-controls .feed-checkbox:checked {
        /* no styles here — this selector is only a trigger */
    }

    /* This makes the overlay visible when the checkbox is checked */
    .person-card .overlay-controls:has(.feed-checkbox:checked) {
        opacity: 1 !important;
    }

    /* name */
    .person-card .name {
        margin-top: 6px;
        font-weight: 600;
    }

    /* interests */
    .person-card .interests {
        margin-top: 4px;
        font-size: 12px;
        color: #444;
    }
    /* Tighten person-card name + interests block */
    .person-card .name {
        font-size: 16px;
        font-weight: 600;
        color: #222;
        line-height: 1.2;
        margin-top: 6px;
        margin-bottom: 0;
    }

    /* Interest line closer to name */
    .person-card .interests {
        font-size: 13px;
        font-weight: 400;
        color: #666;
        margin-top: 2px !important;
        line-height: 1.2;
    }

    /* OPTIONAL: reduce spacing between image and name */
    .person-card .photo {
        margin-bottom: 6px;
    }

/* MOBILE: two columns for people cards */
@media (max-width: 600px) {
    .people-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 12px;
        row-gap: 20px;
        padding: 0 10px;
    }

        .people-grid .person-card {
            width: calc(50% - 12px); /* two equal-width columns */
            margin: 0;
        }

            /* image ratio adjustment for mobile */
            .people-grid .person-card .photo {
                height: 160px; /* smaller, consistent height */
                width: 100%;
                border-radius: 12px;
                object-fit: cover;
            }

            /* Reduce name spacing on mobile */
            .people-grid .person-card .name {
                font-size: 15px;
                font-weight: 600;
                margin-top: 6px;
            }

            /* Overlay tweaks for mobile */
            .people-grid .person-card .overlay-controls {
                top: 6px;
                right: 6px;
                padding: 4px 6px;
            }
            .person-card .interests {
                font-size: 12px;
                font-weight: 400;
                color: #777;
            }

        }
    /*END NEW PEOPLE CARD STYLES*/

    /* These are the styles for people cards that include photo, name, and interests*/
    /*START PEOPLE CARDS*/
    .people-card {
        width: 265px;
        height: auto;
        text-align: center;
        margin-right: 24px;
        margin-bottom: 24px;
        box-shadow: 5px 10px 8px 5px lightgray;
        border: 0;
    }

        .people-card:hover {
            cursor: pointer;
        }

    .additional-photo {
        width: 100%;
        height: auto;
    }

/*        .additional-photo.thumbnail {
            width: 300px;
            height: auto;
            padding: 10px;
        }*/

        .additional-photo.thumbnail {
            width: auto;
            height: 200px;
            padding: 10px;
        }


    .additional-photo-caption {
        width: auto;
        text-align: center;
    }

.image-container {
    position: relative;
    display: inline-block;
}

.carousel-image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    width: 300px;
    height: auto;
    border-radius: 8px;
}

.carousel-image-container .image-edit-icon {
    color: white;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0px !important;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-edit-icon {
    color: white;
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    /*    border-radius: 50%;*/
    padding: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
    .people-card-photo {
        width: 175px;
        height: 175px;
        padding: 0px 10px 10px 10px;
    }

    .photo-comment-textbox {
        width: 100%;
    }

    .people-card-photo-caption {
        width: 215px;
        text-align: center;
    }

    /*    .feed-title.people-card-title {
        font-size: 20px;
        text-align: center;
        margin-top: 0px;
    }

    .feed-date.people-card-tag {
        margin-top: 0px;
        margin-bottom: 3px;
    }*/






    @media only screen and (max-width:570px) {
        .search-page-title {
            /*        margin-top: 8px;*/
        }

        .additional-photo.thumbnail {
            width: 105px !important;
            height: 105px !important;
            padding: 3px;
        }

        .people-card {
            width: 160px;
            height: auto;
        }

        .people-card-photo {
            width: 115px;
            height: 115px;
            padding: 10px 10px 10px 10px;
        }

        .people-card-photo-caption {
            width: 150px;
        }

        /*    .feed-title.people-card-title {
        font-size: 16px;
    }*/
    }

    @media only screen and (max-width:480px) {
        .search-page-title {
            /*            margin-top: 8px;*/
        }

        .people-card {
            width: 175px;
            height: auto;
        }

        @media only screen and (max-width:480px) {
            .additional-photo.thumbnail {
                width: 100px !important;
                height: 100px !important;
                padding: 2px;
            }
        }

        .people-card-photo {
            width: 115px;
            height: 115px;
            padding: 10px 10px 10px 10px;
        }

        .people-card-photo-caption {
            width: 150px;
        }

        /*        .feed-title.people-card-title {
            font-size: 16px;
        }*/
    }

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

        .people-card {
            width: 160px;
            height: auto;
        }

        .people-card-photo {
            width: 100px;
            height: 100px;
            padding: 0px 5px 5px 5px;
        }

        .people-card-photo-caption {
            width: 120px;
        }

        /*    .feed-title.people-card-title {
        font-size: 14px;
    }*/
    }

    /*END PEOPLE CARDS*/


    .search-result-item {
        left: 0;
        right: 0;
        padding: 30px 30px 0 30px;
    }

    @media only screen and (min-width: 480px) and (max-width: 570px) {
        .people-card {
            width: 190px !important;
            height: auto;
        }
        /*        input[type='checkbox'] {
            width: 15px;
            height: 15px;
            background: white;
            border-radius: 5px;
            border: 2px solid #555;
            margin: 0px;
        }*/
    }

    @media only screen and (max-width:480px) {
        .feed-item {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
        }

        .card {
            flex: 0 0 auto;
            max-width: 100%;
            max-height: 300px;
        }

        /*        .people-card{
            width: 100%;
            height: auto;
        }*/

        .search-result-item {
            margin-left: 5px;
            margin-right: 5px;
            padding: 0px 5px 10px 5px;
        }
    }

    .search-result-title {
        font-size: 20px;
        font-family: Roboto;
        /*    font-weight: bold;*/
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        color: #1a0dab;
        line-height: 1.3;
        margin-top: 0px;
        letter-spacing: -0.5px;
        text-align: left;
        /*    color: var(--typography-black);*/
    }

    .search-result-category {
        font-size: 16px;
        font-family: Roboto;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.08;
        margin-top: 2px;
        letter-spacing: -0.5px;
        text-align: left;
        color: var(--typography-black);
    }

    .search-result-body {
        font-size: 14px;
        font-family: Roboto;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.58;
        letter-spacing: -0.5px;
        text-align: left;
        color: var(--typography-black);
    }

    @media only screen and (max-width:768px) {
        .search-result-title {
            font-size: 20px;
        }

        .search-result-category {
            font-size: 14px;
        }
        .image-container img {
            display: block;
            width: 250px;
            height: auto;
            border-radius: 8px;
        }

        /*        .search-result-body {
            font-size: 12px;
        }*/
    }

    @media only screen and (max-width:480px) {
        .search-result-title {
            font-size: 20px;
        }

        /*        .search-result-body {
            font-size: 12px;
        }*/
    }

.feed-avatar {
    width: 48px;
    height: 48px;
    border-radius: 15%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    /*        margin-top: 4px;*/
}

        .feed-avatar:hover {
            cursor: pointer;
            transform: scale(1.05);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

    .feed-item:hover {
        cursor: pointer;
    }

    .feed-avatar.small {
        width: 30px;
        height: 30px;
    }

    @media only screen and (max-width:480px) {
        .feed-avatar {
            width: 30px;
            height: 30px;
            /*            margin-top: 2px;*/
        }
    }

.profile-avatar {
    width: 170px;
    height: 170px;
    /*        border-radius: 50%;*/
    margin-top: 6px;
    border-radius: 15%;
}

    @media only screen and (max-width:480px) {
        .profile-avatar {
            width: 120px;
            height: 120px;
            margin-top: 4px;
        }
    }

    @media only screen and (max-width:384px) {
        .profile-avatar {
            width: 110px;
            height: 110px;
            margin-top: 4px;
        }
    }

    @media only screen and (max-width:350px) {
        .profile-avatar {
            width: 100px;
            height: 100px;
            margin-top: 4px;
        }
    }


    .feed-attachment {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .result-item {
        padding: 10px;
        width: 80%;
    }

    @media only screen and (max-width:480px) {
        .result-item {
            margin-left: 5px;
            margin-right: 5px;
            width: 100%;
        }
    }

    .top-nav-spacer, .landing-nav-spacer {
        display: flex;
    }

    .top-nav-spacer, .landing-nav-spacer {
        display: flex;
        flex: 1;
    }

    .tour-button {
        margin-right: 75px;
    }

    /* For mobile phones: */
    @media only screen and (max-width: 480px) {
        .top-nav-spacer {
            /*   display: none;*/
        }

/*        .landing-nav-spacer {
            display: none;
        }*/

        .tour-button {
            margin-right: 15px;
        }
    }

    /*Quick add button*/
    .quick-add-button {
        margin-bottom: 20px !important;
        margin-left: 10px !important;
        padding-left: 5px !important;
        font-size: 14px !important;
        width: 130px !important;
        outline: none;
        color: white;
        background-color: var(--important-button);
    }

    @media only screen and (max-width:768px) {
        .quick-add-button {
            display: none
        }
    }

    @media only screen and (max-width:480px) {
        .quick-add-button {
            display: none
        }
    }



    .collapsed-nav {
        width: 100px !important;
        position: absolute;
        top: 76px;
        z-Index: 9;
        /* padding-Left:0px;*/
        height: 1200px;
    }

    @media only screen and (max-width: 480px) {
        .collapsed-nav {
            display: none;
        }
    }

    .collapsed-nav.nav-left {
        left: 0;
    }

.feed-category {
    font-size: 14px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
    /*        margin-bottom: 10px;
        margin-top: 3px;*/
}

.entry-category {
    font-size: 12px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--greyscale-grey-03);
    margin-left: 10px;
    margin-top: 8px;
}

    @media only screen and (max-width:480px) {
        .entry-category {
            font-size: 12px;
            margin-left: 5px;
            margin-top: 3px;
        }
    }

    .feed-context-menu:hover {
        cursor: pointer;
    }

    .feed-contributor {

    }

        .feed-contributor.navigation {
            font-size: 16px;
        }

    .feed-owner {
        width: auto;
        margin-right: 10px;
        margin-top: 3px;
        display: block;
    }

    @media only screen and (max-width:1300px) {
        .feed-contributor {
            /*        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 0px;*/
        }
    }

    @media only screen and (max-width:480px) {
        .feed-contributor {
            /*            font-size: 12px!important;*/
            display: none;
            margin-top: 5px;
            margin-bottom: 0px;
        }

/*        .feed-community-scope {
            display: none !important;
        }*/

        .feed-owner {
            display: none;
            margin-right: 0px;
        }

        .feed-category {
            display: block;
            font-size: 12px;
            margin-top: 5px;
        }
    }


    .quick-add-menu-button {
        background-color: var(--button-bar);
        font-weight: bold;
        color: black;
        margin-right: 3px;
    }

    .mobile-menu-button {
        /*    background-color: var(--greyscale-grey-04);*/
        background-color: white;
        font-weight: bold;
        color: black;
        margin-right: 8px;
        margin-left: 8px;
        margin-top: 4px;
        font-size: 20px;
        padding: 0px
    }

        .mobile-menu-button:focus {
            outline: none;
        }

    .quick-add-menu-button:focus {
        outline: none;
    }




    .feed-checkbox + .checkbox-text {
        flex: 1;
    }

    .feed-thumbnail + .checkbox-text {
        flex: 1;
    }

    .checkbox-text {
        flex: 1;
    }

.add-section:not(.responsive-add-item-row) .my-textbox {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}
.responsive-add-item-row .my-textbox {
    flex: initial !important;
    width: 100% !important;
    min-width: 0 !important;
}

.grid-title-details {
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--greyscale-grey-02);
    margin-top: 10px;
    margin-bottom: 10px;
}

    @media only screen and (max-width:480px) {
        .grid-title-details {
            font-size: 16px;
        }
    }

    .feed-date {
        color: var(--greyscale-grey-02);
    }


    .sort-by-section {
        margin-right: 10px;
        font-size: 20px;
        /*        margin-top: 20px;*/
    }

    .community-panel {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 10px 5px 10px grey;
    }

    @media only screen and (max-width:480px) {
        .community-panel {
            margin: 10px 5px 10px 5px;
        }

        .sort-by-section {
            margin-right: 10px;
            font-size: 12px;
            margin-top: 20px;
        }
    }

    @media only screen and (max-width:480px) {
        .dashboard-menu {
            /*        display: none;*/
        }
    }

    @media only screen and (max-width:900px) {
        .journal-nav-buttons {
            display: none;
        }
    }

    @media only screen and (max-width:480px) {
        .journal-nav-buttons {
            display: none;
        }
    }

    .journal-header-region {
        padding: 32px 32px 16px 32px;
    }

    @media only screen and (max-width:480px) {
        .journal-header-region {
            padding: 10px;
        }
    }



    .hider {
        background-color: transparent;
        opacity: 0.3;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
    }

.journal-entry-date {
    font-size: 16px;
    font-family: var(--global-font-family);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: black;
}

    .profile-notes {
        font-size: 16px;
    }

    @media only screen and (max-width: 480px) {
        .profile-notes {
            font-size: 14px;
        }
    }



.user-interest-list {
    font-size: 12px;
    font-family: var(--global-font-family);
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
    margin-bottom: 10px;
}

    .feed-body {
    }


    @media only screen and (max-width: 480px) {
        .feed-body.card-body {
            font-size: 12px;
            padding: 0 5px;
            line-height: 14px;
        }
    }

    .feed-menu-icon {
        /*        font-size: 24px;*/
    }
        .feed-menu-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
            color:var(--important-text);
        }

        .feed-menu-icon.filled {
            font-variation-settings: "FILL" 1, "wght" 700, 'GRAD' 0, 'opsz' 48;
        }

    .toggle-icon.filled {
        font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
    }

    .material-symbols-outlined.filled {
        font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48;
    }


    @media only screen and (max-width: 480px) {
        .feed-menu-icon {
            /*            font-size: 19px;*/
        }
    }

    .feed-menu-icon:hover {
        cursor: pointer;
    }

    .tutorial {
        width: 300px;
    }

    .tutorial-content {
        padding: 20px;
    }

    .tutorial-footer {
        margin-top: 10px;
        padding: 10px;
    }

    @media only screen and (max-width: 480px) {
        .tutorial {
            width: 200px;
        }

        .tutorial-content {
            padding: 10px;
            font-size: 14px
        }

        .tutorial-footer {
            padding: 10px;
        }
    }




    .feed-menu-label {
    }

    @media only screen and (max-width: 1800px) {
        .feed-menu-label {
            display: none;
        }
    }

    @media only screen and (max-width: 768px) {
        .feed-menu-label {
            display: none;
        }
    }

    @media only screen and (max-width: 480px) {
        .feed-menu-label {
            display: none;
        }
    }

    .feed-menu-count {
    }

    .read-more-link {
        color: var(--link);
    }
    .read-more-link:hover{
        cursor:pointer;
    }

    @media only screen and (max-width: 480px) {
        .read-more-link {
        }
    }

    #quick_add_category_widget select {
        width: 400px;
        margin-right: 0px;
    }

    .home-card-anchor:hover {
        outline: none;
    }

.dropdown-menu-item {
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}

    @media only screen and (max-width: 480px) {
        .dropdown-menu-item {
            font-size: 16px;
        }
    }

    /*styles for edit popup*/
.edit_popup_title {
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--typography-black);
}
    /* Create three unequal columns that floats next to each other */
    .home-column {
        float: left;
        flex-direction: column;
        display: flex;
        padding: 10px;
    }

    .left {
        width: 0;
    }

    .right {
        width: 0;
    }

    .home-column .middle {
        flex: 1;
        padding-left: 10px;
        background-color: var(--greyscale-grey-06);
    }





    .list-item-row {
        align-items: center;
    }

    @media only screen and (max-width: 480px) {
        .list-item-row {
            margin-bottom: 5px;
        }
    }



    .clickable:hover {
        cursor: pointer;
    }

    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-x: hidden;
    }

    .content {
        padding-bottom: 80px;
        box-sizing: border-box;
    }

    .fix {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 60px;
        width: 100%;
        background-color: #f8f9fa;
        z-index: 1000;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }

    .p-top {
        margin-top: 15px !important;
    }

    .footer-text {
        margin: 0;
    }

    @media only screen and (min-width: 768px) {
        .footer-text {
            margin-left: 50px;
        }
    }

    @media only screen and (max-width: 767px) {
        .footer-text {
            margin-left: 0px;
        }
    }

    .image-delete-button {
        position: relative;
        top: 5px;
        right: 8px;
        z-index: 100;
        background-color: #FFF;
        padding: 4px 3px;
        color: #000;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        font-size: 22px;
        line-height: 10px;
        border-radius: 50%;
        border: 1px solid red;
    }

    .scrolling-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }




    .upload-care-control {
        background-color: white;
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }

    /*TWO PANEL CSS*/
    /*LEFT PANEL*/
.truncated-description-class {
    color: #555;
    font-size: 0.85rem;
    line-height: 1.3;
}

.right-panel-message {
    flex: 1; /* take all available height */
    display: flex; /* center contents */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px; /* optional */
}

.home-page-left-panel {
    flex: 7;
    background-color: var(--left-panel);
}

        .home-page-left-panel.content-page {
            flex: 5;
        }

        .home-page-left-panel.one-panel {
            width: 800px;
        }
.tab-panel {
    transition: opacity 0.2s ease-in;
}

    .tab-panel.hidden {
        opacity: 0;
    }

    /*RIGHT PANEL*/
.home-page-right-panel {
    flex: 3;
    margin-left: 25px;
    margin-top: 25px;
    margin-bottom: 10px;
    display: flex;
    flex-direction:column;
    background-color: #ffffff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.05);
}

        .home-page-right-panel.content-page {
            flex: 5;
        }

    @media only screen and (max-width: 1215px) {
        .home-page-left-panel {
            width: 100%;
            margin-left: 5px;
        }

        .home-page-right-panel {
            width: 100%;
            margin-left: 0px;
            display: none;
        }

            .home-page-right-panel.content-page {
                padding-top:0px;
                width: 100%;
                display: none;
            }
    }

.admin-panel {
    width: 1200px;
    /*height: calc(100vh - 400px);*/ /* adjust based on your header size */
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

    .content-panel.home-page {
        /*        width: 1200px;*/
        width: 100%;
        background-color: white;
    }

    @media only screen and (max-width: 1400px) {
        .content-panel.home-page {
            width: 100%;     
        }
        #home_habit_content {
            padding: 5px 10px 60px 10px !important;
        }
    }

    @media only screen and (max-width: 480px) {
        .home-page-left-panel {
            width: 100%;
        }
        .home-page-right-panel {
            margin-top:0px;
        }
        #right_panel_content {
            margin-top:10px;
        }

        .admin-panel {
            width: 100%;
        }
    }

.start-date,
.end-date {
    width: auto;
    min-width:0px;

}

/* Scope everything to this section so you don't affect other forms */
/* Two columns: narrow label, flexible content */
.edit-popup-section.task-date-widget {
    display: grid;
    grid-template-columns: 140px 1fr; /* <- adjust label width here */
    column-gap: 12px;
    align-items: start;
}

/* ------------- MOBILE 480PX OR LESS ------------- */
@media (max-width: 480px) {
    .edit-popup-section.task-date-widget {
        grid-template-columns: 1fr; /* single column */
    }

        /* label now sits above widgets */
        .edit-popup-section.task-date-widget .edit-form-label-column {
            grid-column: 1 / -1; /* span full width */
            margin-bottom: 4px;
        }

        /* let entry container take full width below label */
        .edit-popup-section.task-date-widget .entry-form-entry {
            grid-column: 1 / -1;
        }
}

    /* prevent inherited full-width/flex growth on the label column */
    .edit-popup-section.task-date-widget .edit-form-label-column {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* the right-hand column stacks rows with tight spacing */
    .edit-popup-section.task-date-widget .entry-form-entry {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0; /* allow children to shrink */
    }

    /* row with date + time */
    .edit-popup-section.task-date-widget .popup-form-section-row.align-elements {
        display: flex;
        align-items: center;
        gap: 6px; /* exact spacing between date/time */
    }

    /* let inputs shrink and avoid theme widths */
    .edit-popup-section.task-date-widget .my-textbox,
    .edit-popup-section.task-date-widget .my-dropdownlist {
        flex: 1 1 0;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

/* generic fit on line row */
/* one tight row for: label | number | up/down | dropdown */
.fit-on-line {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap; /* don’t let items wrap */
    gap: 8px; /* horizontal spacing between items */
}

    /* neutralize any “full width” form-control styles */
    .fit-on-line .my-textbox,
    .fit-on-line .my-dropdownlist {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
        flex: 0 0 auto; /* don’t stretch unless you want to */
    }

    /* label: size to content */
    .fit-on-line .conxus-font {
        flex: 0 0 auto;
    }

    /* small numeric field */
    .fit-on-line .number-picker {
        flex: 0 0 65px; /* pick a width you like (48–72px) */
        text-align: center;
    }

    /* The up/down arrows stack vertically and stay narrow */
    .fit-on-line .popup-form-section-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 18px; /* << key: narrow width */
        flex: 0 0 18px; /* prevent stretching */
        line-height: 1;
    }

        /* make the arrow icons sit closer */
        .fit-on-line .popup-form-section-column i {
            line-height: 30px; /* tighten vertical spacing */
            padding: 0; /* remove internal spacing */
/*            margin: -2px 0; *//* slight overlap, if needed */
        }

    /* dropdown can be auto width, or give it a min for stability */
    .fit-on-line .interval-picker {
        flex: 0 0 auto; /* or 1 1 auto if you want it to grow */
        min-width: 110px; /* tweak as needed */
    }

    /* in case some upstream row sets space-between or auto margins */
    .fit-on-line > * {
        margin-left: 0 !important;
    }
    /* prevent highlighting / selection / focus glow on the chevrons */
    .fit-on-line .popup-form-section-column i {
        user-select: none; /* no text selection */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Firefox */
        outline: none; /* remove focus outline */
    }

        .fit-on-line .popup-form-section-column i:focus,
        .fit-on-line .popup-form-section-column i:active {
            outline: none;
            background: none;
            box-shadow: none;
        }

.custom-recurrence input[type="radio"] {
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
}


@media only screen and (max-width: 480px) {
    .start-date,
    .end-date {
        width: 120px;
        padding-left: 5px;
        padding-right: 5px;
    }


}

    .list-details-card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0px 3px 15px -4px rgba(17, 17, 15, 0.12);
        width: 280px;
        padding: 10px;
        margin-bottom: 24px;
        margin-left: 24px;
        height: 200px;
    }

        .list-details-card:hover {
            background-color: var(--background-light-purple);
            color: black;
        }
        .url-widget:hover,
        .date-widget:hover {
            background-color: var(--background-light-purple);
        }

/*.url-widget,
.date-widget:not(:hover) {
    background-color: transparent;
}*/
.url-widget,
.date-widget {
    padding:5px;
}

@media only screen and (max-width: 1200px) {
    .list-details-card {
            padding: 5px;
            flex-shrink: 0;
            width: 180px;
            /*            height: 120px;*/
            margin-left: 16px;
        }
    }

    @media only screen and (max-width: 768px) {
        .list-details-card {
            padding: 5px;
            flex-shrink: 0;
            width: 175px;
            /*            height: 110px;*/
            margin-left: 10px;
            margin-bottom: 16px;
        }
    }

    @media only screen and (max-width: 480px) {
        .list-details-card {
            padding: 5px;
            flex-shrink: 0;
            width: 170px;
            /*            height: 110px;*/
            margin-left: 10px;
            margin-bottom: 16px;
        }
    }

.category-header {
    font-weight: bold;
    font-size: 28px;
    align-items: center;
    background-color: var(--category-header);
}

    @media only screen and (max-width: 480px) {
        .category-header {
            font-size: 20px;
        }
    }

    .category-header:hover {
        cursor: pointer;
    }

    .category-expander {
        margin-right: 10px;
        /*        margin-top: 5px;
        font-size: 28px;*/
    }

    @media only screen and (max-width: 480px) {
        .category-expander {
        }
    }

    .category-count {
        background-color: white;
        display: none;
        width: 40px;
        height: 30px;
        font-weight: bold;
        margin-top: 5px;
        text-align: center;
        border-radius: 10%;
        color: darkblue;
        /*        //font-size: 20px;*/
    }

    @media only screen and (max-width: 480px) {
        .category-count {
            width: 25px;
            height: 25px;
            /*            //font-size: 18px;*/
        }
    }



.list-detail {
    font-size: 14px;
    font-family: var(--global-font-family);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    color: var(--greyscale-grey-02);
    margin-top: 10px;
    margin-bottom: 10px;
    /*padding: 10px;*/
}

    @media only screen and (max-width: 1200px) {
        .list-detail {
            padding: 0px;
            font-size: 14px;
        }
    }

    .badge-button:hover {
        background-color: var(--greyscale-grey-04);
    }

    .badge-button:active {
        transform: translateY(4px);
    }

.home-tag-button {
    width: auto;
    margin-right: 10px;
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    height: 40px;
    margin-top: 10px;
    border-radius: 10px;
    color: var(--greyscale-grey-01);
    box-shadow: 10px 5px 10px grey;
    padding: 20px;
    margin-right: 20px;
}

    .left-nav-panel {
    }

    @media only screen and (max-width: 1200px) {
        .left-nav-panel {
            display: none;
        }
    }

    .home-tag-button.interest {
        font-size: 18px;
        background-color: var(--background-light-purple);
        color: black;
        padding: 10px;
        height: 40px;
        /*        width: auto;*/
        margin-bottom: 10px;
    }

    .home-tag-button.category {
        background-color: white;
        color: black;
        font-size: 20px;
        height: auto;
        width: auto;
    }

    .home-tag-button.a {
        outline: none;
    }

    .home-card-badge {
        background-color: var(--background-light-purple);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
    }

    @media only screen and (max-width: 480px) {
        .home-tag-button.interest {
            font-size: 12px;
            margin-right: 10px;
        }

        .home-tag-button.category {
            font-size: 12px;
            padding: 7px;
            width: 100px;
        }

        .home-card-badge {
            width: 35px;
            height: 35px;
            margin-left: auto;
            margin-right: auto;
        }

        .home-tag-button .icon-button {
            width: 10px;
            height: 10px;
        }
    }

    .filter-menu-button {
        margin-top: 15px !important;
    }

    @media only screen and (max-width: 480px) {
        .filter-menu-button {
            margin-top: 5px !important;
        }
    }


.filter-button {
    width: auto;
    margin-right: 10px;
    font-size: 20px;
    font-family: var(--global-font-family);
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.5px;
    text-align: left;
    padding: 10px;
    height: 40px;
    margin-top: 10px;
    border-radius: 10px;
    color: var(--greyscale-grey-01);
}

    @media only screen and (max-width: 480px) {
        .filter-button {
            height: auto;
        }
    }

    .right-nav-button .closed {
        right: 80px;
    }

    /* For mobile phones: */
    @media only screen and (max-width: 480px) {
        .right-nav-button .closed {
            right: 30px;
        }
    }

    @media (min-width: 760px) {
        .notebook .carousel-indicators {
            bottom: -80px !important;
        }
    }

    .notebook .carousel-indicators li {
        background-color: black;
    }

    .photo-meta {
        text-align: center;
        padding: 10px;
        background: #f9f9f9;
        border-top: 1px solid #ddd;
    }

        .photo-meta
        .journal-entry-date,
        .journal-entry-location,
        .journal-entry-comment {
            font-size: 1rem;
        }

        .photo-meta .journal-entry-date {
            font-weight: bold;
            color: #333;
            line-height: 0 !important;
        }

        .photo-meta .journal-entry-location {
            color: #555;
            font-style: italic;
        }

        .photo-meta .journal-entry-comment {
            color: #666;
        }
    /* Hide carousel icons on mobile devices */
    @media (max-width: 768px) {
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            display: none !important;
        }
    }

    .navigation-button {
        display: block;
    }

    @media screen and (max-width: 768px) {
        .navigation-button {
            display: none;
        }
    }
.login-top-nav .popup-form-section-row {
    display: flex;
/*    justify-content: flex-start;
    align-items: center;*/
    flex-wrap: nowrap;
    width: 100%;
}

    .login-top-nav .popup-form-section-row .logo {
        margin-right: 15px;
    }

    .login-top-nav .popup-form-section-row .small-button {
        margin: 0 10px;
        flex-shrink: 0;
    }

    .login-top-nav .popup-form-section-row .landing-nav-spacer {
        flex-grow: 1;
    }

@media (max-width: 768px) {
    .login-top-nav .popup-form-section-row {
/*        justify-content: space-between;*/
    }

        .login-top-nav .popup-form-section-row .landing-nav-spacer {
/*            display: none;*/
        }

        .login-top-nav .popup-form-section-row .icon {
            display: block;
        }

        .login-top-nav .popup-form-section-row .small-button {
            margin: 0 5px;
        }
}
.my-dropdownlist {
    margin-top: 5px;
}
#people_job_filter_dropdown {
    margin-top: 5px;
}
@media (min-width: 480px) and (max-width: 800px) {
    .page-add-new-button {
        height: 55px !important;
        margin-left: 2px;
    }

    .page-add-new-icon {
        font-size: 24px !important;
        margin-left:0px;
    }

    .page-icon-button-title {
        font-size: 12px !important;
    }
}
@media (max-width: 480px) {
    .page-add-new-icon {
        margin-left: 0px !important;
    }

}
    #event_content_body_region .c-horizontal-menu {
        overflow-x: auto;
        scrollbar-width: none;
    }

        #event_content_body_region .c-horizontal-menu::-webkit-scrollbar {
            display: none;
        }

    .c-horizontal-menu {
        overflow-x: auto;
        scrollbar-width: none;
    }

        .c-horizontal-menu::-webkit-scrollbar {
            display: none;
        }

    @media (min-width: 1024px) and (max-width: 1215px) {
        .add-new-button {
            width: 60px !important;
            height: 60px !important;
            bottom: 60px !important;
        }

        #quick_add_button {
            display: none !important;
        }
    }

    @media (min-width: 600px) and (max-width: 1215px) {
        #right_panel_content {
            padding: 10px;
        }

        .material-symbols-outlined.feed-context-menu {
            margin-right: -9px !important;
        }

        .grid-view .material-symbols-outlined.feed-context-menu {
            margin-top: -150px !important;
        }

        .grid-view input[type='checkbox'] {
            margin-top: -150px !important;
        }

        .content-panel {
            padding: 20px 20px 10px 10px;
            margin-left: 0px !important;
        }

        .admin-panel {
            width: 100%;
        }

        .modal-dialog {
            max-width: 700px !important;
            margin-right: auto;
            margin-left: auto;
        }

        .login-top-nav .popup-form-section-row {
            display: flex !important;
/*            justify-content: space-between !important;*/
/*            align-items: center !important;*/
            width: 100% !important;
        }

            .login-top-nav .popup-form-section-row .logo {
                margin-right: 0px !important;
            }

            .login-top-nav .popup-form-section-row .tour-button {
                margin-right: auto !important;
            }

            .login-top-nav .popup-form-section-row .important-button,
            .login-top-nav .popup-form-section-row .small-button:last-of-type {
                margin-left: 10px !important;
                margin-right: 0 !important;
            }

        .home-page-right-panel.content-page {
/*            margin-top: 10px !important;*/
        }

        #favorite_group {
            margin-left: 0px !important;
        }

        #favorite_collection {
            margin-left: 0px !important;
        }

        #recipe_collection {
            margin-top: 10px !important;
        }

        .recipes_container {
            padding-right: 0px !important;
        }

            .recipes_container .core-content-region {
                padding-right: 0px !important;
            }

        .core-content-region {
            padding-right: 0px !important;
        }

        .user-profile-container {
            width: 97% !important;
            margin-top: 5px !important;
            margin-left: 10px !important;
        }

        #event_content_body_region .c-horizontal-menu {
            overflow-x: auto;
            scrollbar-width: none;
        }

            #event_content_body_region .c-horizontal-menu::-webkit-scrollbar {
                display: none;
            }

        #people_right_panel .c-horizontal-menu {
            overflow-x: auto;
            scrollbar-width: none;
        }

            #people_right_panel .c-horizontal-menu::-webkit-scrollbar {
                display: none;
            }

        #people_left_panel .filter-section .my-dropdownlist {
            width: 48%;
        }

        .search-bar-textbox {
            max-width: 100% !important;
        }

        #admin_menu {
            margin-left: 0px !important;
        }

        .home-page-left-panel {
            width: 100%;
            margin-left: 5px;
            padding: 0px 10px 10px 10px;
        }

        .admin-container {
            padding: 20px !important;
        }

        #mobile_quick_add .material-symbols-outlined {
            font-size: 30px;
        }

        .home-habit-container {
            width: 750px !important;
        }

        #today_section {
            margin-bottom: 50px !important;
        }

        .add-new-button {
            width: 70px;
            height: 70px;
            bottom: 70px;
            right: 35px;
        }



        .page-add-new-title {
            font-size: 16px;
        }

        .popup-form-section-row .popup-form-section-column {
            flex-direction: row !important;
        }



        #user_status_filter_dropdown {
            width: 100% !important;
        }
    } 

    .url-widget.collapsed {
        max-height: 100px;
        overflow: hidden;
    }

        .url-widget.collapsed .url-address {
            display: block;
        }

        .url-widget.collapsed .url-display-text,
        .url-widget.collapsed .url-display-order {
            display: none;
        }

    .popup-form-section-row.actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .material-symbols-outlined.medium {
        cursor: pointer;
    }

    .toggle-collapse {
        color: #555;
    }

    .date-widget.collapsed {
        max-height: 50px;
        overflow: hidden;
    }

        .date-widget.collapsed .popup-form-section-row + * {
            display: none;
        }

        .date-widget.collapsed .popup-form-section-row:first-child {
            display: block;
        }

    .action-right {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .email-field-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .form-control {
        flex: 1;
        padding: 8px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .alternate-container {
        position: relative;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        margin-top: 20px;
    }

    @media (max-width: 768px) {
        .dynamic-field > div {
            margin-top: 5px;
        }
    }

    .global-toggle {
        position: absolute;
        top: -30px;
        right: 10px;
        font-size: 24px;
        color: #555;
        cursor: pointer;
    }

    .dynamic-field {
        transition: all 0.3s ease;
        display: flex;
    }

    .btn-danger {
        padding: 2px 8px;
        font-size: 14px;
    }

    .btn-link {
        color: #007bff;
        text-decoration: none;
    }

        .btn-link:hover {
            text-decoration: underline;
        }

    .alt-edit-form-label {
        font-family: Assistant, Arial, sans-serif !important;
        font-size: 20px !important;
        font-weight: bold !important;
        height: 44px !important;
    }

    .alt-textbox {
        font-size: 23px !important;
        height: 44px !important;
        font-family: Assistant, Arial, sans-serif !important;
        font-weight: 400 !important;
    }

    .date-options-row {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
    }

    .recurring-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    .recurrence-dropdown {
        font-size: 18px !important;
        height: 44px !important;
        font-family: var(--global-font-family);
        font-weight: 400 !important;
    }

    .textarea {
        width: 100%;
        resize: none;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
    }

    .recurring-container {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
    }

    .recurring-checkbox {
        margin-right: 5px;
    }

    .recurring-container label {
        margin-right: 10px;
        font-size: 14px;
        font-weight: normal;
    }

    .recurrence-dropdown {
        width: 30%;
        font-size: 14px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .add-another-date-button {
        width: 95%;
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
    }

    @media (max-width: 768px) {
        .dynamic-field > div {
            margin-top: 5px;
        }

        /*    #add_event_popup .date-widget .start-date {
        width: 43% !important;
        margin-top: 12px !important;
    }*/

        .has-date-widget .date-widget .start-date {
            width: 43% !important;
            margin-top: 12px !important;
        }

        /*    #add_event_popup .date-widget .end-date {
        width: 43% !important;
        margin-top: 12px !important;
    }*/

        .has-date-widget .date-widget .end-date {
            width: 43% !important;
            margin-top: 12px !important;
        }

        #add_event_popup .date-widget .start-time {
            width: 28% !important;
        }

        .has-date-widget .date-widget .start-time {
            width: 28% !important;
        }

        #add_event_popup .date-widget .time-duration {
            width: 43% !important;
        }

        .has-date-widget .date-widget .time-duration {
            width: 22% !important;
        }

        .alt-edit-form-label::placeholder {
            font-size: 14px;
        }

        .alt-textbox::placeholder {
            font-size: 14px !important;
            height: 44px !important;
            font-family: Assistant, Arial, sans-serif !important;
            font-weight: 400 !important;
        }

        .alt-edit-form-label::placeholder {
            font-size: 14px;
        }

        .alt-textbox {
            font-size: 18px !important;
            height: 44px !important;
            font-family: Assistant, Arial, sans-serif !important;
            font-weight: 400 !important;
        }

        .alt-edit-form-label {
            font-family: Assistant, Arial, sans-serif !important;
            font-size: 18px !important;
            font-weight: bold !important;
            height: 44px !important;
        }

        .alt-textbox {
            font-size: 18px !important;
            height: 44px !important;
            font-family: Assistant, Arial, sans-serif !important;
            font-weight: 400 !important;
        }

        .url-widget.collapsed {
            max-height: 105px;
            overflow: hidden;
        }

        .date-widget.collapsed {
            max-height: 47px;
            overflow: hidden;
        }

        .recurrence-dropdown {
            width: 45% !important;
        }
    }

    .recipe-modal .modal-dialog {
        max-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .recipe-modal .modal-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
    }

    .recipe-modal .modal-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sidepanel-menu:focus {
        outline: none;
        box-shadow: none;
    }

    .clipping-dropdown {
        position: relative;
    }

/*    Calendar Widget overrides*/
@media (max-width: 480px) {
    .fc .fc-toolbar-title {
        font-size: 12px;
    }

    .fc .fc-button {
        font-size: 10px;
    }

    .fc .fc-icon {
        font-size: 10px;
    }
}

/* Container alignment */
.responsive-add-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    /* Make all controls equal height and line up visually */
    .responsive-add-item-row input.my-textbox,
    .responsive-add-item-row button.add-item-button,
    .responsive-add-item-row .clear-search-button {
        height: 36px;
        display: flex;
        align-items: center;
    }

/* Clear icon button itself */
.clear-search-button {
    /*position: absolute !important;*/
    margin-left: -50px;
    border: none;
    background: transparent;
    padding: 0 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-bottom: 5px;
}

    /* Icon inside it */
    .clear-search-button .material-symbols-outlined {
        font-size: 20px;
        opacity: 0.4;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .clear-search-button:hover .material-symbols-outlined {
        opacity: 0.9;
        transform: scale(1.1);
    }