/* ../shared/dist/style.css */
._container_xtpee_1 {
  width: 100%;
  flex-shrink: 0;
  position: relative;
  border-radius: 8px;
  background: transparent;
}
@media (min-width: 768px) {
  ._container_xtpee_1 {
    width: 166px;
  }
}
._container_xtpee_1:hover ._image_xtpee_15 {
  box-shadow: 0 16px 40px #9292a626;
  transform: scale(1.025);
}
._image_xtpee_15 {
  height: 200px;
  border-radius: 8px;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 32px #9292a61a;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  transition: all .1s linear;
}
._name_xtpee_36 {
  font-stretch: normal;
  letter-spacing: normal;
  color: #525266;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
._label_toi01_1 {
  color: var(--Content-grey-light, #9C9EA4);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.tooltip {
  z-index: 50;
  cursor: default;
  border-radius: 8px;
  padding: 5px 10px;
  background-color: #f8f8f8;
  font-size: .875rem;
  line-height: 1.25rem;
  color: #000;
  border: 1px solid #2acbf6;
}
.combobox {
  display: block;
  width: 100%;
  border-radius: .5rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(215 219 227 / var(--tw-border-opacity, 1));
  padding: 1rem 1.5rem .625rem;
  font-size: .875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(73 75 81 / var(--tw-text-opacity, 1));
}
.combobox::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(73 75 81 / var(--tw-placeholder-opacity, 1));
}
.combobox::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(73 75 81 / var(--tw-placeholder-opacity, 1));
}
.popover {
  position: relative;
  z-index: 50;
  display: flex;
  max-height: min(var(--popover-available-height, 300px), 300px);
  flex-direction: column;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: .5rem;
  border-width: 1px;
  border-style: solid;
  border-color: #dae2e7;
  background-color: #fff;
  color: #171a1c;
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.combobox-item {
  display: flex;
  cursor: default;
  scroll-margin: .5rem;
  align-items: center;
  gap: .5rem;
  border-radius: .25rem;
  padding: .5rem;
  outline: none !important;
}
.combobox-item:hover {
  background-color: #99d6ff66;
}
.combobox-item[data-active-item] {
  background-color: #007acc;
  outline: none;
  color: #fff;
}
.combobox-item:active,
.combobox-item[data-active] {
  padding-top: 9px;
  padding-bottom: 7px;
}
.disclosure {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: .25rem;
  height: 2rem;
  width: 2rem;
  border-radius: .125rem;
  padding: 0;
}
.backdrop {
  background-color: #171a1c66;
  opacity: 0;
  transition-property: opacity, backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.dialog {
  position: fixed;
  box-shadow: 0 4px 4px #d9e3eb40;
  border-radius: 16px;
  overflow: auto;
  inset: .75rem;
  z-index: 50;
  margin: auto;
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  flex-direction: column;
  gap: 1rem;
  background-color: #fff;
  color: #171a1c;
  transform-origin: center;
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
  transform: scale(.95);
  max-height: 80vh;
  max-width: min(1180px, calc(100vw - 1.5rem));
  box-sizing: border-box;
}
.backdrop[data-enter] {
  opacity: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dialog[data-enter] {
  opacity: 1;
  transform: scale(1);
}
._loadable_1j4k1_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
._loadable_1j4k1_1._loadable-wrap_1j4k1_7 {
  flex-wrap: wrap;
}
._loadable_1j4k1_1._loadable-keep-alive_1j4k1_10.loading > *:not(.loadable-indicator) {
  display: none;
}
._container_dhl4o_1 {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
._container_dhl4o_1 input {
  position: absolute;
  opacity: 0;
}
._container_dhl4o_1 ._checkbox_dhl4o_15 {
  display: inline-block;
  width: 24px;
  position: relative;
  height: 24px;
  border-radius: .5rem;
  border-width: 2px;
  background-color: var(--Gray-BG,#fafafa);
}
._container_dhl4o_1 ._checkbox_dhl4o_15._highlight_dhl4o_23 {
  background-color: var(--Green-20,#e8f2e9);
}
._container_dhl4o_1 ._checkbox_dhl4o_15._success_dhl4o_27:after {
  display: block;
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
._container_dhl4o_1 ._checkbox_dhl4o_15._success_dhl4o_27 svg {
  display: none;
}
._container_dhl4o_1 ._checkbox_dhl4o_15._successOnError_dhl4o_35 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
  background-color: var(--Green-20,#e8f2e9);
}
._container_dhl4o_1 ._checkbox_dhl4o_15._error_dhl4o_39:after {
  display: block;
  background-color: var(--Red-20,#ff776f);
}
._container_dhl4o_1 ._checkbox_dhl4o_15._error_dhl4o_39 svg {
  display: none;
}
._container_dhl4o_1 ._checkbox_dhl4o_15:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #999;
  border-radius: 30%;
  display: none;
}
._container_dhl4o_1:hover input:not([readonly]):not(:checked) ~ ._checkbox_dhl4o_15:after {
  display: block;
}
._container_dhl4o_1:hover input:checked ~ ._checkbox_dhl4o_15:after {
  display: none !important;
}
.info-alert-bg {
  background-color: #3a7cff1f;
}
._container_lch8e_1 {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: flex;
  min-height: 80px;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  border-radius: .5rem;
  background-color: var(--Gray-BG,#fafafa);
  padding: .25rem .5rem;
}
._variant_lch8e_6 {
  margin-bottom: .125rem;
  display: flex;
  height: 32px;
  cursor: grabbing;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  text-wrap: nowrap;
  border-radius: .5rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(231 232 233 / var(--tw-border-opacity, 1));
  padding: .25rem .5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: normal;
  line-height: 150%;
  --tw-text-opacity: 1;
  color: rgb(57 57 77 / var(--tw-text-opacity, 1));
}
._variant_lch8e_6:hover {
  --tw-border-opacity: 1;
  border-color: rgb(42 203 246 / var(--tw-border-opacity, 1));
}
._container_ipnk2_1 {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
._container_ipnk2_1 input {
  position: absolute;
  opacity: 0;
}
._container_ipnk2_1 ._radio_ipnk2_16 {
  display: inline-block;
  width: 24px;
  position: relative;
  height: 24px;
  border-radius: 50%;
  border-width: 2px;
  background-color: var(--Gray-BG,#fafafa);
}
._container_ipnk2_1 ._radio_ipnk2_16._highlight_ipnk2_25 {
  background-color: var(--Green-20,#e8f2e9);
}
._container_ipnk2_1 ._radio_ipnk2_16._success_ipnk2_29:after {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
._container_ipnk2_1 ._radio_ipnk2_16._successOnError_ipnk2_33 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
  background-color: var(--Green-20,#e8f2e9);
}
._container_ipnk2_1 ._radio_ipnk2_16._error_ipnk2_37:after {
  background-color: var(--Red-20,#ff776f);
}
._container_ipnk2_1 ._radio_ipnk2_16:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #999;
  border-radius: 50%;
  display: none;
}
._container_ipnk2_1:hover input:not([readonly]) ~ ._radio_ipnk2_16:after,
._container_ipnk2_1 input:checked ~ ._radio_ipnk2_16:after {
  display: block;
}
.wordlist-container .volume-button,
.wordlist-container .seek-area {
  display: none;
}
.wordlist-container .player-root {
  width: auto !important;
  background-color: transparent !important;
}
.yarl__fullsize {
  height: 100%;
  width: 100%;
}
.yarl__relative {
  position: relative;
}
.yarl__portal {
  inset: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  transition: opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);
  z-index: var(--yarl__portal_zindex,9999);
}
.yarl__portal_open {
  opacity: 1;
}
.yarl__container {
  background-color: var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));
  inset: 0;
  outline: none;
  overflow: hidden;
  overscroll-behavior: var(--yarl__controller_overscroll_behavior,contain);
  position: absolute;
  touch-action: var(--yarl__controller_touch_action,none);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.yarl__carousel {
  align-content: center;
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  height: 100%;
  justify-content: center;
  opacity: var(--yarl__pull_opacity,1);
  transform: translate(var(--yarl__swipe_offset,0), var(--yarl__pull_offset,0));
  width: calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%));
}
.yarl__carousel_with_slides {
  -moz-column-gap: calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);
  column-gap: calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);
}
.yarl__flex_center {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.yarl__slide {
  flex: 1;
  overflow: hidden;
  padding: calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);
  position: relative;
}
[dir=rtl] .yarl__slide {
  --yarl__direction:-1;
}
.yarl__slide_image {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  touch-action: var(--yarl__controller_touch_action,none);
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.yarl__slide_image_cover {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
.yarl__slide_image_loading {
  opacity: 0;
}
@media screen and (min-width:800px) {
  .yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
  }
}
.yarl__slide_placeholder {
  left: 50%;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%) translateY(-50%);
}
.yarl__slide_loading {
  animation: yarl__delayed_fadein 1s linear;
  color: var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));
}
.yarl__slide_loading line {
  animation: yarl__stroke_opacity 1s linear infinite;
}
.yarl__slide_loading line:first-of-type {
  animation-delay: -1.875s;
}
.yarl__slide_loading line:nth-of-type(2) {
  animation-delay: -1.75s;
}
.yarl__slide_loading line:nth-of-type(3) {
  animation-delay: -1.625s;
}
.yarl__slide_loading line:nth-of-type(4) {
  animation-delay: -1.5s;
}
.yarl__slide_loading line:nth-of-type(5) {
  animation-delay: -1.375s;
}
.yarl__slide_loading line:nth-of-type(6) {
  animation-delay: -1.25s;
}
.yarl__slide_loading line:nth-of-type(7) {
  animation-delay: -1.125s;
}
.yarl__slide_loading line:nth-of-type(8) {
  animation-delay: -1s;
}
.yarl__slide_error {
  color: var(--yarl__slide_icon_error_color,red);
  height: var(--yarl__slide_icon_error_size,48px);
  width: var(--yarl__slide_icon_error_size,48px);
}
@media (prefers-reduced-motion) {
  .yarl__portal,
  .yarl__slide {
    transition: unset;
  }
  .yarl__slide_loading,
  .yarl__slide_loading line {
    animation: unset;
  }
}
.yarl__toolbar {
  display: flex;
  justify-content: flex-end;
  inset: 0 0 auto auto;
  padding: var(--yarl__toolbar_padding,8px);
  position: absolute;
}
[dir=rtl] .yarl__toolbar {
  inset: 0 auto auto 0;
}
.yarl__icon {
  height: var(--yarl__icon_size,32px);
  width: var(--yarl__icon_size,32px);
}
.yarl__button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--yarl__button_background_color,transparent);
  border: var(--yarl__button_border,0);
  color: var(--yarl__color_button,hsla(0,0%,100%,.8));
  cursor: pointer;
  filter: var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));
  line-height: 0;
  margin: var(--yarl__button_margin,0);
  outline: none;
  padding: var(--yarl__button_padding,8px);
  -webkit-tap-highlight-color: transparent;
}
.yarl__button:focus {
  color: var(--yarl__color_button_active,#fff);
}
.yarl__button:focus:not(:focus-visible) {
  color: var(--yarl__color_button,hsla(0,0%,100%,.8));
}
.yarl__button:focus-visible {
  color: var(--yarl__color_button_active,#fff);
}
@media (hover:hover) {
  .yarl__button:focus-visible:hover,
  .yarl__button:focus:hover,
  .yarl__button:hover {
    color: var(--yarl__color_button_active,#fff);
  }
}
.yarl__button:disabled {
  color: var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));
  cursor: default;
}
.yarl__navigation_next,
.yarl__navigation_prev {
  padding: var(--yarl__navigation_button_padding,24px 16px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.yarl__navigation_prev {
  left: 0;
}
[dir=rtl] .yarl__navigation_prev {
  left: unset;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}
.yarl__navigation_next {
  right: 0;
}
[dir=rtl] .yarl__navigation_next {
  left: 0;
  right: unset;
  transform: translateY(-50%) rotate(180deg);
}
.yarl__no_scroll {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
@keyframes yarl__delayed_fadein {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes yarl__stroke_opacity {
  0% {
    stroke-opacity: 1;
  }
  to {
    stroke-opacity: .125;
  }
}
.yarl__slide_captions_container {
  background: var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));
  left: var(--yarl__slide_captions_container_left,0);
  padding: var(--yarl__slide_captions_container_padding,16px);
  position: absolute;
  right: var(--yarl__slide_captions_container_right,0);
  -webkit-transform: translateZ(0);
}
.yarl__slide_title {
  color: var(--yarl__slide_title_color,#fff);
  font-size: var(--yarl__slide_title_font_size,125%);
  font-weight: var(--yarl__slide_title_font_weight,bolder);
  max-width: calc(100% - var(--yarl__toolbar_width, 0px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yarl__slide_title_container {
  top: var(--yarl__slide_title_container_top,0);
}
.yarl__slide_description {
  display: -webkit-box;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--yarl__slide_description_max_lines,3);
  color: var(--yarl__slide_description_color,#fff);
  text-align: var(--yarl__slide_description_text_align,start);
}
.yarl__slide_description_container {
  bottom: var(--yarl__slide_description_container_bottom,0);
}
._container_1kdhv_1 {
  display: flex;
  padding: 16px 12px;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid var(--Storcke, #E7E8E9);
}
._container_1kdhv_1 > * {
  max-width: 100%;
}
@media (min-width: 768px) {
  ._container_1kdhv_1 {
    padding: 32px 20px;
    gap: 24px;
  }
}
._header_1kdhv_30 {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  border-bottom: 1px solid var(--Storcke, #E7E8E9);
  padding-bottom: 24px;
}
._order_1kdhv_39 {
  flex-grow: 0;
  border-radius: 8px;
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--Blue-100, rgba(58, 124, 255, .12));
  color: var(--Blue-dark, #3A7CFF);
  font-size: 16px;
  width: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
._row_30zbf_1 {
  position: relative;
}
._done_30zbf_5:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  min-width: 16px;
  height: 2px;
  background-color: #15d676;
  margin: auto 0;
}
._linked_30zbf_17:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  min-width: 16px;
  height: 2px;
  background-color: #3a7cff;
  margin: auto 0;
}
.lesson-print {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px;
  color: #1a1a1a;
  background: #fff;
}
.lesson-print__exercise {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid #e6e9f0;
}
.lesson-print__title {
  font-weight: 600;
  margin-bottom: 8px;
}
.lesson-print__section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 8px;
  -moz-column-break-after: avoid;
  break-after: avoid;
  page-break-after: avoid;
}
.lesson-print__hint {
  color: #6b7280;
  font-size: 12px;
}
.lesson-print__blank {
  display: inline-block;
  min-width: 140px;
  border-bottom: 1px solid #1a1a1a;
  vertical-align: baseline;
}
.lesson-print__blank--wide {
  display: block;
  min-height: 24px;
  margin-top: 6px;
}
.lesson-print__box {
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  min-height: 96px;
  margin-top: 8px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.lesson-print__answer {
  font-weight: 600;
  text-decoration: underline;
}
.lesson-print table {
  border-collapse: collapse;
  width: 100%;
}
.lesson-print td,
.lesson-print th {
  border: 1px solid #1a1a1a;
  padding: 6px 8px;
  min-width: 48px;
  height: 28px;
}
@media print {
  .lesson-print-hide {
    display: none !important;
  }
  .lesson-print-body header,
  .lesson-print-body nav,
  .lesson-print-body footer {
    display: none !important;
  }
  .lesson-print-body {
    background: #fff;
  }
  .lesson-print-body .lesson-print {
    padding: 0;
    max-width: none;
  }
}
.min-app-h {
  min-height: calc(-144px + 100vh);
}
.special_shadow {
  --tw-shadow: 0px 4px 4px rgba(217,227,235,.25);
  --tw-shadow-colored: 0px 4px 4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
body.overlay-mode .sticky-sidebar {
  z-index: 10;
}
body.overlay-mode .on-overlay-hidden {
  display: none;
}
:root {
  --success-color: rgba(220 252 231);
  --keyboard-zindex: 2147483100;
}
.blinking {
  border: 2px solid #e7e8e9;
  animation-name: blinking;
  animation-duration: .4s;
  animation-iteration-count: 3;
}
@keyframes blinking {
  50% {
    border-color: #f87171;
  }
}
.yarl__portal button {
  background: transparent;
}
.yarl__counter {
  bottom: var(--yarl__counter_bottom,unset);
  color: var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));
  filter: var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));
  left: var(--yarl__counter_left,0);
  line-height: var(--yarl__counter_line_height,var(--yarl__icon_size,32px));
  margin: var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));
  padding: var(--yarl__counter_padding,var(--yarl__button_padding,8px));
  position: var(--yarl__counter_position,absolute);
  right: var(--yarl__counter_right,unset);
  top: var(--yarl__counter_top,0);
  -webkit-user-select: var(--yarl__counter_user_select,none);
  -moz-user-select: var(--yarl__counter_user_select,none);
  user-select: var(--yarl__counter_user_select,none);
}
._label_4uywy_1 {
  display: inline-flex;
  width: 22px;
  height: 22px;
  text-align: center;
  margin-right: 10px;
  border: 2px solid transparent;
  border-radius: 50%;
  justify-items: center;
  align-items: center;
  cursor: pointer;
}
._label_4uywy_1 span {
  display: block;
  width: 14px;
  flex-shrink: 0;
  height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  transition: transform .2s ease-in-out;
  position: relative;
}
._input_4uywy_24:checked + ._label_4uywy_1 {
  border-color: var(--color-selected);
}