.lessons .button { width: 125px; }

.lessons-item-header { position:relative; }
.lessons-item-image { width: 100%;height: 250px;position: relative;z-index: 10;overflow: hidden; }
.lessons-item-image img { width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }

.form-timeblock-item.unavailable { background-color: var(--global-color-primary-6);border: 1px solid var(--global-color-primary-5);font-weight: bold;color: var(--global-color-primary-5);text-align: center;height: 45px;line-height: 45px; }
.form-timeblock-item-select button { width:100%!important; }

.service-select-personnel button img { max-width: 100%;max-height: 175px;border-radius: 6px; overflow: hidden;margin: 0 auto;text-align: center; }
.service-select-personnel button { background-color:transparent;padding:0!important;margin:0!important;color:var(--global-color-primary-2);width: 100%;height: 100%; }
.service-select-personnel-holder { display: grid; grid-template-columns: repeat(3, calc(33.333% - 8px)); grid-gap: 12px; }
.service-select-personnel-name { max-width:150px;background-color: var(--global-color-accent-1); padding: 6px 12px; border-radius: 6px; color: var(--global-color-primary-1);margin:6px auto 0 auto; }

.form-service-room-empty { grid-column-start: 1; grid-column-end: span 3; margin: 0 !important; }

.load-bar { width:100%;display:block;margin-top:2px;height:3px;position:relative; }
.load-bar .loading { height:100%;position:absolute;top:0;left:0;background-color:var(--global-color-primary-1);transition:all ease 250ms; }

.month { margin: 0 auto 24px auto; text-align: center; width:calc(100% - 48px);max-width: 342px; background-color: var(--global-color-primary-7); padding: 24px; }
.month-row { display: grid; grid-template-columns: repeat(7, 48px);grid-gap:1px; }
.month-day { color:var(--global-color-primary-5); }
.month-day, .month-day form button { text-align:center;height:48px;line-height:48px;margin-bottom:1px; }
.month-day form button { margin:0 auto 1px auto!important;padding:0!important;width:100%; }

.header-month-title { font-family: var(--header-font); text-transform: uppercase; font-weight: bold; font-size: 24px; }
.header .month-day { text-transform: uppercase; font-size: 14px; color: var(--global-color-primary-4); font-weight: bold; }

.month-day a:link, .month-day a:visited { background-color: var(--global-color-accent-1a); width: 100%; height: 100%; display: block; color: var(--global-color-primary-7); font-weight: bold; cursor: pointer; transition: all ease 250ms; }
.month-day a:hover { background-color:var(--global-color-accent-1h); }

@media all and ( min-width:824px ) {
    .form-service-dates .month {
        display:inline-block;
        vertical-align: top;
        margin-right:24px;
    }
}