*, *::before, *::after {
  box-sizing: border-box;
}

.row2 {
  color: purple;
}

/* Word wrap and display line breaks */
table.wordwrapgrid tr.jqgrow td {
  white-space: pre-wrap !important;
}

/* Can be used on a specific cell */
/* For headers, use setLabel */
.myer_grids_wordwrap {
  white-space: pre-wrap !important;
}

/*.ui-jqgrid,*/

.ui-jqgrid,
.ui-pg-table td,
.navtable td {
  font-size: 11px;
}

.ui-jqgrid .ui-jqgrid-titlebar {
  font-size: 11px;
  padding: 8px 5px;
}

.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr>div,
.ui-search-clear {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.ui-jqgrid tr.jqgrow>td, .ui-jqgrid tr.jqfoot>td {
  padding-inline: 4px;
  padding-block: 0.5rem;
}

.ui-jqgrid tr.jqgroup>td {
  padding-block: 0.5rem;
}

/* when the row is editable */
.ui-jqgrid tr.jqgrow[editable="1"]>td:has(>select),
.ui-jqgrid tr.jqgrow>td:has(>input) {
  padding-inline: 0;
}

.ui-jqgrid tr.jqgrow[editable="1"]>td:has(>textarea) {
  padding-inline: 1px;
  padding-block: 0;
}

.ui-jqgrid tr.jqgrow[editable="1"]>td select {
  width: 100%;
}

.ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view select, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button {
  padding-block: 4px;
}

.ui-jqgrid .ui-jqgrid-view input, .ui-jqgrid .ui-jqgrid-view textarea, .ui-jqgrid .ui-jqgrid-view button {
  padding-inline: 2px;
}

.ui-jqgrid .ui-jqgrid-view select option {
  font-size: 1.1em;
}

.ui-jqgrid-btable, .ui-jqgrid-htable {
  border-spacing: 0;
  line-height: 1.3;
}

.ui-jqgrid-btable {
  background-color: white;
}

.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels th div {
  padding: 2px;
  line-height: 1.2;
}

.ui-jqgrid .ui-jqgrid-view textarea {
  min-height: 100%;
}

/* datetimepicker from http://trentrichardson.com/examples/timepicker/ */

.ui-timepicker-div .ui-widget-header {
  margin-bottom: 5px;
}

.ui-timepicker-div dl {
  text-align: left;
}

.ui-timepicker-div dl dt {
  float: left;
  clear: left;
  padding: 0 0 0 5px;
}

.ui-timepicker-div dl dd {
  margin: 0 10px 10px 40%;
}

.ui-timepicker-div td {
  font-size: 80%;
}

.ui-tpicker-grid-label {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.ui-timepicker-div .ui_tpicker_unit_hide {
  display: none;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
  background: none;
  color: inherit;
  border: none;
  outline: none;
  border-bottom: solid 1px #555;
  width: 95%;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
  border-bottom-color: #aaa;
}

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine {
  padding-right: 2px;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt {
  display: none;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
  display: block;
  padding-top: 2px;
}

.ui-timepicker-div.ui-timepicker-oneLine dl {
  text-align: right;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd>div {
  display: inline-block;
  margin: 0;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
  content: ':';
  display: inline-block;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
  content: '.';
  display: inline-block;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
  display: none;
}

.ui-dialog .ui-multiselect {
  overflow-y: auto;
}

.ui-dialog-buttonset {
  font-size: 0.8em;
}

div.ui-multiselect.ui-helper-clearfi.ui.ui-widget {
  max-height: 400px;
}

.ui-jqdialog[aria-describedby^=colchooser] {
  height: auto !important;
  position: relative !important;
  min-width: fit-content !important; /* may cause overflow */
  max-width: 95vw;
  /* These won't do anything, and if you set them to !important then you won't be able to move them around on the page */
  /* top: -550px !important; */
  left: 20px;
}
@media only screen and (max-width: 500px) {
  .ui-jqdialog[aria-describedby^=colchooser] {
    left: 0px !important;
  }
}


.ui-jqdialog[aria-describedby^=colchooser] .ui-multiselect ul.selected,
.ui-jqdialog[aria-describedby^=colchooser] .ui-multiselect ul.available {
  max-height: 500px !important;
  text-align: left;
}

.searchFilter input[type="button"] {
  padding: 5px 10px;
  background-color: orange;
}

.searchFilter input[type="text"] {
  width: initial !important;
}

.ui-jqdialog[aria-labelledby^=searchhdfbox] {
  height: auto !important;
  min-width: fit-content !important; /* may cause overflow */
  max-width: 100vw;
  width: initial !important;
  position: fixed;
  top: 50% !important;
}
.ui-jqdialog[aria-labelledby^=searchhdfbox] .searchFilter {
  max-height: 300px;
  overflow: auto;
}
@media only screen and (max-width: 500px) {
  .ui-jqdialog[aria-labelledby^=searchhdfbox] {
    top: 15% !important;
  }
  .ui-jqdialog[aria-labelledby^=searchhdfbox] table.group tr {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  ui-jqdialog[aria-labelledby^=searchhdfbox] table.group .columns select,
  .ui-jqdialog[aria-labelledby^=searchhdfbox] table.group .operators select,
  .ui-jqdialog[aria-labelledby^=searchhdfbox] table.group .data input
  {
    width: 100%;
  }

  .searchFilter input[type="text"] {
    width: 100% !important;
  }
}



body.custom-background {
  background-color: white;
}

.ColTable {
  text-align: left;
}

.highlight1 {
  background-color: #CEFFBEe6;
}

.highlight2 {
  background-color: #fffdbee6;
}

.highlight3 {
  background-color: #fff5d8e6;
}

.fixedgrey {
  background-color: #F3F3F3;
}

.redflag {
  background-color: rgba(239, 205, 205, 0.90);
}

.orangeflag {
  background-color: rgb(255 220 154, 0.90);
}

.blueflag {
  background-color: rgb(196 246 255, 0.90);
}

.greenflag {
  background-color: rgb(209 234 209, 0.90);
}

.redtext, .redtext a {
  color: rgba(255, 0, 0, 0.705) !important;
  font-weight: bold !important;
}

.myer__button {
  background-color: steelblue;
  padding: 0.75em 1.2em;
  border-radius: 7.5px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 0.9rem;
}

.myer__button.inverse {
  color: steelblue;
  background-color: white;
  border: 1px solid steelblue;
}

.myer__gridsformarea {
  max-width: 950px;
  margin: 1rem auto;
  text-align: left;
}

.myer__gridslist__header {
  background-color: #CCFFCC;
  border: 1px solid #A9FFA9;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 10px;
  margin: 1px;
}

.myer__gridslist__desc {
  background-color: #E3FFE3;
  font-size: 0.9rem;
  padding: 10px;
  margin: 1px;
}

.myer__gridslist {
  background-color: #E3FFE3;
  padding: 5px;
  text-align: left;
  font-size: 0.85rem;
}

.myer__gridslist summary {
  margin-top: 0.85rem;
  color: rgb(26, 29, 29);
}

.myer__gridslist details>summary {
  margin-top: 0.75rem;
  list-style: none;
}

details>summary:hover {
  opacity: 0.8;
}

.myer__gridslist summary::-webkit-details-marker {
  display: none
}

.myer__gridslist summary::after {
  content: ' ▼';
  color: rgba(70, 131, 180, 0.5);
}

.myer__gridslist details[open]>summary:after {
  content: " ▲";
  color: rgba(70, 131, 180, 0.5);
}

.myer__gridslist--num {
  color: rgba(70, 131, 180, 0.692);
}

.myer__gridslist--sectiontitle {
  font-weight: bold;
  margin: 0.5rem;
}

.myer__gridslist--othertitle {
  font-weight: bold;
  font-style: italic;
  margin-left: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  grid-column: 1 / -1;
  font-size: 0.9em;
}

.myer__gridssection {
  display: grid;
  grid-template-columns: 2rem auto;
  gap: 5px;
  margin-bottom: 5px;
}

.myer__gridssection--checkbox {
  height: 100%;
}

.myer__gridssection--checkbox>input[type="checkbox"] {
  margin: 1.5px 3px 5px 10px;
}

input.myer__gridslist--submit {
  display: block;
  margin-right: auto;
  padding: 8px;
  margin-block: 5px;
  border-radius: 5px;
}

.gridstable th, .gridstable td {
  padding: 3px 2px;
}

.gridfields_filterlist {
  padding: 1rem;
  background-color: lightgrey;
  border: 1px solid grey;
  max-width: 900px;
  margin: 1rem auto;
}

.gridfields_filterfields {
  font-size: 0.8em;
  columns: 3;
  padding: 0.5rem;
  max-height: 500px;
  overflow: auto;
  margin-bottom: 5px;
}

@media only screen and (max-width: 600px) {
  .gridfields_filterfields {
    columns: 2;
  }
}

@media only screen and (max-width: 400px) {
  .gridfields_filterfields {
    columns: initial;
    width: 100%;
  }
}

/* Used in CoordinatorInstructions and also in Grid Notes (allows for good copy-paste to Asana) */
code {
  font-weight: 700;
  font-family: inherit;
}

#CoordinatorInstructions {
  padding-inline: 1rem;
  line-height: 135%;
}

#CoordinatorInstructions section {
  margin-block: 1rem;
  border-top: black dotted 1px;
  padding: 0.5rem 0;
  font-size: 1rem
}

#CoordinatorInstructions p {
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

#CoordinatorInstructions h1 {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  background-color: none;
  border-radius: 5px;
}

#CoordinatorInstructions h2 {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  margin-block: 1rem;
  background-color: none;
}

#CoordinatorInstructions .heading_note {
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 2rem;
}

#CoordinatorInstructions .smalltext {
  font-size: 0.95rem;
}

#CoordinatorInstructions .checktask {
  background-color: #e89b5777;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  border-radius: 5px;
}

#CoordinatorInstructions li+li {
  margin-top: 0.5rem;
}

.gridhelptext {
  margin: 3rem auto 2rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  max-width: 900px;
  border-radius: 15px;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-size: 0.95rem;
  background-color: #e1f0ff;
  border: 1px solid #a1b0d4;
}

.gridhelpheader {
  display: block;
  text-align: center;
  color: #5c6a8d;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
}

.gridhelptext hr {
  border: none;
  height: 1px;
  color: #a1b0d4;
  background-color: #a1b0d4;
  margin-block: 1rem;
  width: 50%;
}