:root {
    /*--mainColor: orange;
    --mainColorDark: orangered;
    --mainColorLight: #fed;
    --darkColor: #333;
    --lightColor: #ccc;
    --mud-palette-primary: var(--mainColor) !important;
    --mud-palette-primary-darken: var(--mainColorDark) !important;
    --mud-palette-primary-hover: var(--mainColorLight) !important;
    --mud-palette-action-default-hover: #FFF6EE !important;
    --mud-nav-link-text: var(--mainColorDark) !important;*/

    --mainColor: SeaGreen;
    --mainColorDark: MediumSeaGreen;
    --mainColorLight: #dfe;
    --darkColor: #333;
    --lightColor: #ccc;
    --mud-palette-primary: var(--mainColor) !important;
    --mud-palette-primary-darken: var(--mainColorDark) !important;
    --mud-palette-primary-hover: var(--mainColorLight) !important;
    --mud-palette-action-default-hover: #86C5A2 !important;
    --mud-nav-link-text: var(--darkColor) !important;
}

.appBar {
    background-color: var(--mainColor);    
}

.drawer {
    margin-top: -2em;
    background-color: var(--mainColorLight);    
}

.mud-icon-button:hover svg {
    color: var(--mainColor) !important; 
}

.triangle-topright {
    position: absolute;
    opacity: 0.5;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
    border-top: 64px solid var(--mainColor);
    border-left: 95px solid transparent;
}

.center { text-align: center }
.r { text-align: right }

.bold { 
    font-weight: bold;
}

.mud-table-container {
    height: calc(100vh - 330px);
}

.mud-table-cell {
    padding: 0;
}

.mud-nav-link-text {
    color: var(--mud-nav-link-text) !important;
}

.profilePhoto {
    width: 165px;
    height: 165px;
    object-fit: cover;
    object-position: top;
    border: 1px solid #999;
    border-radius: 50%;
    padding: 3px;
    display: block;
    margin: 1em 0;
}

.tm { background-color: #fed }
.pm { background-color: #fde }
.cm { background-color: #dfe }

.examTable { 
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #999;    
}

.examTable th {
    background-color: #def;    
}

    .examTable th, .examTable td {
        padding: 0px;
        border-bottom: 1px solid #ccc;
    }

    .examTable th, .examTable td span {
        padding: 5px;
    }

    .examTable input {
        padding: 5px !important;
        padding-right: 10px !important;
        border: 0px solid #999;
    }

        .examTable input:focus {
            background-color: #000;
            color: #fff;
            font-size: 2em;
            font-weight: bold;
        }

    .examTable .ie {
        background-color: yellow;
    }

    .attendance {
        display: flex;
        flex-wrap: wrap;
    }

    .attendance li {
        width: 100px;
        height: 100px;
        position: relative;
        margin-right: 0.85em;
        cursor: pointer;
        margin-bottom: 3em;
    }

        .attendance li img {
            border: 0;
            border-radius: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;            
            transform: scale(0.98);
        }

        .attendance li h2 {
            display: flex;
            place-items: center;
            place-content: center;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            background: var(--mainColorLight);
            color: var(--mainColor);
            width: 100%;
            height: 100%;
            transform: scale(1);
            transition: all 500ms ease-in-out;
            font-size: 2em;
            font-weight: normal;
        }

        .attendance li p {
            font-size: 0.85em;
        }

        .attendance li:hover > h2 {
            background: var(--mainColor);
            transform: scale(1.3);
            opacity: 0;
            /*animation: animate 1s ease-in-out;*/
        }

        .attendance .hide {
            display: none;
        }


        /*@keyframes animate {
            0% {
                background: red;
                opacity: 1;
                transform: scale(1);
            }

            50% {
                background: blue;
            }

            100% {
                background: green;
                opacity: 0;
                transform: scale(1.25);
                display: none;
            }
        }*/


        @media screen and (max-width: 800px) {
            .header {
                font-size: 1.2em;
            }
        }