.color-filter-container {
    width: max-content;
    height: auto;
    position: absolute;
    z-index: 3;
    border: 3px solid none;
    border-radius: 10px;
    padding: 10px;
    display: none;
    background: rgba(255, 255, 255, 0.226);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    text-align: center;
    box-shadow: 0 4px 30px rgb(0, 0, 0);
}

.color-filter {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.color-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 15px;
    gap: 10px;
}

.color-column button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    margin: 5px 0;
    cursor: pointer;
}

/* Red */
.color-filter-red {
    background-color: #ffcccc;
}
.color-filter-red-1 {
    background-color: #ff9999;
}

.color-filter-red-2 {
    background-color: #ff6666;
}

.color-filter-red-3 {
    background-color: #ff4d4d;
}

.color-filter-red-4 {
    background-color: #ff0000; 
}

/* Blue */
.color-filter-blue-1 {
    background-color: #cce5ff; /* Lightest */
}

.color-filter-blue-2 {
    background-color: #99ccff;
}

.color-filter-blue-3 {
    background-color: #66b2ff;
}

.color-filter-blue-4 {
    background-color: #3399ff;
}

.color-filter-blue {
    background-color: #007bff; /* Darkest */
}

/* Purple Colors */
.color-filter-purple-1 {
    background-color: #e0bbff; /* Lightest Purple */
}

.color-filter-purple-2 {
    background-color: #d19cff;
}

.color-filter-purple-3 {
    background-color: #a64dff;
}

.color-filter-purple-4 {
    background-color: #8000ff;
}

.color-filter-purple-5 {
    background-color: #4b0082; /* Darkest Purple */
}

/* Green Colors */
.color-filter-green-1 {
    background-color: #ccffcc; /* Lightest Green */
}

.color-filter-green-2 {
    background-color: #99ff99;
}

.color-filter-green-3 {
    background-color: #66ff66;
}

.color-filter-green-4 {
    background-color: #33cc33;
}

.color-filter-green-5 {
    background-color: #006600; /* Darkest Green */
}

/* Yellow Colors */
.color-filter-yellow-1 {
    background-color: #ffffcc; /* Lightest Yellow */
}

.color-filter-yellow-2 {
    background-color: #ffff99;
}

.color-filter-yellow-3 {
    background-color: #ffff66;
}

.color-filter-yellow-4 {
    background-color: #ffff33;
}

.color-filter-yellow-5 {
    background-color: #ffcc00; /* Darkest Yellow */
}

/* Orange Colors */
.color-filter-orange-1 {
    background-color: #ffcc99; /* Lightest Orange */
}

.color-filter-orange-2 {
    background-color: #ff9966;
}

.color-filter-orange-3 {
    background-color: #ff7f33;
}

.color-filter-orange-4 {
    background-color: #ff6600;
}

.color-filter-orange-5 {
    background-color: #cc5200; /* Darkest Orange */
}

/* Brown Colors */
.color-filter-brown-1 {
    background-color: #e2c29d; /* Lightest Brown */
}

.color-filter-brown-2 {
    background-color: #d1a35d;
}

.color-filter-brown-3 {
    background-color: #9f7b4f;
}

.color-filter-brown-4 {
    background-color: #7a4f2f;
}

.color-filter-brown-5 {
    background-color: #4b2e1a; /* Darkest Brown */
}

/* Pink Colors */
.color-filter-pink-1 {
    background-color: #ffccff; /* Lightest Pink */
}

.color-filter-pink-2 {
    background-color: #ff99cc;
}

.color-filter-pink-3 {
    background-color: #ff66b3;
}

.color-filter-pink-4 {
    background-color: #ff3399;
}

.color-filter-pink-5 {
    background-color: #ff0066; /* Darkest Pink */
}

/* Cyan Colors */
.color-filter-cyan-1 {
    background-color: #e0ffff; /* Lightest Cyan */
}

.color-filter-cyan-2 {
    background-color: #b3ffff;
}

.color-filter-cyan-3 {
    background-color: #80ffff;
}

.color-filter-cyan-4 {
    background-color: #4dffff;
}

.color-filter-cyan-5 {
    background-color: #00ffff; /* Darkest Cyan */
}