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

page-school > nav-tab {
    grid-column: 1;
    grid-row: 1;
}

page-school > nav-panel {
    grid-column: 1;
    grid-row: 2;
}

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

page-school > nav-panel > form-enhance label.picture {
    grid-column: 3;
    grid-row: 1 / 3;
    border-bottom: none;
    padding-bottom: 0;
}

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

page-school > nav-panel > table-enhance.class > table > tbody > tr > td > div > template-enhance {
    padding-top: var(--u-4xs);
}

page-school > nav-panel > table-enhance.class > table > tbody > tr > td > div > template-enhance > div {
    padding-bottom: var(--u-4xs);
}

page-school > nav-panel > template-enhance.license-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: max-content;
    gap: var(--u-xs);
}

page-school > nav-panel > template-enhance.license-summary > div {
    background-color: var(--color-green-xs);
    padding: var(--u-2xs);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    border: solid 1px var(--color-green);
}

page-school > nav-panel > template-enhance.license-summary > div.used-up {
    background-color: var(--color-gray-xs);
    border: solid 1px var(--color-gray);

    > output-i18n {
        font-size: 1.5rem;
        color: var(--color-gray);
    }
}

page-school > nav-panel > template-enhance.license-summary > div > output-i18n {
    font-size: 1.5rem;
    color: var(--color-green);
}

page-school > nav-panel > template-enhance.license-summary > div > div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
}

page-school > nav-panel > template-enhance.license-summary > div > footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.5em;
}

page-school > nav-panel > template-enhance.license-summary > div > footer > span {
    font-size: 1.5rem;
}

page-school > 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-school > nav-panel > table-enhance.license-history > div > label {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #eee;
}

page-school > nav-panel > table-enhance.license-history > div > label > output-i18n {
    display: block;
    font-size: 1rem;
    font-family: "Sesame Sans", system-ui;
}

page-school > nav-panel > table-enhance.license-history > div > label > select-i18n {
    font-size: 1.5rem;
}

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

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

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

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

page-school > nav-panel > section > section > label.reassign {
    grid-column: 3;
    font-family: "Sesame Sans", system-ui;
    width: 35vmin;
    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-school > nav-panel > section > section > label.reassign > select-i18n {
    width: 100%;
    flex-grow: unset;
}

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

page-school > 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-school > nav-panel > section > section.delete > header > output-i18n:first-of-type {
    color: var(--color-red);
}

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

page-child > nav-panel > table-enhance.license-history > table > tbody > tr > td:first-of-type {
	font-size: 1rem;
}

page-school > nav-panel > template-enhance.licenses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: var(--u-xs);
}

page-school > nav-panel > template-enhance.licenses > aside {
    order: 1;
    grid-column: 1 / 4;
    grid-row: 1;
    display: none;
}

page-school > nav-panel > template-enhance.licenses > aside.on {
    display: block;
}

page-school > nav-panel > template-enhance.licenses.detail > div[v-template-enhance] {
    display: none;
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance] {
    order: 2;
    background-color: var(--color-green-xs);
    padding: var(--u-2xs);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--u-3xs);
    border: solid 1px var(--color-green);
    cursor: pointer;
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance].used-up {
    background-color: var(--color-gray-xs);
    border: solid 1px var(--color-gray);
    pointer-events: none;
    cursor: not-allowed;
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance].used-up > output-i18n {
    font-size: 1.5rem;
    color: var(--color-gray);
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance] > output-i18n {
    font-size: 1.5rem;
    color: var(--color-green);
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance] > div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--u-4xs);
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance] > footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--u-4xs);
}

page-school > nav-panel > template-enhance.licenses > div[v-template-enhance] > footer > span {
    font-size: 1.5rem;
}

page-school > nav-panel > template-enhance.licenses > aside > button.on {
    display: flex;
}

page-school > nav-panel > template-enhance.licenses > aside > button {
    display: none;
}

page-school > nav-panel > template-enhance.licenses > aside > form-enhance > div[slot="nav"] {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: var(--u-3xs);
}

page-school > nav-panel > template-enhance.licenses > aside > form-enhance.add-license {
    display: none;
}

page-school > nav-panel > template-enhance.licenses > aside > form-enhance.add-license.on {
    display: flex;
}

page-school > nav-panel > template-enhance.licenses > aside > table-enhance.license-history > div[slot="before"] {
    display: none;
}
page-school > nav-panel > template-enhance.licenses > aside label.disabled {
    border-bottom: none;
}

page-school > nav-panel > template-enhance.licenses > aside label.disabled > input,
page-school > nav-panel > template-enhance.licenses > aside label.disabled > select-i18n {
    color: var(--color-gray);
    -webkit-text-fill-color: var(--color-gray);
    cursor: default;
}