.toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
.small {
  font-size: 20px !important;
}
  .toggle-slot {
    position: relative !important;
    height: 27px;
    width: 60px;
    border: 1px solid ;
    border-radius: 10em;
    background-color: white;
    transition: background-color 250ms;
    cursor: pointer;
  }

  .toggle-checkbox.active ~.toggle-slot {
    background-color: #374151;
  }

  .toggle-button {
    transform: translate(34px, 2px);
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBF5FF;
    border: 2px solid #0B84FF;
    transition: background-color 250ms, border-color 250ms, transform 400ms;
    cursor: pointer;
  }

  .toggle-checkbox.active ~.toggle-slot .toggle-button {
    background-color: #485367;
    box-shadow: inset 0px 0px 0px 0.75em white;
    transform: translate(4px, 2px);
  }

  .sun-icon {
    position: absolute;
    height: 16px;
    width: 16px;
    color: #fff;
    font-size: 19px;
  }

  .sun-icon-wrapper {
    position: absolute;
    height: 18px;
    width: 18px;
    opacity: 0;
    transform: translate(4px, 3px) rotate(15deg);
    transform-origin: 50% 50%;
    transition: opacity 250ms;
    pointer-events: all;
    cursor: pointer;
  }

  .toggle-checkbox.active  ~ .toggle-slot .moon-icon-wrapper {
    opacity: 0;
    transform: translate(34px, 10px) rotate(0deg);
  }

  .moon-icon {
    position: absolute;
    height: 18px;
    width: 18px;
    color: #29343D;
    font-size: 20px;
    padding-top: 2px;
  }

  .moon-icon-wrapper {
    position: absolute;
    height: 22px;
    width: 22px;
    font-size: 20px;
    opacity: 1;
    transform: translate(5px, 2px) rotate(25deg);
    transform-origin: 50% 50%;
    pointer-events: all;
    cursor: pointer;
  }

  .toggle-checkbox.active ~.toggle-slot .sun-icon-wrapper {
    opacity: 1;
    transform: translate(34px, 3px) rotate(-15deg);
  }

  #mobile-menu {
    left: -100%;
    transition:all 0.6s;
  }
    .m-active {
        left: 0 !important;
      }
  .m-submenu-arrow {
    transform: rotate(0deg) translate(224px, 7px);
  }