/* =============================================================================== */
/* Basic Layout - MOBILE FIRST                                                     */
/* =============================================================================== */

/* =============== PAGE CONTAINERS ================================ */
/* section { padding: 0 2rem; margin: 1rem 0 2rem; } */
/* section.widescreen { padding: 0; } */
section#form-message { padding: 0; }

/* =============== TABLES ================================ */
.tableBody { max-width: none; border: none; }
.tableRow { border-top: 1px solid var(--ltgray-bg-color); }
.tableRow { margin-top: 0.7rem; } .tableRow:first-of-type { margin-top: 0; }
.tableRow, .tableCell { display: inline-block;}
.tableRow, .secondaryHeader, form { margin-top: 0; width: 100%; }
.tableBody.bandedRows .tableRow { background: var(--color-light-three);	padding: var(--type-unit-md); } /* set default banding */
.tableBody.bandedRows .tableRow:nth-child(odd) {background: var(--color-light-two); }
.tableCell { display: block; line-height: 1.2rem; font-size: 0.9rem; }
/* .tableCell:nth-child(1) * { font-size: 1.3rem; margin-top:1rem; font-weight: 400;} */
.tableCell span:nth-child(1) { font-weight: var(--font-weight-md); }
.tableRowHeader { display: none; }
.table-group .tableBody { 
	border-top: 3px solid var(--color-info); border-bottom: 3px solid var(--color-light-four);
	background: var(--color-light-two);
}

/* =============== PAGE NOTIFICATIONS ================================ */
.connectBorder {
  /* Set up placeholder values */
  --cb-icon: none; --cb-tint: transparent; --cb-border: currentColor;
  position: relative; list-style: none; padding: .5rem .5rem .5rem 2.1rem; /* room for icon */
  font-size: var(--type-unit-sm); background-color: var(--cb-tint); border-left: 3px solid var(--cb-border); min-height: 2rem; }
/* Set up icon placeholders */ 
.connectBorder::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; background: var(--cb-icon) center / contain  no-repeat; }

/* Variants */
.connectBorder.infoText { --cb-icon: url('../img/icons/icon_notify_info.svg'); --cb-tint: var(--color-info-tint); --cb-border: var(--color-info); }
.connectBorder.errorText { --cb-icon: url('../img/icons/icon_notify_error.svg'); --cb-tint: var(--color-error-tint); --cb-border: var(--color-error); }
.connectBorder.progressText { --cb-icon: url('../img/icons/icon_notify_progress.svg'); --cb-tint: var(--color-progress-tint); --cb-border: var(--color-progress); }

/* =============== PAGINATION ================================ */
nav#pageNav { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: auto; padding: var(--type-unit-sm); background: var(--color-info); font-weight: var(--font-weight-sbld); margin: var(--type-unit-md) 0; }
nav#pageNav, nav#pageNav a { color: var(--color-light-one); }
#pageNav > * { text-align: center; display: flex; gap: var(--type-unit-md); align-items: center;  }
#pageNav li:hover { background-color: var(--color-info-shade); padding: var(--type-unit-xs); }
#pageNav a:hover { background-color: var(--color-info-tint); padding: var(--type-unit-xs); text-decoration: underline; }
#pagePrevious, #pageNext { border-radius: 50%; border: 1px solid var(--color-light-one); width: var(--type-unit-xxl); height: var(--type-unit-xxl); font-size: var(--type-unit-lg); line-height: var(--type-unit-lg); }
.pagerPrevious:hover, .pagerNext:hover { background: var(--color-info-shade); text-decoration: none;  }

/* =============================================================================== */
/* Desktop Layout - LARGER SCREENS ONLY                                            */
/* =============================================================================== */

@media screen and (min-width: 1000px) {

  /* =============== FORMS ================================ */
	form button, form input[type=button], form input[type=submit] { margin: 1rem 0; }
	.form-comments { background-color: transparent; padding: 0; }
	input[type=text], input[type=tel], input[type=url], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
		max-width: 240px; max-height: 2rem; }
	textarea { width: 100%; max-width: none; min-height: 110px; }
	.form-grid { display: grid; grid-gap: 0.3rem; }
	.form-grid li.form-selectors > * { display: inline-block;	}
	.form-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
	.form-grid.four-col { grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* =============== TABLES ================================ */
	.tableBody { margin: 0.5rem 0.7rem; }
	.tableRowHeader { display: table-header-group; background: var(--color-dark-one); color: var(--color-light-one); }
	.tableRowHeader.secondary { background: var(--color-light-four); color: var(--color-dark-one); }
	.tableRow { display: table-row; }
	.tableRowHeader > *:nth-child(1) *, .tableRow > *:nth-child(1) *  { font-size: inherit; }
  .tableCell { display: table-cell; width: 5%; }
	.tableCell span:nth-child(1) { font-weight: inherit; } /* remove bold headings used in mobile view */
  .tableBody.bandedRows .tableCell { display: table-cell; padding: 0.3rem 1rem; }

}