.wrap-HXzRntFl {
    display: inline-flex;
    position: relative
}

.wrap-HXzRntFl:before {
    border-radius: 4px;
    content: none;
    height: 100%;
    left: 0;
    outline: 2px none #2962ff;
    outline-offset: -2px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%
}

.wrap-HXzRntFl:focus-visible:before {
    content: "";
    outline-style: solid
}

.wrap-HXzRntFl .input-HXzRntFl {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media (any-hover:hover) {
    .wrap-HXzRntFl .input-HXzRntFl:hover:not(:checked)+.box-HXzRntFl .hoverDot-HXzRntFl {
        display: block
    }
}

.box-HXzRntFl {
    height: 16px;
    pointer-events: none;
    position: relative;
    width: 16px
}

.box-HXzRntFl.red-HXzRntFl,
html.theme-dark .box-HXzRntFl.red-HXzRntFl {
    color: #ff5252
}

@media (any-hover:hover) {
    .box-HXzRntFl.red-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.red-HXzRntFl:hover {
        color: #f23645
    }
}

.box-HXzRntFl.blue-HXzRntFl,
html.theme-dark .box-HXzRntFl.blue-HXzRntFl {
    color: #2979ff
}

@media (any-hover:hover) {
    .box-HXzRntFl.blue-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.blue-HXzRntFl:hover {
        color: #0c3299
    }
}

.box-HXzRntFl.green-HXzRntFl,
html.theme-dark .box-HXzRntFl.green-HXzRntFl {
    color: #81c784
}

@media (any-hover:hover) {
    .box-HXzRntFl.green-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.green-HXzRntFl:hover {
        color: #43a047
    }
}

.box-HXzRntFl.orange-HXzRntFl,
html.theme-dark .box-HXzRntFl.orange-HXzRntFl {
    color: #fbc02d
}

@media (any-hover:hover) {
    .box-HXzRntFl.orange-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.orange-HXzRntFl:hover {
        color: #f57f17
    }
}

.box-HXzRntFl.purple-HXzRntFl,
html.theme-dark .box-HXzRntFl.purple-HXzRntFl {
    color: #ba68c8
}

@media (any-hover:hover) {
    .box-HXzRntFl.purple-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.purple-HXzRntFl:hover {
        color: #7b1fa2
    }
}

.box-HXzRntFl.cyan-HXzRntFl,
html.theme-dark .box-HXzRntFl.cyan-HXzRntFl {
    color: #00e5ff
}

@media (any-hover:hover) {
    .box-HXzRntFl.cyan-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.cyan-HXzRntFl:hover {
        color: #00b8d4
    }
}

.box-HXzRntFl.pink-HXzRntFl,
html.theme-dark .box-HXzRntFl.pink-HXzRntFl {
    color: #f48fb1
}

@media (any-hover:hover) {
    .box-HXzRntFl.pink-HXzRntFl:hover,
    html.theme-dark .box-HXzRntFl.pink-HXzRntFl:hover {
        color: #ec407a
    }
}

.box-HXzRntFl.large-HXzRntFl {
    height: 24px;
    width: 24px
}

.pickerDot-HXzRntFl {
    background-color: currentColor;
    border-radius: 50%;
    height: 100%;
    width: 100%
}

.hoverDot-HXzRntFl {
    color: #fff;
    display: none;
    opacity: .5
}

html.theme-dark .hoverDot-HXzRntFl {
    color: #131722
}

.wrapper-xPNB6vOB {
    padding: 10px 10px 10px 6px
}

.wrapper-xPNB6vOB .selector-xPNB6vOB {
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 5px 0 #00000030;
    display: inline-flex;
    padding: 4px;
    position: relative
}

html.theme-dark .wrapper-xPNB6vOB .selector-xPNB6vOB {
    background-color: #50535e
}

.wrapper-xPNB6vOB .selector-xPNB6vOB .arrowLeft-xPNB6vOB {
    height: 12px;
    left: -12px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px
}

.wrapper-xPNB6vOB .selector-xPNB6vOB .arrowLeft-xPNB6vOB:after {
    background: #fff;
    box-shadow: 0 0 5px 0 #00000030;
    content: "";
    height: 12px;
    left: 9px;
    position: absolute;
    transform: rotate(45deg);
    width: 12px
}

html.theme-dark .wrapper-xPNB6vOB .selector-xPNB6vOB .arrowLeft-xPNB6vOB:after {
    background: #50535e
}

.colorSelectButton-xPNB6vOB {
    padding: 4px
}

.popup-xPNB6vOB {
    position: fixed;
    transform: translateY(-50%);
    z-index: 1000
}