@media all{
  .switch {
    position: relative;
    display: inline-block;
    z-index: 0;
  }

  .switch input {visibility: hidden;}

  #mode_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  #mode_slider:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 50%;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border: solid thin black;
  }

  input:checked + #mode_slider {background-color: #2a2a2a; border: solid thin white}
  input:checked + #mode_slider:before {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }

  #mode_slider {
    border-radius: 33.33%;
    border: solid thin black;
  }
  #mode_slider:before {border-radius: 50%;}
}

@media only screen and (max-width: 550px){
  .switch {
    width: 50px;
    height: 30px;
  }
}

@media print, screen and (max-width: 1050px) and (min-width: 551px){
  .switch {
    width: 55px;
    height: 30px;
  }
}

@media screen and (max-width: 1700px) and (min-width: 1051px){
  .switch {
    width: 55px;
    height: 30px;
  }
}

@media screen and (min-width: 1701px){
  .switch {
    width: 3.75vw;
    height: 2vw;
  }
}