.circle.inactive {
    opacity: 0.5;
}

.circle.highlight {
    box-shadow: 0px 0px 2px 2px rgba(255,255,255,1);
}

.user-1 {
    background-color: #0E3C8B;
}
    .user-1:hover {
        background-color: #1149aa;
    }

.user-2 {
    background-color: #5E110D;
}
    .user-2:hover {
        background-color: #7c1611;
    }

.user-3 {
    background-color: #10580E;
}
    .user-3:hover {
        background-color: #157513;
    }

.user-4 {
    background-color: #560E58;
}

    .user-4:hover {
        background-color: #731375;
    }

.user-5 {
    background-color: #8D5F11;
}

    .user-5:hover {
        background-color: #ab7315;
    }

.user-6 {
    background-color: #118D87;
}

    .user-6:hover {
        background-color: #15aba4;
    }

.user-7 {
    background-color: #8D1138;
}

    .user-7:hover {
        background-color: #ab1544;
    }

.user-8 {
    background-color: #118D4C;
}

    .user-8:hover {
        background-color: #15ab5c;
    }

.user-9 {
    background-color: #4C118D;
}

    .user-9:hover {
        background-color: #5c15ab;
    }

.user-10 {
    background-color: #8D3211;
}

    .user-10:hover {
        background-color: #ab3d15;
    }