:root {
  --blue-dark: #00578E;
  --blue: #007BC2;
  --blue-border: #3079ed;
  --gray-dark: #363636;
  --blue-input-border: #7af;
  --gray-input: #ccc;
  --red-invalid: #d54;
  --taupe: #edeadd;  
  --taupe-light: #f6f4e6;
  --taupe-dark: #c9c7b9;  
}

@media(min-width: 820px) {  

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 1em;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    margin-right:1em;
  }

  .column-50 {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    flex: 1;
  }

  .column-33 {
    display: flex;
    flex-direction: column;
    flex-basis: 33.33333%;
    flex: 1;
  }

  .form-50 {
    width: 50%;
  }
}

@media(max-width: 820px) {  

  .table thead tr th.collapsible, .table tbody tr td.collapsible {
    display: none;
  }

}

@media(max-width: 1270px) {
  .page-banner {
    padding: 0 0 16px;
  }
  
  .page-banner .h2 {
    padding: 16px 0 0;
  }
}

aside label[for=sidebar-toggle] {
  text-transform: uppercase;
}

.table {
  min-width: 80%;
}

.table tbody tr td {
  vertical-align: top;
}

.table-compressed {
  width: auto;
}

form p {
  margin: 1em 0 0.5em 0;
}

form .row input, form .row textarea {
  border: solid 1px var(--gray-input);
  width: 100%;
  margin: 0.5em 0;
  padding: .5em;
  border-radius: 4px;
}

form .row select {
  width: 100%;
  margin: 0.5em 0;
  padding: .5em;
  border: solid 1px var(--gray-input);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");  
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;  
  border-radius: 4px;
}

form .row input:focus, form .row textarea:focus, form .row select:focus {
  outline: none !important;
  border:1px solid var(--blue-input-border);
  box-shadow: 0 0 3px var(--blue-input-border);
}

form .row input[type=file] {
  border: 0;
  margin: 0.25em 0;
  padding: 8px 8px 8px 0;
}

form .row input[type=file]::file-selector-button {
  margin: 0.5em 0;
	height: 43px;
	padding: 6px 28px;
  background-color: var(--taupe);
  border: solid 1px var(--taupe-light);
  color: var(--gray-dark);
  border-radius: 52px;
	transition: background-color .5s;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: "din-2014", sans-serif;
}

form .row label {
  display: flex;
  width: 100%;
  color: var(--gray-dark);
  margin-top: 1em
}

form .inline-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 0 1em;
}

form .inline-row label input {
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

form .center-row {
  display: flex;
  justify-content: center;
}

form .vertical-row label {
  display: block;
}

form .vertical-row label input {
  margin: 0.5em 0.5em 0.5em 0;
}

form button {
  margin: 0.5em 0;
	height: 43px;
	padding: 6px 28px;
  background-color: var(--blue);
  border: solid 1px var(--blue-border);
  color: white;
  border-radius: 52px;
	transition: background-color .5s;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
}

form button:hover, form button:focus {
  background: var(--blue-dark);
}


.field-validation-error {
  font-family: "clavo", serif;
  font-style: italic;
  font-size: 0.8em;
  color: var(--red-invalid);
}

.input-validation-error {
  border:1px solid var(--red-invalid);
  box-shadow: 0 0 3px var(--red-invalid);
}

.inset {
  background-color: var(--taupe);
  padding: 0.75em;
  border-radius: 4px;
  margin: 1em 0;
}

.hidden-group {
  display: none;
}

legend {
  font-family: "clavo", serif;
  font-style: italic;
  font-size: 0.8em;
}


.input-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1em;
}

.input-group input {
  border: solid 1px var(--gray-input);
  margin: 0.5em 0;
  padding: .5em;
  border-radius: 4px;
  flex-grow: 1;
}

.input-group input:focus {
  outline: none !important;
  border:1px solid var(--blue-input-border);
  box-shadow: 0 0 3px var(--blue-input-border);
}

#statusTable, .table {
  border-collapse: collapse;
  margin: 0.5em 0;
}

#statusTable thead tr th, .table thead tr th {
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  text-align: left;
  white-space: nowrap;
  border-bottom: solid 2px var(--gray-dark);
}

#statusTable thead tr th i, .table thead tr th i {
  padding-left: 0.75em;
}

#statusTable tbody tr td, .table tbody tr td {
  padding: 0.25em;
}

#statusTable tbody tr:nth-child(even), .table tbody tr:nth-child(even) {
  background-color: var(--taupe-light);
}

.inside-callout {
  margin: 2em 0;
}

#notifyOuter {
  text-align: center;
  margin: 1em 0 0 0;
}

#notifyInner {
  margin: 0.5em 0;
	height: 43px;
	padding: 6px 28px;
  background-color: var(--blue);
  border: solid 1px var(--blue-border);
  color: white;
  border-radius: 52px;
	transition: background-color .5s;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
}

.container {
  display: flex;
  margin: 1em 0;
  justify-content: center;
}

.auxLinkButton {
  margin: 0.5em 0;
	padding: 0.6em 28px;
  background-color: var(--taupe);
  border-radius: 52px;
	transition: background-color .5s;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .04em;
}

.auxLinkButton:hover, .auxLinkButton:focus {
  background: var(--taupe-dark);
}

.auxLinkButton a {
  padding-top:32px;
  color: var(--gray-dark);
}

.auxLinkButton a:hover {
  text-decoration: none;
  cursor:default;
}