input-new-child > main {
    display: none;
    grid-template-columns: 100%;
    grid-template-rows: min-content minmax(0, 1fr);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: var(--u-xl);
    gap: var(--u);
    z-index: 5000;
}

input-new-child > main.on {
    display: grid;
}

input-new-child > main > i {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--u);
    width: var(--u);
    font-size: 3rem;
    color: gray;
    z-index: 6;
}

input-new-child > main > main {
    position: relative;
}

input-new-child > main > main > section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: transform 0.1s, opacity 0.1s;
    opacity: 0;
    transform: translateX(-2rem);
    display: grid;
    grid-template-columns: 33.33% 1fr;
    grid-template-rows: max-content;
    gap: var(--u-2xs);
}

input-new-child > main > main > section.on {
    opacity: 1;
    z-index: 2;
    transform: none;
}

input-new-child > main > main > section > *:nth-child(1) {
    padding-right: var(--u-2xs);
    border-right: solid 1px #ddd;
}

input-new-child > main > main > section.parent > form-enhance.search > form {
    grid-template-columns: 100%;
}

input-new-child > main > main > section.parent > form-enhance.register > form {
    grid-template-columns: 1fr 1fr;
    height: auto;
}

input-new-child > main > main > section.child > form-enhance > form {
    grid-template-columns: 1fr 1fr;
    height: auto;
}

input-new-child > main > main > section.child > table-enhance.select-existing-child {
    display: none;
}

input-new-child > main > main > section.child > table-enhance.select-existing-child.on {
    display: grid;
}

input-new-child > main > main > section.child > table-enhance.select-existing-child > table > tbody > tr > td > i {
    background-color: var(--color-blue);
}