@font-face {
    font-family: Roboto;
    src: url(/fonts/Roboto-Regular.ttf);
}

body {
  font-family: "Roboto";
 }

 label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  margin-top: 15px;
  font-weight: bold;
}

 .print_head1{
	width: 20%;
    display: inline-block;
    vertical-align: top;
	text-align: left;
 }
 
 .print_head2{
    width: 75%;
    display: inline-block;
    vertical-align: top;
 }
 
 .print_image{
	width:80%;
 }
 
 
 .myhr{
	margin-top: 10px;
	margin-bottom: 10px;
 }
 
 .h1, .h2, .h3, h1, h2, h3 {
    margin-top: 15px;
    margin-bottom: 12px;
}
 .white-bg{background-color:#fff}
 .no-padding{padding:0;}
 
 .toppad{margin: 0 auto;
    width: 800px;
    padding-top: 60px;}
	
 .print{
	margin: 0 auto;
	width: 800px;
 }
	
 .btn1 {margin:5px 2px}
 
 .hero-unit {
  background-color: #08486F;
  padding: 10px;
  text-align: center;
  color: #fff;
}

table tr td.line_btm {
    text-align: left;
    border-bottom: 2px solid #737373;
	
}

#ope label {
  display: block;
}	

select#StudentDobMonth, #StudentDobDay, #StudentDobYear {
  display: inline-block;
  width: 32%;
}

.navbar-top-links {
    margin-right: 0;
    position: relative;
    top: -40px;
}


.container.home{
 
  padding-top: 20px;
  width:100%;
  padding:0;
  margin:0;
}
.loginpage{
 
  background-color: #FFF;
  padding-top: 20px;
  width:100%;
  min-height:548px;
  padding:0;
  margin:0;
}

td, th {
    padding: 5px;
	}
	
#flashMessage {
  background-color: #00c0ef;
    padding: 10px 15px;
    margin: 0;
    color: #fff;
    z-index: 999999;
    width: 100%;
    position: absolute;
}

.submit {
  display: inline-block;
}

.btn-primary1{
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
  width: 140px;
}

.btn-success1 {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  width: 170px;
}

.btn-success2 {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
  width: 170px;
}

.btn-success3 {
  color: #fff;
  background-color: #B0B0B0;
  border-color: #000;
  width: 170px;
}

.pagination1 {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    position: fixed;
    left: 580px;
    top: 700px;
}

#target {
	width: 200px;
	height: 200px;
}

.caption {
display: block;
text-align: center;
font-weight: bold;
height: 40px;
}
.legend {

background: #f0f0f0;
border-radius: 4px;
bottom: 0;
position: relative;
text-align: left;
width: 100%;
margin: 0;
}
.legend li {
display: block;
float: left;
height: 20px;
margin: 0;

padding: 10px 20px;

}

.legend span.icon {

		background-position: 50% 0;
		border-radius: 2px;
		display: block;
		float: left;
		height: 16px;
		margin: 2px 10px 0 0;
		width: 16px;
}

.percentage {
fill: white;
stroke: none;
font-size: 20px;

z-index: 100;

}

.pieChart {

stroke: black;
stroke-width: 2;
}

.pie0 {
fill: red;
background-color: red;
}

.pie1 {
fill: blue;
background-color: blue;
}
.pie2 {
fill: green;
background-color: green;
}

.pie3 {
fill: yellow;
background-color: yellow;
}

.panel-info > .panel-heading {
    color: #31708f;
    background-color: #f8f8f8;
    border-color: #f8f8f8;
}

.panel-info {
    border-color: #c8c8c8;
}

a.thumbnail1:hover {
   
    background-color: #f8f8f8;
	}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}	
	
.thumbnail1 {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: background-colour .2s ease-in-out;
}

.sidebar {
   
	font-size: 16px;
}


/* Simple Chart CSS*/

.LineChart #tip {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  position: absolute;
  left: -200px;
  top: 30px;
}

.down-triangle {
  width: 0;
  height: 0;
  border-top: 10px solid #d0d0d0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  left: -200px;
}

.LineChart #highlighter {
  position: absolute;
  left: -200px;
}

.-line-chart-holder {
  float: left;
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 1px solid #cecece;/*padding: 6px;*/
}

.LineChart .legendsli { list-style: none; }

.LineChart .legendsli span {
  float: left;
  vertical-align: middle;
}

.LineChart .legendsli span.legendindicator {
  position: relative;
  top: 5px;
}

.LineChart .legendsli span.legendindicator .line {
  width: 30px;
  height: 3px;
}

.LineChart .legendsli span.legendindicator .circle {
  width: 12px;
  height: 12px;
  border-radius: 20px;
  position: relative;
  top: -5px;
  right: 20px;
}

.line-chart-legends {
  background: #E7E7E7;
  border: 1px solid #d6d7dd;
  padding: 5px;
  margin: 2px 0px;
}

.line-chart-legends ul { }

.line-chart-legends ul li {
  display: inline;
  border-right: 1px solid #d6d7dd;
  float: left;
  padding: 10px;
}

.line-chart-legends ul li:last-child { border-right: 0px; }

.line-chart-legends.vertical { margin: 0px 10px; }

.line-chart-legends.vertical ul li {
  display: block;
  border: 0px;
  border-bottom: 1px solid #d6d7dd;
}

.line-chart-legends.vertical ul li:last-child { border-bottom: 0px; }

.line-chart-Header {
  position: absolute;
  font-size: 16px;
}


.LineChart #tip {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  position: absolute;
  left: -200px;
  top: 30px;
}

.down-triangle {
  width: 0;
  height: 0;
  border-top: 10px solid #d0d0d0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  left: -200px;
}

.LineChart #highlighter {
  position: absolute;
  left: -200px;
}

.-line-chart-holder {
  float: left;
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 1px solid #cecece;/*padding: 6px;*/
}

.LineChart .legendsli { list-style: none; }

.LineChart .legendsli span {
  float: left;
  vertical-align: middle;
}

.LineChart .legendsli span.legendindicator {
  position: relative;
  top: 5px;
}

.LineChart .legendsli span.legendindicator .line {
  width: 30px;
  height: 3px;
}

.LineChart .legendsli span.legendindicator .circle {
  width: 12px;
  height: 12px;
  border-radius: 20px;
  position: relative;
  top: -5px;
  right: 20px;
}

.line-chart-legends {
  background: #E7E7E7;
  border: 1px solid #d6d7dd;
  padding: 5px;
  margin: 2px 0px;
}

.line-chart-legends ul { }

.line-chart-legends ul li {
  display: inline;
  border-right: 1px solid #d6d7dd;
  float: left;
  padding: 10px;
}

.line-chart-legends ul li:last-child { border-right: 0px; }

.line-chart-legends.vertical { margin: 0px 10px; }

.line-chart-legends.vertical ul li {
  display: block;
  border: 0px;
  border-bottom: 1px solid #d6d7dd;
}

.line-chart-legends.vertical ul li:last-child { border-bottom: 0px; }

.line-chart-Header {
  position: absolute;
  font-size: 16px;
}




div.myautoscroll:hover {
    overflow: auto;
}

div.myautoscroll:hover p {
    padding-right: 0px;
}

.no-padding{padding:0;}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.2);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/*@media print {
  body * {
    visibility: hidden;
  }
  .toppad * {
    visibility: visible;
  }
  .toppad { position: absolute; top: 40px; left: 30px; }
}*/

@media (min-width: 1400px) {	
	 ul#side-menu {
		margin-top: 120px;
		/*position: fixed;
		width: 225px;*/
		max-height: 610px;
		overflow-y: scroll;
	}
}
@media (min-width: 768px) {
	 
	ul#side-menu {
		margin-top: 120px;
		/*position: fixed;
		width: 225px;*/
		max-height: 550px;
		overflow-y: scroll;
	}
 
} 



	@media (min-width : 768px) 
and (max-width : 1024px) {
		
	.col-sm-2 {
    width: 13.666667%;}
	
	.col-sm-3 {
    width: 50%;}
	
	.col-sm-4 {
    width: 45%;}
	
	.col-sm-10 {
    width: 75.333333%;
    right: -90px;}
	
	.sidebar {
    z-index: 1;
    position: absolute;
    width: 100%;
    margin-top: 0px;
    font-size: 15px;}
	
	.hero-unit img.img-polaroid{
	width: 60px;
    height: 100px;
    position: relative;
    left: -320px;
	}
	
	
	ul#side-menu {
    margin-top: 120px;
    position: fixed;
    width: 196px;
    max-height: 520px;
    overflow-y: scroll;}
	
	.sidebar .sidebar-search {
    padding: 0px;}
	
	.hero-unit p{position: relative;
    top: -111px;
	left: 45px;
	font-size: 12px;}
  
	.hero-unit h1{
	position: relative;
    top: -111px;
	left: 41px;
	font-size: 30px;
	  }
	  
	.hero-unit ul.nav.navbar-top-links.navbar-right{
	position: relative;
    top: -135px;
    left: 30px;	
	}
	
	.toppad {
    margin: 0 auto;
    max-width: 555px;
    padding-top: 60px;
	}
	
	div#pieChart{
	position: relative;
    left: -83px;
	}
	
	.btn.btn-success1.btn1 {
    width: 140px;
	}

	
}

.chart-horiz .chart { width: 95%; padding: 25px; }

.chart-horiz .chart li {
  display: block;
  height: 17px;
  margin-top: 3px;
  position: relative
}

.chart-horiz .chart li:before {
  color: #fff;
  content: attr(title);
  left: 5px;
  position: absolute
}

.chart-horiz .chart li.title:before {
  color: #31708f;
   left: 0
}

.chart-horiz .chart li:first-child { margin-top: 0 }

.chart-horiz .chart li .bar {
  background: #006600;
  height: 100%;
  min-width: 66px
}

.chart-horiz .chart li .number {
  color: #006600;
  font-size: 12px;
  font-weight: bold;
  padding-left: 5px;
  position: absolute;
 
}
 
.chart-horiz .chart li.past1 .bar { background: #0058b3 }
.chart-horiz .chart li.past1 .number { color: #0058b3 }
.chart-horiz .chart li.past2 .bar { background: #ff0066 }
.chart-horiz .chart li.past2 .number { color: #ff0066 }
.chart-horiz .chart li.past3 .bar { background: #ff3300 }
.chart-horiz .chart li.past3 .number { color: #ff3300 }




@media (min-width: 992px) and (max-width : 1024px){
	
	.col-sm-10 {
    width: 76.333333%;
    right: -90px;}
	
	
	.hero-unit img.img-polaroid{
	width: 60px;
    height: 100px;
    position: initial;
    left: -320px;
	}
	
	
	ul#side-menu {
    margin-top: 120px;
  position: fixed;
		width: 225px;
    max-height: 520px;
    overflow-y: scroll;}
	
	.sidebar .sidebar-search {
    padding: 2px;}
	
	.hero-unit p{
	position: initial;
    top: -111px;
	left: 45px;
	font-size: 14px;}
  
	.hero-unit h1{
	position: initial;
    top: -111px;
	left: 41px;
	font-size: 35px;
	  }
	.hero-unit ul.nav.navbar-top-links.navbar-right{
	position: relative;
    top: -25px;
    left: 0px;
	}
	.toppad {
    margin: 0 auto;
    max-width: 693px;
    padding-top: 60px;
	}
	div#pieChart{
	position: relative;
    left: -54px;
	}
}

@media (min-width: 1024px) and (max-width : 1300px){
	.col-sm-2 {
    width: 22.666667%;}
	
	
	.col-sm-10 {
    width: 76.333333%;
    right: 0px;}
	
	
	.hero-unit img.img-polaroid{
	width: 60px;
    height: 100px;
    position: initial;
    left: -320px;
	}
	
	
	ul#side-menu {
    margin-top: 120px;
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow-y: scroll;}
	
	.sidebar .sidebar-search {
    padding: 2px;}
	
	.hero-unit p{
	position: initial;
    top: -111px;
	left: 45px;
	font-size: 14px;}
  
	.hero-unit h1{
	position: initial;
    top: -111px;
	left: 41px;
	font-size: 35px;
	  }
	.hero-unit ul.nav.navbar-top-links.navbar-right{
	position: relative;
    top: -25px;
    left: 0px;
	}
	.toppad {
    margin: 0 auto;
    max-width: 693px;
    padding-top: 60px;
	}
	div#pieChart{
	position: relative;
    left: -54px;
	}
}