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%;
}

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

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

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

.Xsofatime .hidden { display: none; }

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

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

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

.Xsofatimezone-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! */

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

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

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


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

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

/*label {*/
.Xchoose-24h-display 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 {*/
.Xchoose-24h-display 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 {*/
.Xchoose-24h-display input:checked + label {
  background: #5c8bd6;
}

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

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