/* ==========================================================================
   Colors and Overlays
   ========================================================================== */

   .c-dk-grn {
    background-color: rgb(85, 97, 97);
    color: white;
}

.c-blue {
    background-color: rgb(34, 37, 82);
}

.c-lightblue {
    background-color: #3498db;
    border-color: #3498db !important;
}

.red-overlay {
    background-color: rgba(255, 0, 0, 0.3) !important;
}

.red-bgcol {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.blue-overlay {
    background-color: hsla(204, 70%, 53%, 0.3) !important;
}

.blue-bgcol {
    background-color: hsla(204, 70%, 53%, 1) !important;
}

.green-overlay {
    background-color: rgba(0, 255, 0, 0.3) !important;
}

.green-bgcol {
    background-color: #28a745 !important;
    color: #fff !important;
    border-color: #28a745 !important;
}

.purple-overlay {
    background-color: rgba(128, 0, 128, 0.3) !important;
}

.purple-bgcol {
    background-color: rgba(128, 0, 128, 1) !important;
}

.orange-overlay {
    background-color: rgba(255, 165, 0, 0.3) !important;
}

.orange-bgcol {
    background-color: rgba(255, 165, 0, 1) !important;
    color: #333 !important;
}

/* Button Hover Effects */
button.c-dk-grn:hover {
    background-color: rgb(105, 117, 117);
}

button.c-blue:hover {
    background-color: rgb(54, 57, 102);
}

button.c-lightblue:hover {
    background-color: #5dade2;
}

button.red-overlay:hover {
    background-color: rgba(255, 100, 100, 0.5) !important;
}

button.red-bgcol:hover {
    background-color: #e66771 !important;
    border-color: #e66771 !important;
}

button.blue-overlay:hover {
    background-color: hsla(204, 70%, 63%, 0.5) !important;
}

button.blue-bgcol:hover {
    background-color: hsla(204, 70%, 63%, 1) !important;
}

button.green-overlay:hover {
    background-color: rgba(100, 255, 100, 0.5) !important;
}

button.green-bgcol:hover {
    background-color: #34d058 !important;
    border-color: #34d058 !important;
}

button.purple-overlay:hover {
    background-color: rgba(180, 0, 180, 0.5) !important;
}

button.purple-bgcol:hover {
    background-color: rgba(180, 0, 180, 1) !important;
}

button.orange-overlay:hover {
    background-color: rgba(255, 185, 30, 0.5) !important;
}

button.orange-bgcol:hover {
    background-color: rgba(255, 185, 30, 1) !important;
    border-color: rgba(255, 185, 30, 1) !important;
}