/* OVERRIDES FOR BASE.CSS */

.wof-booking-step.active {
    background-color: var(--mud-palette-primary) !important;
}

.wof-infobox {
    background-color: var(--mud-palette-background-grey) !important;
}

.wof-service-card:hover, .wof-service-card:focus, .wof-service-card:active, .wof-service-card.selected {
    background: radial-gradient(circle, rgba(255,255,255,1) 50%, var(--mud-palette-tertiary-lighten) 100%);
    border-color: var(--mud-palette-primary);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
}

.wof-practitioner-card:hover, .wof-practitioner-card:focus, .wof-practitioner-card:active, .wof-practitioner-card.selected {
    background: radial-gradient(circle, rgba(255,255,255,1) 50%, var(--mud-palette-tertiary-lighten) 100%);
    border-color: var(--mud-palette-primary);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
}

/* Drawer overrides */
.mud-navmenu.mud-navmenu-default .mud-nav-link:focus:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link:hover:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-drawer-text) !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-primary-lighten);
}

/* Custom: XXS */
@media screen and (max-width: 320px) {
}

/* Special media for calendar, that breaks under ~372px */
@media screen and (max-width: 380px) {
}

/* XS */
@media screen and (max-width: 600px) {
}

/* SM */
@media screen and (max-width: 960px) and (min-width: 600px) {
}

/* MD */
@media screen and (max-width: 1280px) and (min-width: 960px) {
}

/* LG */
@media screen and (max-width: 1920px) and (min-width: 1280px) {
}

/* XL */
@media screen and (max-width: 2560px) and (min-width: 1920px) {
}

/* XXL */
@media screen and (min-width: 2560px) {
}