/* ***** Main Content ***** */

#main {
	display: block;
	width: 100%;
	background-color: #F0F0F0;
	margin: 0px;
	left: 0px;
	top: 0px;
	z-index: 0;
}
@media (prefers-color-scheme: dark) {
	#main:not(.nodarkmode) {
		background-color: #181818;
		color: white;
		text-shadow: 0px 1px 1px black;
	}
}
#main .title {
	font-family: "Celias-Bold";
	font-size: 26px;
	padding: 0px 16px 16px 16px;
	display: block;
}
#main .fancytitle {
	font-family: "GoodKarma-Regular" !important;
	font-size: 50px !important;
	padding: 0px 16px 0px 16px;
}
#main .subtitle {
	font-family: "Celias-Regular";
	font-size: 20px;
	padding: 0px 16px 16px 16px;
	display: block;
}
#main .content {
	font-family: "Celias-Regular";
	font-size: 16px;
	padding: 0px 16px 16px 16px;
}
#main .content .bignumber {
	font-family: "Celias-Bold";
	font-size: 24px;
}
#main ul {
	font-family: "Celias-Regular";
	font-size: 16px;
	padding: 0px 16px 16px 16px;
}
#main li {
	font-family: "Celias-Regular";
	font-size: 16px;
	margin: 2px 0px 2px 0px;
}
#loading {
	display: block;
	text-align: center;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.80);
	box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
	#loading:not(.nodarkmode) {
		background-color: rgba(0, 0, 0, 0.80);
	}	
}
#loading img {
	margin-left: auto;
	margin-right: auto;
	margin-top: 40vh;
	margin-bottom: 0px;
}
			
/* ***** Common Structures ***** */
.contentbox {
	background: #f9f9f9;
	font-family: "Celias-Regular";
	font-size: 16px;
	color: black;
	border: 1px solid #afafaf;
	border-radius: 10px;
	display: block;
	overflow: hidden;
	margin: 0px 0px 25px 0px;
}
@media (prefers-color-scheme: dark) {
	#main:not(.nodarkmode) .contentbox {
		background: #444444;
		color: white;
		text-shadow: 0px 1px 1px black;
	}
}
.darkbox {
	background: #444444;
	font-family: "Celias-Regular";
	font-size: 16px;
	color: white;
	text-shadow: 0px 1px 1px black;
	border: 1px solid #afafaf;
	border-radius: 10px;
	display: block;
	overflow: hidden;
	margin: 0px 0px 25px 0px;
}
.darkbox input[type=text],
.darkbox input[type=date],
.darkbox input[type=email],
.darkbox input[type=password],
.darkbox input[type=tel] { background-color: #666666; color: white; }

.darkbox a:link,
.darkbox a:visited { color: #3498db; }
.darkbox a:hover { color: #6ec5ff; }
.darkbox a:active { color: #3498db; }

/*. ***** Small Form Box ***** */
.smallform {
	background: #f9f9f9;
	border: 1px solid #afafaf;
	border-radius: 30px;
	margin: 50px auto 50px auto;
	max-width: 500px;
	padding: 20px 30px;
	display: block;
	text-align: center;
	font-size: 14px;
	font-family: "Celias-Light";
}
@media (prefers-color-scheme: dark) {
	.smallform:not(.nodarkmode) {
		background: #444444;
		color: white;
		text-shadow: 0px 1px 1px black;
	}
}
.smallform .title {
	font-family: "GoodKarma-Regular" !important;
	font-size: 40px !important;
	padding: 0px 10px !important;
}
.smallform .error {
	font-family: "Celias-RegularItalic";
	font-size: 18px;
	color:red;
}
.smallform .success {
	font-family: "Celias-RegularItalic";
	font-size: 18px;
	color:#009600;
}
.smallform .message {
	font-family: "Celias-Regular";
	font-size: 18px;
	color:#4c4c4c;
}
.smallform table {
	width: 100%;
	margin: 10px auto 10px auto;
}
.smallform table tr td { margin: 5px 0px; }
.smallform table tr td.key {
	font-family: "Celias-Regular";
	font-size: 16px;
	text-align: left;
	padding: 4px 20px 0px 0px;
}
.smallform table tr td.input {
	font-family: "Celias-Regular";
	text-align: left;
	font-size: 16px;
	padding: 5px 0px;
}
.smallform table tr td.buttons {
	font-family: "Celias-Regular";
	text-align: right;
	font-size: 16px;
}
.smallform table tr td.input input[type=checkbox] + label:after,
.smallform table tr td.input input[type=radio] + label:after {
	content:	".";
	display:	block;
	visibility: hidden;
	height:		0px;
	clear:		both;
}


/* ***** Big Form ***** */
.bigform {
	background: #f9f9f9;
	font-family: "Celias-Regular";
	font-size: 16px;
	color: black;
	border: 1px solid #afafaf;
	border-radius: 10px;
	display: block;
	overflow: hidden;
	margin: 0px 0px 25px 0px;
}
@media (prefers-color-scheme: dark) {
	.bigform:not(.nodarkmode) {
		background: #444444;
		color: white;
		text-shadow: 0px 1px 1px black;
	}
}
.bigform .title {
	font-family: "GoodKarma-Regular" !important;
	font-size: 50px !important;
	padding-bottom: 0px !important;
}
.bigform .error {
	font-family: "Celias-RegularItalic";
	font-size: 18px;
	color:red;
}
.bigform .success {
	font-family: "Celias-RegularItalic";
	font-size: 18px;
	color:#009600;
}
.bigform .message {
	font-family: "Celias-Regular";
	font-size: 18px;
	color:#4c4c4c;
}
.bigform table {
	margin: 0px auto;
}
.bigform table tr td {
	border-top: 1px solid #d8d8d8;
}
.bigform table tr td.key {
	padding: 16px 10px 6px 20px;
	text-align: left;
	font-family: "Celias-Regular";
	font-size: 16px;
	text-align: right;
	width: 35%;
}
.bigform table tr td.input {
	padding: 6px 20px 6px 10px;
	text-align: left;
	font-family: "Celias-Regular";
	font-size: 18px;
	width: 65%;
}
.bigform table tr td.input input[type=checkbox] {
	float: left;
	clear: left;
	margin: 6px 0px 0px 8px;
}
.bigform table tr td.input .hint {
	font-family: "Celias-LightItalic";
	font-size: 14px;
	overflow: hidden;
	margin-top: 5px;
	padding-left: 8px;
	display: block;
}
.bigform table tr td.input div.error {
	font-family: "Celias-MediumItalic";
	font-size: 14px;
	margin-top: 5px;
	padding-left: 8px;
	display: block;
	color: #b50000;
}
.bigform table tr td.input label {
	padding: 0px 0px 5px 5px;
}
.bigform table tr td.input input[type=radio] {
	padding: 0px 0px 5px 0px;
}
.bigform table tr td.input input[type=checkbox] + label.hint,
.bigform table tr td.input input[type=radio] + label.hint {
	padding-top: 3px;
}
.bigform table tr td.input input[type=checkbox] + label:after,
.bigform table tr td.input input[type=radio] + label:after { 
	content:	".";
	display:	block;
	visibility: hidden;  
	height:		0px;
	clear:		both;
}
.bigform table select {
	margin-top: 5px;
}
.bigform table select,
.bigform table select option {
	font-family: "Celias-Regular";
	font-size: 16px;
}
.bigform table tr td.buttons {
	padding: 6px 20px 6px 10px;
	font-family: "Celias-Regular";
	text-align: right;
	font-size: 16px;
}

/* ***** Tables ***** */
table.detailtable {
	width: 100%;
}
table.detailtable:not(:last-child) {
	margin-bottom: 15px;
}
table.detailtable tr:hover {
	background: #fafafa;
	border-bottom: 1px solid #ebebeb;
}
table.detailtable tr td {
	padding: 12px 8px 9px 8px;
	border-bottom: 1px dotted #cbcbcb;
	font-family: "Celias-Light";
}
table.detailtable tr:last-child td {
	border-bottom: 1px solid #d8d8d8 !important;
}
table.detailtable:last-child tr:last-child td {
	border-bottom: none !important;
}
table.detailtable tr td.tabletitle {
	background: #afafaf;
	color: black;
	font-family: "Celias-Bold";
	font-size: 18px;
	padding: 10px 8px 5px 8px;
	border-bottom: 1px solid #d8d8d8 !important;
}
table.detailtable tr td.heading {
	background: #d8d8d8;
	color: #5a5a5a;
	font-family: "Celias-Bold";
	font-size: 13px;
	padding: 8px 8px 3px 8px;
	text-transform: uppercase;
	border-bottom: 1px solid #b0b0b0 !important;
}
table.detailtable tr td.empty {
	background: #ffffff;
	color: #5a5a5a;
	font-family: "Celias-ThinItalic";
	font-size: 16px;
}
table.detailtable tr td:first-child { padding-left: 16px; }
table.detailtable tr td:last-child { padding-right: 16px; }
table.detailtable tr td.left	{ text-align: left;		}
table.detailtable tr td.center	{ text-align: center;	}
table.detailtable tr td.right	{ text-align: right;	}
table.detailtable tr td.red		{ color: #d40000;	}
table.detailtable tr td.blue	{ color: #0064d4;	}
table.detailtable tr td.green	{ color: #19b500;	}
table.detailtable tr td.grey	{ color: #8a8a8a;	}
@media (prefers-color-scheme: dark) {
	table.detailtable tr td.tabletitle:not(.nodarkmode) {
		background: #111111;
		color: #ffffff;
	}
	table.detailtable tr td.heading:not(.nodarkmode) {
		background: #333333;
		color: #cecece;
	}
	table.detailtable tr:hover:not(.nodarkmode) {
		background: #535353;
	}
	table.detailtable tr td:not(.nodarkmode) {
		border-bottom: 1px dotted #777777;
	}
}
/* ***** Student Card ***** */
.studentcard {
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.studentcard .profilephoto {
	text-align: center;
	margin-right: 32px;
}
.studentcard .profilephoto img {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: cover;
	-webkit-clip-path: circle(50% at 50% 50%);
	clip-path: circle(50% at 50% 50%);
}
.studentcard .profilephoto .anchor {
	display: block;
	font-family: "Celias-Light";
	text-transform: uppercase;
	font-size: 12px;
	line-height: 12px;
	margin-top: 10px;
}
.studentcard .studentdetails {
	text-align: left;
}
.studentcard .studentdetails .name {
	font-family: "GoodKarma-Regular";
	font-size: 50px;
	line-height: 30px;
	padding-top: 15px;
}
.studentcard .studentdetails .email {
	font-family: "Celias-Light";
	font-size: 20px;
	line-height: 20px;
	padding-top: 5px;
}
.studentcard .studentdetails .option {
	display: block;
	margin: 20px 0px 0px 0px;
	width: 100%;
}
.studentcard .studentdetails .option input[type=checkbox] {
	margin: 0px 5px 0px 0px;
	width: 20px;
	height: 20px;
	float:left;
}
.studentcard .studentdetails .option label.optiontitle {
	margin: 0px;
	padding: 0px;
	font-family: "Celias-Regular";
	font-size: 18px;
	display: inline-block;
}
.studentcard .studentdetails .option label.detail {
	margin: 0px;
	padding: 0px;
	font-family: "Celias-Thin";
	font-size: 15px;
	display: block;
	clear: both;
}
.studentcard .studentdetails .submit {
	text-align: right;
	display: block;
	clear: both;
}
@media screen and (max-width: 600px) {
	.studentcard {
		flex-wrap: wrap;
	}
	.studentcard .profilephoto {
		text-align: center;
		width: 100%;
		margin-right: 0px;
	}
	.studentcard .profilephoto img {
		width: 300px;
		height: 300px;
		margin: 0px auto 0px auto;
	}
	.studentcard .studentdetails {
		width: 100%;
		text-align: center;
	}
	.studentcard .studentdetails .option input[type=checkbox] {
		float: none;
	}
	.studentcard .studentdetails .submit {
		text-align: center;
	}
}
/* ***** Forms ***** */

input[type=text],
input[type=date],
input[type=email],
input[type=password],
input[type=tel],
select {
	width: 100%;
	padding: 5px 10px;
	border-radius: 10px;
	border: 1px solid #afafaf;
	font-size: 18px;
	box-sizing: border-box;
	margin-bottom: 7px;
	font-family: "Celias-Light";
}
textarea {
	width: 80vw;
	padding: 5px 10px;
	border-radius: 10px;
	border: 1px solid #afafaf;
	font-size: 18px;
	box-sizing: border-box;
	margin: 15px;
	font-family: "Celias-Light";
}

input[type=text]:focus,
input[type=date]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
textarea:focus,
select:focus {
	border: 1px solid #00c8ff;
	outline: none;
}
input[type=text].error,
input[type=email].error,
input[type=password].error,
input[type=tel].error,
textarea.error {
	border: 1px solid #b50000;
}
input[type=checkbox],
input[type=radio] {
	display: inline-block;
	width: 20px;
	height: 20px;
}
@media (prefers-color-scheme: dark) {
	#main:not(.nodarkmode) input[type=text],
	#main:not(.nodarkmode) input[type=email],
	#main:not(.nodarkmode) input[type=password],
	#main:not(.nodarkmode) input[type=tel],
	#main:not(.nodarkmode) textarea,
	#main:not(.nodarkmode) select { background-color: #666666; color: white; }
}


.selectall {
  -webkit-user-select: all; /* Covers Blink-land & Firefox (yup) */
  user-select: all; /* Someday */
}

/* ***** Generic ***** */
.clearfix {
	clear: both;
}
.clearfix:after { 
	content:	".";
	display:	block;
	visibility: hidden;  
	height:		0px;
	clear:		both;
}
.padded {
	padding: 16px;
}
.padded .title,
.padded .fancytitle,
.padded .subtitle,
.padded .content { padding-left: 0px !important; padding-right: 0px !important; }
.floatright {
	float: right;
	clear: right;
}
.floatleft {
	float: left;
	clear: left;
}
.floatcenter {
	float: center;
	clear: center;
}
.red {
	color: red !important;
}
.green {
	color: #00bf17 !important;
}
.emphasis {
	font-family: "Celias-Medium";
}
.nuance {
	font-family: "Celias-Light";
}
.centered {
	text-align: center;
}
p { margin: 10px 0px; }
p:first-child { margin-top: 0px; }
p:last-child { margin-bottom: 0px; }

a:link		, label.anchor,
a:visited	, label.anchor			{ color: #006ffd; text-decoration: none; cursor: pointer; }
a:hover		, label.anchor:hover	{ color: #3cb0ff; text-decoration: none; cursor: pointer; }
a:active	, label.anchor:active	{ color: #0378c6; text-decoration: none; cursor: pointer; }

button:not(.fc-button), .button {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 20;
	-moz-border-radius: 20;
	border-radius: 20px;
	text-shadow: 1px 1px 3px #666666;
	font-family: 'Celias-Regular';
	color: #ffffff !important;
	font-size: 16px;
	padding: 7px 20px 5px 20px;
	text-decoration: none;
	cursor:pointer;
	border: none;
	text-transform: capitalize;
	margin: 5px;
	display: inline-block;
}
button:first-child, .button:first-child { margin-left: 0px; }
button:last-child, .button:last-child { margin-right: 0px; }

button:not(.fc-button):hover, a.button:hover {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #009eff, #00659e);
	background-image: -moz-linear-gradient(top, #009eff, #00659e);
	background-image: -ms-linear-gradient(top, #009eff, #00659e);
	background-image: -o-linear-gradient(top, #009eff, #00659e);
	background-image: linear-gradient(to bottom, #009eff, #00659e);
}

@media (prefers-color-scheme: dark) {
	#main:not(.nodarkmode) a:link,
	#main:not(.nodarkmode) a:visited	, label.anchor			{ color: #3498db; }
	#main:not(.nodarkmode) a:hover		, label.anchor:hover	{ color: #6ec5ff; }
	#main:not(.nodarkmode) a:active		, label.anchor:active	{ color: #3498db; }
}