#lf-widget-frame-lesrooster{
	width: 100%;
	height: 600px;
	border: none;
}
.lf-popup-background{
	position: fixed;
	height: 100%;
	width: 100%;
	display: none;
	left: 0;
	top: 0;
	background-color: black;
	opacity: 0;
}
#lf-popup-item-lesrooster{
	position: fixed;
	height: calc(100%);
	overflow-y: auto;
	width: 35%;
	top: 0;
	right: -36%;
	background-color: white;
	padding: 10px;
}
@media screen and (max-width: 735px){
	#lf-popup-item-lesrooster{
		width: calc(100% - 20px);
		right: -102%;
	}
}
.lf-activiteit-omschrijving, .lf-medewerker-welkomstekst{
	display: inline-block;
	width: 60%;
}
.lf-activiteit-foto, .lf-medewerker-foto{
	display: inline-block;
	width: 30%;
	border-radius: 10px;
    vertical-align: top;
}
.lf-hidden{
	display: none;
}
.lf-login-incorrect{
	color: red;
}
.lf-les-titel {
    color: var(--tw-prose-headings);
    font-weight: 700;
    font-family: var(--font-object-sans-heavy);
    font-size: 1.6667em;
    line-height: 1.3333;
    margin-bottom: 0.75em;
}
.lf-activiteit-titel {
    color: var(--tw-prose-headings);
    font-weight: 700;
    font-family: var(--font-object-sans-heavy);
    font-size: 1.25em;
    line-height: 1.3333;
    margin-bottom: 0.75em;
}
.lf-medewerker-naam, #lf-popup-item-lesrooster-footer {
    clear: both;
    padding-top: 1.3333333em;
}
#lf-popup-item-lesrooster-login-panel input {
    appearance: none;
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-300);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-gray-900);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    --tw-outline-style: none;
    outline-style: none;
    margin-right: 1em;
    &:hover {
        border-color: var(--color-gray-400);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        outline-style: none;
    }
    &:focus {
        border-color: var(--color-brand-500);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-outline-style: none;
        outline-style: none;
    }
}
.lf-popup-item-lesrooster-login-label {
    margin-bottom: 1em;
}
.lf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: transparent;
    /* `brand-500` en niet `brand-400`: wit op 400 haalt 3,04:1 en dat is
       te weinig voor tekst op deze grootte. Akkoord van de opdrachtgever,
       31 augustus. Zie CLAUDE.md, *Merk & tokens*. */
    background-color: var(--color-brand-500);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 150ms;
    transition-duration: 150ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    &:hover, &:focus {
        /* Een stap donkerder dan de rusttoestand, die nu zelf `brand-500` is. */
        background-color: var(--color-brand-600);
        color: var(--color-white);
    }
}
#lf-button-popup-lesrooster-terug {
    margin-top: 1em;
}