input {
  font-family: "Noto Sans", "Verdana", sans-serif;
}
input[type=checkbox] {
  accent-color: #006633;
}
#main .grid {
  display: grid;
  grid-template-columns: minmax(75px, 125px) auto;
}
#main .grid > .rightcolumn {
  margin-top: 5px;
  align-self: end;
  margin-bottom: 5px;
  display: flex;
}
#main .grid .rightcolumn > input  {
  display: block;
  box-sizing: border-box;
  width: 300px;
  padding: 3px 8px;
  font-size: 12pt;
  border: 1px solid #b8c9be;
  border-radius: 8px;
}
#main .grid .rightcolumn > input:focus {
  border-color: #006633;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
}
#main .grid .rightcolumn input#remember {
  margin-top: 7px;
  width: initial;
}

#main .grid > label {
  display: block;
  margin-top: 5px;
  text-align: right;
  width: calc(100% - 20px);
  padding-right: 20px;
}

#main .grid #textparent {
  min-height: 200px;
}

#main .submission button {
  padding: 4px 14px;
  border: 1px solid #006633;
  border-radius: 6px;
  background-color: #FFFFFF;
  color: #006633;
  font: bold 11pt "Noto Sans", "Verdana", sans-serif;
  margin-right: 5px;
  cursor: pointer;
}
#main .submission button:hover {
  background-color: #006633;
  color: #FFFFFF;
}
#main .grid #hidden {
  display: block;
  margin: 5px 0;
  width: initial;
}

#main .grid .textarea {
  width: inherit;
}

#main .grid textarea.submission {
  margin-top: 10px;
  border: 1px solid #b8c9be;
  border-radius: 8px;
  font-size: 12pt;  
}

div.note {
  display: block;
  text-align: justify;
  font-size: 10.5pt;
  margin-bottom: 10px;
}
.textarea div.note {
}

.in-note {
  text-align: justify;
  font-size: 12pt;
  margin-top: 5px;
  margin-bottom: 5px;
}
.remove img {
  padding: 5px;
  padding-left: 10px;
  float: right;
}

#main .tabs {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

#main .tab,
#main .counter {
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: right;
  padding-right: 20px;
}
#main .tab {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  background-color: #e3ebe6;
  color: #006633;
  cursor: pointer;
  border-radius: 8px 0 0 8px;
}
#main .tab:hover {
  background-color: #d2e2d8;
}
/* The tab that is showing */
#main .tab.active {
  background-color: #006633;
  color: white;
  cursor: default;
}
/* A tab whose field failed validation */
#main .tab.red {
  color: #cc0000;
}
#main .tab.active.red {
  color: #ffd0d0;
}
/* WordCount */
#main .counter {
  font-size: 11pt;
}

/*
 * The image box has the size of the story editor (publish/editor.css), so
 * that the box keeps its size when the tabs change: at most 450px wide,
 * and 337px high. That is the 300px writing area, the 35px toolbar (26px
 * buttons, 1px margins, 3px padding and a 1px line) and the 2px border.
 */
#uploadparent {
  box-sizing: border-box;
  width: 100%;
  max-width: 450px;
  height: 337px;
  overflow: auto;
  border: 1px solid #b8c9be;
  border-radius: 8px;
  margin-bottom: 10px;
}
#uploadparent>div {
  padding: 10px;
}

.yes {
  font-weight: bold;
}
.no {
  color: red;
}

.required {
  display: inline-flex;
  align-self: center;
  color: red;
}

ul.error-box {
  border: 1px solid #cc0000;
  border-radius: 8px;
  background-color: #fff5f5;
  padding: 10px 30px;
}
fieldset.mi_group_prevacct ul.error-box {
  border: 0;
  margin: 0;
  padding: 4px 0 0 6px;
  color: red;
}
ul.error-box li {
  margin: 4px 15px;
  font-weight: bold;
}

#main .grid div.g-recaptcha {
  grid-column: 2;
  margin: 5px 0;
}
#captcha #recaptcha_image {
  margin-left: 120px;
  border: 1px solid #b8c9be;
  border-radius: 8px;
}
#captcha .icons {
  position:relative;
  top:0.6em;
}

/* The search box above the list of posted stories in publish/edit */
#main .story-search {
  display: flex;
  gap: 6px;
  margin: 10px 0 20px;
}
#main .story-search input {
  box-sizing: border-box;
  width: 300px;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid #b8c9be;
  border-radius: 8px;
  font-size: 12pt;
}
#main .story-search input:focus {
  border-color: #006633;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
}
#main .story-search button {
  padding: 4px 14px;
  border: 1px solid #006633;
  border-radius: 6px;
  background-color: #ffffff;
  color: #006633;
  font: bold 11pt "Noto Sans", "Verdana", sans-serif;
  cursor: pointer;
}
#main .story-search button:hover {
  background-color: #006633;
  color: #ffffff;
}

/*
 * Phones: one column, with each label above its input. The inputs, the
 * editor and the image box take the full width, the controls are at
 * least 44px high for fingers, and the text is at least 16px, so that
 * iOS does not zoom in when an input gets the focus.
 */
@media (max-width: 600px) {
  #main .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #main .grid > * {
    min-width: 0;
  }
  #main .grid > .leftcolumn {
    display: none;
  }
  #main .grid > label {
    width: auto;
    margin-top: 14px;
    padding-right: 0;
    text-align: left;
    font-weight: bold;
  }
  #main .grid > .rightcolumn {
    margin-top: 4px;
    align-self: stretch;
  }
  /* The star of a required field goes inside the right end of the input,
     so that all the inputs have the same width */
  #main .grid > .rightcolumn:has(.required) {
    position: relative;
  }
  #main .grid .rightcolumn > input:has(+ .required) {
    padding-right: 30px;
  }
  #main .grid .rightcolumn > .required {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }
  #main .grid .rightcolumn > input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  #main .grid .rightcolumn input#remember,
  #main .grid #hidden {
    flex: none;
    width: 24px;
    min-height: 24px;
    height: 24px;
    margin: 8px 0;
  }
  #main .grid > div.note {
    margin-top: 4px;
    text-align: left;
  }

  /* The Text and Image tabs sit in a row on the top border of the story
     box, as they touch its left border on a wide screen. They start after
     its round corner. */
  #main .tabs {
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    padding-top: 18px;
    padding-left: 10px;
  }
  #main .tab {
    min-height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 18px;
    border-radius: 8px 8px 0 0;
    text-align: center;
  }
  #main .counter {
    margin: 0 0 6px auto;
    padding-right: 0;
  }
  #main .grid > .textarea {
    width: 100%;
    margin-top: 0;
  }
  #main .grid .textarea .note {
    margin-top: 6px;
    text-align: left;
  }
  #main .grid #textparent {
    min-height: 0;
  }
  /* On a phone the editor toolbar wraps onto two lines of 42px (40px
     buttons and 1px margins), so the editor is 393px high */
  #uploadparent {
    max-width: none;
    height: 393px;
  }
  #uploadparent input[type=file] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }
  #uploadparent input[type=file]::file-selector-button {
    min-height: 44px;
    margin-right: 10px;
    padding: 8px 16px;
    border: 1px solid #006633;
    border-radius: 6px;
    background-color: #ffffff;
    color: #006633;
    font: bold 16px "Noto Sans", "Verdana", sans-serif;
  }

  #main .grid div.g-recaptcha {
    grid-column: auto;
    margin: 18px 0 0;
  }

  #main .submission {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }
  #main .story-search input {
    flex: 1;
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  #main .story-search button,
  #main .submission button {
    min-height: 44px;
    margin: 0;
    padding: 8px 20px;
    font-size: 16px;
  }

  ul.error-box {
    padding: 10px 16px 10px 20px;
  }
  ul.error-box li {
    margin: 4px 0 4px 10px;
  }
}

/*
 * Below 346px the editor toolbar is narrower than its first three groups
 * (300px), so it wraps onto three lines and the editor is 435px high.
 */
@media (max-width: 345px) {
  #uploadparent {
    height: 435px;
  }
}