@font-face {
	font-family: "Tilda Sans";
	src: url("fonts/tilda-sans_regular.woff2") format("woff2");
	src: url("fonts/tilda-sans_regular.woff") format("woff");
}

@layer base, page, widget, widget_collapse, navigation,  modal;

/* base = 1, widget = 10, widget_collapse = 100, navigation = 1000, modal = 10000 */


:root {


	--shadow-color: #d1d1d1;
	--accent-color: #9994ccf6;
	--b-width: 0.14rem;
	--b-radius: 0.3rem;
	--text-col: black;
	--bg-col: white;
	
}

@media (prefers-color-scheme: dark) {
  :root {
	--accent-color: orange;
	--text-col: white;
	--bg-col: #00001c;
  }
}


@layer base {
	html, body, section, input, div, textarea, button {
		font-family: "Tilda Sans", sans-serif;
		font-size: 20px;
		background-color: var(--bg-col);
		color: var(--text-col);
	}

	* {
		font-family: "Tilda Sans", sans-serif;
		font-size: 1rem;
		
	}	
	
	a {
		color: var(--text-col);
		text-decoration: none;
	}
	
	svg {
		color: var(--text-col);
	}

	input, select, textarea, i {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	i {
		display: block;
		width: 1.2rem;
		height: 1.2rem;
	}


}


.menu-option-container {
	display: flex;
	justify-content: start;
	border-bottom: var(--b-width) solid var(--text-col);
}

.menu-option {
	box-sizing: border-box;
	flex: 1;
	max-width: 16rem;
	padding: 1rem;
	cursor: pointer;
}

.menu-option-selected {
	border: var(--b-width) solid var(--text-col);
	border-top-left-radius: var(--b-radius);
	border-top-right-radius: var(--b-radius);
	border-bottom: none;
}

.menu-option-space {
	box-sizing: border-box;

	display: none;

}

.flow {
	display: block;
}

.huge-font {
	font-size: 2rem;
}

.huge-bold-font {
	font-size: 2rem;
	font-weight: 900;

}

.normal-font {
	font-size: 1rem;
}

.normal-bold-font {
	font-size: 1rem;
	font-weight: 900;
}

.link-hover:hover {
	text-decoration: underline;
}



@layer widget {

	.button-250,
	.button-whole,
	.button-500 {
		position: relative;
		box-sizing: border-box;
		border: var(--b-width) solid transparent;
		background-color: var(--accent-color);
		padding: 1rem;
		text-align: center;
		width: 100%;	
		border-radius: var(--b-radius);
		z-index: 11;
	}
	
	
	.button-250:hover,
	.button-whole:hover, 
	.button-500:hover {
		border: var(--b-width) solid var(--text-col);
		cursor: pointer;
	}
	
	.button-250 {
		max-width: 16rem;
	}
	
	.button-500 {
		max-width: 32rem;
	}
	

}

.button-small {
	border: var(--b-width) solid var(--text-col);
	border-radius: var(--b-radius);
	padding: 0.1rem 0.3rem;
}


.scrolling-container {
	max-width: 100%;
	overflow-x: scroll;

}


.tc-50 {
	min-width: 3.5rem;
	padding: 0.8rem 1rem;

}

.tc-100 {
	min-width: 6.5rem;
	padding: 0.8rem 1rem;
}

.tc-150 {
	min-width: 9rem;
	padding: 0.8rem 1rem;
}

.tc-200 {
	min-width: 13rem;
	padding: 0.8rem 1rem;
}

.tc-300 {
	min-width: 20rem;
	padding: 0.8rem  1rem;
	
}

.ptc-50 {
	max-width: 3.5rem;
}

.ptc-200 {
	max-width: 13rem;
}

.ptc-350 {
	width: 20rem;
	
}


.tc-whole {
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
	border: var(--b-width) solid var(--text-col);
	border-radius: var(--b-radius);
	background-color: var(--accent-color);
}


@layer base {

	td {
		box-sizing: border-box;
		border-radius: var(--b-radius);
	}
	
	table, thead, tbody, tr {
		width: 100%;
	}
	
	tbody tr td div {
		background-color: transparent;
	}


}


.row {
	display: flex;
	flex-flow: row wrap;
}

.row-nowrap {
	display: flex;
	flex-wrap: nowrap;
}

.row-child-1 {
	flex: 1;
}

.row-child-2 {
	flex: 2;
}


.no-flow {
	display: none;

}




.cursor {
	cursor: pointer;
}


.container-section {

	padding-top: 4rem;

}

@media (min-width: 500px) {

.page-hugger,
.page-spread, 
.page-fixed,
.page-spread-no-border {
	box-sizing: border-box;

	/* background-color: rgb(175, 151, 151); */
	width: 100%;

	margin: auto;
	padding: 1rem;

}
.page-hugger {

	width: fit-content;
	margin-top: 2%;
	padding: 1rem;
}

.page-fixed {
	max-width: 55rem;
	padding: 1rem;
}

.page-spread-no-border {
	max-width: 50rem;
	padding-top: 0;
}

.page-fixed,
.page-spread,
.page-hugger {
	border: var(--b-width) solid var(--text-col);
	border-radius: var(--b-radius);
}



}

@media (max-width: 500px) {

.page-hugger,
.page-spread, 
.page-fixed,
.page-spread-no-border {
	box-sizing: border-box;

	/* background-color: rgb(175, 151, 151); */
	width: 100%;

	margin: auto;
	padding: 1rem 0.3rem 1rem 0.1rem;

}
.page-hugger {

	width: fit-content;
	margin-top: 2%;
	padding: 1rem 0.5rem;
}

.page-fixed {
	max-width: 55rem;
	padding: 1rem 0.5rem;
}

.page-spread-no-border {
	max-width: 50rem;
	padding-top: 0;
}

.page-fixed,
.page-spread,
.page-hugger {
	border: var(--b-width) solid var(--text-col);
	border-radius: var(--b-radius);
}

}




.little-form-container {
	max-width: 35rem;
	margin: auto;
}

.pb-15 {
	padding-bottom: 2rem;
}

.pb-10 {
	padding-bottom: 1rem;
}

.pt-15 {
	padding-top: 2rem;
}
.pt-10 {
	padding-top: 1rem;
}

.pl-10 {
	padding-left: 1rem;
}

.pl-15 {
	padding-left: 2rem;
}

.mb-10 {
	margin-bottom: 1rem;
}

.mt-10 {
	margin-top: 1rem;
}


.centered-text {
	text-align: center;
}

.pad-15 {
	padding: 2rem;
}

.pad-10 {
	padding: 1rem;
}

.title-pad {
	padding: 1rem 0 2rem 0;
}

.empty-pad {
	padding: 1rem 0 1rem 1rem;
}	







.tc-border {
	border: var(--b-width) solid var(--text-col);
	border-radius: var(--b-radius);
}

.accented tbody tr:hover td {
	outline: 0.2rem solid var(--accent-color);
	border-radius: 0;
	outline-offset: -0.2rem;
}

.manage-program-day-container {
	padding: 0 1rem 1rem 1rem;
	position: relative;
	margin-bottom: 1.5rem;
}

.manage-program-day-container:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.5rem;
	bottom: 0;
	border: var(--b-width) solid var(--text-col);
	border-top-left-radius: var(--b-radius);
	border-bottom-left-radius: var(--b-radius);;
	border-right-width: 0;

}

tbody .shadow td {
	background-color: var(--shadow-color);
}