:root {

    --grey : #64748B;
    --lite-grey : #CBD5E1;
    --lite-grey2 : #fafafa;
    --lite-grey3 : #F1F5F9;
    --black : #0F172A;
    --lite-red : rgba(255, 0, 0, .1);
    --lite-blue : rgba(0, 0, 255, .1);


    --text-primary : var(--black);

    --text-secondary : var(--grey);
    --text-secondary-hover : black;

    --bg-primary : var(--black);

    --border-primary: var(--lite-grey);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    gap: .25rem;
    padding: 1rem 0;
    width: 100%;
    /* background-color: rgb(250, 250, 250); */
    background-color: white;
    color: var(--grey);
    font-size: .8rem;
    /* box-shadow: 0 0 1rem rgba(150, 150, 150, .1); */

}
footer section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

footer .lower {
    text-decoration: underline;
}


.button {
    font-size: .875rem!important;
}

.content {
    padding: 1rem;
}

.content_nonav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    height: calc(100vh - 4.5rem);
}

.arrow-back {
    display: inline-block;
    margin-bottom: 2rem;
    width: 3rem;
}

.arrow-back img {
    width: 100%;
    height: 100%;
}


.blue {
    background-color: #4E3ABA;
    color: white;
}

.red {
    background-color: #DB4E66;
    color: white;
}

.blue-red {
    background: linear-gradient(90deg, #4E3ABA 0%, #DB4E66 100%);
    color: white;
}

.add {
    padding: .75rem 1rem;
    border: none;
    border-radius: .4rem;
    background-color: var(--bg-primary);
    color: white;
    cursor: pointer;
}

.manage {
    padding: .75rem 1rem;
    border: 1px solid var(--border-primary);
    border-radius: .4rem;
    background-color: white;
    color: var(--text-primary);
    cursor: pointer;
}

.alert_form {
    padding: .75rem 1rem;
    border: 1px solid green;
    border-radius: .4rem;
    background-color: white;
    color: green;
    cursor: pointer;
}

.calendar {
    padding: .75rem 1rem;
    border: 1px solid green;
    border-radius: .4rem;
    background-color: white;
    color: green;
    cursor: pointer;
}

.attendance_calendar {
    padding: .75rem 1rem;
    border: 1px solid blue;
    border-radius: .4rem;
    background-color: white;
    color: blue;
    cursor: pointer;
}

#popup_zone {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
}

/* body {
    background-color: blue!important;
}

@media screen and (min-width: 980px) {
    body {
        background-color: green!important;
    }
} */

@media screen and (max-width: 979px){
    #calendar {
        width: 100%!important;
    }

    .fc-toolbar-chunk {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .fc-button-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }
    
    .fc-today-button {
        margin: 0.5rem 0 0 0!important;
    }
    
    .fc-button {
        padding: .5rem!important;
        font-size: .8rem!important;
        border-radius: 0.3rem!important;
    }
    
    .fc-toolbar-title {
        text-align: center;
    }

    .fc-view-harness {
        height: 30rem!important;
    }

    .fc-col-header-cell-cushion,
    .fc-timegrid-slot-label-cushion {
        font-size: .8rem!important;
    }

    .manage {
        margin: 1rem 0;

    }
    
}


@media screen and (min-width: 980px){
    .content {
        padding: 1rem 2rem;
    }

    .button {
        font-size: .875rem!important;
    }
    .arrow-back {
        width: 1.5rem;
    }
    .footer {
        font-size: 1.1rem;
    }
    
}


@media screen and (min-width: 1200px){
    .content {
        padding: 2rem 10rem 1rem;
    }

}