@font-face {

    font-family: DroidArabicKufi;

    src: url(fonts/DroidArabicKufi-Regular.ttf) format("truetype"), url(fonts/DroidArabicKufi-Regular.woff) format("woff");

}

@media print {

    .no-print,

    .no-print * {

        display: none !important;

    }

}

body {

    background: #ebebec;

    font: 11pt/18px DroidArabicKufi, locator-web, Locator, Arial, sans-serif;

}

#main-wrap {

    width: 100%;

}

#wrap {

    background: none repeat scroll 0 0 #fff;

    border-color: #0078d4 #cacaca #cacaca;

    border-radius: 6px;

    border-style: solid;

    border-width: 5px 1px 1px;

    box-shadow: 0 0 4px 0 #c4c4c4;

    margin: 10px auto 10px;

    min-height: 420px;

    overflow: hidden;

    position: relative;

    max-width: 1100px;

}

.myschoollogo {

	float:left;

}

.otherschoollogo {

	float:right;

}

.logo {

	width: 12%;

	height: 95%;

	float: right;

	background-image: url('img/logo.png');

	background-repeat: no-repeat;

	background-size: cover;

}

.school-name {

	 width:76% ;

	 height:99% ;

	 float: right;

}

#header #left {

  height: 110px;

  float: left;

  margin: -6px;

}

#header #right {

	margin: 8px 8px;

	height: 90px;

}

#header #name {

 vertical-align: middle;

 margin: auto;

}

#header-wrap {

	background-color:#0078d4;

	margin: 0 auto;

    width: 1100px;

    height: 105px;

}

#toolbar {

	background-color:#efeff0;

	margin: 10px auto 0;

    width: 1096px;

    height: 40px;

	border: 2px solid #0078d4;



}



#toolbar .btn {

	padding:0px;

}



#toolbar .btn span{

	padding:0px;

}



#search-bar {

	width:50%;

	display:block;

	float: right;

	padding: 3px 0px 0px 0px;

}



#search-bar .fa-search{

	width: auto;

	padding: 0px 10px;

	height: auto;

}



#search-bar #home-icon{

	float: inherit;

	padding: 3px 8px 0px 0px;

}



#search-bar-form {

	float: inherit;

	margin-right:10px;

}



#user-info {

	width:45%;

	display:block;

	padding: 6px 11px;

	float:left;

}



#user-info-inner-div {

	float:inherit;

	padding-top: 5px;

}



#user-info a, #user-info span {

	float:left;

	margin-right: 10px;

}



#toolbar a {

	color: #0078d4;

}



#toolbar a .fa-power-off {

	color: red;

}



#toolbar a .fa-unlock {

	color: #ec971f;

}



/************** main-form **************/

.main-form {

	width: 100%;

	float: right;

}

.main-form-label {

	width: 14%;

	float: right;

	padding-left: 1%;

	line-height: 25px;

	text-align: left;

}

.main-form-input {

	width: 35%;

	float: right;

}

/************** main-form **************/



#line {

	background: #0078d4;;

    height: 25px;

    margin:0 auto;

    width: 1100px;

}



.menu {

	float: right;

    padding: 0 10px;

    width: 90%;

}

/* center */

#center{

	margin-bottom: 10px;

    min-height: 478px;

    overflow: auto;

    width: 100%;

}

/* content */

#content{

	border-bottom: 1px solid #cacaca;

    border-left: 1px solid #cacaca;

    border-radius: 4px;

    border-right: 1px solid #cacaca;

    /*float: right;*/

    height: 100%;

    margin: 10px;

    /*width: 74%;*/

}

/* design **/

#content index{

	padding: 0;

}

#content index ul {

    margin-right: 20px;

}

ol, ul {

    list-style: outside none none;

}

.container_12 .grid_3 {

    width: 220px;

}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {

    display: inline;

    float: right;

    margin-bottom: 20px;

    margin-left: 70px;

    width: 280px;

}

.service-end-line {

	margin-left: 0px !important;

}

.color_0 {

    background-color: #78ba00 !important;



}

.color_1 {

    background-color: #ae113d !important;



}

.color_2 {

    background-color: #2673ec !important;



}

.color_3 {

    background-color: #4617b4 !important;



}

.color_4 {

    background-color: #f4b300 !important;



}

.icon {

    cursor: pointer;

    display: block;

    float: right;

    height: 35px !important;

    margin-left: 20px;

    transition: all 0.2s ease 0s;

    width: 40px;

    border-radius: 5px;

	color: white;

	font-size: 30px;

	text-align: center;

	padding-top: 5px;

}

.icon-disabled{

	background-color: #aeada9 !important;

	border-color: #aeada9 !important;

	cursor: not-allowed;

}



.btn-disabled{

	cursor: not-allowed;

}

.eservices-eservices {

    background-position: 0 -900px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_ta3llom {

    background-position: -90px -1350px;

    height: 40px;

    width: 40px;

         margin-left: 19px;



}

.eservices-students_arabic_inst {

    background-position: -90px -540px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-accsisbility_strudent {

    background-position: 0 -180px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-el3b2_attadresis {

    background-position: 0 -720px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-estektab_mobta3theen {

    background-position: 0 -1080px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_acssept {

    background-position: -90px -450px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_shakawa {

    background-position: -90px -1260px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-kobool_high_studies {

    background-position: 0 -1350px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_py {

    background-position: -90px -1080px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_cv {

    background-position: -90px -630px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.eservices-students_mail {

    background-position: -90px -900px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}

.service h1, .service h2, .service h3, .service h4, .service h5, .service h6 {

    border-bottom: 1px dashed #dddddd;

    color: #444;

    margin-bottom: 0;

    padding-bottom: 5px;

    padding-top: 0;

}

.service h1 {

    font-size: 17px !important;

}

.service a {

    font-size: 29px !important;

}

.service p {

    margin-top: 8px;

    text-align: justify;

	height: 60px;

}

.service h4, .service h1 {

    font-size: 20px !important;

    height: 43px;

    line-height: 34px;

}

.eservices-students_hr {

    background-position: -90px -1170px;

    height: 40px;

    width: 40px;

     margin-left: 19px;

}





/* design **/

#sub-content{

	/*float: right;*/

    padding: 10px;

    /*width: 96.5%;*/

	min-height: 337px;

	overflow-y: hidden;

}

	

	/*border:thin solid black;*/



/* righSide */

#rightSide{

	float: right;

    margin: 10px 0;

    width: 23%;

}



#rightSide .box-header {

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

    color: #0078d4;

    width: 80%;

}



/* box header */

.box-header {

	background-color: #0078d4;

    border-bottom: 1px solid #dedede;

    border-radius: 3px 3px 0 0;

    color: #fff;

    height: 25px;

    padding: 10px 6px 3px 0px;

}

.box-header a{

	text-decoration:none;

	color:#fff;

}



.subTitle {

    padding: 5px 5px;

    text-align: center;

	width: 150px;

	height: 19px;

	/*padding-right: 10px !important;*/

}





#home-page{

	color:#0078d4;



}



/* CSS menu */



.menu ul {

  	list-style-type: none;

    margin: 0;

    padding: 0 10px 0 0;

    width: 80%;

	

}



.menu ul li a {

    color: #666 !important;

    display: block;

    height: 100%;

    padding: 8px 15px 8px 0;

    text-decoration: none;

    width: 90%;

}

 

.menu ul li a:visited {

    color: black;

}

 

.menu ul li  {

    border-bottom: 1px solid #e2e2e2;

}



.menu ul li a:hover {

	background:none repeat scroll 0 0 #eaeaea;

	color:#0078d4 !important;

}



#footer{

    background: #0078d4;

    height: 40px;

    margin: 0 auto;

    width: 1100px;



}



 /* footer */

 #footer-wrap{ 

    color: #fff;

    font-size: 18px;

    height: 100%;

    margin: 0 auto;

    width: 100%;

}



.helper {

    display: inline-block;

    height: 100%;

    vertical-align: middle;

}



#r_logo {

	height: 50px;

    margin: 4px 0 0 10px;

}



#alenalogo {

	height: 50px;

    margin: 4px 10px 0 0;

}



.btn {

    background-color: #0078d4;

    border-color: #0078d4;

    color: #ffffff;

	/*height: 30px;*/

	width: 150px;

	font-family: FontAwesome;

	font-size: 11pt;

	border-style: solid;

	border-width: 1px;

	border-radius: 4px;

	padding: 4px 0px;

}



.mini-btn {

    color: #ffffff;

	border-style: solid;

	border-width: 1px;

	border-radius: 4px;

	padding: 4px 10px;

	margin: 2px;

}

.btn span {

	font-family: "DroidArabicKufi";

	padding: 0px 10px 5px 10px;

}

.btn-save {

	background-color: #5cb85c;

	border-color: #4cae4c;

}

.btn-print {

	background-color: #66003b;

	border-color: #66003b;

}

.btn-delete {

	background-color: #930e17;

	border-color: #930e17;

}

.btn-view {

	background-color: #0078d4;

	border-color: #0078d4;

}

.btn-add {

	background-color: #0078d4;

	border-color: #0078d4;

}

.btn-new {

	background-color: #e04304;

	border-color: #e04304;

}

.btn-back {

	background-color: #ec971f;

	border-color: #d58512;

}

.btn-warning-disabled{

	background: none repeat scroll 0 0 #0078d4 !important;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    font: inherit;

    margin-top: 5px;

    padding: 3px 10px;

}



/* input style *********/

input[disabled],

select[disabled],

textarea[disabled],

input[readonly],

select[readonly],

textarea[readonly] {

  cursor: not-allowed;

  background-color:#ebebec;

  border-color: #ddd;

  

}



/*   taaaaabs*/







ul.tabs{

    /*padding: 7px 0;*/

    margin:0;

    list-style-type: none;

    text-align: left; 

}        

ul.tabs li

{

    display: inline;

    margin: 0;

    margin-right:3px; 

	float:right;

}      

ul.tabs li a

{

	float:right;

    text-decoration: none;

    position: relative;

    padding: 7px  74px;

    border: 1px solid #CCC;

    border-bottom-color:#b7b7b7;

    color: #000;

    background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;

    border-radius: 3px 3px 0 0;

    outline:none;

 }        

ul.tabs li a:visited

{

	color: #000;

}

ul.tabs li a:hover

{

	color: #fff;

	border: 1px solid #B7B7B7;

   background: none repeat scroll 0 0 #0078d4 !important;

}

ul.tabs li.selected a, ul.tabs li.selected a:hover

{

    position: relative;

    top: 0px;

    font-weight:bold;

    background:none repeat scroll 0 0 #0078d4 !important;

    border: 1px solid #B7B7B7;

    border-bottom-color: white;

   }      

ul.tabs li.selected a:hover

{

	text-decoration: none;

}





div.tabcontents{

   border: 1px solid #eaeaea;

    border-radius: 3px;

    margin-bottom: 20px;

}

/* fees table */



.feesTable tr

{

	width:100%;

	height:5px;

	

	

}

input[type=submit], button{

	cursor:pointer	

}



.feesTable input[type=text], .feesTable select, .feesTable input[readonly], feesTable select[readonly]





{

	width:90%;

	height:10px;

	

}

.feesTable td

{

	height:5px;

}



.feesTable table {

	width: 100%;

}



table {

	font-size: 100%; /* IE hack */

	width:100%;

	border-spacing: 0px;

	border-collapse: collapse;

	margin-top: 5px;

}



.my-table tr {

    border-top: 1px solid #ddd;

}



.my-table tr:last-child {

    border-bottom: 1px solid #ddd;

}



.my-table tr:nth-child(even), .my-table th {

	background-color: #f7f7f7;

}



/* search table lay out */

.my-table td, th{

    text-align: center;

    border-left: 1px solid #ddd;

}



.my-table td, th{

    text-align: center;

    border-left: 1px solid #ddd;

	height: 34px;

}



.my-table td:first-child, th:first-child{

	border-right: 1px solid #ddd;

}



.tableSubHeader{

	background-color: #d6d6d6;

    border: 2px solid #006e9e;

    color: #006e9e; 

}



.tablelayout td

{

	display:inline;

}

.StdFees tr{

	width:100%;

}



/* regester table ****/



#regTable{

	

}

#regTable table th{

  border: none;

  /*text-align: left;*/

  padding: 6px;

}

#regTable table td {

  border: none;

  /*text-align: left;*/

  padding: 6px;

}







.regTable tr{

	width:100%;

}



/*.regTable input[type="text"], .regTable select 

{

	width:100%;

	height:20px;

	

}*/



.regLabel {

	padding-left: 5px;

    text-align: left;

    width: 20%;

}



.rptLabel {

	padding-left: 5px;

    text-align: left;

    width: 10%;

}



.rptcmb {

    width: 30%;

}



.ChPassLabel {

    width: 30%;

}



.warrning {

	font-weight:normal;

	color:red;

	font-size:large;



}

.tabsTabel tr {

	width:100%

}

.tabsTabel td {

	height: 30%;

    text-align: center;

    width: 20%;

	

}



.innerFields {

	width:35%;

}



.ChInnerField {

	width:25%;

}



.StdFees input[type=text] {

	width: 87%;

}



input, select {

	border: 1px solid #dddddd !important;

    width: 96%;

	height: 25px;

	border-radius: 4px;

	margin: 3px 0px;

	font-family: "DroidArabicKufi";

	/*box-shadow: 0px 0px 5px 1px #8a8484 !important;*/

}



input:focus, select:focus {

	box-shadow: 0px 0px 3px 1px #0078d4 !important;

}



input[type=radio],input[type=checkbox] {

	/*width: 10% !important;*/

	height: auto;

	margin: 10px 0px;

	max-width: 30px;

}



.StdFees .regLabel {

	width: 15%;

}



input[disabled], textarea[disabled], input[readonly], textarea[readonly] {

	border: 1px solid #dddddd !important;

	width:97%;

	cursor:not-allowed;	



}



.perTable

{

	margin-top: 10px;

}



.border_bottom td {

	BORDER-RIGHT: #808080 3px solid; 

	BORDER-TOP: #808080 3px solid; 

	FONT-WEIGHT: bold; 

	FONT-SIZE: 12px; 

	BORDER-LEFT: #808080 3px solid; 

	COLOR: #000000; BORDER-BOTTOM: #808080 3px solid; 

	padding:4px;

	BACKGROUND-COLOR: #d1cdcd;

	margin-left:500px;

	text-align:center;

}



.setListNo {

	text-align: center;

    width: 5%;

}



.setListName {

	width: 70%;

}



.setListEditDel {

	text-align: center;

    width: 15%;

}

.wrongLabel

{

color:red;	

}

a{

	text-decoration:none;

}

/* ************************* */

ul {

  	list-style-type: none;

}

.reports a{

	text-decoration:none;

	color:#0078d4;

}



.parts input, .parts{

	text-align:center;

	width:100%

}



.tdAlignRight {

	text-align:right;

}

.tabcontents .tablelayout {

    background-color: transparent;

}

.massage{

	width:48% ; 

	border:1px silver dashed;



}

.title{

	 width: 96.5%;



}



.pg-normal {

    color: black;

    font-weight: normal;

    text-decoration: none;    

    cursor: pointer;    

}

.pg-selected {

    color: black;

    font-weight: bold;        

    text-decoration: underline;

    cursor: pointer;

    background-color:#d2ebfd;

}

.ban{

	margin:0 auto;

	background-color: #e0e0e0;

    border-bottom: 1px solid #dedede;

    border-radius:0 0 40px 40px;

    margin-top:-11px;

    width:400px;

    height:29px;

    margin-bottom:15px;

	text-align: center;

}

.ban table{

    width:80% !important;

}





.mybuttons{

padding: 0;

border: none;

background: none;

color: inherit;

margin: 0px 10px;

}



.mybuttons[disabled]{

	cursor:not-allowed;	

}

/*   **************  */

#StaffMang {

	width:32%;

	float:right;

	margin-right:17px;

}

#StaffForm{

	width:65%;

	float:right

}

#AddStaff {

	width:49%;

	float:right;

	height: 69px;

	margin-left: 4px;

}

#StaffAttend{

	width:49%;

	float:right;

	height: 69px;

}

/* ************************   WAAAAAAAAAAAAAAAFI Styyyyyle   *****************/

.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }

.autocomplete-suggestion { padding: 10px 5px; font-size:11px; white-space: nowrap; overflow: hidden; }

.autocomplete-selected { background: #f0f0f0; }

.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }

.loading{

    background: #ddd none repeat scroll 0 0;

    display: none;

    left: 3%;

	right: 0;

    min-height: 300px;

    opacity: 0.97;

    padding: 11px;

    position: absolute;

    top: 50px;

    width: 70%; 

	margin: 0 auto;

    }

#invoiceTable td{

	padding: 5px 10px;

    vertical-align: middle;

    background-color: #fafafa;

	line-height: 1.429 ;

	cursor: pointer;



}

.invoicetd{

	float:none !important;

	width:auto !important;

	text-align:center;

	cursor: pointer;



}

.invoicetd a{

	color: #000;

}



#invoiceTable{

	background-color: #e6ecef;

    border: 1px solid #ccc;

    border-radius: 4px;

    font-size: 0.9em;

    margin-bottom: 24px;

}



.status-paid {

    background-color: #498302;

    padding:10px;

}

.invstatus {

    display: block;

    font-size: 0.9em;

    line-height: 22px;

    padding:5px;

}

.label {

    border-radius: 0;

}

.label {

    color: #fff;

    font-size: 75%;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    vertical-align: baseline;

    white-space: nowrap;

}

/*.MyForm input:focus:valid{ /* when a field is considered invalid by the browser 

    background: #fff ;

    box-shadow: 0 0 5px #5cd053;

    border-color: #28921f;

 }*/

.invalid{ /* when a field is considered invalid by the browser */

	background:#fff url(img/invalid.png) no-repeat fixed right center ;

    box-shadow: 0 0 5px #d45252;

    border-color: #b03535

}

.header{

	

	background:aqua;

}

/* Just some base styles not needed for example to function */



body, form, ul, li, p, h1, h2, h3, h4, h5

{

	margin: 0;

	padding: 0;

}

body { color: #000000; margin: 0; }

img { border: none; }

p

{

	font-size: 1em;

	margin: 0 0 1em 0;

}



html { font-size: 100%; /* IE hack */ }

	

/* CSS Tree menu styles */

ol.tree

{

	padding: 0 0 0 30px;

	margin: 0;

}

	li 

	{ 

		position: relative; 

		margin-left: -15px;

		list-style: none;

	}

	li.file

	{

		margin-left: -1px !important;

	}

		li.file a

		{

			background: url(img/document.png) 0 0 no-repeat;

			color: #000000;

			padding-left: 21px;

			text-decoration: none;

			display: block;

		}

		li.file a[href *= '.pdf']	{ background: url(img/document.png) 0 0 no-repeat; }

		li.file a[href *= '.html']	{ background: url(img/document.png) 0 0 no-repeat; }

		li.file a[href $= '.css']	{ background: url(img/document.png) 0 0 no-repeat; }

		li.file a[href $= '.js']		{ background: url(img/document.png) 0 0 no-repeat; }

	li input

	{

		position: absolute;

		left: 0;

		margin-left: 0;

		opacity: 0;

		z-index: 2;

		cursor: pointer;

		height: 1em;

		width: 1em;

		top: 0;

	}

		li input + ol

		{

			background: url(img/toggle-small-expand.png) 40px 0 no-repeat;

			margin: -0.938em 0 0 -44px; /* 15px */

			height: 1em;

		}

		li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

	li label

	{

		background: url(img/folder-horizontal.png) 15px 1px no-repeat;

		cursor: pointer;

		display: block;

		padding-left: 37px;

		text-align: left;

	}



	li input:checked + ol

	{

		background: url(img/toggle-small.png) 40px 5px no-repeat;

		margin: -1.25em 0 0 -44px; /* 20px */

		padding: 1.563em 0 0 80px;

		height: auto;

	}

		li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}

		li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }

		

		

/* **************** User Permissions Style DOWN *************** */

.ac-container{

	width: 99.5%;

}

.ac-container {

    text-align: center;

}

.ac-container label{

	padding: 5px 20px;

	position: relative;

	z-index: 20;

	display: block;

	height: 30px;

	cursor: pointer;

	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

	background: #ffffff;

	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));

	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

	box-shadow: 

		0px 0px 0px 1px rgba(155,155,155,0.3), 

		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 

		0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container label:hover{

	background: #fff;

}

.ac-container input:checked + label,

.ac-container input:checked + label:hover{

	background: #0078d4 ;

	color: #ffffff;

	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);

	box-shadow: 

		0px 0px 0px 1px rgba(155,155,155,0.3), 

		0px 2px 2px rgba(0,0,0,0.1);

}

.ac-container label:hover:after,

.ac-container input:checked + label:hover:after{

	content: '';

	position: absolute;

	width: 24px;

	height: 24px;

	right: 13px;

	top: 7px;

	background: transparent url(img/arrow_down.png) no-repeat center center;	

}

.ac-container input:checked + label:hover:after{

	background-image: url(img/arrow_up.png);

}

.ac-container input{

	display: none;

}

.userPer input{

	display: unset;

}

.ac-container article{

	background: rgba(255, 255, 255, 0.5);

	margin-top: -1px;

	overflow: hidden;

	height: 0px;

	position: relative;

	z-index: 10;

	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;

}

.ac-container article p{

	font-style: italic;

	color: #777;

	line-height: 23px;

	font-size: 14px;

	padding: 20px;

	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);

}

.ac-container input:checked ~ article{

	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;

	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);

}

.ac-container input:checked ~ article.ac-small{

	height: auto;

}

.ac-container input:checked ~ article.ac-medium{

	height: 180px;

}

.ac-container input:checked ~ article.ac-large{

	height: 230px;

}



/* **************** DROP DOWN *************** */

#demo {

		margin-top: -7px;

    }

    

    #demo .wrapper {

        display: inline-block;

		width: 90%;

		margin: 0 10px;

		height: 19px;

		position: relative;

    }

    

    #demo .parent {

        height: 100%;

        width: 100%;

        display: block;

        cursor: pointer;

        line-height: 30px;

        height: 26px;

        border-radius: 5px;

        background: #F9F9F9;

        border: 1px solid #AAA;

        border-bottom: 1px solid #777;

        color: #282D31;

        font-weight: bold;

        z-index: 2;

        position: relative;

        -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;

        -webkit-transition-delay: .8s;

        text-align: center;

    }

    

    #demo .parent:hover,

    #demo .content:hover ~ .parent {

        background: #0078d4;

        color:#fff;

        -webkit-transition-delay: 0s, 0s, 0s;

    }

    

    #demo .content:hover ~ .parent {

        border-bottom-left-radius: 0;

        border-bottom-right-radius: 0;

        z-index: 0;

    }

    

    #demo .content {

        position: absolute;

        top: 0;

        display: block;

        z-index: 1;

        height: 0;

        width: 100%;

        padding-top: 26px;

        -webkit-transition: height .5s ease;

        -webkit-transition-delay: .4s;

        border: 1px solid #777;

        border-radius: 5px;

        box-shadow: 0 1px 2px rgba(0,0,0,.4);

    }

    

    #demo .wrapper:active .content {

        height: 123px;

        z-index: 3;

        -webkit-transition-delay: 0s;

        float:right;

        

    }

    

    #demo .content:hover {

        height: 123px;

        z-index: 3;

        -webkit-transition-delay: 0s;

    }

    

    

    #demo .content ul {

        background: #fff;

        margin: 0;

        padding: 0;

		overflow-y:scroll; 

		overflow-x:hidden;       

		height: 100%;

        border-bottom-left-radius: 5px;

        border-bottom-right-radius: 5px;

    }

    

    #demo .content ul a {

        text-decoration: none;

    }

    

    #demo .content li:hover {

        background: #b1c9ff;

        color: #333;

    }

    

    #demo .content li {

        list-style: none;

        text-align: right;        

        color: #888;

        font-size: 14px;

        line-height: 30px;

        height: 30px;

        padding-right: 2px;

        border-top: 1px solid #ccc;

    }

    

    #demo .content li:last-of-type {

        border-bottom-left-radius: 5px;

        border-bottom-right-radius: 5px;

    }

    .wrapper-dropdown-5::after {

    border-color: #4cbeff transparent;

    border-style: solid;

    border-width: 6px 6px 0;

    content: "";

    height: 0;

    margin-top: -3px;

    position: absolute;

    right: 15px;

    top: 50%;

    width: 0;

}

.ban a{

	color:#fff;

}

.input-group {

    border-collapse: separate;

    display: table;

    position: relative;

}

.input-group-addon {

    background-color: #eeeeee;

    border: 1px solid #cccccc;

    border-radius: 0 4px 5px 0;

    color: #555555;

    font-size: 14px;

    font-weight: normal;

    line-height: 1;

    padding: 6px 12px;

    text-align: center;

}

.input-group-addon, .input-group-btn {

    vertical-align: middle;

    white-space: nowrap;

    width: 1%;

}

.input-group-addon, .input-group-btn, .input-group .form-control {

    display: table-cell;

	margin: 0px;

}

.form-control {

    background-color: #ffffff;

    background-image: none;

    border: 1px solid #cccccc;

    border-radius: 4px;

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

    color: #555555;

    display: block;

    font-size: 14px;

    height: 24px;

    line-height: 1.42857;

    padding: 6px 12px;

    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;

    width: 100%;

    border-bottom-right-radius: 0;

    border-top-right-radius: 0;

}

.margin-sm {

    margin: 20px 24px !important;

}

.margin-bottom-sm {

    margin-bottom: 10px !important;

}

.input-group{

	width:80%;

}



.login {

	border-radius: 6px;

	border-width: 2px;

	padding: 5px 10px;

	height: 40px;

	width: 80%;

	margin: 17px 24px;

}



.alert {

	padding: 8px 20px 8px 14px;

	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	border-radius: 4px;

	margin-top: 10px;

}



.alert-heading {

color: inherit;

}



.alert .close {

	position: relative;

	top: -2px;

	right: -21px;

	line-height: 18px;

}



.alert-danger,

.alert-error {

	color: #b94a48;

	background-color: #f2dede;

	border: #dba8a8 1px solid ;

}



.alert-success {

	color: #468847;

	background-color: #dff0d8;

	border: #b1cd99 1px solid;

}



.alert-unregistered {

	color: #000;

	background-color: #807f7d;

	border: #807f7d 1px solid;

}



.alert-info {

	color: #31708f;

	background-color: #d9edf7;

	border: #95ccd7 1px solid;

}



.alert-warning {

	color:#794e04;

	background-color:#f0e6b2;

	border:#faebcc 1px solid;

}

/************** toooooool tip *****************/

.smooth { 

	transition: height .5s ;

	color: #468847;

	background-color: #dff0d8;

	border-color: #468847;

	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	border-radius: 4px;

	 font-size: 13px;

	 padding: 5px;

}

.div {

   display:none;

}



.colsediv{

	text-align:left;

}

@media print{

	.btn {display:none!important;}

	.btn-warning{display:none!important;}

	#content{width:95.5%;height: unset !important;}

	#footer ,.menu ,#inputTable ,.box-header ,a{display:none;}

	#header-wrap{width: 70%;margin:-18px auto ;height:160px}

	#line{width: 70%; height:4px;}

	#left{margin:0}

	#sub-content{width: 97.5%;}

	#wrap{overflow: unset !important;width:90%;}	

	body{margin:0}

	select  ,button {border:none!important}



	#left {}

	.logo{margin:0}

	.HeaderTitle {font-size:20px!important;}

	.HeaderTitle2 {font-size:10px!important;}

	.ban{display:none}

	img{

		margin:0;

		padding:0;

	}

}

/***************** Recipt **************/



#reciept{

	background-color:white;

	padding:5px;

	min-height:245px;

	margin:0 auto;

	float:right;

	width:110%

}

#recLogo{

	width:20%;

	height:98px;

	float:right;

	/*border:1px black solid;*/

	border-left:0px

}

#recSchoolName{

	width:60%;

	height:55px;

	border:1px black solid;

	/*font-size: 22px;

	padding-top: 40px;

	font-weight:bold;

	margin-right: 94px;*/

}

#recMySchoolLogo{

	width:20%;

	height:98px;

	float:left;

	/*border:1px black solid;*/

	border-left:0px

}

#recHeader{

	width:100%;

	height:100px;

	float:right;

	border:1px black solid;

	padding: 10px;

	

}

#recText{

	width:96%;

	height:25px;

	border:1px black solid;

	border-top:0px;

	position:relative;

	float:right;

	text-align:center;

	padding-top: 4px;

}

#recBody{

	width: 93.7%;;

	border:1px black solid;

	border-top:0px;

	position:relative;

	float:right;

	height:auto;

	padding:5px

}

#recUser{

	width:93.7%;

	border:1px black solid;

	border-top:0px;

	position:relative;

	float:right;

	height:auto;

	padding:5px;

	font-size:14px

}



/***************** Recipt **************/

.view{

	border: 1px solid #cccccc;

    border-radius: 9px;

    margin: 5px;

}

.required{

	color:#d43f3a;

	font-size: 19px;

}





	.myImg{

		height: 62px;

    	width: 65px

    }





.overlay {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity 500ms;

  display: block;

  opacity: 0;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}



.popup {

  margin: 70px auto;

  padding: 20px;

  background: #fff;

  border-radius: 5px;

  width: 30%;

  position: relative;

  transition: all 5s ease-in-out;

}



popup h2 {

  margin-top: 0;

  color: #333;

  font-family: Tahoma, Arial, sans-serif;

}

.popup .close {

  position: absolute;

  top: 0 px;

  right: 7px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: bold;

  text-decoration: none;

  color: #333;

}

.popup .close:hover {

  color: #06D85F;

}

.popup .content {

  max-height: 100%;

  overflow: auto;

}



/* unvisited link */

.link a {

  color: #0078d4 !important;

  text-decoration: underline;

}



/* visited link */

.link a:visited {

  color: #000000 !important;

  text-decoration: none;

}



/* mouse over link */

.link  a:hover {

  color: #000000 !important;

  text-decoration: none;

}



 /*selected link */

.link a:active {

  color: #000000;

  text-decoration: none;

}

 .column-view {

	float:right;

}



.behavior-col {

	margin-left:10px;

	margin-right:0px;

}



/* ================================================================================================================================= */

/* ================================================================================================================================= */

/* ================================================================================================================================= */



/* The Modal (background) */

.small-modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 75px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}



/* Modal Content */

.small-modal-content {

    background-color: #fefefe;

    margin: auto;

    /*border: 1px solid #888;*/

    width: 35%;

	max-height: 435px;

	/*border: 1px solid rgba(0,0,0,.2);*/

	border: 1px solid #fefefe;

	border-radius: 6px;

	padding: 10px 10px 20px;

	overflow-y: scroll;

}



.small-modal-content .form-top {

	background: #930e17 none repeat scroll 0 0;

	padding: 12px 25px 5px;

	 border-radius: 4px 4px 0 0;

    color:#f9f9f9;

	text-align: right;

}



.small-modal-content .confirm-form-top {

	background: #0078d4 none repeat scroll 0 0;

    color:#f9f9f9;

}



.small-modal-body {

	/*margin-top:10px;*/

	position:relative;

	padding:15px

}



/* The Close Button */

.close {

    color: #aaaaaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

}



.close:hover,

.close:focus {

    color: #000;

    text-decoration: none;

    cursor: pointer;

}



/* ================================================================================================================================= */

/* ================================================================================================================================= */

/* ================================================================================================================================= */



.modal {

	display: none;

	position: fixed;

	z-index: 1040;

	top: 0px;

	left: 0px;

	width: 100%; /* Full width */

	height: 100%; /* Full height */

	overflow: auto; /* Enable scroll if needed */

	background-color: rgb(0,0,0); /* Fallback color */

	background-color: rgba(0,0,0,0.5); /* Black w/ opacity */

	animation: scaleUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;

	transform: scale(1);

	/*animation-duration: 0.4s;

	animation-name: fadeIn;

	bottom: 1px;*/

	/*right: 124px;

	left: 127px;

	max-height: 630px;*/

}



.modal-content {

	/*position: absolute;

    bottom: 0;*/

	display: none;

    /*-webkit-animation-name: slideIn;

    -webkit-animation-duration: 2s;

    animation-name: slideIn;

    animation-duration: 2s;*/

	animation: scaleBack .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;

    background-color: white;

    width: 850px;

	margin: 150px auto;

	border: 1px solid rgba(0,0,0,.2);

	border-radius: 6px;

}



.modal .container {

	width:90%;

	padding-right:15px;

	padding-left:15px;

	margin-right:auto;

	margin-left:auto

}





.modal-content .form-top {

	 background: #0078d4 none repeat scroll 0 0;

	 padding: 20px 16px;

	 border-radius: 4px 4px 0 0;

    color: white;

    margin-bottom: 10px;

	text-align: center;

	color:#f9f9f9;

}





.modal-body {

	padding: 2px 16px;

	margin-top:10px;

	position:relative;

	padding:15px

}



.required-ar:before {

    content:" *";

    color: red;

}



.required-en:after {

    content:" *";

    color: red;

}



.expand-icon{

	background-image: url('img/toggle-small-expand.png');

	background-repeat: no-repeat;

	float: right;

}



#LoadingSpinner {

	display: none;

	overflow: hidden auto;

	opacity: 0.5;

	inset: 0px;

	width: 100%;

	margin: 30px auto;

	position: fixed;

	z-index: 1050;

	outline: currentcolor none 0px;

	transition: opacity 0.15s linear 0s;

	background: #dbd8d8;

	height: 100%;

	text-align: center;	

}



/* ============================================================= */

/* ====================== xc2_default.css ====================== */

/* ============================================================= */

.panel {

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  background-color:#f0f0f0;

}



.row_head {

  border-width:1px;

  border-style:solid;

  border-color:#f0f0f0;

  background-color:#f0f0f0;

}

.head {

  font-family:verdana;

  font-size:11px;

  font-weight:bold;

  text-align:center;

  color:#000000;

  background-color:#f0f0f0;

  cursor:default;

}



.arrow_prev {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-right:1px;

  text-align:center;

  color:#ffffff;

  background-color:#99b3cc;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.arrow_prev_over {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-right:1px;

  text-align:center;

  color:#ffffff;

  background-color:#afc6dd;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.arrow_prev_down {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-right:1px;

  text-align:center;

  color:#ffffff;

  background-color:#7e93aa;

  border-width:1px;

  border-style:solid;

  border-color:#4b6077 #afc6dd #afc6dd #4b6077;

  padding:2px 0px 0px 2px;

  cursor:pointer;

}



.arrow_next {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-left:1px;

  text-align:center;

  color:#ffffff;

  background-color:#99b3cc;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.arrow_next_over {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-left:1px;

  text-align:center;

  color:#ffffff;

  background-color:#afc6dd;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.arrow_next_down {

  font-family:verdana;

  font-size:11px;

  width:12px;

  margin-left:1px;

  text-align:center;

  color:#ffffff;

  background-color:#7e93aa;

  border-width:1px;

  border-style:solid;

  border-color:#4b6077 #afc6dd #afc6dd #4b6077;

  padding:2px 0px 0px 2px;

  cursor:pointer;

}



.row_week {

  border-width:1px;

  border-style:solid;

  border-color:#99b3cc #99b3cc #668099 #99b3cc;

}

.weekday {

  font-family:verdana;

  font-size:11px;

  width:23px;

  text-align:center;

  color:#ffffff;

  background-color:#99b3cc;

  border:1px solid #99b3cc;

  padding:1px;

  cursor:default;

}



.row_day {

  padding:1px;

}

.day {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#000000;

  background-color:#f0f0f0;

  border:1px solid #f0f0f0;

  padding:1px;

  cursor:pointer;

}

.day_over {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#000000;

  background-color:#f0f0f0;

  border-width:1px;

  border-style:solid;

  border-color:#ffffff #c0c0c0 #c0c0c0 #ffffff;

  padding:1px;

  cursor:pointer;

}

.day_down {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#000000;

  background-color:#cfcfcf;

  border-width:1px;

  border-style:solid;

  border-color:#9c9c9c #ffffff #ffffff #9c9c9c;

  padding:1px;

  cursor:pointer;

}

.day_empty {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#f0f0f0;

  background-color:#f0f0f0;

  border:1px solid #f0f0f0;

  padding:1px;

  cursor:default;

}

.day_disabled {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  text-decoration:line-through;

  color:#999999;

  background-color:#f0f0f0;

  border:1px solid #f0f0f0;

  padding:1px;

  cursor:default;

}

.day_current {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#ffffff;

  background-color:#99b3cc;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.day_special {

  font-family:verdana;

  font-size:11px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#ffffff;

  background-color:#cc9999;

  border-width:1px;

  border-style:solid;

  border-color:#ffcccc #996666 #996666 #ffcccc;

  padding:1px;

  cursor:pointer;

}

.day_other {

  font-family:verdana;

  font-size:9px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#999999;

  background-color:#f0f0f0;

  border:1px solid #f0f0f0;

  padding:1px;

  cursor:pointer;

}

.day_other_over {

  font-family:verdana;

  font-size:9px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#666666;

  background-color:#c0c0c0;

  border-width:1px;

  border-style:solid;

  border-color:#f0f0f0 #909090 #909090 #f0f0f0;

  padding:1px;

  cursor:pointer;

}

.day_other_current {

  font-family:verdana;

  font-size:9px;

  line-height:14px;

  width:23px;

  text-align:center;

  color:#666666;

  background-color:#c0c0c0;

  border-width:1px;

  border-style:solid;

  border-color:#f0f0f0 #909090 #909090 #f0f0f0;

  padding:1px;

  cursor:pointer;

}



.row_foot {

  margin:1px;

}

.foot {

  font-family:verdana;

  font-size:11px;

  width:50px;

  margin:0px 1px;

  text-align:center;

  color:#ffffff;

  background-color:#99b3cc;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.foot_over {

  font-family:verdana;

  font-size:11px;

  width:50px;

  margin:0px 1px;

  text-align:center;

  color:#ffffff;

  background-color:#afc6dd;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:1px;

  cursor:pointer;

}

.foot_down {

  font-family:verdana;

  font-size:11px;

  width:50px;

  margin:0px 1px;

  text-align:center;

  color:#ffffff;

  background-color:#7e93aa;

  border-width:1px;

  border-style:solid;

  border-color:#4b6077 #afc6dd #afc6dd #4b6077;

  padding:2px 0px 0px 2px;

  cursor:pointer;

}





.list {

  font-family:verdana;

  font-size:12px;

  color:#000000;

  background-color:#f0f0f0;

}



.info {

  font-size:10px;

  color:#000000;

  text-align:left;

  margin:2px 6px;

  padding:2px;

}



.tip_title {

  font-family:verdana;

  font-size:11px;

  text-align:center;

  color:#ffffff;

  background-color:#cc9999;

  border-width:1px;

  border-style:solid;

  border-color:#996666 #ffcccc #ffcccc #996666;

  padding:0px 3px;

}

.tip_box {

  filter:

    alpha(opacity:90)

    progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);

  -moz-opacity:0.9;

  width:200px; height:100px;

  font-family:verdana;

  font-size:11px;

  text-align:left;

  color:#000000;

  background-color:#cfcfcf;

  border-width:1px;

  border-style:solid;

  border-color:#cce6ff #668099 #668099 #cce6ff;

  padding:3px;

  cursor:default;

  overflow:auto;

}



.time_list {

  font-family:verdana;

  font-size:12px;

}











/* ============================================================= */

/* ====================== xc2_default.css ====================== */

/* ============================================================= */







/* ============================================================= */

/* ====================== Tooltip ====================== */

/* ============================================================= */





.tooltiptext {

  visibility: hidden;

  width: 278px;

  color: #b94a48;

  background-color: #f2dede;

  border: #e8c2c2 1px solid ;

  text-align: center;

  border-radius: 6px;

  padding: 5px 0;

  font-size: 15px;



  /* Position the tooltip */

  position: absolute;

  left: 13px;

  z-index: 1;

}





.icon-disabled:hover .tooltiptext {

  visibility: visible;

}



.btn-disabled:hover .tooltiptext {

  visibility: visible;

}





.grd-search .btn {

	float: left;

	margin: 8px;

}



#search-bar-form button {
	background: #0078d4;
	font-family: FontAwesome;
	color: #fff;
	padding: 0px 0px !important;
	height: 30px !important;
	width: auto;
}



html textarea {

	font-family: "DroidArabicKufi";

	font-size: 13px;

}



#calculs {

	border: 3px solid gray;

	padding: 10px 5px;

	background: #f2eeee;

}



.caution-span span{

	color:red;

	font-size: 90%;

	width: max-content;

}



.main-menu-nav-overlay {

    display: none;

    position: fixed;

    z-index: 1;

    right: 0;

    top: 0;

    background-color: #000;

    background-color: rgba(0, 0, 0, 0.9);

    transition: 0.5s;

    overflow-x: hidden;

    height: 100%;

}

.main-menu-nav-overlay-content {

    position: relative;

    text-align: right;

    margin-top: 40px;

    margin-left: 20px;

    margin-right: 5px;

    top: 3%;

}

.main-menu-nav-overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 18px !important;

    color: #605f5f;

    display: block;

    transition: 0.3s;

    border-bottom: 1px solid gray;

}

.main-menu-nav-overlay a:focus,

.main-menu-nav-overlay a:hover {

    color: #fff;

    background: #0078d4;

}

.main-menu-nav-overlay .closebtn {

    position: absolute;

    top: 0;

    right: 5px;

    font-size: 60px;

}

@media screen {

    .main-menu-nav-overlay a {

        font-size: 16px !important;

    }

    .main-menu-nav-overlay .closebtn {

        font-size: 40px;

        top: 15px;

        right: 35px;

    }

}

.main-menu-nav-overlay {

    background-color: #ddd;

}

.bordered-table i {

    padding: 0;

    color: #f4b300;

}

.bordered-table {

    background: #f2f1f1;

    padding: 10px 0;

}

.bordered-table td {

    padding: 5px;

}





/* Use a media query to add a breakpoint at 768px: */

@media screen and (max-width: 768px) {

	.school-name {

		width: 100%;

	}

	.logo {

		display: none;

	}

	#header-wrap { width: 100%; }

	#toolbar { width: 98%; }

	#footer { width: 100%; }

	#search-bar, #user-info {

		width: 100%; /* The width is 100%, when the viewport is 768px or smaller */

	}

	.grid_3 { width: 100%; margin-left: 0px; }

	.main-form-label, .main-form-input {

		width: 100%;

		text-align: right;

	}

	#search-bar #home-icon {

	  padding: 3px 5px 0 0;

	}

	#search-bar-form {

	  margin-right: 5px;

	}

	#user-info a, #user-info span {

	  margin-right: 5px;

	}

	#user-info {

	  padding: 6px 5px;

	}

	.main-form-4{ width: 100%; }

}