.style-selector-wrapper .bg-primary,
.style-selector-wrapper .bg-brand-1 { background-color: #5db990; }
.style-selector-wrapper .bg-brand-2 { background-color: #31b7bc; }
.style-selector-wrapper .bg-brand-3 { background-color: #717ebd; }
.style-selector-wrapper .bg-brand-4 { background-color: #d4b5d4; }
.style-selector-wrapper .bg-brand-5 { background-color: #ea7b39; }
.style-selector-wrapper .bg-brand-6 { background-color: #f9ed6f; }
.style-selector-wrapper .bg-brand-7 { background-color: #00925b; }
.style-selector-wrapper .bg-brand-8 { background-color: #193f77; }
.style-selector-wrapper .bg-brand-9 { background-color: #0591b6; }
.style-selector-wrapper .bg-brand-10 { background-color: #eb680e; }
.style-selector-wrapper .bg-brand-11 { background-color: #f9b423; }
.style-selector-wrapper .bg-light { background-color: #ECF2F6; }
.style-selector-wrapper .bg-dark { background-color: #1D1D1B; }
.style-selector-wrapper .bg-primary-subtle,
.style-selector-wrapper .bg-brand-1-subtle { background-color: #c6e3d6; }
.style-selector-wrapper .bg-brand-2-subtle { background-color: #b7dfe3; }
.style-selector-wrapper .bg-brand-3-subtle { background-color: #cdd0e8; }
.style-selector-wrapper .bg-brand-4-subtle { background-color: #f0e4f0; }
.style-selector-wrapper .bg-brand-5-subtle { background-color: #f8d1b7; }
.style-selector-wrapper .bg-brand-6-subtle { background-color: #fdf8cc; }

.style-selector-wrapper fieldset .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio {
  position: relative;
  width: 36px;
  height: 36px;
  margin-block: 0;
  margin-inline-start: 0;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio input {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-inline-start: 0;
  opacity: 0;
  transition: opacity 0.1s;
  box-shadow: none !important;
  border: 6px solid rgb(0, 0, 0, 0.6) !important;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio label {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  color: transparent;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio label::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
  border: 1px solid #8e929c;
  transition: all 0.1s;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio label > span {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio label > span span.style-label {
  display: none;
  position: absolute;
  white-space: nowrap;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  font-size: 12px;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio label > span span.style-label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  height: 0;
  width: 0;
  border-color: transparent transparent #000 transparent;
  border-style: solid;
  border-width: 0 5px 7px 5px;
  transform: translateX(-50%);
}
/**/
/*HOVER STATUS*/
.style-selector-wrapper fieldset .form-radios .form-type--radio:hover label::before {
  width: 32px;
  height: 32px;
  border: 2px solid #232429;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio:hover label > span span.style-label {
  display: block;
  top: calc(100% + 6px);
}
/**/
/*CHECKED STATUS*/
.style-selector-wrapper fieldset .form-radios .form-type--radio input:checked {
  opacity: 1;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio input:checked + label::before {
  width: 32px;
  height: 32px;
  border: 2px solid #232429;
}
/**/
/*SPECIFIC NONE SELECTOR*/
.style-selector-wrapper fieldset .form-radios .form-type--radio input[value="_none"] + label::before {
  border: 1px solid red;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio input[value="_none"] + label::after {
  content: "";
  width: 34px;
  display: block;
  border-top: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transition: border 0.1s;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio:hover input[value="_none"] + label::before,
.style-selector-wrapper fieldset .form-radios .form-type--radio input[value="_none"]:checked + label::before {
  border: 2px solid red;
}
.style-selector-wrapper fieldset .form-radios .form-type--radio:hover input[value="_none"] + label::after,
.style-selector-wrapper fieldset .form-radios .form-type--radio input[value="_none"]:checked + label::after {
  border-top: 2px solid red;
}