@charset "UTF-8";

:root{
	--scrollbar-color:150,150,150;
	--bg-color:254,254,254;
	--bg-border:224,224,224;
	--topnav-height:65px;
	--topnav-padding:10px;
	--topnav-bg:249,249,250;
	--topnav-color:50,50,50; 
	--topnav-border-color:230,230,230; 
	--topnav-zindex:100;
	--leftnav-width:350px;
	--leftdock-width:55px;
	--list-item-border-radius:6px;
	--list-item-min-height:60px;
}

*{
	margin:0px;
	padding:0px;
}

a{
	color:inherit;
	text-decoration:none;
	cursor:pointer;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

a:hover{
	color:inherit;
}

input, select{
	width:100%;
	height:50px;
	padding:12px;
	font-size:16px;
	border:1px solid rgb(var(--bg-border));
	border-radius:6px;
	background-color:rgba(var(--bg-color),0.95);
	margin-bottom:12px;
}

input[type='text'], input[type='password'],input[type='email'],select{
	margin-bottom:24px;
}

input[type='email']::placeholder{
	text-transform:capitalize;
}

input[type='submit']{
	width:auto;
}

input:focus-visible{
	outline:1px solid rgb(var(--topnav-border-color));
}

body{
	position:relative;
	z-index:0;
	font-family: 'Ubuntu', sans-serif;
	font-size:1rem;
	color:#555;
	background-color:rgb(var(--bg-color));
}

body.scroll-lock{
	overflow:hidden;
}

body.leftdock{
	padding-left:var(--leftdock-width);
}

body.leftnav{
	padding-left:var(--leftnav-width);
}

body.topnav{
	padding-top:var(--topnav-height);
}

body > div#preloader{
	position:fixed;
	z-index:200;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	line-height:100vh;
	text-align:center;
	font-size:2rem;
	background-color:rgb(var(--topnav-bg));
	opacity:0.90;
}


body > div#preloader > i{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -26.5px;
	margin-left: -26.5px;
	border: 3px solid transparent;
	border-radius: 60px;
	border-left-color: transparent !important;
	animation: loader 0.5s linear infinite;
	-webkit-animation: loader 0.5s linear infinite;
	-moz-animation: loader 0.5s linear infinite;
}

@keyframes loader {
	0% {
		transform: rotate(0deg);
		border-color: #f44336;
	}
	50% {
		transform: rotate(180deg);
		border-color: #673ab7;
	}
	100% {
		transform: rotate(360deg);
		border-color: #f44336;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border-color: #f44336;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border-color: #673ab7;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border-color: #f44336;
	}
}

@-moz-keyframes loader {
	0% {
		-moz-transform: rotate(0deg);
		border-color: #f44336;
	}
	50% {
		-moz-transform: rotate(180deg);
		border-color: #673ab7;
	}
	100% {
		-moz-transform: rotate(360deg);
		border-color: #f44336;
	}
}

.flex-align-center{
	display:flex;
	justify-content: center;
	align-items:center;
}

header#topnav{
	position:fixed;
	z-index:var(--topnav-zindex);
	left:0px;
	top:0px;
	padding:var(--topnav-padding);
	border-bottom:1px solid rgb(var(--topnav-border-color));
	color:rgb(var(--topnav-color));
	width:100%;
	height:var(--topnav-height);
	transition:0.25s;
	background-color:rgb(var(--topnav-bg));
}

header#topnav.navbar{
	padding-left:var(--leftdock-width);
}

body.leftnav header#topnav, body.leftdock header#topnav{
	padding-left:calc(var(--leftdock-width) + var(--topnav-padding));
}

header#topnav > div{
	float:left;
	height:100%;
}

header#topnav > div:not(:first-child){
	padding-left:10px;
}

header#topnav > div.brand{
	width:45%;
}

header#topnav > div.brand a{
	float:left;
	text-overflow:ellipsis;
	overflow-y:hidden;
	justify-content:left;
	flex-wrap:wrap;
	font-size:1.35rem;
	padding-left:55px;
	height:100%;
	line-height:calc(var(--topnav-height) - (var(--topnav-padding) * 2));
	background-image:url(/assets/images/CSMLogo.png);
	background-repeat:no-repeat;
	background-position:center left;
	background-size:calc(var(--topnav-height) - (var(--topnav-padding) * 3));
}

header#topnav > div.search{
	position:relative;
	width:30%;
}

header#topnav > div.search input, header#topnav > div.search button{
	width:100%;
	height:calc(var(--topnav-height) - (var(--topnav-padding) * 2));
	padding:5px 20px;
	padding-right:60px;
	border:1px solid transparent;
	border-radius:100px;
	background-color:rgb(var(--topnav-border-color));
}

header#topnav > div.search button{
	position:absolute;
	right:2px;
	top:2px;
	font-size:1.2em;
	padding:0px;
	width:calc(var(--topnav-height) - (var(--topnav-padding) * 2) + 6px);
	height:calc(var(--topnav-height) - (var(--topnav-padding) * 2) - 4px);
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
}

header#topnav > div.search button:hover{
	color:#000;
}

header#topnav > div.search input::placeholder{
	color:#777;
}

header#topnav > div.menu{
	position:relative;
	width:25%;
}

header#topnav > div.menu > nav{
	float:right;
	height:100%;
}

header#topnav > div.menu > nav > a{
	float:left;
	color:#333;
	cursor:pointer;
	width:40px;
	height:100%;
	margin-left:10px;
	font-size:20px;
	line-height:40px;
	text-align:center;
	vertical-align:middle;
	border:1px solid transparent;
	border-radius:10px;
	background-color:rgb(var(--topnav-border-color));
}

header#topnav > div.menu > nav >  a:hover, header#topnav > div.menu > nav.active >  a{
	border-color:#AAA;
}

header#topnav > div.menu > nav >  a:active{
	border-color:#555;
}

header#topnav > div.menu > nav >  a > i{
	float:left;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}

header#topnav > div.menu > nav >  a > i::before{
	line-height:calc(var(--topnav-height) - (var(--topnav-padding) * 2) - 2px);
	text-align:center;
}

header#topnav > div.menu > nav > a.home{
	font-size:18px;
}

header#topnav > div.menu > nav > a.profile{
	font-size:22px;
	background-image:none;
	background-position:center;
	background-repeat:no-repeat;
}

header#topnav > div.menu > nav nav.pane{
	position:fixed;
	z-index:50;
	top:var(--topnav-height);
	right:-350px;
	padding:5px;
	color:#555;
	height:calc(100vh - var(--topnav-height));
	width:350px;
	max-width:calc(100vw - var(--leftdock-width));
	transition:0.1s;
	background-color:rgba(var(--topnav-bg),0.97);
	border-left:1px solid rgb(var(--topnav-border-color));
	overflow-y:scroll;
}

header#topnav > div.menu > nav.active nav.pane{
	right:0px;
	transition:0.25s;
}

header#topnav > div.menu > nav nav.dropdown{
	display:none;
	position:absolute;
	right:calc(0px - var(--topnav-padding));
	top:calc(var(--topnav-height) - var(--topnav-padding) - 1px);
	padding:12px;
	color:rgb(var(--topnav-color));
	border:1px solid rgb(var(--topnav-border-color));
	background-color:rgb(var(--topnav-bg));
	width:250px;
	max-width:calc(100vw - var(--leftdock-width));
	transition:0.1s;
}

header#topnav > div.menu > nav.active nav.dropdown{
	display:block;
	transition:0.25s;	
}

header#topnav > div.menu > nav nav.dropdown > a{
	position:relative;
	float:left;
	width:100%;
	padding:4px;
	padding-left:30px;
	border:1px solid transparent;
	border-radius:8px;
}

header#topnav > div.menu > nav nav.dropdown > a:hover{
	border-color:rgb(var(--topnav-border-color));
	background-color:#F0F0F0;
}

header#topnav > div.menu > nav nav.dropdown > a:active{
	border-color:#AAA;
}

header#topnav > div.menu > nav nav.dropdown > a i{
	position:absolute;
	left:4px;
	top:8px;
}

header#topnav > a#menu{
	position:absolute;
	top:0px;
	left:0px;
	cursor:pointer;
	width:var(--leftdock-width);
	height:var(--topnav-height);
	text-align:center;
}

header#topnav > a#menu:hover{
	background-color:rgb(var(--topnav-bg));
}

header#topnav > a#menu:active{
	color:#000;
}

header#topnav > a#menu > i{
	float:none;
	font-size:24px;
	line-height:var(--topnav-height);
}


body > aside#leftnav{
	position:fixed;
	z-index:calc(var(--topnav-zindex) + 1);
	float:left;
	left:var(--leftdock-width);
	top:calc(var(--topnav-height) - 2px);
	padding-top:24px;
	padding-bottom:24px;
	width:calc(var(--leftnav-width) - var(--leftdock-width));
	height:calc(100vh + 2px - var(--topnav-height));
	transition:0.25s;
	background-color:rgb(var(--topnav-bg));
	border-right:1px solid rgb(var(--topnav-border-color));
	overflow-x:hidden;
	overflow-y:auto;
	opacity:0.97;
}

body > aside#leftnav *{
	float:left;
}

body > aside#leftnav > nav{
	position:relative;
	width:calc(100% - 1px);
	font-size:1em;
	margin-left:2px;
	border:1px solid transparent;
	border-right:0px;
	border-left:0px;
}

body > aside#leftnav > nav > a{
	position:relative;
	cursor:pointer;
	width:100%;
	color:rgb(var(--topnav-color));
	padding-top:8px;
	padding-right:10px;
	padding-bottom:8px;
	padding-left:42px;
}

body > aside#leftnav > nav > a:hover{
	color:#933 !important;
}

body > aside#leftnav > nav.dropdown > a{
	padding-right:30px;
}

body > aside#leftnav > nav > a > i{
	position:absolute;
}

body > aside#leftnav > nav > a > i:nth-child(1){
	top:11px;
	left:12px;
}

body > aside#leftnav > nav.dropdown > a > i:nth-child(2){
	top:10px;
	right:8px;
	font-size:20px;
	transform: rotate(0deg);
	transition: transform 0.1s linear;
}

body > aside#leftnav > nav.dropdown > a.active > i:nth-child(2){
	transform: rotate(180deg);
	transition: transform 0.1s linear;
}

body > aside#leftnav > nav:hover, body > aside#leftnav > nav.active{
/*	border-color:rgb(var(--topnav-border-color)); */
}

body > aside#leftnav > nav:hover > a, body > aside#leftnav > nav.active > a{
	color:rgb(var(--topnav-color));
}

body > aside#leftnav > nav.dropdown nav{
	display:none;
	width:100%;
	padding-bottom:10px;
}

body > aside#leftnav > nav.dropdown nav > a{
	position:relative;
	cursor:pointer;
	width:100%;
	font-size:0.95em;
	color:rgb(var(--topnav-color));
	padding-top:4px;
	padding-right:10px;
	padding-bottom:4px;
	padding-left:42px;
}

body > aside#leftnav > nav.dropdown nav > a:hover{
	color:#933 !important;
}

body > aside#leftnav > nav.dropdown:hover nav > a{
	color:#333;
}

body > aside#leftnav.hidden{
	display:none;
}

body > aside#leftnav.left{
	left:0px;
}

body > aside#leftdock{
	display:inline-block;
	position:fixed;
	z-index:calc(var(--topnav-zindex) + 1);
	float:left;
	left:0px;
	top:0px;
	padding-top:calc(var(--topnav-height) + 12px);
	padding-bottom:12px;
	width:var(--leftdock-width);
	height:100vh;
	transition:0.25s;
	background-color:rgb(var(--topnav-bg));
	background-color:rgb(var(--topnav-border-color));
	overflow-x:hidden;
	overflow-y:auto;
}

body > aside#leftdock.hidden{
	display:none;
}

body > aside#leftdock *{
	float:left;
}

body > aside#leftdock > a#menu{
	position:absolute;
	top:0px;
	left:0px;
	cursor:pointer;
	width:100%;
	height:var(--topnav-height);
	text-align:center;
}

body > aside#leftdock > a#menu:hover{
	background-color:rgb(var(--topnav-bg));
}

body > aside#leftdock > a#menu:active{
	color:#000;
}

body > aside#leftdock > a#menu > i{
	float:none;
	font-size:24px;
	line-height:var(--topnav-height);
}

body > div.body{
	float:left;
	width:100%;
	margin:12px 0px;
	height:auto;
	min-height:calc(100vh - 24px - var(--topnav-height));
}

/* Scrollbar */
*{
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--scrollbar-color),0.9) rgb(var(--topnav-bg));
}

*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-track {
	background-color:rgb(var(--topnav-bg));
}

*::-webkit-scrollbar-thumb {
	background-color: rgba(var(--scrollbar-color),0.8);
	border-radius: 12px;
}

form#login, form#signup, form#select-school{
	position:relative;
	z-index:10;
	width:100%;
	min-width:200px;
	max-width:400px;
	background-color:rgba(var(--bg-color),0.98);
	border:1px solid rgb(var(--bg-border));
	border-radius:6px;
	padding:24px;
	margin:100px 0px;
}

form#signup{
	max-width:500px;
}

form#select-school{
	max-width:500px;
}

form#select-school > div{
	cursor:pointer;
	margin-top:24px;
	padding:12px;
	text-align:left;
	border-radius:10px;
	border:1px solid rgb(var(--topnav-border-color));
	background-color:rgb(var(--topnav-bg));
}

form#select-school > div:hover, form#select-school > div.active{
	border-color:#AAA;
}

form#select-school > div:active{
	background-color:#F0F0F0;
}

form div.label{
	font-size:0.75em;
	margin-top:-8px;
}

div.body.profile div.profile-header{
	width:100%;
	background-color:#555;
	background-image:none;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	height:400px;
}

div.body.profile div.namestrip{
	position:relative;
	padding-left:168px;
	padding-right:64px;
	min-height:64px;
	border-bottom:1px solid #CCC;
}

div.body.profile div.namestrip div.dp{
	position:absolute;
	bottom:-1px;
	left:24px;
	width:120px;
	height:120px;
	background-color:rgba(var(--bs-white-rgb),0.9);
	border:1px solid #CCC;
	border-radius:12px;
}

div.body.profile div.namestrip div.dp:hover{
	background-color:rgba(var(--bs-white-rgb),1);
}

div.body.profile div.namestrip div.dp > i{
	display:flex;
	font-size:120px;
}

div.body.profile div.namestrip div.fullnames{
	font-size:20px;
	padding-top:6px;
	margin-bottom:-2px;
}

div.body.profile div.namestrip div.username{
	font-size:16px;
	padding-bottom:4px;
}

div.body.profile div.namestrip a.options{
	position:absolute;
	top:12px;
	right:12px;
	width:40px;
	height:40px;
	text-align:center;
	background-color:#EEE;
}

div.body.profile div.namestrip a.options:hover{
	background-color:#DDD;
}
div.body.profile div.namestrip a.options > i{
	float:left;
	font-size:24px;
	padding:8px;
}

div.body.profile div.profile-info > div{
	position:relative;
	font-size:1em;
	padding:5px;
	padding-top:10px;
	padding-left:34px;
	border-bottom: 1px solid #F5F5F5;
}

div.body.profile div.profile-info > div > i{
	position:absolute;
	left:5px;
	top:12px;
	font-size:1.2em;
}

div.body.profile div.profile-info > div > i.bi{
	top:9px;
}




section.contact ul.list-social li.social-twitter a {
	background-color:#1da1f2
}

section.contact ul.list-social li.social-twitter a:hover {
	background-color:#0d95e8
}

section.contact ul.list-social li.social-facebook a {
	background-color:#3b5998
}

section.contact ul.list-social li.social-facebook a:hover {
	background-color:#344e86
}

section.contact ul.list-social li.social-google-plus a {
	background-color:#dd4b39
}

section.contact ul.list-social li.social-google-plus a:hover {
	background-color:#d73925
}

footer {
	background-color:#222;
	padding:15px 0;
	position:relative;
	z-index:10;
	text-align:left;
	font-size:14px;
	line-height:1.4em;
	color:#AAA;
}

footer .container > div.row:nth-child(1){
	margin-bottom:20px;
}

footer p {
	font-size:inherit;
	margin-bottom:30px;
}

footer a{
	color:#FFF;
	cursor:pointer;
}

footer div.title{
	font-size:16px;
	color:#EEE;
	margin:10px 0px;
}

footer .copy{
	text-align:center;
}

footer ul li a.active, footer ul li a:active, footer ul li a:focus, footer ul li a:hover {
	text-decoration:none
}

footer span.social_grid{
	display:table-cell;
	padding-right:10px;
}

footer ul.social_icons{
	float:left;
	margin:0px;
	padding:0px;
	list-style:none;
}

footer ul.social_icons li{
	float:left;
	margin-left:10px;
	width:40px;
	height:40px;
	border:2px solid #AAA;
	border-radius:20px;
	overflow:hidden;
}

footer ul.social_icons li:hover{
	border-color:#C90;
}

footer ul.social_icons li a{
	float:left;
	width:100%;
	height:100%;
	background-image:none;
	background-position:center;
	background-repeat:no-repeat;
	background-size:40px;
}

footer ul.social_icons li a.twitter{
	background-image:url(/landing/img/social_tw.jpg);
}

footer ul.social_icons li a.facebook{
	background-image:url(/landing/img/social_fb.jpg);
}

footer ul.social_icons li a.instagram{
	background-image:url(/landing/img/social_ig.jpg);
}

footer ul.social_icons li a.whatsapp{
	background-image:url(/landing/img/social_wa.jpg);
}


@media only screen and (max-width: 1000px) {
	body.leftdock{
		padding-left:var(--leftdock-width);
	}
}

@media only screen and (max-width: 800px) {
	header#topnav div.brand a > p{
		font-size:0px;
	}
	header#topnav div.brand a > p:first-letter{
		font-size:1.35rem !important;
		text-transform:uppercase;
	}
	header#topnav div.menu nav>a.home{
		display:none !important;
	}
}

@media only screen and (max-width: 550px){
/*
	body.leftdock{
		padding-left:0px;
	}
	aside#leftdock{
		display:none;
	}
*/
	header#topnav{
/*		padding:var(--topnav-padding) !important; */
	}
	header#topnav > div.brand{
		width:55px;
	}
	header#topnav > div.brand > a p{
		display:none;
	}
	header#topnav > div.search{
		width:calc(60% - 55px);
	}
	header#topnav > div.menu{
		width:40%;
	}
}

@media only screen and (max-width: 360px){
	header#topnav > div.brand{
		display:none;
	}
	header#topnav > div.search{
		width:45%;
	}
	header#topnav > div.menu{
		width:55%;
	}
}

@media only screen and (max-width: 300px){
	header#topnav > div.search{
		display:none;
	}
	header#topnav > div.menu{
		width:100%;
	}
}

@media only screen and (max-width: 200px){
	header#topnav > div.menu{
		display:none;
	}
}

div.list-view{
	position:relative;
	float:left;
	width:100%;
}

div.list-view a{
	float:left;
}

div.list-view > a, div.list-view > div.list-item{
	position:relative;
	float:left;
	width:100%;
	min-height:var(--list-item-min-height);
	cursor:pointer;
	padding:6px;
	border:1px solid rgb(var(--bg-border));
	border-radius:var(--list-item-border-radius);
	background-color:rgb(var(--topnav-bg));
}

div.list-view > a:hover, div.list-view > div.list-item:hover{
	background-color:#FFD;
}

div.list-view > a:active, div.list-view > div.list-item:active{
	background-color:rgb(var(--bg-border));
}

div.list-view > a:not(:first-child), div.list-view > div.list-item:not(:first-child){
	margin-top:12px;
}

div.list-view div.list-item.icon{
	padding-left:calc(var(--list-item-min-height) + 12px);
}

div.list-item.icon > div.icon{
	position:absolute;
	left:0px;
	top:0px;
	text-align:center;
	width:var(--list-item-min-height);
	height:var(--list-item-min-height);
	background-color:rgb(var(--topnav-border-color));
	border-top-left-radius:var(--list-item-border-radius);
	border-bottom-left-radius:var(--list-item-border-radius);
}

div.list-item.icon > div.icon > i{
	font-size:var(--list-item-min-height);
}

div.grid-view{
	float:left;
	width:calc(100% + 12px);
	margin-left:-12px;
	margin-bottom:-12px;
}

div.row.grid-view > div{
	padding:0px;
}

div.grid-view > div > a, div.grid-view > div >  div.grid-item{
	position:relative;
	float:left;
	width:calc(100% - 12px);
	height:300px;
	padding:12px;
	margin-left:12px;
	margin-bottom:12px;
	background-color:#FAFAFA;
	border:1px solid #F0F0F0;
}

div.grid-view > div > a:hover, div.grid-view > div > div.grid-item:hover{
	background-color:#F5F5F5;
}

div.grid-view > div > a > div.grid-item{
	width:100%;
	height:100%;
}

div.grid-view div.grid-item > div.header{
	float:left;
	width:100%;
	padding:2px;
	margin-bottom:12px;
}

div.grid-view div.grid-item > div.header > div.menu{
	position:relative;
	float:right;
	width:24px;
	height:24px;
	margin-left:4px;
	border-radius:4px;
}

div.grid-view div.grid-item > div.header > div.menu:hover, div.grid-view div.grid-item > div.header > div.menu.active{
	background-color:#555;
	color:#FFF;
}

div.grid-view div.grid-item > div.header > div.menu:active{
	background-color:#000;
}

div.grid-view div.grid-item > div.header > div.menu > i{
	width:24px;
	height:24px;
	text-align:center;
	font-size:24px;
}

div.grid-view div.grid-item > div.header > div.menu > div.submenu{
	position:absolute;
	display:none;
	float:right;
	top:22px;
	right:0px;
	width:150px;
	background-color:#555;
}

div.grid-view div.grid-item > div.header > div.menu.active > div.submenu{
	display:block;
	transition:3;
}

div.grid-view div.grid-item > div.header > div.menu > div.submenu > a{
	float:right;
}

div.grid-view div.grid-item > div.icon{
	float:left;
	width:100%;
	height:100px;
	margin-bottom:12px;
	text-align:center;
}

div.grid-view div.grid-item > div.icon i{
	display:inline-flex;
	width:100px;
	height:100px;
	font-size:100px;
	border:1px solid #EEE;
	border-radius:12px;
	background-color:#F5F5F5
}

div.grid-view div.grid-item > div.actions{
	position:absolute;
	bottom:12px; 
	left:12px;
	width:calc(100% - 24px);
	height:36px;
}

div.grid-view div.grid-item > div.actions > a{
	font-size:24px;
	background-color:#F5F5F5;
	border:1px solid #EEE;
	border-radius:4px;
}

div.grid-view div.grid-item > div.actions > a:hover{
	background-color:#555;
	color:#EEE;
	border:1px solid #555;
}

div.grid-view div.grid-item > div.actions > a:active{
	background-color:#000;
}

div.grid-view div.grid-item > div.actions > a > i{
	display:inline-block;
	height:36px;
	min-width:24px;
	padding:6px;
}

div.no-record-found{
	flex-direction:column;
	width:100%;
	height:calc(100vh - 24px - var(--topnav-height));
	color:#552222;
}

div.no-record-found > i{
	display:block;
	font-size:50px;
}

div.no-record-found > span{
	font-weight:bold;
}