.GrayBackground {
    background-color: #ebeef1;
    color: #1b2830;
}

.stickydiv {
    position: sticky;
    top: 0;
    background-color: inherit;
}
.headerbar {
    background-color: #3f60a3;
    color: #00ff7e;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}
    .headerbar a {
        color: inherit;
        text-decoration: none;
    }

    .headerbar2 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr auto;
        grid-gap: 1px;
    }
    .headerbar2 > div {
        padding: 0.4rem;
        border-bottom: 3px solid transparent;
    }
        .headerbar2 > div.selected {
            border-bottom: 3px solid #00ff7e;
        }
.maxwidth {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    background-color: white;
    margin-bottom: 1px;
    align-items: baseline;
}
.headingarea {
    background-color: white;
    padding: 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
    .headingarea input {
        padding: 5px 15px;
        border-radius: 3px;
        border: solid 1px #888;
    }
.headingrow {
    background-color: white;
    border-bottom: solid 5px #ebeef1;
}
.headingrow > div {
    font-weight: bold;
}
.row > div {
    padding: 0.4rem 0.6rem;
}
.expandarea {
    grid-column: span 4;
    border-bottom: solid 5px #ebeef1;
    background-color: white;
    color: #333;
    padding: 1rem;
}
.searchbox {
    border-radius: 3px;
    border: solid 1px #888;
    display: inline-flex;
    align-items: center;
    width: 25rem;
}
    .searchbox svg {
        margin-left: 10px;
        fill: #3f60a3;
    }
    .searchbox input {
        flex-grow: 1;
        background-color: inherit;
        border: 0;
        padding: 5px 15px;
    }
        .searchbox input:focus {
            outline: none;
        }
    .searchbox:focus-within {
        outline: 2px solid #3f60a3;
    }
.detailstable {
    display: inline-grid;
    grid-template-columns: 8rem 15rem;
    gap: 3px;
    margin-bottom: 1rem;
    align-items: center;
}
    .detailstable input[type=text], .detailstable input[type=date], .detailstable textarea {
        padding: 5px;
        font-family: inherit;
        font-size: inherit;
        border: solid 1px #888;
        border-radius: 3px;
    }
        .detailstable > input[type=text]:focus, .detailstable > input[type=date]:focus {
            outline: 2px solid #3f60a3;
        }
    .detailstable textarea {
        height: 6rem;
    }
.buttonbox > input {
    padding: 5px 10px;
    margin-right: 0.5rem;
}
.row {
    cursor:pointer;
}
.row:hover {
    background-color: #ffc;
}

.selectedrow {
    background-color: #333;
    color: white;
}
    .selectedrow:hover {
        background-color: #333;
    }
    .selectedrow svg {
        transform: scale(1,-1);
        fill: white;
    }
.inactive {
    text-decoration: line-through;
    color: orangered;
}
.footerrow {
    color: #333;
    background-color: white;
    margin: 5px 0;
    padding: 5px;
    font-style: italic;
    font-size: 0.8rem;
}
.studioselector {
    display: grid;
    grid-template-columns: auto 18px;
    cursor: pointer;
}
.studioselector svg {
    fill: white;
}
.studiolist {
    background-color: white;
    color: #333;
    padding: 2rem;
    display: grid;
    grid-template-columns: auto;
    gap: 1rem;
}
.whitepanel {
    background-color: white;
    color: #333;
    padding: 2rem;
}
    .whitepanel h1 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .whitepanel h2 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .whitepanel > .detailstable {
        display: inline-grid;
        grid-template-columns: 8rem 16rem;
        gap: 0.5rem;
        margin-bottom: 1rem;
        align-items: baseline;
    }
        .whitepanel > .detailstable > input[type=text], .whitepanel > .detailstable > input[type=date] {
            padding: 5px;
            border-radius: 3px;
            border: solid 1px #888;
        }
    .whitepanel > .buttonbox {
        margin-bottom: 1rem;
        display: grid;
        grid-template-columns: repeat(3, auto) 1fr;
        gap: 0.5rem;
    }
        .whitepanel > .buttonbox > input[type=button] {
            padding: 5px 15px;
            border-radius: 3px;
            border: solid 1px #888;
        }
input.error {
    border: 2px solid orangered !important;
}
.eform_studentlist {
    background-color: white;
}
    .eform_studentlist a {
        display: block;
        color: #333;
        padding: 0.5rem;
        text-decoration: none;
    }
        .eform_studentlist a.selected {
            color: white;
            background-color: #333;
        }
        .eform_studentlist a:hover {
            background-color: #CCF;
        }

.grid-students .item {
    cursor: pointer;
    padding: 0.25rem;
    margin-bottom: 3px;
}
.grid-students .selectedstudent {
    background-color: #3f60a3;
    color: #00ff7e;
}
.grid-groups > .grouprow {
    margin-bottom: 0.5rem;
    border: solid 1px #3f60a3;
}
    .grid-groups > .grouprow > .heading {
        display: grid;
        grid-template-columns: 1rem auto 1fr auto auto auto;
        background-color: #3f60a3;
        color: white;
    }
        .grid-groups > .grouprow > .heading > select {
            background-color: inherit;
            border-color: white;
            color: white;
        }
            .grid-groups > .grouprow > .heading > select > option {
                background-color: white !important;
                color: black;
            }
.grid-groups > .selectedgroup .heading {
    background-color: #00ff7e;
    color: black;
}
    .grid-groups > .selectedgroup .heading > select {
        color: black;
        border-color: darkgreen;
    }


    .grid-groups > .grouprow .studentline {
        display: grid;
        grid-template-columns: 1rem 1fr auto auto auto;
        align-items: center;
    }
    .grid-groups > .grouprow .studentline:hover {
        background: #EEE;
    }
    .grid-groups > .grouprow .selectbox {
        /* background-color: #333; */
    }

    .grid-groups > .grouprow.selectedgroup .selectbox {
        background-color: #00ff7e;
    }

.groupline {
    display: grid;
}

.killbox {
    cursor: pointer;
    color: #999;
    padding: 0.25rem;
}
    .killbox:hover {
        background-color:orangered;
        color: white;
    }
.movearrowdiv {
    padding: 0.25rem;
}
    .movearrowdiv > svg {
        fill: #CCC;
    }
    .movearrowdiv:hover {
        background-color: #999;
    }
    .movearrowdiv:hover svg {
        fill: white;
    }

.selectedgroup .heading .movearrowdiv > svg {
    fill: #333;
}