sofatime.css

.sofatime {
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}

.sofatime span {
  display: inline-block; /* inline-block allows min-width */
  font-weight: bold;
  min-width: 16ch;
}

.sofatime-error {
  background-color: #ffdddd;
}
.sofatime-error .sofatime-select-wrapper, .sofatime-error .sofatime-24h-wrapper {
  display: none;
}

.sofatimezone-select {
  max-width: 300px;
}

.sofatime-24h-wrapper {
  display: inline-flex;
  background: #d9d9d9;

  height: 20px;
  border-radius: 20px;
  font-weight: bold;
  vertical-align: text-top;
  align-items: center;
}
.sofatime-24h-wrapper p {
  padding: 2px 6px 0 2px;
}


/*The following based on https://codepen.io/mburnette/pen/LxNxNg */

/*.input[type=checkbox]{*/
.sofatime-24h-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

/*label {*/
.sofatime-24h-label {
  cursor: pointer;
  text-indent: -9999px;
  width: 30px; /*was 200px*/
  height: 16px; /*was 100px*/
  background: #324a70;
  display: inline-block;
  border-radius: 20px; /*was 100px*/
  position: relative;
}

/*label:after {*/
.sofatime-24h-label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px; /*was 90px*/
  height: 14px; /*was 90px*/
  background: #fff;
  border-radius: 18px;
  transition: 0.2s;
}

/*input:checked + label {*/
.sofatime-24h-checkbox:checked + .sofatime-24h-label {
  background: #5c8bd6;
}

/*input:checked + label:after {*/
.sofatime-24h-checkbox:checked + .sofatime-24h-label:after {
  left: calc(100% - 1px); /*was left: calc(100% - 5px) */
  transform: translateX(-100%);
}

/*label:active:after {*/
.sofatime-24h-label:active:after {
  width: 18px; /*was 130px*/
}