Hide Inactive Appointment Locations in CANImmunize

CANImmunize.css

/* Remove extra spacing from all cards */
.card[appointment][class*="styles_appointmentTypeCard__"] {
    margin: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Add bottom spacing back to visible cards */
.card[appointment][class*="styles_appointmentTypeCardSelectable__"] {
    margin-bottom: 10px !important;
}

/* First hide content of all appointment cards by default */
.card[appointment][class*="styles_appointmentTypeCard__"] * {
    display: none;
}

/* Then unhide content of cards (locations) that HAVE appointments */
.card[appointment][class*="styles_appointmentTypeCardSelectable__"] *,
.card[appointment][class*="styles_appointmentTypeCardSelected__"] * {
    display: block;
}

USAGE: Use the "Download ZIP" button (top right) and then unzip and save the CSS file (which will be inside a folder) anywhere on your computer. Then you need to get your web browser to use it:

Safari: Assign the CANImmunized.css file you saved to your computer in "Preferences > Advanced > Style sheet"

Chrome: Use the following extension and follow it's instructions for how to add the CSS code from the CANImmunized.css file https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=en

Firefox: Maybe try this extension
https://addons.mozilla.org/en-CA/firefox/addon/insert-style-sheet-temporarily/

Mobile: Do some Google searching on how to apply custom CSS to your mobile browser and you may find a mobile solution. I’ve gotten it working on Safari in iOS.

PLEASE NOTE: Because this hides all locations with no appointments sometimes when you hit "Load More" it may seem like nothing happened. What happened was that all of the locations you just loaded had no appointments. Just keep clicking "Load More".