



.form{
    margin: 0 auto;
    max-width: 45rem;
    border: var(--border);
    border-radius: 1rem;
    padding: 2rem;
    
    background: var(--background-color);
    box-shadow: 0.75rem 0.75rem 0 -0.2rem var(--accent-colour);
}

.form__container{
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}

.form__time{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-bottom: var(--border);
}

.form__weekday{
    text-transform: capitalize;
}


.form__recurrent{
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    border-bottom: var(--border-thin);
}

.form__recurrent--inline{
    display: flex;
    flex-direction: row;
    align-items: center;
    

}


.form__group{
    display: flex;
    flex-direction: row;
    align-items: top;
    margin-bottom: 1.5rem;

}

.form__group-vertical{
    display: flex;
    flex-direction: column;
    align-items: top;
    margin-bottom: 1.5rem;
}


.form__group--radio{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.5rem;
}


.addToGroup__title{
    padding-left: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.removeFromGroup__title{
    font-size: 1.2rem;
    font-weight: 600;
}

.form-container--addToGroup{
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: row;
}


.assignedNames__list{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
}

.unassignedNames__andButton{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form__label{
    margin-top: 0.5rem;
    min-width : 15rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.form__label--limited{
    margin-top: 0.5rem;
    min-width : 15rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    max-width: 15rem;
}

.field-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.field-subcontainer{
    display:flex;
    flex-direction: row;
    align-items: center;

}

.form__field{
    outline: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
    margin-right: 1rem;
    padding: 0.5rem 0.25rem;
    background: var(--background-color-darker);
    border: 1px solid gray;
    
}



.form__field:focus{
    background: var(--background-color-brighter);
    border: 1px solid var(--accent-colour);
}

.button-container{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    align-content: center;
    margin-top: 3rem;
    
}

.button-container-links{
    display: flex;
    flex-direction: column;
    margin:0;
    
    
    
}

.button__alternativeLink{
    margin-top: 2rem;
}

.button__alternativeLink:hover{
    color: var(--accent-colour);
}

.button--form{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 0.75rem 3rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--background-color-darker);
    border: 1px solid gray;
}

.button--form:hover{
    background: var(--accent-colour);
    color: var(--text-light);

}


.button--form-cancel{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:  auto;
    padding: 0.75rem 3rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--background-color-darker);
    border: 1px solid gray;
    
}

.button--form-cancel:hover{
    background: var(--accent-colour-2);
    color: var(--text-light);
}


.delete__container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 0;
}






.form__small{
    font-size: 0.83rem;
    color: var(--text-muted);
}

.form__link{
    text-decoration: none;
    color:var(--accent-colour)
}
.form__link:hover{
    color: #d05656;

}

.form__error{
    margin-top: 0.5rem;
}

.form__error,
.form__flash{
    display: block;
    padding: 0.5rem;
    color: var(--text)
}

.form__error,
.form__flash--danger{
    background: var(--accent-colour);
}

.form__flash{
    margin: 0.5rem;
}

.form__flash--success{
    background: var(--accent-colour-2);
}


.color-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
}

.color__box{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem;
    
}

.color__box:nth-of-type(1){
    background: var(--fcolor-1)
}
.color__box:nth-of-type(2){
    background: var(--fcolor-2)
}
.color__box:nth-of-type(3){
    background: var(--fcolor-3)
}
.color__box:nth-of-type(4){
    background: var(--fcolor-4)
}
.color__box:nth-of-type(5){
    background: var(--fcolor-5)
}
.color__box:nth-of-type(6){
    background: var(--fcolor-6)
}
.color__box:nth-of-type(7){
    background: var(--fcolor-7)
}
.color__box:nth-of-type(8){
    background: var(--fcolor-8)
}
.color__box:nth-of-type(9){
    background: var(--fcolor-9)
}
.color__box:nth-of-type(10){
    background: var(--fcolor-10)
}

.radio__fields ul{
    list-style-type: none;
}

.studentsPresence-container{
    display: flex;
    flex-direction: column;
    
    align-items:flex-start

}

.studentsPresence__header{
    margin-bottom: 1em;
    font-weight: 600;
}




.studentsPresence__items ul {
    list-style-type: none;
}

.studentsPresence__items li{
margin-bottom: 0.25em;
}



.delete__group{
    display: flex;
    flex-direction: column;

}

.delete__row{
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;

}

.delete__left{
    width:50%;
    font-weight: 600;
}

.delete__right{
    width: 50%;
}


.homework__header{
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.homework__header-link{
    text-decoration: none;
    color: var(--accent-colour);
}



.questions__row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.red_notice{
    display: flex;
    flex-direction: column;
    margin: 2rem;
    padding: 1rem;
    width: 75%;
    background: var(--accent-colour);
    color: var(--text-light);
    justify-self: left;
    border: solid 1px gray;
    border-radius: 0.5rem;
    font-size: 0.75rem;
}

.link{
    text-decoration: none;
    color: var(--accent-colour);
}

.link:hover{
    color: var(--text-dark);
    transform: translateY(1px);
    text-decoration: none;
}


.questions{
    display: flex;
    flex-direction: column;
    
}

.note__text{
    font-weight:600;
    color: var(--accent-colour);
    text-align: left;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.note__color--green{
    color: var(--accent-colour-2);
}
.note__color{
    color: var(--accent-colour);
}