@font-face {
	font-family: "tbl_inter";
	/* pyftsubset inter_black.woff --text="The Black List NYC/US" --flavor=woff */
	src: url("/css/fonts/inter_black.subset.woff") format('woff');
}

:root {
	--tbl-accent-color: #4e94c5;
	--tbl-accent-color-trans: rgba(78, 148, 197, .125);
	--tbl-accent-color-dark: #366689;
	--tbl-accent-color-dim: #87acc7;
	--tbl-accent-color-vivid: #01538d;
	--tbl-accent-color-text: #485B6D;
	--tbl-button-color-secondary: rgb(219, 219, 219);
	--tbl-button-color-secondary-hover: rgb(199, 199, 199);
	--tbl-error-color: rgb(160, 0, 0);
	--tbl-error-danger: rgb(224, 0, 0);
	--tbl-border-divider: thin solid rgba(0, 0, 0, .25);
	--tbl-base-font: Arial, Helvetica, sans-serif;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: url("/assets/tbl_background.jpg");
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	max-width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-family: var(--tbl-base-font);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

.root-cnt {
	padding: 0 1em;
	margin: 0 auto;
	max-width: 56rem;
	min-width: 44rem;
	width: 100%;
	box-sizing: border-box;
}

.nda-h,
.nda {
	text-decoration: none;
	color: inherit;
}

.nda-h:hover {
	text-decoration: underline;
}

/* ---------------- */

.header {
	padding-top: 1rem;
	text-align: center;
	/* overflow: hidden; */
}

.header-h1 {
	font-family: tbl_inter, sans-serif;
	font-size: 5.75rem;
	margin: 0;
	display: inline-block;
	text-align: right;
	white-space: nowrap;
}

.header-tag {
	display: block;
	font-size: 74%;
	margin-top: -2.75rem;
	opacity: .125;
	margin-right: -2.875rem;
}

.nav {
	display: block;
	text-align: left;
	position: relative;
	top: -1.625rem;
	font-size: 1.25rem;
	border-bottom: var(--tbl-border-divider);
}

.nav-ul {
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 3rem;
}

.nav-item {
	display: inline-block;
	margin: 0;
	font-variant: small-caps;
	padding: 0 .5rem 1.125rem;
	border-bottom: .25rem solid transparent;
}

.nav-item--active {
	border-bottom-color: var(--tbl-accent-color);
	font-weight: bold;
}

/* ---------------- */


.input-group {
	margin-bottom: 1em;
}

.rc-label,
.tbl-label {
	display: block;
	font-size: .875em;
	opacity: .875;
	margin-bottom: .25em;
}

.rc-label {
	margin-bottom: 0;
	font-size: medium;
}

.rc-frame,
.rc-input,
.rc-input-inline,
.tbl-input {
	padding: .375em .5em;
	font-size: 1em;
	border-radius: .25rem;
	border: 1px solid var(--tbl-accent-color);
	background: #fdfdfd;
}

.tbl-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	cursor: pointer;
	accent-color: var(--tbl-accent-color);
}

.rc-frame,
.rc-input {
	margin-top: .125em;
	box-sizing: border-box;
	width: 100%;
}

.rc-frame {
	padding: 0;
}

.tbl-input:hover {
	border-color: var(--tbl-accent-color-dark);
}

.input-select,
.input-txt,
.input-richtext {
	display: block;
	line-height: 1.25em;
	font-family: var(--tbl-base-font);
	min-width: 1rem;
}

.input-richtext {
	min-width: 5em;
	min-height: 4em;
	padding: .375em .5em;
}

.rc-checkbox {
	width: 1.375em;
	height: 1.374em;
	cursor: pointer;
}

.input-select {
	appearance: none;
	cursor: pointer;
}

.err-label {
	display: none;
	font-size: .875em;
	padding: .125em;
	color: var(--tbl-error-color);
}

.input-err .tbl-input {
	border-color: var(--tbl-error-color);
	outline: 2px solid var(--tbl-error-color);
}

.input-err .tbl-label {
	color: var(--tbl-error-color);
}

.input-err .err-label {
	display: block;
}

.rc-h-line {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	gap: .75rem;
	margin-bottom: .5rem;
}

.button,
.button-small {
	display: inline-flex;
	height: 2.5em;
	line-height: 2.5em;
	font-size: 1em;
	padding: 0 1.5em;
	margin: 0;
	background: var(--tbl-accent-color);
	border: 1px solid transparent;
	border-radius: .375em;
	color: #fff;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: none;
	font-weight: 600;
	align-items: center;
	gap: .75rem;
}

.button-small {
	height: 2em;
	line-height: 2em;
	font-size: .875em;
	padding: 0 1em;

}

.button-small.secondary,
.button.secondary {
	background: var(--tbl-button-color-secondary);
	color: #333;
}

.button:disabled {
	cursor: not-allowed;
}

.button:not(:disabled):hover,
.button-small:not(:disabled):hover {
	background-color: var(--tbl-accent-color-dark);
	border-color: var(--tbl-accent-color-dark);
	transition: all 0.5s;
}

.button.secondary:not(:disabled):hover,
.button-small.secondary:not(:disabled):hover {
	background-color: var(--tbl-button-color-secondary-hover);
}

.button-small.danger,
.button.danger {
	background: var(--tbl-error-danger);
	color: #fff;
}

.button.danger:not(:disabled):hover,
.button-small.danger:not(:disabled):hover {
	background-color: var(--tbl-error-danger);
}

.button-small:focus-visible,
.button:focus-visible {
	outline: 2px solid black;
}

.sending .button.submit {
	background-color: var(--tbl-accent-color-dark);
}

.submit[sending="true"]::before,
.lms-loading-indicator::before,
.sending .button.submit::before {
	content: "";
	display: block;
	width: .8em;
	height: 1em;
	aspect-ratio: 1;
	margin-left: -.25em;
	background:
		no-repeat linear-gradient(#fff 0 0) 0% 50%,
		no-repeat linear-gradient(#fff 0 0) 50% 50%,
		no-repeat linear-gradient(#fff 0 0) 100% 50%;
	background-size: 20% 5%, 20% 100%, 20% 100%;
	animation: snd1 1s infinite linear;
}

.submit[sending="true"]::before,
.lms-loading-indicator::before {
	background:
		no-repeat linear-gradient(currentColor 0 0) 0% 50%,
		no-repeat linear-gradient(currentColor 0 0) 50% 50%,
		no-repeat linear-gradient(currentColor 0 0) 100% 50%;
	margin: 0;
}

@keyframes snd1 {
	0% {
		background-size: 20% 5%, 20% 100%, 20% 100%
	}

	33% {
		background-size: 20% 100%, 20% 5%, 20% 100%
	}

	66% {
		background-size: 20% 100%, 20% 100%, 20% 5%
	}

	100% {
		background-size: 20% 5%, 20% 100%, 20% 100%
	}
}

.loading-dots::after {
	content: '';
	font-weight: bold;
	display: inline-block;
	animation: loading_dots .75s steps(1, end) infinite;
}

@keyframes loading_dots {
	0% {
		content: '';
	}

	25% {
		content: '.';
	}

	50% {
		content: '..';
	}

	75% {
		content: '...';
	}

	100% {
		content: '';
	}
}

/* start: remove arrow indicators */
.input-txt[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.input-txt::-webkit-outer-spin-button,
.input-txt::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

/* end: remove arrow indicators */

/* ---------------- */

main.root-cnt {
	max-height: 5000rem;
	margin-top: 1em;
	margin-bottom: 1.5em;
	flex: 1;
}

.footer-content {
	color: dimgray;
	padding: .75rem 0;
	font-size: .875rem;
	text-align: center;
	border-top: var(--tbl-border-divider);
}

.mobile-only {
	display: none;
}

.hidden:hover,
.hidden:focus,
.hidden,
[hidden] {
	display: none !important;
}

@media only screen and (max-width: 768px) {

	.root-cnt {
		min-width: 21rem;
	}

	.header-h1 {
		font-size: 4rem;
	}

	.header-tag {
		font-size: 74%;
		margin-top: -1.75rem;
		margin-right: -2rem;
	}

	.nav {
		text-align: center;
		top: 0;
		font-size: 1.375rem;
		margin-top: 1.25rem;
	}

	.nav-ul {
		padding: 0;
		display: flex;
		justify-content: space-around;
		max-width: 38rem;
		margin: 0 auto;
	}

	.nav-item {
		margin: 0;
		padding: 0 0 .75rem;
	}

	main.root-cnt {
		margin-top: 2.5em;
		margin-bottom: 2.5em;
	}
}

@media only screen and (max-width: 540px) {
	.header-h1 {
		font-size: 12vw;
		margin-top: 1rem;
	}

	.header-tag {
		margin-top: -.575em;
		margin-right: -.75rem;
	}

	.nav {
		margin-top: 1.75rem;
		font-size: 1.25rem;
	}

	.nav-item {
		padding: 0 0 .5rem;
	}

	main.root-cnt {
		margin-bottom: 3em;
	}

	.footer-content {
		font-size: .8rem;
	}

	.mobile-only {
		display: initial;
	}

}