/* CSS Document
This CSS is part of Project UNICAF by Medialab®
For more details, please visit http://medialab.in
*/

#onlyPrintable { display: none; }

@media print 
{ 
	.nonPrintable {display: none; }
	#nonPrintable { display: none; } 
	#onlyPrintable { display: block; } 
	
	/* ADD OTHER NON PRINTABLE ELEMENTS */
	header { display: none; }
	#liveSearch { display: none; }
	.pageMastMenu * {display: none; }
	.floatingFooter {display: none }
}

/* DEFINE THEME */
:root {
	
		/* BG Colors */

		--ml-dull-1: #E7E7E7;
		--ml-dull-2: #DFDFDF;
		--ml-dull-3: #D3D3D3;
		
		--ml-bright-2: #008FFC;
		
		--ml-dark-1: #;
		--ml-dark-2: #424242;
		--ml-dark-3: #;
		--ml-dark-4: #04002c;
		
		/* TEXT Colors */
		--ml-text-l: #FFFFFF;
		--ml-text-d: #000000;
}


/* HHHHHHHHHHHHHHH HIGHLIGHTERS HHHHHHHHHHHHHHH */

.dull1{
	background-color:var(--ml-dull-1);
	color:var(--ml-text-d);;
}
.dull2{
	background-color:var(--ml-dull-2);
	color:var(--ml-text-d);;
}
.dull3{
	background-color:var(--ml-dull-3);
	color:var(--ml-text-d);;
}

.bright2{
	background-color:var(--ml-bright-2);
	color:var(--ml-text-l);;
}

.dark1{
	background-color:var(--ml-dark-1);
	color:var(--ml-text-l);;
}
.dark2{
	background-color:var(--ml-dark-2);
	color:var(--ml-text-l);;
}
.dark3{
	background-color:var(--ml-dark-3);
	color:var(--ml-text-l);;
}
.dark4{
	background-color:var(--ml-dark-4);
	color:var(--ml-text-l);;
}

.red{
	background-color:#F70004;
	color:#FFFFFF;
}
.green{
	background-color:#2E8B57;
	color:#FFFFFF;
}
.maroon{
    background-color:maroon;
    color:#FFFFFF;
}
.brown{
    background-color:#A52A2A;
    color:#FFFFFF;
}
.orange{
	background-color:#D36900;
	color:#FFFFFF;
}
.yellow{
	background-color:#FFFF00;
	color:#000000;
}
.isnew-1{
	background-color:#1846aa;
	color:#FFFFFF;
}
.isnew-0{
	background-color:#6e6e6e;
	color:#FFFFFF;
}

h1,h2,h3,h4,h5,h6{
	padding:5px 10px 5px 10px;
	margin-bottom:10px;
}

em{
	font-style:inherit;
}

em a{
	text-decoration:none;
	background-color:var(--ml-dark-2);
	color:var(--ml-text-l);;
	padding: 2px 5px 2px 8px;
	border-radius: 5px;
	border: 1px solid #959595;
	font-size: 0.7em;
	cursor: pointer;
	margin:10px;
	line-height: 26pt;
	white-space: nowrap;
}

em a:hover{
	background-color:#5CD113;/*var(--ml-dull-1);*/
	color:var(--ml-text-d);
}

/* ***************** NATIVE ELEMENTS **************** */

body{
	margin:0px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size:18px;	
}

a{
	color:inherit;	
}

fieldset {
    border-radius:5px;
}
legend {
    font-family: Verdana;
    font-weight: bold;
    font-size: 12px;
    color: maroon;
}	

header{
	background-color:var(--ml-bright-2);
	padding:10px;
	height:70px;
}

.headerLogo {
	height:70px;
	float:right;
}

.headerText {
	color:var(--ml-text-l);	 
}

nav {
	margin-bottom:20px;
	padding:8px 10px 8px 10px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	font-weight:bold;
	background-color:var(--ml-dark-2);
	color:var(--ml-text-l);
}

nav a, nav a:visited {
	text-decoration:none;
	padding: 2px 5px 2px 8px;
	border-radius: 5px;
	border: 1px solid #959595;
	font-size: 0.7em;
	cursor: pointer;
	margin-right:10px;
}

nav a:hover {
	background-color:var(--ml-dull-2);
	color:var(--ml-text-d);

}

.marqueeNotice {
	background-color:var(--ml-dull-1);
	color:var(--ml-text-d);
	padding:2px;
}

.notice {
    padding: 2px;
    margin: 5px;
    border-radius: 3px;
    font-size: 80%;
}

.floatingFooter {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	/*background: -webkit-linear-gradient(top, #DBD2B2, #AA9460);*/
	background-color:var(--ml-bright-2);
	text-align:left;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
	padding-top:2px;
	font-size:30px;
	z-index: 500;
}

.floatingFooter a{
	font-size:36px;
	color:var(--ml-text-d);
}

.floatingFooter a:visited{
	color:var(--ml-text-d);
}

.floatingFooter a:hover{
	border-radius: 3px;
	color: var(--ml-text-l);
/*	border: 1px solid var(--ml-text-l); */
}

.footerInfo {
	font-size:16px;
}

credits{
	font-size:.5em;
}

main{
	max-width: 720px;
	/*min-height: 720px;*/
	margin: auto;
	margin-top:10px;
	margin-bottom:60px;
	padding:16px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
/*	border-right: 1px solid #C1C1C1; */
}


/* contentList */

form {
	list-style-type: none;	

}
form li {
	margin: auto;
	margin-top:5px;
	padding:16px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
form label {
	
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color:#D0D0D0;
	font-weight:500;	
	margin-bottom:2px;
	display:block;
}

.dashboard a{
	position:relative;
	text-decoration:none;
	padding: 10px;
	margin-bottom:8px;
	/*background: -webkit-linear-gradient(top, var(--ml-color-l1), var(--ml-color-d1));*/
	background-color:var(--ml-bright-2);
	color: var(--ml-text-l);
	cursor:pointer;
	display:block;
	border-radius:5px;	
}

.dashboard a:hover{
	background-color:var(--ml-dull-1);
	color: var(--ml-text-d);
}

.fa {
	width:30px;
	/*margin-right:16px;*/
}

/* PAGEMAST */

.pageMast {
	margin-bottom:20px;
	padding:5px 10px 5px 10px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	font-weight:bold;
	background-color:var(--ml-dark-2);
	color:var(--ml-text-l);
}
.pageMast h5 {
	font-size:14px;
	display:inline;
}
.pageMast span {
	font-size: 14px;
	font-weight: bolder;
}
.pageMast span:before {
	content: " > ";
}
.pageMastMenu {
	width: 100%;
	text-align:right;
	float:right;
	display:inline;
	margin:0px auto;
}
.pageMastMenu li{
	list-style-type: none;
	display:inline;
}
.pageMastMenu a{
	text-decoration:none;
	color:#FFF;
	background-color:#62090B;
	padding: 3px 5px 3px 5px;
	border-radius:3px;
}


/* FORM ELEMENTS CSS */

/* PREFIX & SUFFIX
READ - https://codepen.io/swhdesigns/pen/bNwVgG?editors=1000
*/

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
}

.suffix input {
    border-radius: 4px 0px 0px 4px;
}
.suffix .input-group-addon {
    border-left: 0;
    border-radius: 0px 4px 4px 0px;
}
.prefix input {
    border-radius: 0px 4px 4px 0px;
	width:450px;
}
.prefix .input-group-addon {
    border-right: 0;
    border-radius: 4px 0px 0px 4px;
}
.presuffix input {
    border-radius: 0px;
}
.input-group-addon.prefix {
    border-radius: 4px 0px 0px 4px;
    border-right: 0;
}
.input-group-addon.suffix {
    border-radius: 0px 4px 4px 0px;
    border-left: 0;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

inputHint {
	font-size: 12px;
	padding-left: 5px;
	color:cornflowerblue;
}


input[type="text"],input[type="number"],input[type="password"],input[type="email"],select {
	padding:8px;
	border:none;
	border-bottom:1px solid #ccc;
	width:99%;
	font-size:inherit;
	}

/*	
input[type=radio] {
    border: 0px;
    width: 25px;
}

input[type=radio]:focus {
    border: 0px;
    width: 25px;
}

input[type=radio]:checked {
    outline: 2px solid var(--ml-bright-2);
	border-radius: 2px;
    background-color: var(--ml-bright-2);
	width: 25px;
}

input[type=checkbox] {
    border: 0px;
    width: 25px;
    height: 2em;
}

input[type=checkbox]:focus {
    border: 0px;
    width: 25px;
    height: 2em;
}

*/

@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
	border-radius:50%;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
	border-radius:50%;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

input[type=radio],input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  /*top: 13.33333px;*/
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  /*border: none;*/
  border: 1px solid #a1a1a1;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 10;
}
input[type=radio]{
border-radius:50%;
}

input[type=checkbox]{
	border-radius:20%;
	}

input[type=radio]:hover,input[type=checkbox]:hover {
  background: #9faab7;
  /*border-color: var(--ml-bright-2);*/
}
input[type=radio]:checked,input[type=checkbox]:checked {
  background: var(--ml-bright-2);
}
input[type=radio]:checked::before,input[type=checkbox]:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '✔';
  display: inline-block;
  font-size: 26px;
  text-align: center;
  line-height: 40px;
}
input[type=radio]:checked::after,input[type=checkbox]:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: var(--ml-bright-2);
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

/*
input[type=radio].radio {
  border-radius: 50%;
}
input[type=radio].radio::after {
  border-radius: 50%;
}
*/


button{
	padding: 10px 15px 10px 15px;
	min-width: 100px;
	border-radius: 5px;
	border: 1px solid #959595;
	font-size: inherit;
	cursor: pointer;
	margin-right:10px;
	margin-bottom: 10px;
}

button:hover{
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

button a{
	text-decoration:none;
}

button[type=submit]{
	width:100%;
	padding: 10px;
	margin: 16px 0px 8px 0px;	
	/*background: -webkit-linear-gradient(top, var(--ml-color-l1), var(--ml-color-d1));*/
	/*background-color:var(--ml-bright-2);*/
	background: -webkit-linear-gradient(#1B72D5,#1C40B5);
	background: linear-gradient(#1B72D5,#1C40B5);
	border-bottom:teal 5px solid;
	color: white;
	display:block;
	box-shadow: 0 6px 6px #575656;
}

button[type=submit]:hover{
	/* background-color:var(--ml-dark-4); */

	background: -webkit-linear-gradient(#1B72D5,#1C40B5);
	background: linear-gradient(#1B72D5,#1C40B5);
	border-bottom: chartreuse 5px solid;
}
button[type=submit]:active {
	background: #424242;
	box-shadow: none;
  }


:checked + span {
	font-weight:bold;
	color:#900;
}

textarea {
	padding:8px;
	width:100%;
	font-family:inherit;
	font-size:inherit;
	}

/* TABLE dataTable CSS */

.dataTable {
	margin:0 auto;padding:0px;
	width:100%;
}
.dataTable table{
  border-collapse: collapse;
  border-spacing: 0;
	width:100%;
	margin:0px;padding:0px;
}

.dataTable tr:hover td{
	background-color:var(--ml-dull-3);	
}

.dataTable tr:nth-child(odd){
	background-color:var(--ml-dull-1);
	}

.dataTable tr:nth-child(even){
	background-color:#ffffff;
}

.dataTable td{
	vertical-align:middle;
	text-align:left;
	padding:7px;
	padding-left:8px;
	font-weight:normal;
}
.dataTable tr th{
	background-color:var(--ml-bright-2);
	text-align:center;
	font-weight:bold;
	color:var(--ml-text-l);
	height:50px;
}

/* TABLE printTable CSS */

.printTable {
	margin:0 auto;padding:0px;
	width:750px;
}
.printTable table{
  border-collapse: collapse;
  border-spacing: 0;
	width:100%;
	margin:0px;padding:0px;
}

.printTable tr:hover td{
	background-color:var(--ml-dull-3);	
}

.printTable tr:nth-child(odd){
	background-color:var(--ml-dull-1);
	}

.printTable tr:nth-child(even){
	background-color:#ffffff;
}

.printTable td{
	vertical-align:middle;
	text-align:left;
	padding:7px;
	padding-left:8px;
	font-weight:normal;
}
.printTable tr th{
	background-color:var(--ml-bright-2);
	text-align:center;
	font-weight:bold;
	color:var(--ml-text-l);
	height:50px;
}

/* PTC Classes */
    messageCard {
        display: block;
        margin: 10px;
        padding: 10px;
        border: 1px solid navy;
        border-radius: 10px;
    }
    messageCard:hover {
        background-color: navy;
        color: white;
    }
    messageCard a {
        text-decoration: none;
        display: block;
    }
    
    messageCard cardNote{
        font-size: 10px;
        /*color: grey;*/
    }
        messageCard.kv {
        background-color: #005f69;
        color: white;
    }
    messageCard.kv:hover {
        background-color: #002244;
        color: white;
    }
    messageCard.employee {
        background-color: #8DA399;
    }
    messageCard.employee:hover {
        background-color: #002244;
        color: white;
    }    
    messageCard.student {
        background-color: #B9D9EB;
    }
    messageCard.student:hover {
        background-color: #002244;
        color: white;
    }
    messageCard.you {
        background-color: #660000;
        color: white;
    }
    messageCard.you:hover {
        background-color: #002244;
        color: white;
    }
    messageCard.topic {
        background-color: #00563B;
        color: white;
    }
    
    
    .floatingHeader {
    position: sticky;
    top: 0;
    }

    .floatingHeader th {
    background-color:#292929;
    color:white;
    }

    .floatingHeader tr th {
    background-color:#292929;
    color:white;
    }