sofatime.css

span.date-time-end:before {
  content: " – ";
}

span.range {
  /*padding-right: 40px;*/
}

span.error {
  padding-right: 0.5em;
}

span:not(:first-of-type).range:before {
  content: "\a";
  white-space: pre;
}

div.menu {
  background-color: white;
  border: 1px solid grey;
  padding: 0.25em;
}

div.menu div.select-time-zone {
  width: 300px;
}

span.choose-24h-display label {
  margin-right: 0.5em;
}

span.select-time-zone label {
  margin-right: 0.5em;
}

span.select-time-zone select {
  width: 300px;
}

div.menu label {
  display: inline-block;
  width: 40%;
}

div.menu div.select-time-zone select {
  width: 60%;
}

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

.sofatime div:nth-of-type(3) {
  flex-basis: 100%;
}

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

.sofatime .hidden { display: none; }

.sofatime .times {
  display: flex;
  white-space: nowrap;
}

.sofatime .times div {
  flex-wrap: nowrap;
  margin: 0.25em;
}

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

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

/* The following rules have been disabled with the leading 'X' because I can't
 * make them work with the new view style, so we are falling back to default
 * checkbox formatting.  To re-enable these rules, simply remove the leading
 * 'X's, then you can work to get the fancy styling back in place! */

.choose-24h-display {
  /*display: inline-flex;
  background: #d9d9d9;

  height: 20px;
  border-radius: 20px;
  font-weight: bold;
  vertical-align: text-top;
  align-items: center;*/
}

.choose-24h-display p {
  padding: 2px 6px 0 2px;
}


/* The following is based on <https://codepen.io/mburnette/pen/LxNxNg>, with
 * modifications to allow for the checkbox `input` element that are contained
 * within their corresponding `label` element (rather than using the `for`
 * attribute). */

.choose-24h-display input {
  height: 0;
  width: 0;
  visibility: hidden;
}

.choose-24h-display label span.custom-checkbox-background {
  cursor: pointer;
  width: 30px;
  height: 16px;
  background: #324a70;
  background: #b4b4c0;
  display: inline-block;
  border-radius: 20px;
  position: relative;
}

.choose-24h-display label span {
  position: relative;
}

.choose-24h-display label span.custom-checkbox-background:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 18px;
  transition: 0.2s;
}

/* The `child-checked` class is applied by JavaScript when the child `input`
 * element is checked, because there is (currently) no way in CSS to select an
 * ancestor element based on the state of a descendent element. */
.choose-24h-display label.child-checked span.custom-checkbox-background {
  background: #5c8bd6;
}

.choose-24h-display label.child-checked span.custom-checkbox-background:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

.choose-24h-display label:active:after {
  width: 18px;
}