*{
    --light-red: #ffbfbf;
    --light-orange: #ffd3ac;
    --dark-orange: #ffa500;
    --light-yellow: #ffea99;
    --dark-yellow: #e0bc00;
    --light-green: #ccffcc;
    --light-blue: #b5c7eb;
    --light-purple: #d3d3ff;
    --dark-purple: #7f00ff;
    --dark-pink: #ff8da1;
}

.grey-activity {
    background-color: lightgrey;
    border-left: 5px darkgray solid;
}

.red-activity {
    background-color: var(--light-red);
    border-left: 5px red solid;
}

.orange-activity {
    background-color: var(--light-orange);
    border-left: 5px var(--dark-orange) solid;
}

.yellow-activity {
    background-color: var(--light-yellow);
    border-left: 5px var(--dark-yellow) solid;
}

.green-activity {
    background-color: var(--light-green);
    border-left: 5px green solid;
}

.blue-activity {
    background-color: var(--light-blue);
    border-left: 5px blue solid;
}

.purple-activity {
    background-color: var(--light-purple);
    border-left: 5px var(--dark-purple) solid;
}

.pink-activity {
    background-color: pink;
    border-left: 5px var(--dark-pink) solid;
}

#btn-group-container {
    display: flex;
    text-align: center;

}

#btn-group {

    & button {
        padding: 10px 24px;
        float: left;
        border-radius: 20% 20% 0% 0%;
        height: 40px;
        width: 10%;
    }

    & button:enabled {
        cursor: pointer;
    }

    & button:hover:enabled {
        margin-top: 10px;
        height: 30px !important;
        transition: all .5s ease;
    }

    & #grey:hover:enabled {
        background-color: darkgrey !important;
    }

    & #red:hover:enabled {
        background-color: red !important;
    }

    & #btn-group #orange:hover:enabled {
        background-color: var(--dark-orange);
    }

    & #yellow:hover:enabled {
        background-color: var(--dark-yellow) !important;
    }

    & #green:hover:enabled {
        background-color: green !important;
    }

    & #blue:hover:enabled {
        background-color: blue !important;
        color: white;
    }

    & #purple:hover:enabled {
        background-color: var(--dark-purple) !important;
    }

    & #pink:hover:enabled {
        background-color: var(--dark-pink) !important;
    }
}


.selected {
    margin-top: 10px;
    height: 30px !important;
}

.grey {
    background-color: lightgrey;
    border: 2px solid darkgrey;
}
.selected.grey {
    background-color: darkgrey;
    border: 2px solid darkgrey;
}

.red {
    background-color: var(--light-red);
    border: 2px solid red;
}
.selected.red {
    background-color: red;
    border: 2px solid red;
}

.orange {
    background-color: var(--light-orange);
    border: 2px solid var(--dark-orange);
}
.selected.orange {
    background-color: var(--dark-orange);
    border: 2px solid var(--dark-orange);
}


.yellow {
    background-color: var(--light-yellow);
    border: 2px solid var(--light-yellow);
}
.selected.yellow {
    background-color: var(--light-yellow);
    border: 2px solid var(--light-yellow);
}

.green {
    background-color: var(--light-green);
    border: 2px solid green;
}
.selected.green {
    background-color: green;
    border: 2px solid green;
}

.blue {
    background-color: var(--light-blue);
    border: 2px solid blue;
}
.selected.blue {
    background-color: blue;
    border: 2px solid blue;
}

.purple {
    background-color: var(--light-purple);
    border: 2px solid var(--dark-purple);
}
.selected.purple {
    background-color: var(--dark-purple);
    border: 2px solid var(--dark-purple);
}

.pink {
    background-color: pink;
    border: 2px solid var(--dark-pink);
}
.selected.pink {
    background-color: var(--dark-pink);
    border: 2px solid var(--dark-pink);
}