.box-header h1 { font-size:28px!important;
				font-weight: 600;}
				
h2 { font-size: 25px;
    font-weight: 600;
}

.kkelsupport {
	float: left;
	padding: 11px;
    display: block;
    margin-left: 200px;
	color:white;
	font-size: 16px;
	text-align:center;
}

.ssoclass  a{
	float: left;
        position: relative;
        padding: 14px;
        color: white!important;
}				

.ssoclass  a:hover {
	background-color: #3277a1;
	text-decoration: none;
	color : white;
}

.btn-success a { color : white; }

.loginoutbox{
	    margin-top: 94px;
		
}

.logobox img {
	display:flex;
	border-radius: 13px;
    border: 7px solid white;
    margin: 0 auto;
	width: 199px;
    height: 82px;
}

.logobox-kkel img{
	width: 170px;
    display: flex;
    margin: 0 auto;
}


.ui-tour-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    fill: rgba(0, 0, 0, 0.5);
}


/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and  (max-width: 750px),(max-device-width: 750px)
    {
		.loginoutbox{
			margin-left: 0px;
		}

		.sidebar-toggle {
			margin-top: 64px;
		}
		.main-header {
			margin-bottom: 64px;
		}
		.sidebar-menu {
			margin-top: 100px;
		}

		.mobileonly .kkelsupport {
			width:285px;
			margin-left: 0px;
		}
		
		.mobileonly table{
			display:block;
		}
		
		.mobileonly thead {display:block;}
		 
		.mobileonly tbody {display:block;}
		.mobileonly td  {display:block;}
		.mobileonly th {display:block;}
		.mobileonly tr {display:block;}
		
		.mobileonly thead tr {
			display : none;
		}
		
		.mobileonly tr:nth-child(odd){
			background-color:#ccc;
		}
		
		.mobileonly tr {
			margin:0 0 1rem 0;
		}
		
		.mobileonly td {
			position:relative;
			padding-left : 50%!important;
			word-wrap: break-word;
		}
		
		.mobileonly td.rowlesson a:nth-child(2){ display:none; }
		.mobileonly td.rowlesson a:nth-child(3){ display:none; }
		
		
		.mobileonly td:before {
			position : absolute;
			width : 45%;
			top :0;
			left : 6px;
			padding-right:10px;
			white-space : nowrap;
		}
		
		.mobileonly td.rowlesson:nth-of-type(1):before { content : "S.No." }
		.mobileonly td.rowlesson:nth-of-type(2):before { content : "Syllabus" }
		.mobileonly td.rowlesson:nth-of-type(3):before { content : "Grade" }
		.mobileonly td.rowlesson:nth-of-type(4):before { content : "Subject" }
		.mobileonly td.rowlesson:nth-of-type(5):before { content : "Lesson" }
		.mobileonly td.rowlesson:nth-of-type(7):before { content : "Options" }
		
		.hideaddlesson { display:none!important;}
		
		.mobileonly td.rowuser:nth-of-type(1):before { content : "S.No." }
		.mobileonly td.rowuser:nth-of-type(2):before { content : "Name" }
		.mobileonly td.rowuser:nth-of-type(3):before { content : "Email" }
		.mobileonly td.rowuser:nth-of-type(4):before { content : "Role" }
		.mobileonly td.rowuser:nth-of-type(5):before { content : "Options" }
		
		.mobileonly td.rowquiz:nth-of-type(1):before { content : "S.No." }
		.mobileonly td.rowquiz:nth-of-type(2):before { content : "Name" }
		.mobileonly td.rowquiz:nth-of-type(3):before { content : "Attempts Allowed" }
		.mobileonly td.rowquiz:nth-of-type(4):before { content : "Open Date" }
		.mobileonly td.rowquiz:nth-of-type(5):before { content : "Close Date" }
		.mobileonly td.rowquiz:nth-of-type(6):before { content : "Options" }
	}
	
.viewlessonform label { font-size : 17px;}	

#questionboxModal .modal-body {     max-height: 450px;
    overflow-y: scroll;
    display: block;}
	
	
.thumb {
    width: 50px;
    height: 50px;
    float: none;
    position: relative;
    top: 7px;
}
form .progress {
    line-height: 15px;
}
}
.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}
.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

.sidebar-menu { white-space: normal;}

.frameworkimg{ margin: 20px 0px; 
			 display:block;	}

.frameworkimg img { max-width:100%;  }

.sidebar-menu img{
	width: 18px;
    margin-right: 3px;
    border-radius: 10px;
    background-color: #b8c7ce;
}

.table{
   border:1px solid #337ab7;!important
}
.table>thead>tr>th {
   border:1px solid #337ab7;!important
}
.table>tbody>tr>td {
   border:1px solid #337ab7;!important
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after {
   content: "\e253";
color:black;
}

table.dataTable thead .sorting_desc::after {
   content: "\e252";
color:black;
}

.headingfontstyle {
	font-size: 25px;
	font-weight: 600;
}

.viewlanguageform  label {
	margin-left: 10px;
}

.viewlanguageform  div>div>div {
	margin-left: 10px;
}

.logininformationbox p{margin: 0 auto;
    width: 500px;
    margin-top: 150px;
    color: red;
    font-size: 18px;
    text-align: center;}

	.yearDropDown{
		float: left;
	padding: 11px;
    display: block;
    margin-left: 200px;
	font-size: 16px;
	text-align:center;
	}