page-class {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content minmax(0, 1fr);
    gap: var(--u);
    padding: var(--u);
}

page-class > nav-panel > form-enhance > form > label.school,
page-class > nav-panel > form-enhance > form > label.status {
    border-bottom: none;
}

page-class > nav-panel > form-enhance > form > label.picture {
    grid-column: 3;
    grid-row: 1 / 4;
    border-bottom: none;
    aspect-ratio: 16 / 9;
}

page-class > nav-panel > form-enhance > form > label.status > output-i18n {
    font-size: 1.5rem;
}

page-class > nav-panel > table-enhance > table > tbody > tr > td > div.expiration {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    font-size: 1rem;
}

page-class > nav-panel > table-enhance.student > div.header {
    font-size: 1.5rem;
}

page-class > nav-panel > table-enhance.student > div.header > output-i18n {
    font-family: "Sesame Sans", system-ui;
}

page-class > nav-panel > table-enhance.student > div.header > span:first-of-type {
    margin-left: -0.5%;
    font-family: "VAG Rounded Bold", "VAG Rounded Next", system-ui;
}

page-class > nav-panel > table-enhance.student .warning {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-red);
    cursor: pointer;
}

page-class > nav-panel > table-enhance.student .warning > .missing {
    text-decoration: underline;
}

page-class > nav-panel > table-enhance.student .done {
    background-color: var(--color-green);
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

page-class > nav-panel > section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--u-xs);
}

page-class > nav-panel > section > section {
    display: grid;
    grid-template-columns: 1fr min-content;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-2xs);
    background-color: var(--color-gray-light);
    border-radius: var(--border-radius);
    border: solid 1px var(--color-black);
}

page-class > nav-panel > section > section.reassign {
    display: grid;
    grid-template-columns: 1fr 5% min-content min-content;
    column-gap: var(--u-2xs);
}

page-class > nav-panel > section > section.delete {
    background-color: var(--color-red-lighter);
    border: solid 1px var(--color-red);
}

page-class > nav-panel > section > section > header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-weight: normal;
    gap: 1rem;
}

page-class > nav-panel > section > section > button {
    width: min-content;
    justify-self: right;
}

page-class > nav-panel > section > section > label.reassign {
    grid-column: 3;
    font-family: "Sesame Sans", system-ui;
    width: 30vmin;
    background-color: var(--color-gray-light);
    justify-self: left;
    justify-content: left;
    color: var(--color-black);
    height: var(--u-sm);
    border-radius: 0;
    border: solid 1px var(--color-black);
    padding-left: 1rem;
    padding-right: 0;
}

page-class > nav-panel > section > section > label.reassign > select-i18n {
    width: 100%;
    flex-grow: unset;
}

page-class > nav-panel > section > section > label.reassign:active {
    transform: none;
}

page-class > nav-panel > section > section > label.reassign > select-i18n {
    position: relative;
}

page-class > nav-panel > section > section.reassign > button {
    grid-column: 4;
    border-radius: var(--u);
}

page-class > nav-panel > section > section > header > output-i18n:first-of-type {
    font-family: "VAG Rounded Bold", "VAG Rounded Next", system-ui;
    color: var(--color-black);
}

page-class > nav-panel > section > section.delete > header > output-i18n:first-of-type {
    color: var(--color-red);
}

page-class > nav-panel > section > section > header > output-i18n {
    white-space: break-spaces;
    line-height: 150%;
}

page-class.disabled > nav-panel > section > section.disable {
    display: none;
}

page-class > nav-panel > section > section.disable {
    display: flex;
}

page-class > nav-panel > section > section.reactivate {
    display: none;
}

page-class.disabled > nav-panel > section > section.reactivate {
    display: flex;
}

page-class > nav-panel > section > section.delete {
    display: flex;
}

page-class.deletable > nav-panel > section > section.delete {
    display: none;
}

page-class > nav-panel > table-enhance.student.on > table > tbody > tr > td > template-enhance > .warning:not(:last-of-type)::after {
    content: ', ';
    color: var(--color-gray);
    text-decoration: none;
}

page-class > nav-panel > table-enhance.student.on > table > tbody > tr:has(i.icon.no) > td > template-enhance > div.warning {
    pointer-events: none;
    cursor: default;
    color: var(--color-gray);
    text-decoration: none;
}

page-class > nav-panel > table-enhance.student > input-entity-multiple > dialog > main > table-enhance > table tr:has(i.icon.no) > td.right > i.icon.green-on-transparent {
    color: var(--color-gray);
    border: solid 2px var(--color-gray);
}

page-class > nav-panel > table-enhance.student > input-entity-multiple > dialog > main > table-enhance > table tr:has(i.icon.no) {
    pointer-events: none;
    cursor: default;
}