body { font-family: var(--font-family); font-size: var(--font-size); }
body, html { min-height: 100%; }
.page-login { display: flex; gap: 20px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.page-login .login-form { display: flex; flex-direction: column; gap: 15px; max-width: 100%; }

.daylist { width: 100%; box-sizing: border-box; }

.daylist.grid-calendar { max-width: 1280px; }
.daylist.linear-calendar, select.months-list.linear-calendar { max-width: 1024px; }
select.months-list.grid-calendar { max-width: 350px; }

.daylist * { user-select: none; cursor: default; }

.daylist .linear .day { border-top: 1px dotted var(--separator-color); }
.daylist .linear .day.weekchange { border-top-style: solid; }
.daylist .linear .day-header .avail { background-color: red; padding: 3px 8px; font-size: 0.85rem; color: white; }
.daylist .linear .day-header .avail.free {background-color: #090; }
.daylist .linear .day-header .avail.partial {background-color: #A80; }
.daylist .linear .day-header .avail.full {background-color: #900; }
.daylist .linear .day-header { font-size: 0.85rem; font-weight: bold; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; }
.daylist .linear .day-header:hover { background-color: var(--light-over); }

.daylist .grid { width: 350px; }
.daylist .grid .header { display: flex; }
.daylist .grid .header .dow { width: calc(100%/7); font-weight: bold; font-size: 0.8rem; text-align: center; padding: 0.2rem 0; }
.daylist .grid .week { display: flex; padding-left: 1px; }
.daylist .grid .day-header .avail { position: absolute; right: 0px; bottom: 0px; width: 10px; height: 10px; padding: 4px; }
.daylist .grid .day-header .avail svg { display: block; }
.daylist .grid .week .day-header { 
    width: calc(100%/7 + 1px);
    padding-top: calc(100%/7 + 1px);
    background-color: #eee;
    position: relative;
}

.daylist .grid .week .day-header .inbox {
    position: absolute;
    left: -1px;
    top: -1px;
    right: 0;
    bottom: 0;
    border: 1px solid #999;
}

.daylist .grid .day-header.unavailable {
    background-image: url('images/svg/diag-stripe.svg');
    background-size: 100%;
}

.daylist .grid .day-header.available:hover .inbox {
    background-image: url('images/svg/wide-border-light.svg');
    background-size: 100%;
}

.daylist .grid .day-header.on {
    background-color: #ff9;
}

.daylist .grid .day-header.on:hover {
    background-color: #ff9;
}

.daylist .grid .day-header.on .inbox {
    background-image: url('images/svg/wide-border.svg');
    background-size: 100%;
}
.daylist .grid .day-header .inbox .text { position: absolute; display: block; top: 50%; margin-top: -0.7rem; font-size: 1rem; left: 0; right: 0; text-align: center; }
.daylist .grid .day-header.on .inbox .text { font-weight: bold; }

.daylist .day-body { padding-top: 0px; }
.daylist .day-body .date { color: var(--texts-color); font-weight: bold; }
.daylist .day-body .slots { display: flex; gap: 10px; padding: 6px 0;  flex-wrap: wrap; }
.daylist .day-body .slots.h-slots { flex-direction: row; }
.daylist .day-body .slots.v-slots { flex-direction: column; }
.daylist .day-body .resources { display: flex; gap: 20px; flex-wrap: wrap; }
.daylist .day-body .resource .res-caption { }
.daylist .day-body .resources.h-resources { flex-direction: row; }
.daylist .day-body .resources.v-resources { flex-direction: column; }
.daylist .day-body .button { display: flex; justify-content: space-between; }
.daylist .day-body .button .avail { margin-left: 1em; font-size: 0.7rem; }
.daylist .day-body .button.partial { background-color: var(--slot-partial); color: var(--slot-partial-color); }
.daylist .day-body .button.full { background-color: var(--slot-full); color: var(--slot-full-color); }

.daylist.grid-calendar { display: flex; gap: 15px; }
.daylist .day-bodies { flex: 1; }
.daylist .day-bodies .date { font-size: 0.85rem; }
.daylist.grid-mode { display: flex; flex-wrap: wrap; }

.events .day-body { padding-top: 8px; margin-bottom: 1em; }

.events .day-body .name { font-size: 1.1em; font-weight: bold; }
.events .day-body .date { font-size: 0.9em; margin-top: 0.3em; opacity: 0.8; }
.events .day-body .description { font-size: 0.9em; margin-top: 1em; }
.events .day-body .place { font-size: 0.9em; margin-top: 0.3em; }
.events .day-body .slots { margin-top: 0.5em; }

select.months-list { padding: 4px; font-size: 1rem; font-weight: bold; }
select.durations-list { padding: 4px; font-size: 1rem; font-weight: bold; }
.durations label { margin-right: 1em; }


.confirmation { margin: 1em 0; padding: 1em; border-radius: 7px; border: 1px solid #ccc; }

@media screen and (max-width: 640px) {
    .daylist .day .day-header{ font-size: 1rem; padding: 8px 0; }
    .daylist .grid { max-width: 100%; }
    .daylist.grid-calendar { flex-direction: column; }
}