.colorPickerWrapper {

}

.colorList {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: var(--settingsMarginT) var(--settingsMarginL);
}

.colorList li {
    margin: 4px 4px;
}

.colorWrapper {
    position: relative;
}

.colorWrapper:hover .colorDelete {
    display: flex;
}
.colorWrapper:hover .color:not(#colorPicker){
    transform: scale(1.1);
    transition: all 0.5s ease 0s;
}
.colorWrapper:hover .color::before{
    transform: scale(1.1);
    transition: all 0.5s ease 0s;
}

.color {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    transition: all 0.5s ease 0s;
    background-color: var(--colors-soft);
    border: 1px solid var(--colors-soft);
}
.colorActive {
    position: relative;
    transition: all 0.5s ease 0s;
}
.colorActive::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: var(--colors-brand) 2px solid;
    border-radius: 100%;
    transition: none;
}

.emptyColor {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    transition: all 0.5s ease 0s;
    background-color: blue;
    border: 1px solid var(--colors-outline);

    display: flex;
    justify-content: center;
    align-items: center;

    
    position: relative;
    vertical-align: middle;
    outline: transparent solid 2px;
    outline-offset: 2px;
    
    
    border-radius: 100%;
    height: 28px;
    min-width: 28px;
    
    background: none;
    border: 1px dashed rgb(213, 213, 213);
    /* padding: 1rem;  */
}
.emptyColor svg{
    height: 14px;
    width: 14px;
    transform: rotate(45deg);
    fill: var(--colors-muted);
}

.colorDelete {
    display: none;
    padding: 2px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: -4px;
    transform: translate(0%, -50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: var(--colors-panel);
    border-radius: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.colorDelete:hover {
    background: var(--colors-soft);
}

.rangeWrapper {
    position: relative;
    width: 100%;
    height: 44px;
    /* background: aqua; */

}
.range {
    position: absolute;
    width: calc(100% );
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 1rem; */
    gap: 2px;
    margin: var(--settingsMarginT) 0px var(--settingsMarginT) var(--settingsMarginL);
}

#grayScaleFilter {
    display: flex;
    gap: 4px; 
}
#grayScaleFilter svg {
    margin-left: 8px;
}

.checkboxList {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    
}

#color99 {
    display: flex;
    gap: 8px;
    padding: var(--settingsMarginT) var(--settingsMarginL);
    align-items: center;
    justify-content: space-between;
}
#color99 span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ContactList {
    margin-top: 1.5rem;
}
.navCardList {
    margin-bottom: 1.5rem;
}
.navCard {
        text-decoration: none;
        height: auto;
        padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        font-size: 0.875rem;
        letter-spacing: 0;
        line-height: 125%;
        transition: background-color .2s ease;
        display: flex;
        justify-content: space-between;
        border-radius: 0.5rem;
        color: var(--color-button-dark-text);
        margin-top: var(--settingsMarginT);
        background-color: var(--colors-canvas);
}
.navCard:hover {
        filter: var(--elevateFilter);
}

.navCard img {
        flex-basis: 4rem;
        flex-shrink: 0;
        height: 4rem;
        margin-left: 1.5rem;
        overflow: hidden;
        border-radius: 0.5rem;    
}
.navCardWrapper {
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}
.navCardTitle {
    color: var(--colors-text);
}
.navCardSubtitle {
    margin-top: 0.125rem;
    color: var(--colors-muted);

    
}