.radio,
.checkbox {
  border-color: #c9cbce;
  border-color: var(--color-interactive-secondary);
}
.radio > label,
.checkbox > label {
  position: relative;
  padding-left: 48px;
}
[dir="rtl"] .radio > label,
[dir="rtl"] .checkbox > label {
  padding-right: 48px;
  padding-left: 0;
  padding-left: initial;
}
.radio > label input[type="radio"],
.checkbox > label input[type="radio"],
.radio > label input[type="checkbox"],
.checkbox > label input[type="checkbox"] {
  display: block;
  position: absolute;
  top: 13px;
  left: 40px;
}
[dir="rtl"] .radio > label input[type="radio"],
[dir="rtl"] .checkbox > label input[type="radio"],
[dir="rtl"] .radio > label input[type="checkbox"],
[dir="rtl"] .checkbox > label input[type="checkbox"] {
  right: 40px;
  left: auto;
  left: initial;
}
.tw-checkbox-button {
  border: 1px solid #c9cbce;
  border: 1px solid var(--color-interactive-secondary);
  background: #ffffff;
  background: var(--color-background-screen);
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: inline-block;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.np-theme-personal .tw-checkbox-button {
  border: none;
  box-shadow: inset 0 0 0 1px #c9cbce;
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
}
.tw-checkbox-button .tw-checkbox-check,
.tw-checkbox-button .np-tw-checkbox-indeterminate {
  width: 20px;
  height: 20px;
  margin: 0;
  display: none;
  color: #ffffff;
  color: var(--color-background-screen);
}
.tw-checkbox-button:not(.disabled):not(:disabled):hover,
input[type="checkbox"]:hover + .tw-checkbox-button,
.checkbox:hover .tw-checkbox-button {
  border-color: #b5b7ba;
  border-color: var(--color-interactive-secondary-hover);
}
.np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
.np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
.np-theme-personal .checkbox:hover .tw-checkbox-button {
  box-shadow: inset 0 0 0 1px #b5b7ba;
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
}
.tw-checkbox-button:not(.disabled):not(:disabled):focus,
.tw-checkbox-button:not(.disabled):not(:disabled).focus,
.tw-checkbox-button:not(.disabled):not(:disabled):focus:hover,
.tw-checkbox-button:not(.disabled):not(:disabled).focus:hover,
input[type="checkbox"]:focus + .tw-checkbox-button,
.tw-checkbox-button:not(.disabled):not(:disabled):active,
.tw-checkbox-button:not(.disabled):not(:disabled).active,
input[type="checkbox"]:active + .tw-checkbox-button {
  border-color: #c9cbce;
  border-color: var(--color-interactive-secondary);
  outline: none;
}
input[type="checkbox"]:focus-visible + .tw-checkbox-button {
  outline: var(--ring-outline-color) solid var(--ring-outline-width);
  outline-offset: var(--ring-outline-offset);
}
.checkbox input[type="checkbox"]:focus-visible + .tw-checkbox-button {
  outline: none;
}
.tw-checkbox-button:checked,
.tw-checkbox-button.checked,
input[type="checkbox"]:checked + .tw-checkbox-button,
input[type="checkbox"]:indeterminate + .tw-checkbox-button {
  border-color: #00a2dd !important;
  border-color: var(--color-interactive-accent) !important;
  background-color: #00a2dd;
  background-color: var(--color-interactive-accent);
}
.np-theme-personal .tw-checkbox-button:checked,
.np-theme-personal .tw-checkbox-button.checked,
.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
.np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
  background-color: var(--color-interactive-primary);
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
}
.tw-checkbox-button:checked .tw-checkbox-check,
.tw-checkbox-button.checked .tw-checkbox-check,
input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
  display: inline-block;
}
input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
  display: inline-block;
}
.tw-checkbox-button:checked:hover,
.tw-checkbox-button.checked:hover,
input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
  border-color: #008fc9 !important;
  border-color: var(--color-interactive-accent-hover) !important;
  background-color: #008fc9;
  background-color: var(--color-interactive-accent-hover);
}
.np-theme-personal .tw-checkbox-button:checked:hover,
.np-theme-personal .tw-checkbox-button.checked:hover,
.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
  border-color: var(--color-interactive-primary-hover) !important;
  background-color: var(--color-interactive-primary-hover);
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
}
.tw-checkbox-button:checked:active,
.tw-checkbox-button.checked:active,
input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
  border-color: #0081ba !important;
  border-color: var(--color-interactive-accent-active) !important;
  background-color: #0081ba;
  background-color: var(--color-interactive-accent-active);
}
.np-theme-personal .tw-checkbox-button:checked:active,
.np-theme-personal .tw-checkbox-button.checked:active,
.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
  border-color: var(--color-interactive-primary-active) !important;
  background-color: var(--color-interactive-primary-active);
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
}
.checkbox.has-error .tw-checkbox-button,
.tw-checkbox-button.has-error {
  border-color: #e74848 !important;
  border-color: var(--color-interactive-negative) !important;
}
.checkbox.has-error .tw-checkbox-button:checked,
.tw-checkbox-button.has-error:checked,
.checkbox.has-error .tw-checkbox-button.checked,
.tw-checkbox-button.has-error.checked {
  background-color: #e74848;
  background-color: var(--color-interactive-negative);
}
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
  border-color: #e74848 !important;
  border-color: var(--color-interactive-negative) !important;
  background-color: #e74848;
  background-color: var(--color-interactive-negative);
}
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
  border-color: #d03238 !important;
  border-color: var(--color-interactive-negative-hover) !important;
  background-color: #d03238;
  background-color: var(--color-interactive-negative-hover);
}
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
  border-color: #bf1e2c !important;
  border-color: var(--color-interactive-negative-active) !important;
  background-color: #bf1e2c;
  background-color: var(--color-interactive-negative-active);
}
.tw-radio-button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #c9cbce;
  border: 1px solid var(--color-interactive-secondary);
  background: #ffffff;
  background: var(--color-background-screen);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border 0.15s ease-in-out;
}
.np-theme-personal .tw-radio-button {
  border: none;
  box-shadow: inset 0 0 0 1px #c9cbce;
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
  position: relative;
  top: 0;
  left: 0;
}
.tw-radio-button .tw-radio-check {
  border-radius: 50%;
  text-align: center;
  width: 12px;
  height: 12px;
  display: block;
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
.radio:not(.disabled):not(:disabled):hover .tw-radio-button,
.tw-radio-button:not(.disabled):not(:disabled):hover {
  border-color: #b5b7ba;
  border-color: var(--color-interactive-secondary-hover);
}
.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #b5b7ba;
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
}
.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
}
.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked .tw-radio-check,
.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
.np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
.np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
  background-color: var(--color-interactive-primary-hover);
}
.tw-radio-button:not(.disabled):not(:disabled):focus,
.tw-radio-button:not(.disabled):not(:disabled).focus,
.tw-radio-button:not(.disabled):not(:disabled):active,
.tw-radio-button:not(.disabled):not(:disabled).active {
  border-color: #a7a9ab;
  border-color: var(--color-interactive-secondary-active);
  outline: none;
}
.tw-radio-button:checked,
.tw-radio-button.checked {
  border-color: #00a2dd !important;
  border-color: var(--color-interactive-accent) !important;
}
.tw-radio-button:checked .tw-radio-check,
.tw-radio-button.checked .tw-radio-check {
  opacity: 1;
  background-color: #00a2dd;
  background-color: var(--color-interactive-accent);
}
.np-theme-personal .tw-radio-button:checked,
.np-theme-personal .tw-radio-button.checked {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
}
.np-theme-personal .tw-radio-button:checked .tw-radio-check,
.np-theme-personal .tw-radio-button.checked .tw-radio-check {
  background-color: var(--color-interactive-primary);
  max-height: 12px;
  max-width: 12px;
}
.radio.has-error .tw-radio-button,
.tw-radio-button.has-error {
  border-color: #e74848 !important;
  border-color: var(--color-interactive-negative) !important;
}
.radio.has-error .tw-radio-button:checked .tw-radio-check,
.tw-radio-button.has-error:checked .tw-radio-check,
.radio.has-error .tw-radio-button.checked .tw-radio-check,
.tw-radio-button.has-error.checked .tw-radio-check {
  background-color: #e74848;
  background-color: var(--color-interactive-negative);
}
.radio .tw-radio-button {
  position: absolute;
  left: 13px;
  top: 11px;
}
[dir="rtl"] .radio .tw-radio-button {
  right: 13px;
  left: auto;
  left: initial;
}
.checkbox .tw-checkbox-button {
  position: absolute;
  left: 14px;
  top: 12px;
}
[dir="rtl"] .checkbox .tw-checkbox-button {
  right: 14px;
  left: auto;
  left: initial;
}
.form-inline .tw-checkbox-button,
.form-inline .tw-radio-button {
  vertical-align: bottom;
}
.form-horizontal .checkbox,
.form-horizontal .radio {
  padding-top: 0;
}
.form-horizontal .checkbox > label,
.form-horizontal .radio > label {
  margin-bottom: 0;
}
.np-radio.radio,
.np-checkbox.checkbox {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.np-radio.radio .np-radio-button,
.np-checkbox.checkbox .np-radio-button,
.np-radio.radio .np-checkbox-button,
.np-checkbox.checkbox .np-checkbox-button {
  position: relative;
  flex-shrink: 0;
}
.np-radio.radio .tw-checkbox-button,
.np-checkbox.checkbox .tw-checkbox-button,
.np-radio.radio .tw-radio-button,
.np-checkbox.checkbox .tw-radio-button {
  position: static;
}
.np-radio.radio > label,
.np-checkbox.checkbox > label {
  display: flex;
  align-items: center;
  padding: 8px 16px   ;
  padding: var(--size-8) var(--size-16)   ;
}
[dir="rtl"] .np-radio.radio > label,
[dir="rtl"] .np-checkbox.checkbox > label {
  padding: 8px 16px   ;
  padding: var(--size-8) var(--size-16)   ;
}
.np-radio.radio > label .np-checkbox__text,
.np-checkbox.checkbox > label .np-checkbox__text,
.np-radio.radio > label .np-radio__text,
.np-checkbox.checkbox > label .np-radio__text {
  display: block;
  padding-top: 1px;
}
:not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
:not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
:not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
:not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  font-size: 1rem;
  font-size: var(--font-size-16);
  line-height: 1.25rem;
  line-height: var(--line-height-20);
  padding-top: 3px;
}
.np-theme-personal .np-radio.radio > label,
.np-theme-personal .np-checkbox.checkbox > label {
  padding: var(--input-padding);
}
.np-radio .np-radio__avatar {
  pointer-events: none;
}