.role-CA, .btn-colored-role-CA {
    background-color: hsl(30, 100%, 50%);
    color: white;
}

.btn-colored-role-CA:hover {
    background-color: hsl(30, 100%, 45%);
}

.btn-colored-role-CA:active {
    background-color: hsl(30, 100%, 40%);
}

.role-Bureau, .btn-colored-role-Bureau {
    background-color: hsl(0, 100%, 50%);
    color: white;
}

.btn-colored-role-Bureau:hover {
    background-color: hsl(0, 100%, 40%);
}

.btn-colored-role-Bureau:active {
    background-color: hsl(0, 100%, 30%);
}

.role-Salarie, .btn-colored-role-Salarie {
    background-color: hsl(190, 100%, 60%);
    color: black;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

.btn-colored-role-Salarie:hover {
    background-color: hsl(190, 100%, 45%);
}

.btn-colored-role-Salarie:active {
    background-color: hsl(190, 100%, 40%);
}

.role-Prof, .btn-colored-role-Prof {
    background-color: hsl(210, 100%, 60%);
    color: white;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

.btn-colored-role-Prof:hover {
    background-color: hsl(210, 100%, 45%);
}

.btn-colored-role-Prof:active {
    background-color: hsl(210, 100%, 40%);
}

.role-Eleve, .btn-colored-role-Eleve {
    background-color: hsl(120, 100%, 40%);
    color: white;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

.btn-colored-role-Eleve:hover {
    background-color: hsl(120, 100%, 35%);
}

.btn-colored-role-Eleve:active {
    background-color: hsl(120, 100%, 30%);
}

.role-Parent, .btn-colored-role-Parent {
    background-color: hsl(120, 0%, 80%);
    color: white;
    border-style: solid;
    border-width: 2px;
    border-color: white;
}

.btn-colored-role-Parent:hover {
    background-color: hsl(120, 0%, 60%);
}

.btn-colored-role-Parent:active {
    background-color: hsl(120, 0%, 30%);
}

/* ====  INSTRUMENTS  ==== */

.role-white, .btn-colored-role-white {
    background-color: hsl(0, 0%, 100%);
    color: black;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

.btn-colored-role-white:hover {
    background-color: hsl(0, 0%, 90%);
}

.btn-colored-role-white:active {
    background-color: hsl(0, 0%, 80%);
}