:root {
    --cc-primary: rgb(22, 160, 133);
    --cc-primary-light: rgb(37, 211, 102);

    --cccc: rgba(8, 61, 101, .75);
    --cem: rgba(62, 32, 84, .75);
    --rhc: rgba(212, 196, 18, .75);
    --sws: rgba(0, 148, 216, .75);
    --cre: rgba(246, 179, 48, .75);
    --dce: rgba(129, 189, 65, .75);
    --sbd: rgba(183, 106, 190, .75);
}

.bg-cc-primary-light {
    background: var(--cc-primary-light)
}

#stayCoolSurvey {
    border: none;
    max-width: 100%;
    overflow: hidden;
}

.unsetHeight {
    height: unset;
}

.btn-iframe-expand {
    position: sticky;
    display: flex;
    bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.img-flex img {
    width: calc(100% / 8);
    aspect-ratio: 3/2;
    -webkit-aspect-ratio: 3/2;
    object-fit: contain;
}

.eventCard {
    cursor: pointer;
}
.eventImage {
    aspect-ratio: 1/1;
    -webkit-aspect-ratio: 1/1;
    object-fit: cover;
    transition: filter .1s ease-in;
}

    .eventImage:hover {
        cursor:pointer;
        filter: brightness(50%);
    }

.eventContent {
    max-height: 0;
    opacity: 0;
    transition: all .5s ease-in-out;
    overflow:hidden;
}

.eventContent.expand {
    max-height: 50vh;
    opacity: 1;
}

/* Accordian */
.accordion-button:not(.collapsed) {
    color: unset;
    background-color: unset;
    box-shadow: unset;
}

.bookmark-mt-lg {
    margin-top: 10rem;
}



.tewg-btn,
.tewg-btn.active {
    border-radius: 20px !important;
}

.tewg-btn{
    color: var(--cc-primary);
}

    .tewg-btn.active {
        color: white !important;
        background-color: var(--cc-primary) !important;
    }

    .tewg-btn:hover,
    .tewg-btn:focus {
        color: var(--cc-primary);
    }

#ev_bookmarks {
    height: 40rem;
}
 #ev_bookmarks:hover > .add-scroll-hint {
     bottom: -2rem;
     opacity: 1;
 }

.add-gradient-bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(to bottom, #21252900, #21252910 10%, #212529);
    height: 2rem;
    z-index: 1
}

.add-scroll-hint {
    opacity: 0;
    position: absolute;
    z-index: 1;
    transition: all .1s ease-in;
    bottom: -2.5rem;
    left: calc(50% - 1rem);
    color: rgba(255,255,255,0.4);
}

.overflow-y-minimal {
    overflow-y: scroll;
    position: relative;
}
    .overflow-y-minimal::-webkit-scrollbar {
        width: 0px;
    }
    .overflow-y-minimal::-webkit-scrollbar-track {
        border-radius: 20px;
        background-color: rgba(255,255,255,0.1);
    }
    .overflow-y-minimal::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background-color: rgba(255,255,255,0.3);
    }


@media only screen and (max-width: 576px) {
    #ev_bookmarks {
        height: unset;
    }

    #bookmarkScrollDiv .image-overlay img {
        height: 15rem !important;
    }

    .overflow-y-minimal::-webkit-scrollbar {
        display: none;
    }
}

.content {
    opacity: 100%;
    max-height: 50rem;
    visibility:visible;
    transition: all .3s ease-in-out;
}

.content.hide {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
}

.card.tewgMeeting {
    cursor: pointer;
}

.capitalize {
    text-transform: capitalize;
}

.flex-1 {
    flex: 1 1 0%;
}

.grid {
    display: grid;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.gap-5 {
    gap: 1.25rem; /* 20px */
}

.info-circle {
    border-radius: 9999px;    
    display: grid;
    place-items: center;
    height: 50px;
    width: 50px;
    font-weight: bold;
    color: white;
}

.info-description {
    border-radius: var(--bs-border-radius-xxl);    
    padding: 2rem;
    opacity: .95;
}