@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/DroidNaskh-Regular.eot");
  src: url("../fonts/DroidNaskh-Regular.eot?#iefix") format('embedded-opentype'),
       url("../fonts/DroidNaskh-Regular.woff2") format('woff2'),
       url("../fonts/DroidNaskh-Regular.woff") format('woff'),
       url("../fonts/DroidNaskh-Regular.ttf") format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/DroidNaskh-Bold.eot");
  src: url("../fonts/DroidNaskh-Bold.eot?#iefix") format('embedded-opentype'),
       url("../fonts/DroidNaskh-Bold.woff2") format('woff2'),
       url("../fonts/DroidNaskh-Bold.woff") format('woff'),
       url("../fonts/DroidNaskh-Bold.ttf") format('truetype');
}



@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/DroidKufi-Regular.eot");
  src: url("../fonts/DroidKufi-Regular.eot?#iefix") format('embedded-opentype'),
       url("../fonts/DroidKufi-Regular.woff2") format('woff2'),
       url("../fonts/DroidKufi-Regular.woff") format('woff'),
       url("../fonts/DroidKufi-Regular.ttf") format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/DroidKufi-Bold.eot");
  src: url("../fonts/DroidKufi-Bold.eot?#iefix") format('embedded-opentype'),
       url("../fonts/DroidKufi-Bold.woff2") format('woff2'),
       url("../fonts/DroidKufi-Bold.woff") format('woff'),
       url("../fonts/DroidKufi-Bold.ttf") format('truetype');
}

div.article, div.welcome{padding: 0px; margin:0px;}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 14px;
}


   


body { height:100%;  font-family:'Droid Arabic Naskh' , Tahoma;  background-size:auto; background-color:#fcfbe3;}

body.LoginBG {background:  url(../img/LoginBg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: transparent;}

body.ms-backgroundImage{  }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */







/* =============================================================================
   Global Style
   ========================================================================== */



a:link, a:visited , a:hover,a:active {color: #2894b6; text-decoration:none; }

a:hover{ /* opacity:0.8; */ text-decoration:underline;}



.wrap {position:relative;   margin:0px auto;  width: 100%;  max-width:1100px; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

.NormalLink:link, .NormalLink:visited , .NormalLink:hover, .NormalLink:active { color:#2894b6; font-weight:normal; font-size:13px; text-decoration:underline;}

.NormalLink:hover{text-decoration:underline; color:#3B8AB9; }

.ContentBlock{ font-size:14px; padding:15px; color:#111111;}

.AlignCenter{ text-align:center;}
.AlignRight{ text-align:right;}
.AlignLeft{ text-align:left;}


/*FLOAT & CLEAR*/
.right { float:right; }
.left { float:left; }
.clear { clear: both; }
.spacer{ height: 5px; display: block; }
.spacer-10{ height: 10px; display: block; }

.ColorRed{ color:#F00;}
.ColorGreen{ color:#2ea114; font-size:13px;}
.ColorGrey ,  table .ColorGrey{color: #585757; font-size:11px;}

.ImgBdr { border:1px solid #eeeeee; padding:2px;}

.ImgResponsive{ display:block; width:100%; height:auto;}

.UserName .ms-webpartzone-cell {padding:0px; margin:0px;}

 /* =============================================================================
 Heading Style
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ margin:5px 0px; padding:0px; font-family:'Droid Arabic Kufi' , Arial, HelveticaNeue, Tahoma; letter-spacing: 0px;}

.container h1{ font-size: 24px; color: #2894b6; font-weight: bold;  text-shadow: 1px 2px 1px #dcdcdc; line-height: 36px;}
.container h2{ font-size: 22px; color: #151515; text-shadow: 1px 2px 1px #dcdcdc;}
.container h3 { font-size: 20px; color: #32a3c6;  font-weight: normal; text-shadow: 1px 2px 1px #dcdcdc;}
.container  h4 { font-size:16px; color: #2894b6; text-shadow: 1px 2px 1px #dcdcdc; }
.container h5 { font-size: 14px; color: #151515; text-shadow: 1px 2px 1px #dcdcdc;}
.container h6 { font-size: 16px; color:#151515; font-weight:lighter; padding: 0px 5px;}

h1.ms-dlg-heading{ font-size: 24px; color: #2894b6; font-weight: bold;  text-shadow: 1px 2px 1px #dcdcdc; font-family:'Droid Arabic Kufi' , Arial, HelveticaNeue, Tahoma; }

.container .LandingPageSection h2{ font-size: 20px; line-height: 26px; color:#2894b6;}

.container .slides h3 { font-size: 14px; color: #264d6e;  font-weight: normal; text-align: center; width: 150px; margin: 0px auto;}

.HomePageCol1  h1 , .HomePageCol2 h1{  text-shadow: 1px 3px 1px #dcdcdc; font-size:18px;   /* padding-top:10px; */ font-weight:bold; }

.TopPageWrapper h1{ margin:0px; padding:0px; color:#ffffff;  }

 /*.ContentPage h1 , .ContentPage h2 ,.ContentPage h3 ,.ContentPage h4 ,.ContentPage h5{text-shadow: 1px 3px 1px #dcdcdc;}*/
.ContentPage h1 {  margin: 4px 2px 10px 2px; text-shadow: 1px 2px 1px #dcdcdc; }
.ContentPage h2 { margin:4px 2px 10px 2px; text-shadow: 1px 2px 1px #dcdcdc;  }
.ContentPage h3 { margin: 25px 2px 2px 2px; text-shadow: 1px 2px 1px #dcdcdc;}
.ContentPage h4 { margin:20px 2px 10px 2px; text-shadow: 1px 2px 1px #dcdcdc;}
.ContentPage h5 { margin:4px 2px 8px 2px; text-shadow: 1px 2px 1px #dcdcdc;}
.ContentPage h6 { margin:4px 2px 8px 2px; }

p , .ms-WPBody p {font-size: 14px; font-family: 'Droid Arabic Naskh' , Tahoma; color: #111111;}

.BoxContainer p{ padding:5px 15px 15px 15px; margin:0px;}


.ContentPage .ms-rtestate-field p { margin: 0px; font-size:14px; color: #111111;  line-height:28px;  text-align:justify; margin-bottom: 20px;}

.ContentPage p { margin: 0px; font-size:14px; color: #111111;  line-height:28px;  text-align:justify; margin-bottom: 20px;}


 /* =============================================================================
  Structure style HTML Pages
 ========================================================================== */

.MainWrapper{ width:100%;  margin:0px auto 60px;}

 
header {
    /* background-image: url(../img/Header.png); */ height: 118px; background-color: #32a3c6; border-bottom: 1px solid #127391; margin-bottom:30px;
}

.TopWrapper{ background-color: #32a3c6;  width:100%; border-bottom: 1px solid #062a8f; min-height:25px;}

#header{     }
.logo{background-image:url('../img/logo.png'); background-repeat:no-repeat; background-size:contain; height:120px; margin: -12px 0px 0px 0px; max-width: 100%; background-position: right;}

.logo img {  }






.logoRightArea {  margin:0px 0px 0px 0px;  float: left;   /* width:55%; */  text-align: left;}


.IconsListView 	{display:inline-block;margin:8px 2px 0px 2px; float:left;}

.IconsListView ul	{margin:0;padding:0;}

.IconsListView ul li	{list-style:none;float: right;color:#fff;margin: 0px 10px 0px 2px;font-size:13px; height: 52px; min-width:100px; text-align:center;}

.IconsListView a:link, .IconsListView a:visited , .IconsListView a:hover, .IconsListView a:active { font-family: Droid Arabic Kufi, Tahoma, Geneva, sans-serif; color: #ffffff; font-weight:normal; font-size:13px;}

.IconsListView a:hover{text-decoration:underline; color: #ffffff; }


.logo h1 { display:none;}

.DateTime{ color: #adbeee; font-size:11px;}

.PhoneNo{ color: #adbeee;font-size: 16px; /* padding:2px 50px 0px 10px;*/ font-weight: bold;  padding:0px 10px 0px 10px; }

.PhoneText{ font-size: 14px; color: #adbeee; padding: 0px 20px 0px 0px; font-weight: bold;}



.ContentBase{ width: 100%; background:url(../img/GreyDots.png) repeat;}

.breadcrumb , .breadcrumb .ms-WPBody{font-size:13px;   color: #7b7b7b; line-height: 20px; padding: 0px 0px 0px 10px;   font-weight:normal; text-shadow:0px 0px 0px #dcdcdc; font-family:'Droid Arabic Naskh', Tahoma; }


.breadcrumb a:link, .breadcrumb a:visited ,.breadcrumb a:hover,.breadcrumb a:active { font-size:13px;  color: #111111; text-decoration:none; font-family:'Droid Arabic Naskh', Tahoma;   }

.breadcrumb a:hover{ text-decoration:underline; color: #111111;  opacity: 0.8;}


 /* ======Top Language Link======== */
 
.TopNav { /* float: right; */ font-size:11px; color:#adbeee; /* width:60%; */ /* padding:5px;  direction:rtl; */ /* text-align: right; */}

.TopNav a:link, .TopNav a:visited , .TopNav a:hover, .TopNav a:active { padding: 0px 10px 4px 14px; color: #adbeee; font-weight:normal; display: inline-block; height: 10px;  border-right: 1px solid #667BB6; /* vertical-align: middle; */ text-align: center; vertical-align: middle; /* margin: 6px 0px 0px 0px; */}

.TopNav a:hover{text-decoration:underline; opacity:0.8; }

.TopNav > a:first-child {border-right:0px solid #adbeee;}

.SocialIcons{ margin: 12px 10px 4px 10px;}

.SocialIcons a:link, .SocialIcons a:visited , .SocialIcons a:hover, .SocialIcons a:active { height:22px; width:22px; padding: 2px;  color:#ffffff; }

.SocialIcons a:hover{ opacity:0.8; }

.SearchBox { float: right; /* padding:5px; */  height: 35px; padding: 2px 12px 0px 0px;}


.container{   width:100%;} 

.ContentPage{ margin:12px;}

.ContentPage{ /* padding: 0px 10px 0px 10px;  min-height: 300px;*/}

#FullColumn .ContentPage{ padding:0px 0px 0px 0px;}

.MainPageCnt{ width:100%;  /* background-color: #fff;  padding-bottom: 12px; */}

.ImgLeft{ float:left; clear:left; padding:2px; margin:4px; display:block; border:1px solid #f4f4f4;  }

.ImgRight{ float: left; clear:left; padding:2px; margin:4px; display:block; border: 1px solid #d0cfcf;  }

.WrapperFooter{ width:100%; background-color: #133fba;}	

.WrapperCopyRight{ width:100%; background-color: #32a3c6;}	

footer{  width:100%; /* padding-top:10px; */  }
			
#wrapper{position: relative;}

.copyright{ color:#ffffff; font-size:13px; line-height:35px; /* text-align: right; */}

.BoxContainer{ background-color: #ffffff; border: 1px solid #ccd0d1; /* margin: 0px 1% 0px 1%; */ padding: 10px 20px 0px 20px; /* height: 340px; */ position:relative; font-size: 14px; font-family: 'Droid Arabic Naskh' , Tahoma; color: #111111;}

.BoxCntWhite{ background-color: #ffffff; border: 1px solid #d0cfcf;  margin: 0px 0% 15px 0%;  padding: 0px; /* height: 340px; */ position:relative;}

.BoxCntBlue{ background-color: #edfbf7; border: 1px solid #dbe8d7;  margin: 0px 0% 15px 0%;  padding: 0px; /* height: 340px; */ position:relative;}

.BoxCntYellow{ background-color: #fcfddf; border: 1px solid #d1d1d1;  margin: 0px 0% 15px 0%;  padding: 0px; /* height: 340px; */ position:relative;}

.InnerPageSec .BoxContainer{ margin-bottom:15px; padding:0px;}

.Bxheader{ border-bottom: 1px solid #d0cfcf; font-size: 18px; line-height: 38px; padding: 0px 15px; color: #262729; font-family: 'Droid Arabic Kufi' , Tahoma;}

.BoxCntBlue .Bxheader , .BoxCntWhite .Bxheader { border-bottom: 0px solid #d0cfcf; background-color:#e6f6f1; color: #262729;}

.BoxCntYellow .Bxheader { border-bottom: 0px solid #d0cfcf; background-color:#f2f4c2; color: #262729;}

.BoxCntWhite .Bxheader , .BoxContainer .Bxheader {background-color:#f4f3f3;}

.Bxheader > span{ float: left;}

.Bxheader .col > h2{ color: #2894b6; padding: 0px 0px 0px 15px; font-size: 18px; font-weight: normal; line-height: 18px; width: 100%;}

.Bxheader .span_1_of_7 { text-align:right;}


.Bxheader > span a:link, .Bxheader .Bxheader > span a:visited , .Bxheader > span .span_1_of_7 a:hover, .Bxheader > span .span_1_of_7 a:active { color:#2894b6; font-weight:normal; font-size:13px; text-align:right; padding:0px 10px 0px 10px; line-height:26px; font-family:'Droid Arabic Naskh' , Tahoma , Arial, HelveticaNeue ; }

.Bxheader > span a:hover{text-decoration:underline; color:#2894b6; opacity:0.8; }

.TitleBox{ background-color:#f1f1f1; /* border-bottom:1px solid #b7b7b7; */ min-height:36px;  padding:10px 5px 0px 10px;}

.TitleBox h1 span { color:#133fba; }

.TitleBox h1 { margin:0px; padding:0px;  font-size:18px; color: #403f3f; line-height:22px;}

.FilterPallate{  margin: 10px 0px 10px 0px;   background-color:#ddf4fc;   border:1px solid #bbdbe6;   padding: 5px; }

.CntWhite {  width: 100%;  margin: 10px 0px 10px 0px;   background-color:#ffffff;   border:1px solid #d0cfcf;   padding: 0% 0% 0% 0%;  /* height: 84px; */  /* display: block; */}

.CntBrown {  margin: 10px 0px 10px 0px;   background-color:#f3eddf;   border:1px solid #d5d0c4;    padding: 5px; /* height: 84px; */  /* display: block; */}

.ServiceProvider{ color:#133fba; font-size:12px; margin-bottom:10px;font-weight:bold;}


.fancybox-skin h4 { color:#2894b6; font-size:16px;}

.fancybox-skin{color:#111111; }

.SmallPage{ width:80%; margin:10px  auto;}

.InnerPageNav{ text-align: left; margin: 0px auto; width: 100%;}

.InnerPageNav ul {
    list-style: none;
    padding-left: 0;
    /* text-align: center; */
    /* margin: 0px auto; */
    text-align: center;
}
.InnerPageNav li {
    display: inline-block;
	
    margin: 5px;
}
.InnerPageNav a:link, .InnerPageNava:visited, .InnerPageNav a:hover, .InnerPageNav a:active {
    display: inline-block;
    padding: 15px 25px;
    border: 0px solid transparent;
    line-height: 22px;
    font-size: 14px;
    vertical-align: middle;
    ountline: none;
    cursor: pointer;
    white-space: normal;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    transition: all .2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: #ececec;
    /* border-color: #bdbaba; */
    color: #363636;
    /* box-shadow: inset 0 1px 0 #f8fafa; */
    /*text-shadow: 0 1px 0 #fff;*/
	text-align:center;
    min-width: 120px;
    text-transform: capitalize;
    max-width: 300px;
    min-height: 30px;
    letter-spacing: 0px;
    font-family:  'Droid Arabic Kufi';
    font-weight:bold;
}

.InnerPageNav a:hover {
    background: #2894b6;
    /* border-color: #bdbaba; */
    color: #fff;
    /* box-shadow: inset 0 1px 0 #17334B; */
    /* text-shadow: 0 -1px 0 rgba(0, 0, 0, .1); */
    /* opacity: 0.8; */
    text-decoration: none;
}
.InnerPageNav a.PageNavActive {
    background: #2894b6;
    /* border-color: #bdbaba; */
    color: #fff;
    /* box-shadow: inset 0 1px 0 #17334B; */
    /* text-shadow: 0 1px 0 rgba(0, 0, 0, .1); */
    /* font-weight: normal; */
}
.InnerPageNav a.PageNavActive:hover {
    background: #2894b6;
    border-color: #bdbaba;
    color: #fff;
    /* box-shadow: inset 0 1px 0 #17334B; */
    /* text-shadow: 0 1px 0 #2894b6; */
    /* opacity: 0.8; */
    text-decoration: none;
}

/*.IconPayOnline{  display:inline-block; background:transparent url(../img/IconPayOnline.png) 0px 0px no-repeat;     height: 32px;  width: 38px;}*/


/* Form Styles */

/*
.TblForm  {margin:10px 4px 10px 4px;}

.FilterPallate .TblForm{margin:4px 4px 4px 4px;}

.TblForm td { padding:5px 6px 5px 15px;}

.TblForm label { font-size:13px; color:#494444; padding:0px;}

.TblForm span { font-size:13px; color:#494444; padding:0px;}


.FilterPallate .TblForm td  , .CntBrown .TblForm td{ padding:8px 8px 6px 10px; font-size:13px; color:#494444;}


.TblForm  .ajax__calendar td { padding:0px; margin:0px;}

.TblForm  { font-size:13px; color:#131313;}


.TblForm .labelText { font-size:16px; color:#111111; padding:0px; width:140px; display:inline-block; } */

/* form  TYPE */

/* .FormStyle{}

.FormStyle .labelText { font-size:16px; color:#111111; padding:0px; width:140px; display:inline-block; } */

.labelText { font-size:16px; color:#111111; padding:0px;  display:block; }

.FormStyle span{font-size:14px;}

.Mrg10{ margin-left:10px;}

.container label, .container input[type="text"],input[type="password"], .container input[type="email"],textarea ,select {
font-size:16px;
}
.container select {
	padding:4px;
}

.container label {
font-weight:normal; 
}


.container input[type="text"], .container input[type="password"], .container input[type="email"], .container textarea , .container select {
padding:2px 2px;
outline:none;
color:#333;
background-color:#fff;
background-repeat:no-repeat;
background-position:right center;
border:1px solid #bababa;
border-radius:0px;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075);
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all .15s ease-in 0;
-webkit-transition:all .15s ease-in 0;

font-family:  'Droid Arabic Naskh' , Tahoma;
vertical-align:top;
}

.container input[type="text"].focus, .container input[type="text"]:focus , .container input[type="password"].focus, .container input[type="password"]:focus, .container input[type="email"].focus, .container input[type="email"]:focus, .container textarea.focus, .container textarea:focus {
border-color:#51a7e8;
box-shadow:inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5);
}

::-webkit-input-placeholder,:-moz-placeholder {
color:#aaa;
}

.radioSpace{ margin-left:10px;}

span.radioSpace input { margin-left:10px;}

span.radioSpace label { margin-left:60px; color:black;}


.Ftiny{ width:100px; resize: none;}

.Fsmall{ width:140px; resize: none;}

.Fmedium{ width:300px; resize: none;}

.FLarge{ width:480px; resize: none;}

.FxLarge{ width:600px; resize: none;}

.FFullWidth{ width:96%; resize: none;}

.TextAreaSmall{ width:300px; resize: none;}

.TextAreaMedium{ width:600px; resize: none;}

.TextAreaLarge{ width:800px; resize: none;} 

.FSearchService{ width: 82%; height:46px;}

.MainWrapper input.SubmitSearchBtn{ padding:10px;}

.FLarge30Lbl{ width:30%;}




table.BlueGrid , table.GreyGrid{
	-webkit-border-horizontal-spacing: 0;
	-webkit-border-vertical-spacing: 0;
	border: solid 2px #eeeeee;
	text-align: left;
	line-height: 20px;
	 border-top: none;  
	 width: 100%; 
	 padding: 0; 
	border-collapse: initial;
}
	

body table.BlueGrid , body table.GreyGrid { border-collapse:initial; }

table.BlueGrid th{
	/* border-top:solid 2px #5588ad; */
	border-left:#B1D2E4 1px solid;
	background: #32a3c6;
	padding: 8px 8px;
	font-size: 14px;
    color: #fff;  font-weight:bold; 
	text-align: right;
	font-family: 'Droid Arabic Kufi', Tahoma;
	letter-spacing: 0px;
}

table.GreyGrid th{
	/* border-top:solid 2px #5588ad; */
	border-left: #ffffff 1px solid;
	background: #5f5f5f;
	padding: 8px 8px;
	font-size: 14px;
    color: #fff;  font-weight:bold; 
	text-align: left;
	font-family: 'Droid Arabic Kufi' , Tahoma;
	letter-spacing: 1px;
}



table.BlueGrid th.InnerTbl{
	/* border-top:solid 2px #5588ad; */
	border-left: #B1D2E4 0px solid;
	padding: 0px 0px;
    font-size: 12px;
    color: #fff; 
}


table.BlueGrid th table , table.GreyGrid th table{	
	border:#ffffff 0px solid;

	padding: 0px 0px;
    font-size: 12px;
    color: #fff;  font-weight:bold; 
	text-align: center;}
	

table.BlueGrid th table th , table.GreyGrid th table th{border:#B1D2E4 1px solid;}
	
.BlueGrid .MainHeading ,.GreyGrid .MainHeading 
{
	border-left: #B1D2E4 1px solid;
	background: #32a3c6;
	padding: 8px 8px;
    font-size: 14px;
    color: #fff;  font-weight:bold; 
	text-align: right;
}



    

table.BlueGrid th:first-child { }

table.BlueGrid tbody tr , table.GreyGrid tbody tr { background-color: #f4f4f4;}

table.BlueGrid tbody tr:nth-child(even) , table.GreyGrid tbody tr:nth-child(even)  { background-color: #efefef; }


table.BlueGrid td , table.GreyGrid td {
	border-left:#ffffff 1px solid;
	border-top:#ffffff  1px solid;
	padding: 5px 6px 5px 6px;
    
	line-height: 22px;
	font-size: 14px;
	color: #111111; 
	font-weight: normal;
	text-align: right;
	font-family: 'Droid Arabic Naskh' , Tahoma; 
}


.BlueGrid a:link, .BlueGrid a:visited ,.BlueGrid a:hover,.BlueGrid a:active , .GreyGrid a:link, .GreyGrid a:visited ,.GreyGrid a:hover,.GreyGrid a:active { font-size:14px;  color: #32a3c6; text-decoration: none; font-family: 'Droid Arabic Naskh' , Tahoma; }

.BlueGrid a:hover , .GreyGrid a:hover{ text-decoration:underline; color: #32a3c6;  }

.BlueGrid .MainHeading a:link, .BlueGrid .MainHeading a:visited ,.BlueGrid .MainHeading a:hover,.BlueGrid .MainHeading a:active { font-size:14px;  color:#ffffff; text-decoration:underline;  }

.BlueGrid .MainHeading a:hover{ text-decoration:underline; color:#32a3c6;  }

table.BlueGrid th a:link, table.BlueGrid th a:visited ,table.BlueGrid th  a:hover,table.BlueGrid th  a:active , table.GreyGrid th a:link, table.GreyGrid th a:visited ,table.GreyGrid th  a:hover,table.GreyGrid th  a:active { font-size:14px;  color:#ffffff; font-weight:bold; text-decoration:underline; font-family: 'Droid Arabic Kufi' , Tahoma; }

table.BlueGrid th  a:hover , table.GreyGrid th  a:hover{ text-decoration:underline; color:#eeeeee;  }

table.BlueGrid td.LightColor , table.GreyGrid td.LightColor{ background-color:#def2b6; font-weight:bold;}

.BlueGrid .pgr , .GreyGrid .pgr { background: #111111 url(../../css/grd_pgr.png) repeat-x top;  }  

.BlueGrid .pgr table , .GreyGrid .pgr table { margin: 8px 0; }  

.BlueGrid .pgr td , .GreyGrid .pgr td    
{
   background: #fff;
    border-width: 0;   
    padding: 0 6px;   
    border-left: solid 1px #bcbcbc;   
    font-weight: bold;   
    color: #0882cc;   
    line-height: 12px;   
 }     
.BlueGrid .pgr a , .GreyGrid .pgr a { color: #999999; text-decoration: none; }  

.BlueGrid .pgr a:hover , .GreyGrid .pgr a:hover  { color: #0882cc; text-decoration:underline; }

.BlueGrid th.AlignRight  .GreyGrid th.AlignRight{ text-align:right;}

.BlueGrid th.AlignLeft , .GreyGrid th.AlignLeft { text-align:left;}


.BlueGrid .pagingRow td   , .GreyGrid .pagingRow td , .footable .pagingRow td 

{
   background: #fff;

    border-width: 0;   
 }   

    .BlueGrid .pagingRow tr td span ,  .GreyGrid .pagingRow tr td span , .footable .pagingRow tr td span  {
        text-align: center;
        background: #32a3c6;
		 border-width: 0; 
        padding: 2px 10px 2px 10px;
            border-bottom: 2px solid gray;
            border-right: 1px solid gray;
            border-left: 1px solid #efefef;
            border-top: 1px solid #efefef;
    
        color: #ffffff;
}

        .pagingRow tr td a {
            padding: 2px 10px 2px 10px;
            border-bottom: 2px solid gray;
            border-right: 1px solid gray;
            border-left: 1px solid #efefef;
            border-top: 1px solid #efefef;


            background: url('../../images/bk-boxHeader-grad.png') center bottom repeat-x;
        }

            .pagingRow tr td a:not(.pgr):not(select), .pagingRow tr td a:not(.pgr):not(select) {

                border-bottom: 2px solid gray;
                background: url('../../images/bk-boxHeader-grad.png') center bottom repeat-x #b2b2b2;
            
                color: #303030;
}

                .pagingRow tr td a:not(.pgr):hover, .pagingRow tr td a:not(.pgr):not(select):hover {
                    color: white;
                    padding: 2px 10px 2px 10px;
                    border-bottom: 2px solid gray;
                    background: url('../../images/bk-boxHeader-grad.png') center bottom repeat-x dimgray;
                }


.clickableRow { cursor:pointer;}


/* ==========================================================================
	3List
-------------------------------*/

.LinkImagelist {  width:100%; font-family:'Droid Arabic Naskh' , Tahoma;  }

.LinkImagelist ul { margin:0px 0px 0px 10px; padding:0px; list-style-type:none; width: 98%; }

.LinkImagelist ul li { list-style-type:none; font-size:14px; color:#111111; line-height:22px;   padding: 0px 10px 0px 0px; margin: 14px 12px; width:95%;}

.LinkImagelist ul li.title { list-style-type:none;font-size:12px; color:#2894b6; line-height:22px;   padding: 0px 0px 0px 0px; margin: 0px 0px;}

.LinkImagelist ul li:before { content:"\f053"; font-family:FontAwesome;font-size:13px; color:#2894b6; list-style-type:none;   float: right;
  margin-right: -1.1em; }
  
.LinkImagelist ul li.title:before { content:"\f0d9";  font-family:FontAwesome; visibility:hidden;}

.LinkImagelist ul li a:link, .LinkImagelist ul li a:visited , .LinkImagelist ul li a:hover,   .LinkImagelist ul li a:active { padding: 0px 0px 0px 0px; text-shadow: 0px 0px 0px #cbcbcb; color:#111111; text-decoration:none; line-height: 22px; font-size: 14px; }

.LinkImagelist ul li a:hover{ text-decoration:underline; opacity:0.8; }



/*===================== Alert Style ======================*/

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.alert, .alert h4 {
    color: #c09853;
}
.alert p{ margin-bottom:4px;}
.alert h4 {
    margin: 0;

}
.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 20px;
}
.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-success h4 {
    color: #468847;
}
.alert-danger, .alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.alert-danger h4, .alert-error h4 {
    color: #b94a48;
}
.alert-info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-info h4 {
    color: #3a87ad;
}
.alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
}
.alert-block>p, .alert-block>ul {
    margin-bottom: 0;
}
.alert-block p+p {
    margin-top: 5px;

}


div#page {
			max-width: 900px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
		}
		
.back-to-top {
			position: fixed;
			bottom: 2em;
			right: 0px;
			text-decoration: none;
			color: #111111;
			background-color: #eeeeee;
			font-size: 12px;
			padding: 1em;
			display: none;
			z-index:99999;
			border:1px solid #CCC;
			margin:10px;
		}

.back-to-top:hover {	
			background-color: #f8f8f8;
		}	



.aspNetDisabled .fa { opacity:0.2;
	
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}




.LoginLogoShd{ height:100%; width:100%; background:transparent url(../img/EpaLogo.png) no-repeat top center; padding:205px 0px 0px 0px; background-position-y: 20px;}


.LoginLogoShd label.ui-input-text { color:#111111; font-weight:bold;}

.LogoName{ font-family:'Droid Arabic Kufi' , tahoma , arial;text-align:center; font-size:22px; font-weight:bold; color:#010101;}


.LoginLogoShd .ui-btn { margin:30px 0px 0px 0px;}

.BGLoginBase{ background-image:url(../img/BGLoginBase.png); background-repeat:repeat; padding:40px; width:580px; margin:10px auto; min-height:250px;}


@media screen and (min-width: 750px) and (max-width: 1190px){ }

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


.wrap{ width:98%; margin:0px auto;} 

#header .logo{ float:none; width:100%;   text-align:center;}

 header{ height:auto;}
 
.logo img {  margin: 0px 0px 0px 0px;  }

.IconsListView 	{display: table; float: none;margin: 0px auto;}

.IconsListView ul li{ min-width:80px;} 

.UserName .AlignLeft{ text-align:center;}

.LandingPageSection .span_1_of_3{width:100%;}

.BGLoginBase { width:65%;} 

.LoginLogoShd {padding:180px 0px 0px 0px; background-position-y:5px;} 

.LogoName{ font-size:18px;}	

.FLarge , .Fmedium {width:100%}

table.BlueGrid {overflow-x: auto;display: block;} 

.MainWrapper .button , .MainWrapper input.button , .MainWrapper button.button {width:60%; margin:10px auto;} 

.BlueGrid tbody{width:100%;display: inline-table;}  

.logo{height:80px; margin:0px; background-position: center;} 

.Fmedium , .FLarge , .FxLarge{ width:92%;}

.labelText {margin-top:20px;}

span.radioSpace label { margin-left:10px;}


}



@media screen and (min-width:320px) and (max-width: 321px){  header{ height:auto;} .logo img {  margin: 0px 0px 0px 0px;  } .IconsListView ul li .fa-2x{ font-size:1.3em;}   .IconsListView{width:280px; margin:0px auto;}
 .IconsListView ul li{ min-width:70px;}  .logo{height:60px; margin:0px; background-position: center;} .Fmedium , .FLarge , .FxLarge{ width:90%;}}	
	
@media screen and (min-width: 0px) and (max-width: 740px) { 
    

}

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,

    a:visited {

        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";


    }



    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.cbq-layout-main {  width:100%; font-family:'Droid Arabic Naskh' , Tahoma;  }

.cbq-layout-main ul { margin:0px 0px 0px 10px; padding:0px; list-style-type:none; width: 98%; }

.cbq-layout-main ul li { list-style-type:none; font-size:14px; color:#111111; line-height:22px;   padding: 0px 10px 0px 0px; margin: 14px 12px; width:95%;}

.cbq-layout-main ul li.title { list-style-type:none;font-size:12px; color:#2894b6; line-height:22px;   padding: 0px 0px 0px 0px; margin: 0px 0px;}

.cbq-layout-main ul li:before { content:"\f053"; font-family:FontAwesome;font-size:13px; color:#2894b6; list-style-type:none;   float: right;
  margin-right: -1.1em; }
  
.cbq-layout-main ul li.title:before { content:"\f0d9";  font-family:FontAwesome; visibility:hidden;}

.cbq-layout-main ul li a:link, .cbq-layout-main ul li a:visited , .cbq-layout-main ul li a:hover,   .cbq-layout-main ul li a:active { padding: 0px 0px 0px 0px; text-shadow: 0px 0px 0px #cbcbcb; color:#111111; text-decoration:none; line-height: 22px; font-size: 14px; }

.cbq-layout-main ul li a:hover{ text-decoration:underline; opacity:0.8; }

/* Added by Anju to give a disabled style for controls  */
input[readonly="readonly"] , input[disabled ="disabled"] , textarea[disabled ="disabled"] , textarea[readonly="readonly"] , select[disabled ="disabled"]  { color:#848284 !important; background-color:rgb(247, 247, 247)!important}

.Validator{
/*font-size:12px !important;*/
color:red !important;
/*display:block !important;*/
	}

span.Validator[style*="inline"]
{
  display:block !Important;
  color:red;
}


.ReqValidator{
/*font-size:12px !important;*/
color:red !important;
	}

.Required{
/*font-size:14px !important;*/

color:red !important;
	}

/* Added by Anju to center the Modal dialog to center of the screen  */
.ms-dlgContent
 {
 position:fixed! important;
 }
/* 
.TblForm td:nth-child(){white-space: nowrap;}*/


/*
div.ReportViewer{
	width:100%;
}

div.ReportViewer table{
	width:100%;
}*/

.ChkBox label{ margin-right:10px;color:black;}
.ChkBox input {vertical-align: middle;}


/******************
Progress Panel
******************/

/*.progressPanel
{
background-color:#ffffff; 
z-index:99999;  
height:30px; 
width:350px; 
border:2px solid #929292; 
padding:60px; 
position:absolute; 
display:block; 
top:50%; 
left:35%; 
vertical-align:middle;
background-image:url('/_layouts/15/images/EPAOzoneResources/ajax-loader.gif');
background-repeat:no-repeat;
background-position:center;
}*/


.progressPanel
{
position: absolute;
 background-color: grey;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 opacity: 0.8;
 -moz-opacity: 0.8;
 filter: alpha(opacity=80);
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 z-index: 10000;
background-image:url('/_layouts/15/images/EPAOzoneResources/ajax-loader.gif');
background-repeat:no-repeat;
background-position:center;
}



.texAlginRIghtSearch {
    float: left;
}
 .DisableSpan {
        padding: 7px 8px;
        outline: none;
        color: #231f20;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #bababa;
        border-radius: 0px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -moz-transition: all .15s ease-in 0;
        -webkit-transition: all .15s ease-in 0;
        vertical-align: middle;
        font-family: 'Source Sans Pro', sans-serif;
        background-color: #EFEFEF;
        opacity: 0.8;
        cursor: not-allowed;
        font-weight: bold;
        display: block;
        font-weight: normal;
        line-height: 25px;
    }