.mud-tab-active {
    background-color: #A2C626;
    color: white !important;
}

.mud-tab:hover {
    background-color: #A2C626;
    color: white !important;
}

.mud-tab-active:hover {
    background-color: #A2C626 !important;
    color: white !important;
}

.greyCircle {
    height: 10px;
    width: 10px;
    display: block;
    border-radius: 50%;
    background-color: #b0b0b0;
    margin-left: 15px;
    margin-top: 5px;
}

.greenPulsingCircle {
    height: 10px;
    width: 10px;
    display: block;
    border-radius: 50%;
    background-color: #A2C626;
    animation: pulse 2000ms infinite;
    margin-left:15px;
    margin-top:5px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(134,194,50);
    }

    35% {
        box-shadow: 0 0 0 10px rgba(255, 26, 67, 0);
    }

    85% {
        box-shadow: 0 0 0 10px rgba(255, 206, 67, 0);
    }
}

.loaderBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Tahoma, sans-serif;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid;
    border-color: #86c232ff transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
} 

/* Language selector. The flag sits in a fixed-width slot so the language names line up even
   though the flags have different aspect ratios (5:3 for Germany, 2:1 for the United Kingdom).
   The ring is deliberately a neutral grey: it has to separate the flag from a dark app bar and
   from a light menu popup, and a flag whose edge is black or white bleeds into one of the two. */
.language-flag {
    display: inline-flex;
    justify-content: center;
    width: 28px;
}

    .language-flag img {
        display: block;
        height: 14px;
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(160, 160, 160, .55);
    }