.nio-toggle {
  overflow: hidden;
  padding: 0 4px; }
  .nio-toggle .react-toggle {
    touch-action: pan-x;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    user-select: none;
    height: 24px;
    display: inline-block;
    width: 100%; }
    .nio-toggle .react-toggle-screenreader-only {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px; }
    .nio-toggle .react-toggle--disabled {
      cursor: not-allowed;
      opacity: 0.5;
      transition: opacity 0.25s; }
    .nio-toggle .react-toggle-track {
      height: 100%;
      border-radius: 30px;
      background-color: #6a7578;
      transition: all 0.2s ease;
      display: inline-block;
      width: 100%; }
    .nio-toggle .react-toggle-track-check, .nio-toggle .react-toggle-track-x {
      position: absolute;
      left: 0;
      right: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.25s ease;
      color: #fefefe;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap; }
    .nio-toggle .react-toggle-track-check {
      padding-left: 10px;
      padding-right: 30px;
      opacity: 0; }
    .nio-toggle .react-toggle-track-x {
      padding-left: 30px;
      padding-right: 10px;
      opacity: 1; }
    .nio-toggle .react-toggle-thumb {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fefefe;
      box-sizing: border-box;
      transition: all 0.25s ease;
      box-shadow: none;
      outline: none; }
    .nio-toggle .react-toggle--checked .react-toggle-track {
      background-color: #55c58f; }
    .nio-toggle .react-toggle--checked .react-toggle-track-check {
      opacity: 1; }
    .nio-toggle .react-toggle--checked .react-toggle-track-x {
      opacity: 0; }
    .nio-toggle .react-toggle--checked .react-toggle-thumb {
      left: calc(100% - 23px); }
