.grid {
  display: grid;
  grid-auto-rows: minmax(15px,auto);
  grid-gap: 5px 25px;
  align-items: center;
  justify-content: start;
  }

.grid__subtitle {
  background-color: #dddddd;
  grid-column: 1 / -1;
  }

.grid__subtitle--spacer {
  grid-column: 1;
  }

.grid__subtitle--spaced {
  grid-column: 2 / -1;
  }

.grid__cell {
  }

.grid--header {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 8pt;
  }

.grid--inactive {
  color: #808080;
  }

.grid--col1 {
  grid-column: 1;
  }

.mdc-text-field--none {
  display: none;
  }

.showhide--hide {
  display: none;
  }

/* #TODO this is not working */
.mdc-text-field__icon--valid {
  color: #00FF00;
  }

/* #TODO This should change border colors or something, but it's not working */
.mdc-text-field--outlined.mdc-text-field--readonly.mdc-text-field--focused {
  color: red;
  }
.mdc-text-field--outlined.mdc-text-field--readonly {
  color: red;
  }
.mdc-text-field--filled.mdc-text-field--readonly.mdc-text-field--focused {
  color: red;
  }
.mdc-text-field--filled.mdc-text-field--readonly {
  color: red;
  }

.mdc-select.mdc-select--outlined.mdc-select--disabled.mdc-select--readonly {}
.mdc-select.mdc-select--filled.mdc-select--disabled.mdc-select--readonly {}



.mdc-text-field--with-invalid-icon.mdc-text-field--invalid .mdc-text-field__icon--invalid {display: block; }
.mdc-text-field--with-invalid-icon.mdc-text-field--invalid .mdc-text-field__icon--valid {display: none; }
.mdc-text-field--with-invalid-icon.mdc-text-field--invalid .mdc-text-field__icon--other {display: none; }

.mdc-text-field--with-valid-icon:not(.mdc-text-field--invalid) .mdc-text-field__icon--invalid {display: none; }
.mdc-text-field--with-valid-icon:not(.mdc-text-field--invalid) .mdc-text-field__icon--valid {display: block; }
.mdc-text-field--with-valid-icon:not(.mdc-text-field--invalid) .mdc-text-field__icon--other {display: none; }

.mdc-text-field--with-invalid-icon.mdc-text-field--with-other-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon) .mdc-text-field__icon--invalid {display: none; }
.mdc-text-field--with-invalid-icon.mdc-text-field--with-other-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon) .mdc-text-field__icon--valid {display: none; }
.mdc-text-field--with-invalid-icon.mdc-text-field--with-other-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon) .mdc-text-field__icon--other {display: block; }

.mdc-text-field--with-invalid-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon):not(.mdc-text-field--with-other-icon) .mdc-text-field__icon--invalid {display: none; }
.mdc-text-field--with-invalid-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon):not(.mdc-text-field--with-other-icon) .mdc-text-field__icon--valid {display: none; }
.mdc-text-field--with-invalid-icon:not(.mdc-text-field--invalid):not(.mdc-text-field--with-valid-icon):not(.mdc-text-field--with-other-icon) .mdc-text-field__icon--other {display: none; }

/*
.mdc-text-field--with-other-icon
.mdc-text-field--with-invalid-icon
.mdc-text-field--with-valid-icon

.mdc-text-field--is-valid
.mdc-text-field--is-invalid

.mdc-text-field__icon--other
.mdc-text-field__icon--valid
.mdc-text-field__icon--invalid
*/



/* These styles control component density. I think there's a native way to do this,
   so if I can figure it out then this section can be deleted.
   */

.grid.dense-default     {grid-auto-rows: minmax(56px,auto); }
.grid.dense-comfortable {grid-auto-rows: minmax(48px,auto); }
.grid.dense-compact     {grid-auto-rows: minmax(40px,auto); }

.mdc-text-field.dense-default     {height: 56px; }
.mdc-text-field.dense-comfortable {height: 48px; }
.mdc-text-field.dense-compact     {height: 40px; }

.mdc-select.dense-default     .mdc-select__anchor {height: 56px; }
.mdc-select.dense-comfortable .mdc-select__anchor {height: 48px; }
.mdc-select.dense-compact     .mdc-select__anchor {height: 40px; }

/*
Checkbox padding 5 9 11
Button height 24 28 36
*/



/* These styles are needed to correct the Material IO styles from interference by
   style.php styles. When the old form elements are removed, this section should be
   removed.
   */

/* This fixes the background color of text boxes in FILLED model */
.mdc-text-field--filled input[type=text] {
  background-color: transparent; border-color: transparent;
  }

/* This fixes the spacing of text boxes within the text input element */
.mdc-text-field input[type=text] {
  margin: 0px; padding: 0px;
  }