/* ========================== login ============================= */
@font-face {
    font-family: 'Gotham Rounded Bold';
    src: url('../fonts/GothamRounded-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham Rounded Light';
    src: url('../fonts/GothamRounded-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myraid Pro';
    src: url('../fonts/MyriadProSemibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Myraid Pro Reg';
    src: url('../fonts/MYRIADPROREGULAR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Regular';
    src: url('../fonts/Roboto-Regular-webfont.woff') format('ttf');
    font-weight: normal;
    font-style: normal;
}
.mt10{margin-top:10px}
.mb10{margin-bottom:10px}
.n-label,
.btn,
.breadcrumb,
table th,
.search-text,
h3,
.page-header,
strong,
.modal,label,
.no-answer-con,
a.chosen-single,
ul.chosen-results,
.alert,.pagination{
	  font-family:"Roboto Regular" !important;
}
.a-circle,
h4.page-header,
.breadcrumb,
.dropdown-user,
.dropdown-toggle,.login-header,.panel{
	font-family:"Myraid Pro","Helvetica Neue", Helvetica, Arial, sans-serif !important;	
}
.datepicker-days{
	font-family:"Myraid Pro Reg","Helvetica Neue", Helvetica, Arial, sans-serif !important;		
}
.login-header{
	margin-top:0px;
	text-transform:uppercase;
}
.f38{
	font-size:38px;
}
.navbar-default .navbar-brand{
	font-weight:normal !important;
}
.f-bold{
	font-weight:bold;
}
.mb0{
	margin-bottom:0px;
}
h4.page-header{
	line-height:30px;
}
.breadcrumb li,
.dropdown-user li a{
	font-size:12px !important;
}
.pt10{
	padding-top:10px;
}
/*=========================================== end default ================================== */
.c-login-body{
	/*background-color:#000;*/
}

.forgot-panel{
	margin-top:30px;
	background-color:#404040;
	padding:10px 0px;
	
}
.forgot-panel a{
	color:#fff;
}
.c-panel-body{
	padding-bottom:0px;
	background-color:#000;
	padding-top:30px;
}
.c-panel{
	border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;
	-moz-border-bottom-right-radius:0px;
	-moz-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	border:none;
}
.c-logo-panel{
	margin-top:10px;
	border:1px solid #fff;	
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	-moz-border-top-left-radius:4px;
	-moz-border-top-right-radius:4px;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	border-bottom:1px solid #efefef;
}
.c-logo-panel .circle{
	padding:20px 0px;
	width:120px;
	height:120px;
	margin:10px auto;
	background-color:#efefef;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
}
/* ========================== login ============================= */

/* ========================== Dashboard ============================= */
.ds-logo{
	margin-top:-12px;
}
img.ds-logo{
	width:auto;
	height:55px;
	vertical-align:middle;
	/*margin-top:-4px;*/
}
#wrapper{
	/*background-color:#333;*/
}
.nav-custom{
	/*background-color:#333;*/
}
.nav-custom .nav > li > a{
	line-height:30px;
	font-family:"Myraid Pro Reg","Helvetica Neue", Helvetica, Arial, sans-serif !important;	
	font-size:14px;
	color:#384047;
	transition: all .3s ease-in-out; 
}
/*.nav-custom .nav > li > a:hover{
	transform: scale(1.05, 1.05);
}*/
.sidebar ul li:first-child{
	border-top:1px solid #ddd;
}
.sidebar ul li a{
	-webkit-transition: 0.3s ease-in;
  	transition: 0.3s ease-in;
}

.sidebar ul li a.active{
	/*background-color:#222;*/
}
.sidebar ul li{
	background-color:#f6f9fa;
	-webkit-transition: 0.3s ease-in;
  	transition: 0.3s ease-in;

}
.c-navbar-top{
	/*background-color:#333;*/
	/*border-color:#444*/
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
	color:#000;
	font-weight:bold;
	font-size:30px;
	text-transform:uppercase;
}
.navbar-top-links li a{
	color:#000;
	padding-top:20px !important
}
.navbar-top-links li a:hover,
.navbar-top-links li a:focus{
	background-color:#444;
}
.navbar-top-links .dropdown-user{
	/*background-color:#333;*/
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover{
	/*background-color:#444;*/
}
.navbar-top-links .dropdown-menu li a:hover,
.navbar-top-links .dropdown-menu li a:focus
{
	/*color:#fff;*/
}


/* ========================== Dashboard ============================= */


/* ========================== table fixed  header  ============================= */
.fixed-table .header-fixed {
  position: absolute;
  top: 0px;
  z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
  border-bottom: 2px solid #d5d5d5;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.fixed-table{
  display:block;
  position:relative;
}
.fixed-table th{
  padding: 8px;
  line-height: 18px;
  text-align: left;
}
.fixed-table .table-content{
  display:block;
  position: relative;
  height: 500px; /*FIX THE HEIGHT YOU NEED*/
  overflow-y: auto;
}
.fixed-table .header-copy{
  position:absolute;
  top:0;
  left:0;
}
.fixed-table .header-copy th{
  background-color:#fff;
}
.login-panel input{
	color:#fff;
}
/* ========================== table fixed  header  ============================= */
.s-1, .s-2, .s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9{
	background: url(../dist/img/icon.png) no-repeat;
}

.s-1{
	background-position: -10px -11px ;
	width: 28px;
	height: 28px;
}

.s-2{
	background-position: -60px -12px ;
	width: 28px;
	height: 28px;
}

.s-3{
	background-position: -110px -12px ;
	width: 28px;
	height: 28px;
}

.s-4{
	background-position: -160px -13px ;
	width: 28px;
	height: 28px;
}

.s-5{
	background-position: -210px -12px ;
	width: 28px;
	height: 28px;
}

.s-6{
	background-position: -260px -11px ;
	width: 28px;
	height: 28px;
}

.s-7{
	background-position: -311px -12px ;
	width: 28px;
	height: 28px;
}

.s-8{
	background-position: -359px -12px ;
	width: 28px;
	height: 28px;
}

.s-9{
	background-position: -408px -12px ;
	width: 28px;
	height: 28px;
}
.btn{
	padding:6px 12px !important;
	transition: all .2s ease-in-out !important;

}
.btn:hover{
	 transform: scale(1.04);
}
.panel { 
	transition: all .3s ease-in-out; 
	cursor:pointer;
	text-align:center;
}
.panel .circle{
	width:150px;
	height:150px;
	margin:0 auto;
	background-color:#fff;
	border-radius:50%;
	padding-top:30px;
}
.panel .circle .fa{
	color:#000;
	font-size:80px;
}

/*.panel:hover { transform: scale(1.05); }*/
.panel .full-length{
	width:100%;
	padding:10px;
	border-top:2px solid #fff;
	margin-top:10px;
}
.panel .noti{
	text-align:center;
	padding-top:18px;
}
.panel .noti span{
	font-size:20px;
}
.panel .todo{
	background-color: rgb(63,81,181);
    color: rgba(255,255,255,0.87);
    padding:5px 15px;
    text-align:left;
}
.panel h4{
	font-size:14px;
}
.panel .todo-list{
	text-align:left;
	padding-left:35px;
}
.panel .todo-list span{
	font-size:18px;
	padding-right:10px;
}
.p-1{
	background-color:#E91E63;
	color:#fff;
}
.p-2{
	background-color:#33C9DC;
	color:#fff;	
}
.p-3{
	background-color:#F44336;
	color:#fff;
}
.p-4{
	background-color:#007d71;
	color:#fff;	
}
.p-5{
	background-color:#64dd17;
	color:#fff;	
}
.p-small{
	height:160px;
}
.p-large{
	height:345px;
}
.sidebar .arrow{
	padding-top:10px;
}
a.dropdown-toggle:hover,
a.dropdown-toggle:focus{
	background-color:#efefef !important
}
.navbar.navbar, .navbar-default.navbar{
	background-color:#ffffff;
	border-bottom:1px solid #ddd
}
/* Media */
@media all and (max-width:768px) {
	.navbar .navbar-brand{
		font-size:16px
	}
	img.ds-logo{
		margin-top:-5px;
	}
	.navbar-top-links{
		float:right;
	}
	.s-clearfix{
		clear:both;
	}
}

@media all and (min-width:1200px) {
	.l-pull-right{
		float:right;
	}
	.l-min150{
		min-width:150px;
	}
}
.form-control{
	border:1px solid #ddd !important;
	background-image:none;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	padding:5px 10px;

}
.form-control:focus{
	border:1px solid #ddd;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	padding:5px 10px;

}
.input-group .input-group-addon{
	border:1px solid #ddd;

}
#side-menu .fa{
	font-size:16px;
	padding-top:6px;
}
.nav > li > a{
	/*padding-top:5px;*/
	padding-bottom:5px;
}
.btn-xs{
	padding:3px 6px !important
}
.btn-outline{
	color: inherit;
    background-color: transparent ;
    transition: all .5s;
}

.modal-content .modal-header{
	padding-top:15px;
	padding-bottom:15px;
}
.btn{
	font-size:14px !important;
	text-transform:capitalize;
}
.btn-xs{
	font-size:10px !important
}
.nav.nav-tabs li.active{
	border-bottom:2px solid #000
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede !important;
    border-color: #ebccd1 !important
}
.alert-info {
    color: #31708f !important; 
    background-color: #d9edf7 !important;
    border-color: #bce8f1 !important;
}
.btn-info {
    color: #fff !important;
    background-color: #5bc0de !important;
    border-color: #46b8da !important;
}
.btn-danger {
    color: #fff !important;
    background-color: #d9534f !important;
    border-color: #d43f3a !important;
}
.btn-warning {
    color: #fff !important;
    background-color: #f0ad4e !important;
    border-color: #eea236 !important;
}
.alert-success {
    color: #3c763d !important; 
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}
.nav-tabs{
	background-color:#ddd;
}
.nav > li > a{
	color:#000 !important
}

/*Active Not Active Step*/
a.btn-raised.active{
	background-color: #00C0EF !important;
	color: #fff !important;
	border-bottom: 2px solid #3F51B5 !important;
}
a.btn.btn-default.not-active{
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.125) inset;
}
a.btn.btn-default.not-active:hover{
	background-color: #00C0EF !important;
	color: #fff !important;
}
/*Dashboard*/
.p-0{
	border-top: 3px solid #7D669E;
	background-color: #fff;
	color: #333;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
}
.p-0.panel .full-length{
	border-top:2px solid #EEEEEE;
}
.btn.btn-default.not-active + .tooltip  > .tooltip-inner {background-color: red !important;}
/*div.p-0:before{
	height: 2px;
	width: 100%;
	display: block;
	content: " ";
	top: 0px;
	left: 0px;
	position: relative;
	animation: 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards 1 running border-expand;
	transition: all 1s cubic-bezier(0.4, 0, 1, 1) 0s;
}*/
/*div.p-0:hover:before{
	width: 100%;
	transition: all 10s cubic-bezier(0.4, 0, 1, 1) 0s;
}*/
/*.p-0-bgcolor-1:before{
	background: #000 none repeat scroll 0% 0%;
}*/
#notify-filter-panel{
	position: relative;
}
.loading-student-list{
	display: none;
	position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.07);
}
.sk-fading-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}


ul.dropdown-menu.dropdown-messages{
  width: 400px;
  min-height: 40px;
  max-height: 400px;
  overflow-y: auto;
  padding-top: 0px;
}
ul.dropdown-menu.dropdown-messages li.divider{
  margin: 0px;
}
ul.dropdown-menu li:nth-child(odd){
  padding: 10px 15px !important;
}
ul.dropdown-menu li.read{
  background-color: #f4f4f4 !important;
}
ul.dropdown-menu div.text-noti{
	font-size: 14px !important;
	color: black;
	margin-bottom: 5px;
}
ul.dropdown-menu li.divider{
  border-bottom: 1px solid #a6a6a6 !important;
}
ul.dropdown-menu .marked-read{
	cursor: pointer;
}