INPUT, TEXTAREA, SELECT {
  outline: none; }
  INPUT.form-control, TEXTAREA.form-control, SELECT.form-control {
    font-size: 16px;
    background-color: var(--input-background);
    display: inline-block;
    border: var(--input-border);
    color: var(--input-color); }
    INPUT.form-control::placeholder, TEXTAREA.form-control::placeholder, SELECT.form-control::placeholder {
      color: var(--input-placeholder-color); }
    INPUT.form-control:disabled, TEXTAREA.form-control:disabled, SELECT.form-control:disabled {
      background-color: var(--input-background-disabled); }

INPUT.form-control, SELECT.form-control {
  border-radius: 10px;
  height: 40px;
  padding: 0px 15px; }

TEXTAREA.form-control {
  border-radius: 10px;
  padding: 5px 10px;
  resize: none; }

LABEL.caption {
  display: inline-block;
  width: 100%;
  margin-bottom: 5px;
  padding: 0px 15px; }

.form-group {
  margin: 0px 0px 10px 0px;
  overflow: hidden; }
  .form-group > INPUT.form-control,
  .form-group > TEXTAREA.form-control,
  .form-group > SELECT.form-control {
    width: 100%;
    margin-bottom: 10px; }
  .form-group > INPUT.form-control + SPAN.error,
  .form-group > TEXTAREA.form-control + SPAN.error,
  .form-group > SELECT.form-control + SPAN.error {
    margin-top: -5px;
    margin-bottom: 10px; }
  .form-group.button {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
    .form-group.button > INPUT,
    .form-group.button > SELECT,
    .form-group.button > TEXTAREA {
      flex-grow: 1; }

SPAN.error {
  display: none;
  font-size: 14px;
  color: var(--input-span-error-color);
  text-align: center; }
  SPAN.error.show {
    display: block;
    animation: show-error 500ms ease-in-out forwards; }
  SPAN.error.hidden {
    display: block;
    animation: hidden-error 500ms ease-in-out forwards; }

@keyframes show-error {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes hidden-error {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

INPUT[type=checkbox].form-control {
  display: none; }
  INPUT[type=checkbox].form-control + BUTTON {
    margin: 0px;
    padding: 0px;
    position: relative;
    display: inline-block;
    height: 25px;
    width: 50px;
    vertical-align: middle;
    border: solid 1px var(--check-border-color);
    border-radius: 15px;
    background-color: var(--check-background);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    INPUT[type=checkbox].form-control + BUTTON > DIV {
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(25px - 4px);
      height: calc(25px - 4px);
      transition: all 0.2s ease-in-out; }
      INPUT[type=checkbox].form-control + BUTTON > DIV::before {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 2px;
        left: 0px;
        background-color: var(--check-switch-background);
        border-radius: calc(25px / 2);
        border: none;
        transition: all 0.2s ease-in-out;
        content: ''; }
  INPUT[type=checkbox].form-control.text-right + BUTTON {
    margin-right: 5px; }
  INPUT[type=checkbox].form-control.text-left + BUTTON {
    margin-left: 5px; }
  INPUT[type=checkbox].form-control:checked + BUTTON {
    background: var(--check-background-checked); }
    INPUT[type=checkbox].form-control:checked + BUTTON > DIV {
      left: calc(100% - 25px + 3px); }
      INPUT[type=checkbox].form-control:checked + BUTTON > DIV::before {
        background-color: var(--check-switch-background-checked); }
  INPUT[type=checkbox].form-control:disabled + BUTTON {
    opacity: 0.5;
    cursor: default; }

BODY {
  --radio_size: 30px;
  --radio_size_selected: 22px; }
  @media (max-width: 1000px) {
    BODY {
      --radio_size: 20px;
      --radio_size_selected: 12px; } }

INPUT[type=radio].form-control {
  display: none; }
  INPUT[type=radio].form-control:checked + SPAN:before {
    transform: scale(1);
    opacity: 1; }
  INPUT[type=radio].form-control:disabled + SPAN {
    opacity: 0.5;
    cursor: default; }
  INPUT[type=radio].form-control + SPAN {
    background-color: var(--radio-background);
    border: solid 1px var(--radio-border-color);
    display: inline-block;
    height: var(--radio_size);
    width: var(--radio_size);
    border-radius: 100%;
    vertical-align: middle;
    cursor: pointer; }
    INPUT[type=radio].form-control + SPAN::before {
      content: '';
      display: block;
      height: var(--radio_size_selected);
      width: var(--radio_size_selected);
      border-radius: 100%;
      position: relative;
      top: calc(  (var(--radio_size) - var(--radio_size_selected)) / 2);
      background: var(--radio-background-selected);
      transition: all 0.25s ease;
      transform: scale(0);
      opacity: 0; }