/* Fonts */

html,
body {
    scroll-behavior: auto !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* legacy prefix */
}

@font-face {
    font-family: 'Shorelines Script';
    src: url('/fonts/ShorelinesScriptBold.woff2') format('woff2'),
        url('/fonts/ShorelinesScriptBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand-Medium.woff2') format('woff2'),
        url('/fonts/Quicksand-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alvaro Condensed';
    src: url('/fonts/AlvaroCondensed.woff2') format('woff2'),
        url('/fonts/AlvaroCondensed.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-Regular.woff2') format('woff2'),
        url('/fonts/BarlowCondensed-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

h1 {
    font-family: 'Alvaro Condensed';
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Barlow Condensed';
}


em {
    font-family: 'Shorelines Script';
}

html {
    /*font-size: 3.5vmin;*/
    color: #f8f8f8;
}

body {
    color: #f8f8f8;
}

.overlay-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5);*/
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,    /* Transparent at the top */
        rgba(0, 0, 0, 0.5) 10%, /* Gradual fade in */
        rgba(0, 0, 0, 0.5) 90%, /* Maintain opacity in the middle */
        rgba(0, 0, 0, 0) 100%   /* Transparent at the bottom */
    );
    z-index: 9999;
    /* High z-index to overlay everything */
    display: none;
    /* Initially hidden */
    align-items: center;
    justify-content: center;
}


#overlay-modal {
    position: fixed;
    /* Makes the overlay cover the entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    /* Fully transparent */
    z-index: 9999;
    /* Ensure it is above other elements */
    pointer-events: auto;
    /* Enables blocking of mouse interaction */
}

.btn {
    font-family: 'Quicksand' !important;
    line-height: normal;
    padding: 15px;
    /*text-transform: uppercase;*/
}


.img-btn {
    font-family: 'Barlow Condensed' !important;
    /*font-family: 'Alvaro Condensed' !important;*/
}

.img-btn-sml {
    font-family: 'Barlow Condensed' !important;
}

.form-control {
    font-family: 'Quicksand' !important;
}



/*    Base Font Size For Bootstrap Container   */

html {
    font-size: 4dvw !important;
}

@media (min-width: 990px) {

    html {
        font-size: 22px !important;
    }
}




/* Primary Colours */
.pad-hollow {
    background-color: transparent;
    border: 1px solid #f8f8f8;
}

.pad-white {
    color: #f8f8f8 !important;
}

.pad-white-bg,
.blog-category-0 {
    background-color: #f8f8f8 !important;
}

.pad-dark-blue {
    color: #1b2f5d !important;
}

.pad-dark-blue-bg {
    background-color: #1b2f5d !important;
}

/* Additional Colours */

.pad-cyan {
    color: #2ebfb9 !important;
}

.pad-cyan-bg,
.activity-type-6 {
    background-color: #2ebfb9 !important;
}

.pad-pink {
    color: #e57ab0 !important;
}

.pad-pink-bg,
.activity-type-1 {
    background-color: #e57ab0 !important;
}

.pad-light-pink {
    color: #f8bac7 !important;
}

.pad-light-pink-bg,
.blog-category-1 {
    background-color: #f8bac7 !important;
}

.pad-purple {
    color: #ba9ac9 !important;
}

.pad-purple-bg,
.activity-type-5,
.blog-category-3 {
    background-color: #ba9ac9 !important;
}

.pad-yellow {
    color: #fac951 !important;
}

.pad-yellow-bg,
.activity-type-2 {
    background-color: #fac951 !important;
}

.pad-blue {
    color: #6dace0 !important;
}

.pad-blue-bg,
.activity-type-3 {
    background-color: #6dace0 !important;
}

.pad-green {
    color: #c7d36f !important;
}

.pad-green-bg,
.activity-type-4,
.blog-category-4 {
    background-color: #c7d36f !important;
}

.pad-light-green {
    color: #8bd0be !important;
}

.pad-light-green-bg,
.blog-category-2 {
    background-color: #8bd0be !important;
}

/* Home Page */

.button-row>div {
    padding: 5px;
}

.button-row {
    padding-left: 15px;
    padding-right: 15px;
}

.main-content {
    padding-top: 15px;
    padding-bottom: 15px;
    min-height: 50dvh;
    /*offset for footer nav*/

}

.collapse-margins:empty {
    margin: 0 !important;
}

.category-tile-btn {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1rem;
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px !important;
    padding: 0px !important;


}

.category-tile-btn:active,
.category-tile-btn:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
}


.category-tile-btn img {
    object-fit: contain;
    width: 100%;
}



.category-tile-btn span {
    font-size: 1.3rem;
    color: #f8f8f8;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    height: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3rem;
    /*letter-spacing: .10rem;*/
    /*line-height: 100%;*/
}


.square-btn {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1rem;
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    margin: 0px !important;
    padding: 0px !important;
    font-family: 'Alvaro Condensed' !important;

}

.square-btn:active,
.square-btn:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
}


.square-btn img {
    object-fit: contain;
    width: 100%;
}

.square-btn:hover img {
    animation: wiggle 0.5s ease-in-out infinite;
}

/* Define the keyframes for the wiggle animation */
@keyframes wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}



.square-btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    /* Text color */
    font-size: 3.3rem;
    font-weight: bold;
    font-weight: normal;
    letter-spacing: .15rem;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);*/
    /* Optional: Text shadow for better visibility */

}

.activity-of-the-day-btn {

    border-radius: 1rem;
    font-size: 1.6rem;
    text-align: center;

}

/*
.tall-activity-btn {
    aspect-ratio: 9/16;
    width:auto;
    max-width:100%;
    height:100%;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position:relative;
}*/

.tall-activity-btn {
    border-radius: 1.5rem;
    align-items: center;
    position: relative;
    height: 45svh;
    width: 33.75svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
}


.tall-activity-container {
    max-width: 100%;
    margin: 0 5px;
    height: 45svh;
    width: 33.75svh;


}

.tall-activity-btn .tall-btn-img-bg {
    /*
    aspect-ratio: 9/16;
    max-width:100%;
    max-height: 60svh;
   */
    border-radius: 1.5rem;
    object-fit: cover;
    height: 60svh !important;

}

.tall-btn-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgba(26, 47, 94, 0), rgba(26, 47, 94, 0.9));
    /*padding: 0% 8% 8% 8%!important; */
    padding: 0% 8%;
    min-height: 30%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: left;


}

.tall-btn-overlay-container {
    margin: 50% 0 8% 0;
}

.tall-btn-child-name {
    font-size: 22px;
    color: #f8f8f8;
    flex-grow: 1;
    align-self: start;
}

.tall-btn-child-arrow {
    margin-left: 15px;
    font-size: 24px;
    transform: scale(1.3);
    font-weight: bold;
    color: #f8f8f8;
    flex-grow: 1;
    align-self: start;
}



.tall-btn-info {
    font-size: 22px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: left;

}

.tall-btn-title {
    font-size: 16px;
    color: #f8f8f8;
    flex-grow: 1;
    margin-left: 8px;
    align-self: start;
}



.square-activity-btn {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1.5rem;

    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/*.square-activity-btn img {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
    

}*/

.square-activity-btn-bg {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 1.5rem;
    object-fit: cover;
}

.svg-toggle-container img {
    /*aspect-ratio: 1/1;
    border-radius: 1.5rem;
    */
    width: 100%;    
    object-fit: cover;
    aspect-ratio: 1 / 1; 

}

.square-btn-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 4px;
    background: linear-gradient(to bottom, rgba(26, 47, 94, 0), rgba(26, 47, 94, 0.9));
    color: #f8f8f8;
    text-align: left;
    transition: background 0.3s ease;
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 36% 8% 8% 8% !important;
    min-height: 60%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: left;

}

/*
.square-btn-fave-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 18%;
    width: 18%;
    padding: 0;
    color: #f8f8f8;
    text-align: left;
    margin: 8% 8% 0% 0% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;

}
*/

/* for NEW button */
.square-btn-fave-overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 18%;
    width: 84%;
    padding: 0;
    color: #f8f8f8;
    text-align: left;
    margin: 8% 8% 0% 8% !important;
    /*margin: 0 !important;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    

}



/*
.tall-activity-btn .square-btn-fave-overlay {
    height: 14%;
}
    */

    /* for NEW button */
.tall-activity-btn .square-btn-fave-overlay {
    height: 6svh; /*USE VH TO SOLVE SAFARI ISSUE */
    /*width: 18%;*/
}



.square-btn-fave-overlay img {
    object-fit: contain;
    width:auto;
    height:100%;
}

.svg-toggle-container {
    /*width: 100%;*/
    width:auto;
    height: 100%;
    /* border:1px solid green;*/
    display: inline-block;

}

.svg-toggle-container label {
    width: 100%;
    height: 100%;
    /* border:1px solid green;*/

}



.square-btn-vr {
    width: 5px;
    border-radius: 2.5px;
    padding: 0px !important;
    /* padding: 0px 0px 100% 0px!important;*/
}

.square-btn-title {
    font-size: .8rem;
    color: #f8f8f8;
    flex-grow: 1;
    margin-left: 8px;
    align-self: start;

}

/*
.square-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f8f8f8 !important;
    text-shadow: 0 0 7px rgb(0, 0, 0), 0 0 122px rgb(0, 0, 0);
}*/




.square-nav-btn {
    font-family: 'Barlow Condensed' !important;
    text-transform: uppercase;
    position: relative;
    aspect-ratio: 1/1;
    height: 100%;
    border-radius: 1rem;
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
}


.square-nav-btn img {
    object-fit: contain;
    max-width: 100%;
}


.square-nav-title {
    font-family: 'Barlow Condensed' !important;
    font-size: 22px;
    color: #1b2f5d;
    position: absolute;
    bottom: 6px;
    width: 100%;
    text-align: center;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    /*line-height: 100%;*/


}




.rectangle-btn {
    width: 100%;
    height: auto;
    padding: 0;
}

.rectangle-btn:hover {
    opacity: 0.7;
}

.rectangle-btn img {
    max-height: 100%;
}

.rectangle-btn span {
    font-size: 1.8rem;
    color: #f8f8f8;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.8rem;

    text-align: left;
    display: flex;
    justify-content: start;
    align-items: center;
    /*letter-spacing: .10rem;*/
}



.long-btn {
    width: 100%;
    border-radius: 1rem;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.long-btn span {
    font-size: 2rem;
}


.long-btn img {
    object-fit: contain;
    height: 150px;
}


/* Components */

.pad-btn {
    border-width: 2px;
    font-size: 1.3rem;
    border-radius: .7rem;
}

.pad-btn-lg {
    border-width: 2px;
    font-size: 1.8rem;

}

.pad-btn-sm {
    font-size: 1rem;
}

.pad-btn:hover,
.pad-btn:focus,
.pad-btn:active {
    transition: 0.2s ease-in;
    filter: brightness(80%) !important;

    /* 20% light */
}

.pad-blue-bg-btn,
.pad-blue-bg-btn:hover,
.pad-blue-bg-btn:focus,
.pad-blue-bg-btn:active {
    background-color: #6dace0 !important;
    border-color: hsl(207, 65%, 60%) !important;
    color: #f8f8f8 !important;
}


.pad-cyan-bg-btn,
.pad-cyan-bg-btn:hover,
.pad-cyan-bg-btn:focus,
.pad-cyan-bg-btn:active {
    background-color: #2ebfb9 !important;
    border-color: hsl(178, 51%, 50%) !important;
    color: #f8f8f8 !important;
}

.pad-light-pink-bg-btn,
.pad-light-pink-bg-btn:hover,
.pad-light-pink-bg-btn:focus,
.pad-light-pink-bg-btn:active {
    background-color: #f8bac7 !important;
    border-color: hsl(347, 82%, 80%) !important;
    color: #f8f8f8 !important;
}


.pad-yellow-bg-btn,
.pad-yellow-bg-btn:hover,
.pad-yellow-bg-btn:focus,
.pad-yellow-bg-btn:active {
    background-color: #fac951 !important;
    border-color: hsl(43, 94%, 60%) !important;
    color: #f8f8f8 !important;
}



.pad-pink-bg-btn,
.pad-pink-bg-btn:hover,
.pad-pink-bg-btn:focus,
.pad-pink-bg-btn:active {
    background-color: #e57ab0 !important;
    border-color: hsl(330, 67%, 64%) !important;
    color: #f8f8f8 !important;
}

.pad-purple-bg-btn,
.pad-purple-bg-btn:hover,
.pad-purple-bg-btn:focus,
.pad-purple-bg-btn:active {
    background-color: #ba9ac9 !important;
    border-color: hsl(281, 30%, 65%) !important;
    color: #f8f8f8 !important;
}

.pad-green-bg-btn,
.pad-green-bg-btn:hover,
.pad-green-bg-btn:focus,
.pad-green-bg-btn:active {
    background-color: #c7d36f !important;
    border-color: hsl(67, 45%, 59%) !important;
    color: #f8f8f8 !important;
}

.pad-light-green-bg-btn,
.pad-light-green-bg-btn:hover,
.pad-light-green-bg-btn:focus,
.pad-light-green-bg-btn:active {
    background-color: #8bd0be !important;
    border-color: hsl(164, 34%, 63%) !important;
    color: #f8f8f8 !important;
}



.pad-dark-blue-bg-btn,
.pad-dark-blue-bg-btn:hover,
.pad-dark-blue-bg-btn:focus,
.pad-dark-blue-bg-btn:active {
    background-color: #1b2f5d !important;
    border-color: hsl(222, 55%, 20%) !important;
    color: #f8f8f8 !important;
}


.pad-white-bg-btn,
.pad-white-bg-btn:hover,
.pad-white-bg-btn:focus,
.pad-white-bg-btn:active {
    background-color: #f8f8f8 !important;
    border-color: hsl(0, 0%, 82%) !important;
    color: #000000 !important;
}

.footer-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    /*background-color: #f0f0f0!important;*/
    max-height: 150px;
}

.footer-nav div {

    justify-content: space-around;
    align-items: center;
}

.footer-nav div a {
    padding: 5px;
    max-width: 25vw;
}

/* Activity */

.category-tag {
    padding: 8px;
    border-radius: 8px;
    color: #f8f8f8;
}

.activity-tag {
    position: relative;
    display: inline-block;
}

.activity-tag img {
    height: 40px;
    width: auto;
    display: block;
}

.activity-tag .age-text {
    position: absolute;
    top: 55%;
    left: 33%;
    transform: translateY(-50%);
    font-size: 20px;
    /* Adjust the font size as needed */
}

.inactive td {
    background: repeating-linear-gradient(315deg,
            #fff,
            /* White color */
            #fff 10px,
            #f1f1f1 10px,
            /* Grey color */
            #f1f1f1 20px);
}

/* OLD SEARCH FILTER STYLES - May need for sorting still
.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-bottom: #1d3e76 1px solid;
    margin-bottom: 10px;
}

.search-filter .fa {
    transition: transform 0.2s ease;
}


.search-filter.active .fa {
    transform: rotateZ(180deg);
}


.row-expandable .fa {
    transition: transform 0.2s ease;
}

.row-expandable.active .fa {
    transform: rotateZ(180deg);
}

.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-bottom: #1d3e76 1px solid;
    margin-bottom: 10px;
}

.search-filter.active .fa {
    transform: rotateZ(180deg);
}
*/

.search-sort {
    justify-content: end !important;
    gap: 10px;
    margin-bottom: 10px;
}

.sort-order {
    text-align: right;
}

.sort-order-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

}

.sort-order-section .fa {
    transition: transform 0.2s ease;
    transform: translateY(-5px) rotateZ(180deg);
}


.sort-order-section.active .fa {
    transform: translateY(5px);

}


.search-filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;


}

.search-filter .fa {
    transition: transform 0.2s ease;
    transform: translateY(-5px) rotateZ(180deg);
}


.search-filter.active .fa {
    transform: translateY(5px);

}


.row-expandable .fa-chevron-up {
    transition: transform 0.2s ease;
    transform: translateY(-0px) rotateZ(180deg);

}

.row-expandable.active .fa-chevron-up {
    transform: translateY(0px);
}

.row-expandable.active .planner-activity-title .fa-chevron-up {
    transform: translateY(1px);
}


.blog-content .row-expandable {
    position: relative;
}

.blog-content .row-expandable .fa-chevron-up {
    transition: transform 0.2s ease;
    transform: translateY(-50%) rotateZ(180deg);
    position: absolute;
    right: 10px;
    top: 25%;
    cursor: pointer;

}

.blog-content .row-expandable.active .fa-chevron-up {
    transform: translateY(-50%);
}

.blog-content .row-expandable.active .planner-activity-title .fa-chevron-up {
    transform: translateY(-50%);
}


/* Activity Slider */

.slider-nav {
    /*background-color: #ba9ac9;*/
    padding: 0px !important;
}

/*
.slider-nav .slick-list {
    padding: 0px !important;
}
*/

.slick-list {
    padding: 0px !important;
}

.slider-nav .slick-list .slick-track {
    padding: 0px !important;
}

.slider-single .slick-slide {
    text-align: center;
}


.slider-single .slick-slide img {
    height: 100%;
    margin: auto;


}

.slider-nav .slick-track {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* height:100%;*/
    width: auto !important;
    flex-wrap: wrap;
}


.slider-nav .slick-slide {
    width: auto !important;
    padding: 5px;
}

.slider-nav .slick-slide img {
    height: 100px;
    margin: auto;
    position: relative;
}

.slider-nav .slick-slide {
    position: relative;
}


.slider-nav .slick-slide img {
    opacity: 0.5;
}


.slider-nav .is-active img {
    opacity: 1;

}

.slick-slide i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    opacity: 0.75;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    color: #f8f8f8;
}


/* Social */

.avatar {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.avatar .img {
    display: inline-block;
    /* make a square container */
    width: 75px;
    height: 75px;

    border: 2px solid #000;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: center center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}


.avatar-lg {
    display: inline-block;
    /* make a square container */
    width: 150px;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: center center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.avatar .avatar-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.avatar .avatar-time {
    font-size: .75rem;

}

.edit-picture {
    position: absolute;
    z-index: 1;
    top: 90%;
    left: 75%;
}

.avatar-badge {
    position: absolute;
    z-index: 2;
    top: -8%;
    left: 68%;
    width: 30%;
    height: 30%;
}

.notifications-badge {
    position: absolute;
    z-index: 2;
    top: -8%;
    /* left: 68%;*/
    right: 8px;
    width: 30%;
    height: 30%;
    background-color: #ff3130;
    border-radius: .7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f8f8f8;
    font-family: 'Quicksand';
    font-size: 1rem;
    line-height: normal;
}

.bell-notifications-badge {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    /*width:30%;*/
    /*height:30%;*/
    background-color: #ff3130;
    border-radius: .7rem;
    display: flex;
    justify-content: center;
    align-content: center;
    color: #f8f8f8;
    padding: 0px 10px;
    font-family: 'Quicksand';
    font-size: 1.2rem;
    line-height: normal;
}


a.white-link,
button.white-link {
    color: #f8f8f8;
    background: none;
    border: none;
}

/* PROFILE */

.nice-list {
    border-collapse: separate;
    border-spacing: 0 15;
    border-style: none;
}


.nice-list tr {
    padding-bottom: 15px;
}

.nice-list tr.read td {
    padding-bottom: 15px;
    background-color: #888888!important;
}

.nice-list td {
    border-style: none;
    color: #f8f8f8 !important;

}



.nice-toggle-list label:nth-child(8n+2) {
    background-color: #ba9ac9;
}

.nice-toggle-list label:nth-child(8n+4) {
    background-color: #38beb9;
}

.nice-toggle-list label:nth-child(8n+6) {
    background-color: #c7d26f;
}

.nice-toggle-list label:nth-child(8n+8) {
    background-color: #6dace0;
}



.nice-list tr td:first-child {
    border-top-left-radius: 0.7rem;
    border-bottom-left-radius: 0.7rem;
}

.nice-list tr td:last-child {
    border-top-right-radius: 0.7rem;
    border-bottom-right-radius: 0.7rem;
}

/*
.nice-list tr td:last-child { border-top-right-radius: 0.7rem; border-bottom-right-radius: 0.7rem;
    white-space: nowrap;
    width: 1%;   vertical-align: top;}*/
.nice-list b {
    font-size: .9rem;
}


.nice-list p {
    font-size: .9rem;
}


.nice-list tr:nth-child(4n+1) td {
    background-color: #ba9ac9;
}

.nice-list tr:nth-child(4n+2) td {
    background-color: #38beb9;
}

.nice-list tr:nth-child(4n+3) td {
    background-color: #c7d26f;
}

.nice-list tr:nth-child(4n+4) td {
    background-color: #6dace0;
}


.nice-list td {
    font-size: 1.25rem;
}

/* Other */


.clickable {
    cursor: pointer;
}


.clickable-icon {
    cursor: pointer;
    opacity: 1;
}

.clickable-icon:hover {
    opacity: 0.7;
}


.svg-toggle-container {
    cursor: pointer;
}

.svg-checked:hover {

    /*opacity: 0.7 !important;*/
}

.svg-unchecked:hover {
    /*opacity: 0.7 !important;*/
}



.favourite {
    color: #e57ab0;
    transition: color 0.5s ease;
}


.modal-body {
    font-size: 1rem;
}

.checkbox-lg .form-check-input {
    top: .4rem;
    scale: 1.4;
    margin: 0px;
    margin-left: -.25rem;
    border-width: 2px;
}

.checkbox-lg .form-check-label {
    padding-top: 13px;
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f8f8;

}

.spinner-container-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    /* Semi-transparent black background */
    z-index: 9999;
    /* Ensure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

.check-list {
    list-style-type: none;
    padding: 15px 0px 0px 0px;
    font-size: 1rem;
}


.check-list li {
    display: flex;
    align-items: flex-start;
  }
  
  .check-list li input[type="checkbox"] {
    margin-top: 0.2em; /* adjust for visual alignment */
    margin-right: 0.5em;
    flex-shrink: 0;
  }
  
  .check-list li label {
    flex: 1;
  }



.row-accordion {
    display: none;
}

.shake {
    animation: shake 300ms;
}

@keyframes shake {
    25% {
        transform: translateX(4px)
    }

    50% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

.svg-checkbox {
    position: absolute;
    opacity: 0;
}

.svg-checkbox+label {
    margin: 0;
}

.svg-checkbox:checked+label .svg-unchecked {
    display: none;
}

.svg-checkbox:checked+label .svg-checked {
    display: block;
    opacity: 1;
}

.svg-checkbox:not(:checked)+label .svg-unchecked {
    display: block;
    opacity: 1;
}

.svg-checkbox:not(:checked)+label .svg-checked {
    display: none;
}

/* THIS WILL BE HANDLED IN THE BOOTSTRAP THEME INSTEAD */

td,
th {
    color: #1b2f5d !important;
}


.navbar img {
    max-width: 100%;
}

.table-light th {
    border-width: 0px !important;
}

/*
#sort-by-title {
    font-size: 1.2rem;
}*/

/* Progress Bar */

.search-box {
    padding: 0;
    margin: 0;
    background-color: #f8f8f8;
    background-color: #f8f8f8;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    color: #495057;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    position: relative;
   

}

.search-input {
    font-family: 'Quicksand' !important;
    border: none;
    box-shadow: none;
    transition: revert;
    outline: none;
}

.search-input:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

#btn-back {
    cursor: pointer;
}

/* 2/3 ratio style changes */

.activity-photos .slick-slide img {
    aspect-ratio: 2/3;
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 1.5rem;
}

.activity-photos .slick-slide i {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    /* Adjust icon size as needed */
    text-shadow: 0 0 15px black;
    /* Add a black glow outline to the icon */

}

.activity-photos .slick-slide {
    position: relative;
}

.slider-single img {}

.slider-nav img {
    aspect-ratio: 2/3;
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: .5rem;
}

.slider-single iframe {
    width: auto !important;
    height: 100% !important;
    aspect-ratio: 9/16;
    border-radius: 1.5rem;
}

.slick-slide.is-active {
    pointer-events: none;
}

.slick-slide {
    cursor: pointer;
}

.icon-button {
    background: none !important;
    border: none;
    width: 2rem;
    padding: 0;
}

.icon-button img {
    /*height:1.5rem!important;*/
    width: 2rem;
    height: auto;
}


.icon-button-sm {
    background: none !important;
    border: none;
    width: 1rem;
    padding: 0;
}

.icon-button-sm img {
    /*height:1.5rem!important;*/
    width: 1rem;
    height: auto;
}

/* community */

.community-section {
    border-top: 2px solid #2ebfb9;
    padding: 15px;
    padding-left: 0px;
    padding-right: 0px;
    /*box-shadow: 6px 12px RGBA(0, 0, 0, 0.2);*/
    margin-bottom: 25px;
}

.reactions {
    display: flex;
    justify-content: end;
}

.reaction {
    padding: 8px;
}

.comment-reply {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.comment-reply-body {
    flex: 1;
}

.community-image {
    object-fit: contain;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.community-image img {
    object-fit: contain;
    max-height: 60vh;
    max-width: 100%;
}

.community-rating {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.comment-reply {
    border-top: 1px solid #2ebfb9;
    padding-top: 15px;
    margin-top: 5px;
}

.reactions {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}

.reaction-options {
    padding: 5px;
    position: absolute;
    display: none;
    border: 2px solid #2ebfb9;
    background-color: #fff;
    z-index: 1;
    width: max-content;
    top: 0;
    left: 0;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)
}

.reaction-icons {
    flex: 1;
    display: flex;
    align-items: center;
    color: #999
}

.reaction-icons img {
    width: 2rem;
    padding: 2px;
}

/*
.reply-dialog {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    background: #E8E8E8;
    padding-bottom: 20px;
    display: none;
    margin-top: 10px;
}

.reply-dialog textarea {
    resize: none;
    overflow: hidden;
    border: none;
    width: calc(100% - 20px);
    margin-left:25px;
    min-height: 50px;
    background: none;
    padding: 12px;
    font-size: 16px;
  
    outline: none;
    border-color: transparent;
}
*/

.reply-dialog {
    width: 100%;
    position: relative;
    border-radius: 1rem;
    background: #E8E8E8;
    /*padding-bottom: 20px;*/
    display: none;
    margin-top: 10px;
    flex-direction:row;
    gap:10px;
    padding:15px;
}

.reply-dialog textarea {
    resize: none;
    overflow: hidden;
    border: none;
    width: calc(100% - 20px);
   /* margin-left:25px;*/
    min-height: 50px;
    background: none;
    
    font-size: 16px;
  
    outline: none;
    border-color: transparent;
}


.reply-dialog #btn-add-photo {
    display: none; /* or whatever style you want */
 }

.reply-dialog[data-val="0"] #btn-add-photo {
    display: block; /* or whatever style you want */
}

/*
.reply-dialog[data-val="0"] #btn-add-photo ~ textarea  {
    margin-left:25px;
}
*/

.reply-dialog[data-val="0"] #btn-add-photo[style*="display: none;"] ~ textarea  {
    margin-left:0px;
}

#btn-add-photo[style*="display: none;"] ~ textarea {
    margin-left:0px;
}

  
.send-icon {
    position: absolute;
    bottom: 5px;
    /* Adjust bottom position */
    right: 10px;
    /* Adjust right position */
    color: #888;
    /* Color of the icon */
    cursor: pointer;
    font-family: 'Alvaro Condensed' !important;
    font-size: 1.2rem;
}
/*
.camera-icon {
    position: absolute;
    top: 15px;
    left: 10px;
    color: #888;
    cursor: pointer;
    font-family: 'Alvaro Condensed' !important;
    font-size: 1.2rem;
}
    */

    .camera-icon {
        color: #888;
        cursor: pointer;
        font-family: 'Alvaro Condensed' !important;
        font-size: 1.2rem;
    }

.comment-reply {
    display: flex;
    flex-direction: row;
    gap: 0px;
}

.comment-reply {
    border-top: none;
    padding-top: 0px !important;
    margin-top: 0px !important;
}

.reply-chain>div {
    border-left: 2px solid #2ebfb9 !important;
    margin-left: 15px;
}

.reply-chain>div:last-child {
    border-left: none !important;
}

.reply-line {
    width: 15px;
    height: 40px;
    border-bottom-left-radius: 15px;
    border: 2px solid #2ebfb9;
    border-top: none;
    border-right: none;
    translate: -2px;
}

.reply-chain>div:last-child .reply-line {
    translate: 0px;
}

.reply {
    padding-bottom: 15px;
}

.reply-chain .reply-chain .btn-reply {
    display: none;
}

.comment-background {
    padding: 10px;
}

.comment-reply-background {
    border-radius: 1rem;
    border: 2px solid #2ebfb9;
    padding: 10px;
    margin-top: 10px;
}

.community-section.comment-hidden {
    background: repeating-linear-gradient(-55deg,
            #fff,
            #fff 10px,
            #eee 10px,
            #eee 20px);
}

.comment-hidden .comment-reply-background {
    background: repeating-linear-gradient(-55deg,
            #fff,
            #fff 10px,
            #eee 10px,
            #eee 20px);
}

.comment-hidden .btn-add-reaction {
    display: none;
}

.comment-hidden .btn-reply {
    display: none;
}

.comment-hidden .reply-chain .btn-hide-comment {
    display: none;
}

.comment-image img {
    max-width: 100%;
    height: auto;
    max-height: 40vh;
}

.comment-image img:not([src=""][src="none"]) {
    padding-top: 10px;
    padding-bottom: 10px;
}


.image-overlay-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
 
}


.image-overlay-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    text-align: center;

}

.image-overlay-container .close-image-overlay {
    color: #fff;
    font-size: 3rem;
    line-height: 3rem;
    position: absolute;
    top: 20px;
    right: 30px;
    cursor: pointer;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
}


.image-loading {
    background-image: url(/img/ui/loading-spinner.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;   
}

.main-slider .image-loading {
    background-size: 25% auto;   
}

.main-slider .image-loading i {
    display:none;
}

.image-loading img {
    visibility: hidden;
}

.comment-image.image-loading {
    min-height: 200px;
}


/*.image-loading::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    margin-left: 50%;
    margin-top:50%;
    margin-top: 2rem;
    margin-bottom: 2rem;


}*/


.filter-overlay {
    display: none;
    /* Initially hide the overlay */
    position: fixed;
    bottom: 0;
    left: 50%;
    /*width: 100%;*/
    border-radius: 1rem;
    background-color: #f8f8f8;
    /* Adjust the opacity as needed */
    color: black;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 15px;
    justify-content: center;
    transform: translateX(-50%);
}

.filter-overlay span {
    display: block;
    font-weight: bold;
    /*margin-bottom: 5px;*/
}

.filter-overlay i {
    font-size: 20px;
}

.fullscreen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1b2f5d;
    color: white;
    overflow-y: auto;
    border-radius: 1rem;
    border: 2px #000 solid;
    padding: 25px;
}

.filter-group {
    border-radius: 1rem;
    border: 2px #f8f8f8 solid;
    padding: 15px;
    width: 100%;
    margin-bottom: 30px;
}

.registration-form-field .fa-solid {
    /*position: absolute;*/
}

.form-field-no-border:active,
.form-field-no-border:focus {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    /*-webkit-tap-highlight-color: transparent !important;*/
    /*-webkit-user-select: none;*/
    /* Chrome/Safari */
    /*-moz-user-select: none;*/
    /* Firefox */
    /*-ms-user-select: none;*/
    /* IE10+ */
    /*user-select: none;*/
}


.close-X {
    font-family: 'Quicksand';
    font-size: 2rem;
    font-weight: bold;
    position:absolute;
    right:0px;
    padding:15px;
}

#show-activities {
    font-size: 1.3rem;
}

.filter-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.filter-options div {
    display: inline-block;
    width: 50%;
    padding: 5px;
}

.filter-options-single-col div {
    width:100%;
    padding:0px;
}

.filter-options label {
    word-break: break-word;
    font-size: 1rem;
}

.pad-btn-check+label {
    border-radius: .5em !important;

}

.pad-btn-check:not(:checked)+label {
    background-color: transparent !important;
    color: #f8f8f8 !important;
}

.filter-options .pad-btn-check:not(:checked)+label {
    border-color: #f8f8f8 !important;
}

input.pad-btn-check:focus+label {
    color: #f8f8f8 !important;
    filter: none !important;
}

input.pad-btn-check:active+label {
    color: #f8f8f8 !important;
    filter: none !important;
}



.filter-options>div:nth-child(3n) .pad-btn-check:is(:checked)+label {
    background-color: #ba9ac9 !important;
}

.filter-options>div:nth-child(3n+1) .pad-btn-check:is(:checked)+label {
    background-color: #2ebfb9 !important;
}


.filter-options>div:nth-child(3n+2) .pad-btn-check:is(:checked)+label {
    background-color: #fac951 !important;
}



#filter-footer {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    background-color: #1b2f5d;
    padding: 15px;
}

input:focus::placeholder {
    color: transparent !important;
    /* Set placeholder text color to transparent */
}

.nav-tabs {
    border: none;
    padding-bottom: 2px;
    margin-left: 15px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link {
    color: #f8f8f8;
    background-color: #3d7cb0;
    border: none;
    /*border-color: #6dace0  #6dace0  #6dace0 ;*/
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: .5rem 2rem;
    font-family: 'Quicksand' !important;
    /*text-transform: uppercase;*/
    font-size: 1.3rem;

}


.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #f8f8f8;
    background-color: #6dace0;
    border: none;
    /*border-color: #6dace0  #6dace0  #6dace0 ;*/
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.modal {
    color: #1b2f5d !important
}

.pad-table-lg td,
.pad-table-lg th {
    font-size: 1rem;
}

.pad-table-curved {
    border-radius: 0.7rem;
    overflow: hidden;
}

/* REGISTRATION */

#registration-grid {
    display: grid;
    grid-template-rows: min-content min-content auto min-content;

    /*height: 100%;*/
    width: 100%;
    row-gap: 20px;
    column-gap: 20px;

}

#progressbar {
    display: grid;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    gap: 5px 5px;
    font-size: 1.2rem;

}

#progressbar div {
    display: grid;
    list-style: none;
    width: 100%;
    border-radius: 2.5px;
    padding: 0px !important;
    margin: 0px;
    align-items: center;
    justify-items: center;
}

.progress-step {
    height: 5px;
    background-color: #f8f8f8;
}

.progress-step.active {
    background-color: #6dace0 !important;
}

.registration-form-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-items: center;*/
    padding: 5px 15px;
    border-radius: .5rem;
    color: #f8f8f8;
    margin-bottom: 10px;
    font-size: 1.2rem;
    gap:10px;
    position: relative; 

}


.registration-form-field input {
    background: none !important;
    border: none;
    text-align: center;
    margin: 0px;
    padding:0px;
    width:auto;
    flex:1;

/*    margin-left: 30px;
    margin-right: 30px;
*/


}


.registration-form-field .toggle-password {
    position: absolute; /* Position the button over the input */
    right: 10px; /* Adjust this to position it where you want */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    color:#f8f8f8;
}

.registration-form-field input::placeholder {
    text-align: left;
}


.registration-form-field input::placeholder {

    color: #f8f8f8;
}

.registration-form-field input:focus {

    background: none;
    color: #f8f8f8;
}


.slideRight {

    animation-name: slideRight;
    animation-duration: .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes slideRight {
    0% {
        transform: translateX(-100vw);
    }

    100% {
        transform: translateX(0);
    }
}


.slideLeft {

    animation-name: slideLeft;
    animation-duration: .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes slideLeft {
    0% {
        transform: translateX(100vw);
    }

    100% {
        transform: translateX(0);
    }
}

#otp input {
    aspect-ratio: 1/1;
    height: auto;

    border: solid #1b2f5d .25rem;
    font-size: 1.5rem;
}

/* Chrome, Safari, Edge, Opera */
#otp input[type="number"]::-webkit-inner-spin-button,
#otp input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
#otp input[type="number"] {
    -moz-appearance: textfield;
}


.pad-btn-check-v2+label {
    border-radius: .5em !important;

}

.pad-btn-check-v2:not(:checked)+label {
    color: #1a2f5e !important;
    opacity: 0.6;
}


input.pad-btn-check-v2:focus+label {
    filter: none !important;
    color: #1a2f5e !important;
}

input.pad-btn-check-v2:active+label {
    filter: none !important;
    color: #1a2f5e !important;
}




input.pad-btn-check-v2:hover+label {
    /* color: #f8f8f8!important;*/
    color: #1a2f5e !important;
    filter: none !important;
    border-color: #1b2f5d !important;

}

input.pad-btn-check-v2:checked+label {
    /*color: #f8f8f8!important;*/
    color: #1a2f5e !important;
    filter: none !important;
    opacity: 1;
}


input[type=range].styled-slider {
    height: 40px;
    -webkit-appearance: none;
    width: 100%;
    background-color: #1a2f5e;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 36px + var(--ratio) * (100% - 36px));
}

input[type=range].styled-slider:focus {
    outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #BA9AC9;
    border: none;
    box-shadow: 0 0 2px #000000;
    margin-top: calc(max((15px - 1px - 1px) * 0.5, 0px) - 36px * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
    height: 15px;
    border: 1px solid #000;
    border-radius: 15px;
    background: #ba9ac9;
    box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#9736C4, #9736C4) 0/var(--sx) 100% no-repeat, #ba9ac9;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #BA9AC9;
    border: none;
    box-shadow: 0 0 2px #000000;
}

input[type=range].styled-slider::-moz-range-track {
    height: max(calc(15px - 1px - 1px), 0px);
    border: 1px solid #b2b2b2;
    border-radius: 15px;
    background: #ba9ac9;
    box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#9736C4, #9736C4) 0/var(--sx) 100% no-repeat, #ba9ac9;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
    background: transparent;
    border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
    background: transparent;
    border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #BA9AC9;
    border: none;
    box-shadow: 0 0 2px #000000;
    margin-top: 0;
    box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
    height: 15px;
    border-radius: 15px;
    background: #ba9ac9;
    border: 1px solid #b2b2b2;
    box-shadow: none;
    box-sizing: border-box;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    height: max(calc(15px - 1px - 1px), 0px);
    border-radius: 15px 0 0 15px;
    margin: -1px 0 -1px -1px;
    background: #9736C4;
    border: 1px solid #b2b2b2;
    border-right-width: 0;
}

.button-absolute-br {
    position: absolute;
    right: 25px;
    bottom: 25px;
}


.activity-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

/* mobile device in portrait */
@media only screen and (max-width: 600px) and (orientation: portrait) {

    .activity-tags {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .activity-tag .age-text {
        font-size: 1em;
    }


    .activity-tag img {
        height: auto;
        width: 100%;
    }
}

/* Blog */

.blog-list-subheading {
    font-size: .8rem;
    text-align: left;
    margin-bottom: 25px;
    margin-top: 10px;
}

.blog-byline {
    text-align: right;
    margin-bottom: 25px;
}

#activity-results {
    /*min-height: 100vh; breaks display of activity squares*/
}

.event {
    /*border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        background-image: linear-gradient(to bottom, #c7d36f 0px, #b7c35f 100%);
        background-repeat: repeat-x;*/
    color: #f8f8f8;
    border-width: 1px;
    font-size: .75em;
    padding: 0 .25em;
    line-height: 2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;

}

.calendar-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    /* Optional: collapse table borders */
}

.calendar-table td {
    width: calc(100% / 7);
    /* Set width to a seventh of the table width */
    border: 1px solid #ccc;
    /* Optional: add borders for visualization */
}

.calendar-table .c-name {
    text-align: center;
}

.calendar-day {
    font-size: .8rem;
    padding: .2rem 0px !important;
    height: 10vh;
}

.calendar-day .date {
    width: 100%;
    text-align: center;
    padding-bottom: .25rem;
}

.c-name.highlight,
.date.highlight {

    color: #b2dba1 !important;
}

#list-view .table td:last-child {
    width: 1%;
    /* Set a small width */
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflow text */
    text-overflow: ellipsis;
    /* Show ellipsis for overflow text */
}


/*New Improved Footer*/




.square-nav-btn img {
    object-fit: contain;
    max-width: 100%;
}

.footer-nav-grid {
    position: fixed;
    bottom: 0;
    width: 100%;
    /*background-color: #f0f0f0!important;*/
    max-height: 150px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 150px));
    /* Create 4 equal columns */
    gap: 1vw;
    /* Adjust spacing between divs */
    max-width: 100%;
    /* Fill the container width */
    padding: 5px;
    /* Add some padding if necessary */
    justify-content: center;
    /* Center the grid if needed */
}

.nav-grid-item {
    aspect-ratio: 1 / 1;
    /* Force the divs to be square */
    padding: 0px;
    max-height: 140px;
    /* Maximum height of 150px */
    width: 100%;
    /* Make them take full width of the grid cell */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    /* Ensure padding/border is included in width/height */
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
}


#community-header-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

.btn-add-reaction {
    width: 3rem;
    padding: 5px;
}

.btn-add-reaction img {
    width: 100%;
    height: 100%;
}

.ql-editor p {
    margin-bottom: 1rem !important;
}

.blog-list-item {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: none;
}

#supplies-content ul {
    list-style-type: '- ';
}


.twitter-typeahead {
    width: 100%;
}

.nested-clear-button {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none;
    padding: 15px;
    /* Hidden initially */
}

.search-with-X:not(:placeholder-shown)~.nested-clear-button {
    display: inline;
    /* Show when input is not empty */
}

.search-with-X {
    padding-right: 30px;
    /* Add space for the clear button */
}




.svg-checkbox.fave-activity {
    pointer-events: none;
}


#skip-button {
    font-family: 'Quicksand';
}

.registration-avatar {
    display: inline-block;
    width: 50%;
    aspect-ratio: 1/1;
    border: 2px solid #000;
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
} 

#intro-vid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* blog images */

.blog-content img {
    width:100%;
	height: auto;
	
}

/* schema icons */

.blog-content img[src^="/img"] {
	height: 60px;
	width:auto;
}

#blog-content .ql-editor img[src^="/img"] {
    height: 40px;
	width:auto;
}

.blog-content .blog-icon-container {
    grid-template-columns: 1fr auto 1fr;
}


.suggested-slider {
    position: relative;
    overflow: hidden; /* Ensure no clipping */
    pointer-events: auto; /* Allow touch events */
}

.suggested-slider * {
    pointer-events: auto; /* Allow touch events on all child elements */
}

.blog-content h4 {
    padding:0px;
}
.blog-content .row-expandable {
    padding-bottom:20px;
    
}

.blurred-activity img {
    filter: blur(1vw) brightness(0.6);

}


.blurred-activity .square-btn-overlay {
    background: none;
}

.no-select {
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
}

.deep-link-btn button[data-type=""] {
    display: none;
}


.activity-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
    gap: 10px; /* Adjust spacing between cells */
    width: 100%;
}

.activity-list > div {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1; /* Make cells square */
    position: relative;
}

/* Adjust for wider screens (e.g., iPad) */
@media (min-width: 1024px) {
    .activity-list {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for wider screens */
    }
}


.blog-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
    gap: 10px; /* Adjust spacing between cells */
    width: 100%;
}

.blog-list > div {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Adjust for wider screens (e.g., iPad) */
@media (min-width: 1024px) {
    .blog-list {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for wider screens */
    }
}


.main-slider .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.thumbnail-slider {
    /*height: 100px; *//* Adjust thumbnail height as needed */
}

.thumbnail-slider .swiper-slide {
    width: auto; /* Allow dynamic width for thumbnails */
    height: 100%;
    flex-shrink: 0; /* Prevent thumbnails from shrinking */
}

.thumbnail-slider .swiper-slide img {
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent; /* Add a border for active styling */
    box-sizing: border-box;
}

.thumbnail-slider .swiper-slide-thumb-active img {
    border-color: #007bff; /* Active thumbnail border color */
}

.main-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure slides match the container height */
    position: relative;
}

.main-slider .swiper-slide img {
        width: auto; /* Allow the width to scale based on height */
        height: 100%; /* Scale the image height to match the container */
        object-fit: cover; /* Maintain aspect ratio while covering the container */
        object-position: center; /* Center the image within the container */
        display: block; /* Ensure the image is displayed as a block element */
        border-radius: 1.5rem;
        aspect-ratio: 2 / 3;
}

.thumbnail-slider img {
    border-radius: .5rem;
    aspect-ratio: 2 / 3;
}

.main-slider .swiper-slide i {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    /* Adjust icon size as needed */
    text-shadow: 0 0 15px black;
    /* Add a black glow outline to the icon */
}


.thumbnail-slider .swiper-wrapper {
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping to multiple lines */
    justify-content: center; /* Center the thumbnails */
    gap: 10px; /* Adjust spacing between thumbnails */
}

.thumbnail-slider .swiper-slide {
    flex: 0 1 auto; /* Allow slides to shrink and wrap as needed */
    width: auto; /* Set the desired thumbnail width */
    height: 100px; /* Set the desired thumbnail height */
    text-align: center; /* Optional: Center content in slides */
}

.thumbnail-slider {
    overflow: hidden; /* Prevent any overflow issues */
}

/* Intro Slider Styles */
.intro-swiper-container {
    width: auto;
    max-width: 100%;
    height:100%;
    aspect-ratio: 9/16;
    justify-self: center;
    align-self: center;
      
    overflow: hidden;
    position: relative;
  }
  
  .intro-swiper-wrapper {
    display: flex;
  }
  
  /* Video Styling */
  .intro-swiper-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  #intro-progressbar {
      display: grid;
      grid-template-columns: 1fr repeat(6, auto) 1fr; /* Two arrows with progress steps in between */
      grid-template-rows: auto;
      align-items: center;
      justify-items: center;
      gap: 5px;
      font-size: 1.2rem;
      margin-top: 10px;
  }
  
  #intro-progressbar .arrow-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  }
  
  #intro-progressbar .progress-step {
      height: 5px;
      width: 30px; /* Adjust width as necessary */
      background-color: #f8f8f8;
      border-radius: 2.5px;
      transition: background-color 0.3s ease;
  }
  
  #intro-progressbar .progress-step.active {
      background-color: #6dace0; /* Active step color */
  }
  
  #intro-progressbar .arrow-btn i {
      color: #6dace0;
      font-size: 2rem;
      transition: color 0.3s ease;
  }
  
  #intro-progressbar .arrow-btn:hover i {
      color: #007bff;
  }
  
  #intro-container {
    display: grid;
    grid-template-rows: auto 1fr; /* Auto for progress bar, remaining for swiper */
    height: 100vh; /* Full viewport height */
  }
  
  .nav-subheader {
    font-family: 'Barlow Condensed' !important;
    color: #9ac9ed;
   font-size:3.8vh; 

  }
  
/* width: fit-content;*/

.text-underline {
    text-decoration: underline;
}

.rejoin-grid {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    height: 100vh;
    gap: 20px;
    padding: 0px;
    box-sizing: border-box;
  }



.main-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: 20px;
    padding: 15px 0px;
    box-sizing: border-box;
  }

  
  /* Header styling */
  .main-grid-header {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    gap: 0px;
  }

  .main-grid-header img {
    max-height: 10vh;
    width: auto;
    max-width: 100%;
  }
  
  /* Middle section containing the main image */
  .main-middle-section {
    display: flex;                     /* Use flex to center image */
    justify-content: center;           /* Center horizontally */
    align-items: center;               /* Center vertically */
    overflow: hidden;   
    max-width: 80%;  
    margin: auto;
    height:100%;
  }
  
/* Main image container */
.main-image {
    width: 100%;                        /* Ensure it takes up the full width */
    height: 100%;                       /* Ensure it fills the height of the container */
    overflow: hidden;
    display: flex;                      /* Flex to make it easier to center if necessary */
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;              /* Rounded corners */
}

/* The actual image */
.main-image img {
    width: 100%;                        /* Ensures it doesn't overflow horizontally */
    height: 100%;                       /* Ensures it doesn't overflow vertically */
    object-fit: cover;                  /* Ensures the image fills the container */
    display: block;                     /* Prevents unexpected space */
}
  
  /* Footer section with buttons */
  .main-footer-section {
    display: grid;
    grid-template-rows: auto auto;
    gap: 15px;
    width: 100%;
    margin:auto;
    padding: 0px 15px;
    justify-items: center;             /* Center the buttons horizontally */
  }
  

  #view-age-groups {
    pointer-events: none;
}


#btn-remove-image {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
    background:none;
    border:none;
  padding: 8px;
  font-size: 1.4rem;
  color: #e57ab0;
  cursor: pointer;
  z-index: 10;
  
}


.decor-plan {
    width: 72px; /* adjust to suit */
    height: auto;
    pointer-events: none;
    position:absolute;
  }

/* Card/radio combo */
.plan-label{
  display:block;
  background:#1b2f5d;
  color:#fff;
  border-radius:18px;
  border:3px solid var(--edge);
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  padding:0px 9px;
  transition:.2s ease;
  position:relative;
  width:72%;
  margin: 0 auto;
  overflow: visible;
}

.plan-title{  font-family: 'Barlow Condensed'; font-size:1.2rem;font-weight: bold; }
.plan-price{ font-family: 'Barlow Condensed'; font-size:1.2rem;  line-height:1; font-weight: bold;}
.plan-strike{ font-family: 'Barlow Condensed';  font-weight:lighter; font-size:1.2rem;color:#fff; text-decoration:line-through;  text-decoration-color: #ff0000; /* pink line */}
.per-month{ font-family: 'Quicksand';color:#1b2f5d; }
.plan-duration{ font-family: 'Quicksand';color:#1b2f5d; }
.fine{  font-size:.85rem;font-family: 'Quicksand'; }


.plan-pill1 .decor-plan { top: 20px; right: -75px; width:80px;height:auto; }
.plan-pill2 .decor-plan  { top: 10px; left: -80px; width:80px;height:auto;  }
.plan-pill3 .decor-plan { top: 10px; right: -75px; width:80px;height:auto; }

.plan-pill1 {
    border: #e57ab0 solid 6px;
}


.plan-pill2 {
    border: #2ebfb9 solid 6px;
}

.plan-pill3 {
    border: #ba9ac9 solid 6px;
}

.btn-check:checked + .plan-pill1 {
    background-color: #e57ab0;
    border: #fff solid 6px!important;
  }

  .btn-check:checked + .plan-pill1 .ribbon {
    border: #fff solid 4px!important;
  }

.btn-check:checked + .plan-pill2 {
    background-color: #2ebfb9;
    border: #fff solid 6px!important;
  }
  
  .btn-check:checked + .plan-pill3 {
    background-color: #ba9ac9;
    border: #fff solid 6px!important;
  }
  
/* “Best value” ribbon */
.ribbon{
  position:absolute; top:-22px; right:8px;
  background:#e57ab0; color:#fff;
  font-size:1rem;
  padding: 0px 8px; 
  border: #e57ab0 solid 4px;
  border-radius:15px;
 
}


.benefit-dot{ width:18px; height:18px; margin-right:.5rem; }

input.plan-checkbox:disabled + label {
    background-color: #999;
    cursor: not-allowed;
    opacity: 0.7; /* optional fade */
    color: #00b7ef
  }

  
.info-box {
    border-width: 2px;
    border-radius: .7rem;
    background-color: #2ebfb9;
    padding:1rem;
}

.scheduled-date {
    text-decoration: underline;
    cursor: pointer;
    color:#3d7cb0!important;
}

td.calendar-day:has(> div.highlight) {
    background-color: #f2f2f2;
  }