/* character header */
.header {
    background-color: var(--elm);
    border: 3px solid var(--ol);
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;

    height: 5rem;

    position: sticky;
    margin-top: -.5rem;
    top: 0;
    z-index: 2;
}
/* end character header */

/* character name */
.spellbook_name {
    color: var(--text);
    font-size: 2.25rem;
    font-weight: 800;
    margin: auto 0;
    width: 12rem;
}
/* end character name */

/* character selector */
.character_container {
    max-width: calc((100% - max(40% - 13.5rem, 20.75rem)) - 13.5rem);
}

.spellbook_selector {
    font-family: unset;
    margin-right: -.1rem;
    margin-left: 1rem;
    padding-left: 1.25rem;

    background-color: transparent;
    border: none;
    max-width: calc(100% - 12.5rem);

    -moz-appearance: none;
    -webkit-appearance: none;
}
/* end character selector */

/* selector arrow */
.selector_arrow {
    margin: auto -2rem auto 1rem;
    width: 1rem;
    fill: var(--text);
}
/* end selector arrow */

/* class and level */
.mobile_level_slot_container {
    display: flex;
}

.class_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: .5rem;
}

.class_level_text {
    color: var(--text);
    font-size: var(--tlrg);
    height: fit-content;
    margin-left: .3rem;
    width: fit-content;
}

.level_text {
    margin-left: .3rem;
}
/* end class and level */

/* class selector */
.class_selector {
    font-family: unset;
    padding-left: 1.25rem;
    margin-left: 1rem;

    background-color: transparent;
    border: none;

    -moz-appearance: none;
    -webkit-appearance: none;
}
/* end class selector */

/* level input */
.level_input {
    display: flex;
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 3px solid var(--tog);
    height: 1.6rem;
    font-weight: normal;
    font-family: unset;
    text-align: center;
    margin-right: 1rem;
}
.short_level {
    width: .8rem;
}
.long_level {
    width: 1.6rem;
}
/* end level input */

/* removes arrows on numeric inputs */
/* https://stackoverflow.com/a/22559163/16393749 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type='number'] {
    -moz-appearance:textfield;
}
/* end arrows*/

/* slot table item */
.slot_info {
    font-size: var(--tmed);
    color: var(--text);
    width: fit-content;
    min-width: unset;
    height: fit-content;
}
/* end slot table item */

/* slot table */
.slot_table {
    margin: auto;
    margin-top: 0.25rem;

    border: 3px solid var(--ol);
    border-left-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1rem;
}

.slot_table_container {
    width: max(calc(40% - 13.5rem), 20.75rem);
}

/* table border rounding */
.slot_table td {
    border: 3px solid var(--ol);
    border-right: 0;
    border-bottom: 0;
}
.slot_table tbody:first-child tr:first-child td {
    border-top-width: 0;
}
.slot_table tbody:first-child tr:first-child td:first-child {
    border-top-left-radius: 1rem;
}
.slot_table tbody:first-child tr:first-child td:last-child {
    border-top-right-radius: 1rem;
}
.slot_table tbody:last-child tr:last-child td:first-child {
    border-bottom-left-radius: 1rem;
}
.slot_table tbody:last-child tr:last-child td:last-child {
    border-bottom-right-radius: 1rem;
}
/* end table border rounding */
/* end slot table */

/* small screen styles */
@media (min-height: 1280px) {
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;

        border-radius: 0 0 1.2rem 1.2rem;
        height: 14rem;
    }

    .spellbook_selector {
        margin-right: -1.1rem;
    }

    .character_container {
        max-width: 95%;
        width: 100%;
        justify-content: center;
    }

    .mobile_level_slot_container {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
    }

    .class_selector {
        margin-right: -1.35rem;
    }

    .level_input {
        margin-top: .2rem;
        margin-left: .8rem;
    }
    .short_level {
        width: 1.4rem;
    }
    .long_level {
        width: 2.4rem;
    }

    .slot_table_container {
        width: unset;
    }
}