.page-wrapper {
  .slider-checkbox {
    font-weight: normal;
    margin-right: 8px;
    display: flex !important;
    font-weight: normal !important;
    align-items: center;

    &:hover {
      cursor: pointer;
    }

    .switch {
      display: inline-block;
      height: 20px;
      min-height: initial;
      position: relative;
      width: 32px;
      min-width: 32px;
      margin-bottom: 0 !important;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      transition: .2s;
      cursor: pointer;
      background: var(--Stroke);

      &:before {
        background: #fff;
        box-shadow: 0px 1px 3px rgba(58, 58, 58, 0.16);
        bottom: 2px;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        position: absolute;
        transition: .2s;
      }

      &.round {
        border-radius: 34px;
        min-height: auto;
        padding: 0;

        &:before {
          border-radius: 50%;
        }
      }
    }

    &.yes-or-not {
      .switch {

        input:checked+.slider:after {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 9'%3E%3Cdefs/%3E%3Cpath stroke='%23277647' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.6666 1.08331L4.24992 7.49998 1.33325 4.58331'/%3E%3C/svg%3E");
          transform: translateX(11px);
          width: 11px;
          left: 6px;
        }

        .slider {
          &:after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 9 9'%3E%3Cdefs/%3E%3Cpath fill='%23FC5659' fill-rule='evenodd' d='M8.01154 1.28036c.29289-.292893.29289-.767766 0-1.06066-.29289-.2928928-.76777-.2928928-1.06066 0l-2.8368 2.8368L1.28009.222505c-.292897-.2928932-.767771-.2928932-1.060664 0-.2928934.292893-.2928934.767767 0 1.060665L3.05342 4.11716.233367 6.93721c-.2928932.2929-.2928934.76777 0 1.06066.292893.2929.767763.2929 1.060663 0l2.82005-2.82005 2.82286 2.82286c.29289.29289.76777.29289 1.06066 0s.29289-.76777 0-1.06066L5.17474 4.11716l2.8368-2.8368z' clip-rule='evenodd'/%3E%3C/svg%3E");
            bottom: 6px;
            height: 8px;
            width: 8px;
            line-height: 0;
            left: 6px;
            position: absolute;
            transition: .2s;
          }
        }
      }
    }

    &.sm {
      margin-right: 4px;

      .switch {
        width: 24px;
        min-width: 24px;
        height: 16px;
      }

      .slider {
        &:before {
          bottom: 2px;
          height: 12px;
          width: 12px;
          left: 2px;
        }
      }

      input:not(.inverted):checked+.slider:before {
        transform: translateX(8px);
      }

      input.inverted:not(:checked)+.slider:before {
        opacity: 1;
        transform: translateX(8px);
      }

    }

    input:not(.inverted):checked+.slider {
      background: var(--Main2);
    }

    input:not(.inverted):checked+.slider:before {
      transform: translateX(12px);
    }

    input.inverted:not(:checked)+.slider {
      background: var(--Main2);
      opacity: 1;
    }

    input.inverted:not(:checked)+.slider:before {
      opacity: 1;
      transform: translateX(12px);
    }

    input:not(.inverted):disabled+.slider,
    input.inverted:disabled+.slider {
      opacity: 0.5;
      cursor: default;
    }

  }

  .custom-switch {
    font-weight: normal;
    display: flex !important;
    font-weight: normal !important;
    align-items: center;
    cursor: pointer;
    margin: 0;
    min-height: 0;

    .switch {
      display: inline-block;
      height: 20px;
      min-height: initial;
      position: relative;
      width: 32px;
      min-width: 32px;
      margin-bottom: 0;

      input {
        display: none;
      }

      .slider {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        transition: .2s;
        cursor: pointer;
        background: var(--Stroke);
        border-radius: 34px;
        min-height: auto;
        padding: 0;

        &:before {
          background: #fff;
          box-shadow: 0px 1px 3px rgba(58, 58, 58, 0.16);
          bottom: 2px;
          content: "";
          height: 16px;
          width: 16px;
          left: 2px;
          position: absolute;
          transition: .2s;
          border-radius: 100%;
        }
      }
    }

    &__label {
      margin-left: 8px;
      color: var(--Main1);
    }

    &.yes-or-not {
      .switch {

        input:checked+.slider:after {
          content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 9'%3E%3Cdefs/%3E%3Cpath stroke='%23277647' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.6666 1.08331L4.24992 7.49998 1.33325 4.58331'/%3E%3C/svg%3E");
          transform: translateX(11px);
          width: 11px;
          left: 6px;
        }

        .slider {
          &:after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 9 9'%3E%3Cdefs/%3E%3Cpath fill='%23FC5659' fill-rule='evenodd' d='M8.01154 1.28036c.29289-.292893.29289-.767766 0-1.06066-.29289-.2928928-.76777-.2928928-1.06066 0l-2.8368 2.8368L1.28009.222505c-.292897-.2928932-.767771-.2928932-1.060664 0-.2928934.292893-.2928934.767767 0 1.060665L3.05342 4.11716.233367 6.93721c-.2928932.2929-.2928934.76777 0 1.06066.292893.2929.767763.2929 1.060663 0l2.82005-2.82005 2.82286 2.82286c.29289.29289.76777.29289 1.06066 0s.29289-.76777 0-1.06066L5.17474 4.11716l2.8368-2.8368z' clip-rule='evenodd'/%3E%3C/svg%3E");
            bottom: 6px;
            height: 8px;
            width: 8px;
            line-height: 0;
            left: 6px;
            position: absolute;
            transition: .2s;
          }
        }
      }
    }

    &.sm {
      .switch {
        width: 24px;
        min-width: 24px;
        height: 16px;
      }

      .slider {
        &:before {
          bottom: 2px;
          height: 12px;
          width: 12px;
          left: 2px;
        }
      }

      input:not(.inverted):checked+.slider:before {
        transform: translateX(8px);
      }

      input.inverted:not(:checked)+.slider:before {
        opacity: 1;
        transform: translateX(8px);
      }

    }

    input:not(.inverted):checked+.slider {
      background: var(--Main2);
    }

    input:not(.inverted):checked+.slider:before {
      transform: translateX(12px);
    }

    input.inverted:not(:checked)+.slider {
      background: var(--Main2);
      opacity: 1;
    }

    input.inverted:not(:checked)+.slider:before {
      opacity: 1;
      transform: translateX(12px);
    }

    input:not(.inverted):disabled+.slider,
    input.inverted:disabled+.slider {
      opacity: 0.5;
      cursor: default;
    }

  }
}