﻿@import url('site-fonts.css');
@import url('site-base.css');
@import url('site-layout.css');
@import url('site-table.css');
@import url('site-list.css');
@import url('site-button.css');
@import url('site-form.css');
@import url('site-header.css');
@import url('site-footer.css');
@import url('site-breadcrumb.css');
@import url('site-tooltip.css');
@import url('site-modal.css');
@import url('site-datepicker.css');
@import url('site-enrollment.css');
@import url('site-hero.css');
@import url('site-student-panel.css');
@import url('site-transportation.css');
@import url('site-activity-selector.css');
@import url('site-scholarship.css');

/**
 *	Loading scope / spinner
 */
@-webkit-keyframes my-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes my-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

body:before {
	content: '';
	background-color: #fff;
	box-shadow: 0px 0px 20px 10px #fff;
	display: block;
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: -1;
	opacity: 0;
	transition: opacity .15s linear;
}

body.loading:before {
	opacity: .5;
	z-index: 1000;
}

body.modal-open {
	position: relative;
}

body.modal-open:before {
	opacity: 0;
	z-index: 1000;
}

.modal-backdrop {
	background-color: #fff;
}

.loading-scope {
	position: relative;
}
.loading-scope.loading:before {
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1000;
	opacity: .5;
}

.loading-scope.loading:before {
	background-color: #fff;
	box-shadow: 0px 0px 20px 10px #fff;
}


/** File-type */

.filetype {
	padding-left: 40px;
	position: relative;
}

	.filetype:before {
		content: "\f15b";
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
		font-size: 2rem;
		background: none;
		color: #808080;
		left: 15px;
		top: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
	}

	.filetype.pdf:before {
		content: "\f1c1";
	}

	.filetype.txt:before,
	.filetype.doc:before,
	.filetype.docx:before {
		content: "\f1c1";
	}

	.filetype.xls:before,
	.filetype.xlsx:before {
		content: "\f1c3";
	}

	.filetype.png:before,
	.filetype.jpg:before,
	.filetype.bmp:before {
		content: "\f1c5"
	}


/** Information summary */

.info-summary {
	background-color: #fafafa;
	border: 2px solid #ced4da;
	padding: 1.5rem;
	margin-top: 0;
	margin-bottom: 3rem;
}

.info-title {
	color: #495057;
	font-size: 1.2rem;
	font-weight: bold;
	display: block;
}

	.info-title .note {
		color: #808080;
		font-size: 0.75rem;
		font-weight: normal;
	}

.info-message {
	color: #495057;
	font-size: 1rem;
	font-weight: normal;
	display: block;
}

.info-title + .info-message {
	padding-top: .75rem;
	border-top: 1px solid #ced4da;
	margin-top: .75rem;
}

/** Banner */

.banner {
	background-color: rgba(255, 255, 255, .5);
	padding: 1.5rem;
	border: 5px solid #f5c445;
	margin: .5rem 0;
}



.student-information {
	padding: 1rem 0;
	margin: -3rem 0 2rem;
	position: sticky;
	position: -webkit-sticky;
	top: 0px;
	z-index: 20;
}
	.student-information:before {
		content: '';
		background: #fafafa;
		display: block;
		width: calc(100% + 40px);
		height: 100%;
		border-bottom: 1px solid #e0e0e0;
		position: absolute;
		top: 0px;
		left: -20px;
		z-index: -1;
	}
	.student-information > * {
		display: inline;
	}
	.student-information .student-registration-number {
		color: #808080;
	}

@media (min-width:576px) {
	.student-information {
		margin: -4rem 0 2rem;
	}
}
@media (min-width:768px) {
	.student-information {
		margin: -5rem 0 2rem;
	}
}
@media (min-width:992px) {
	.student-information:before {
		width: calc(3 * 100vw);
		left: -100vw;
	}
}
@media (min-width:1200px) {
	.student-information {
		margin: -6rem 0 2rem;
	}
}
@media (min-width:1350px) {
	.student-information {
		margin: -6rem 0 2rem;
	}
}
