.Settings {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto ;
    align-items: center; 
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
}


#colorsDiv {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 80%; /* Take up most of the modal height */

    height: auto ; 
    background-color:whitesmoke;

    align-items: center; 
    flex-wrap: wrap;

}

.grpColorDivs {
    display: flex;
    justify-content: space-between; /* Spread the divs evenly */
    gap: 10px;
    margin: 20px;
}

#blueDiv, #greenDiv, #violetDiv,
#maroonDiv, #redDiv, #tomatoDiv {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid;
    border-color: black;
    transition: transform 0.3s ease;
}

/* Color divs */
#blueDiv { background-color: rgb(0, 64, 128); }
#greenDiv { background-color: rgb(0, 64, 64); }
#violetDiv { background-color: rgb(64,0,128); }
#maroonDiv { background-color: rgb(128, 0, 64); }
#redDiv { background-color: rgb(179,0,0); }
#tomatoDiv { background-color: rgb(255, 99, 71); }

/* Hover effect for color divs */
#blueDiv:hover, #greenDiv:hover, #violetDiv:hover,
#maroonDiv:hover, #redDiv:hover, #tomatoDiv:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Button container styling */
#btnDiv {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

}
#saveBtn, #cancelBtn {
    height: 30px;
    width: 140px;
    margin: 10px;
    background-color: var(--main-bg-color);
    color: white;
    border: none;
    cursor: pointer;
    text-align: center;
}