.wrapper {
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      .switch {
          position: relative !important;
          width: 100px !important;
          height: 30px !important;
          margin: 0px !important;
          appearance: none !important;
          -webkit-appearance: none !important;

          background-image: url('https://world.gomobi.vn/BgLight.png') !important;
          background-size: cover !important;
          background-repeat: no-repeat !important;
          border-radius: 25px !important;
          box-shadow: inset 0px 0px 2px rgba(255, 255, 255, .7) !important;
          transition: background-image .7s ease-in-out !important;
          outline: none !important;
          cursor: pointer !important;
          overflow: hidden !important;
      }

      .switch:checked {
          background-image: url('https://world.gomobi.vn/BgDark.png') !important;
          background-size: cover !important;
          transition: background-image 1s ease-in-out !important;
      }



      @keyframes off {
          0% {
              transform: translateX(80px);
              width: 46px;
          }

          50% {
              width: 75px;
              border-radius: 25px;
          }

          100% {
              transform: translateX(0px);
              width: 46px;
          }
      }



      .switch:checked:after {
          animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
          box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
      }

      @keyframes on {
          0% {
              transform: translateX(0px);
              width: 46px;
          }

          50% {
              width: 75px;
              border-radius: 25px;
          }

          100% {
              transform: translateX(80px);
              width: 46px;
          }
      }

      .switch:checked:before {
          content: '';
          width: 15px;
          height: 15px;
          border-radius: 50%;
          position: absolute;
          left: 15px;
          top: 5px;
          transform-origin: 53px 10px;
          background-color: transparent;
          box-shadow: 5px -1px 0px #fff;
          filter: blur(0px);
          animation: sun .7s forwards ease;
      }

      @keyframes sun {
          0% {
              transform: rotate(170deg);
              background-color: transparent;
              box-shadow: 5px -1px 0px #fff;
              filter: blur(1px);
          }

          50% {
              background-color: transparent;
              box-shadow: 5px -1px 0px #fff;
              filter: blur(1px);
          }

          90% {
              /* background-color: #f5daaa;
                                box-shadow: 0px 0px 10px #f5deb4,
                                    0px 0px 20px #f5deb4,
                                    0px 0px 30px #f5deb4,
                                    inset 0px 0px 2px #efd3a3; */
              background-color: transparent;
              box-shadow: 5px -1px 0px #fff;
              filter: blur(0px);
          }

          100% {
              transform: rotate(0deg);
              /* background-color: #f5daaa;
                                box-shadow: 0px 0px 10px #f5deb4,
                                    0px 0px 20px #f5deb4,
                                    0px 0px 30px #f5deb4,
                                    inset 0px 0px 2px #efd3a3; */
              background-color: transparent;
              box-shadow: 5px -1px 0px #fff;
              filter: blur(0px);
          }
      }

      .switch:before {
          content: '';
          width: 15px;
          height: 15px;
          border-radius: 50%;
          position: absolute;
          left: -25px;
          top: 6px;
          filter: blur(1px);
          background-color: #f5daaa;
          box-shadow: 0px 0px 10px #f5deb4,
              0px 0px 20px #f5deb4,
              0px 0px 30px #f5deb4,
              inset 0px 0px 2px #efd3a3;
          transform-origin: 53px 10px;
          animation: moon .7s forwards ease;
      }

      .switch:after {
          content: '';
          width: 25px !important;
          height: 25px !important;
          border-radius: 50%;
          background-color: #fff;
          position: absolute;
          left: -4px;
          top: 2px;
          transform: translateX(0px);
          animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
          box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
      }

      @keyframes moon {
          0% {
              transform: rotate(0deg);
              filter: blur(0px);
          }

          50% {
              filter: blur(0px);
          }

          90% {
              background-color: #f5daaa;
              box-shadow: 0px 0px 10px #f5deb4,
                  0px 0px 20px #f5deb4,
                  0px 0px 30px #f5deb4,
                  inset 0px 0px 2px #efd3a3;
              filter: blur(1px);

          }

          100% {
              transform: rotate(170deg);
              background-color: #f5daaa;
              box-shadow: 0px 0px 10px #f5deb4,
                  0px 0px 20px #f5deb4,
                  0px 0px 30px #f5deb4,
                  inset 0px 0px 2px #efd3a3;
              filter: blur(1px);
          }
      }