.bg-csmb-grey {
    background-color: #a2c3b8 !important;
}

.text-csmb {
    color: #366c5b;
}

.btn-csmb {
    background-color: #C1DFF0;
}

.bg-body {
    background-color: #366c5b;
}

.border-csmb-green {
    border-color: #366c5b;
}

#tickets-table {
    font-size: 16px;
}

a[disabled] {
    pointer-events: none;
}

bg-card-body {
    background: lightgray;
}

.cart-delete-item:hover {
    cursor: pointer;
}


/*
Customize Membershipworks buttons per their instructions
 */

body #SFctr button,
body #SFctr a.SFbtn {
    color: black;
    background: #a2c3b8;
    font-weight: normal
}

body #SFctr button:hover,
body #SFctr a.SFbtn:hover {
    color: #fff;
    background-color: #444;
    text-decoration: none
}

/*
Modify Membershipworks tab colors per their instructions
I had to modify their css because
- the unslected selector was looking for a class SFsel but their html had an empty class.
- Same for the selected selector plus I also added a selector for aria-selected=true
 */


body #SFctr nav>a[id^=SFusrmnu] {
    background-color: #366c5b;
    color: white
}

body #SFctr nav>a[id^=SFusrmnu][aria-selected="true"] {
    background-color: white;
    color: black
}

/*
These styles are for the new Google calendar for communioty events to
ensure it displays correctly on desktop and mobile screens
 */
.calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    overflow: hidden;
}

.calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}