.switch-custom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 2px 9px;
        position:relative;
        border: 2px solid #d9d9d9;
        background-color: #d9d9d9;
        border-radius: 34px;
        margin: 0;
        width: 115px
      }
  
      .switch-custom label {
      display: inline-block;
      color: black;
      position:relative;
      z-index:2;
      margin: 0;
      font-size: 14px;
      font-weight: bold;
      }
  
      .switch-custom input {
      height: 40px;
      margin: 0;
      position: absolute;
      z-index: 3;
      opacity: 0;
      cursor: pointer;
      width: 40px
      }
  
      .switch-custom span {
      height: 30px;
      width: 30px;
      border-radius: 50px;
      background:#fff;
      display:block;
      position:absolute;
      transition:all 0.3s ease-in-out;
      }
  
      .switch-custom input[value="1"] {
      left: 5px;
      }
      .switch-custom input[value="-1"] {
      left: 43px;
      }
      .switch-custom input[value="0"] {
      left: 77px;
      }
  
      .switch-custom input[value="1"]:checked ~ span{
      background:#272f51;
      left: 5px;
      color:#fff;
      }
  
      .switch-custom input[value="-1"]:checked ~ span{
      background:#fff;
      left: 43px;
      }
      .switch-custom input[value="0"]:checked ~ span{
      background:#272f51;
      left: 77px;
      }
  
      .switch-custom input[value="1"]:checked + label,.switch-custom input[value="0"]:checked + label{
      color:#fff;
      }
      .switch-custom input[value="-1"]:checked + label{
      color:#fff;
      }