html, body {
  -webkit-tap-highlight-color: transparent;
  /* disable webkit tap highlight */
  overflow-x: hidden;
}

/*start of my custom css*/

/* table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
} */

/* QR container style */
div#qrdiv {width:360px; height:360px} 

table { /* for evenly spaced olumns */
  table-layout: fixed ;
  width: 100% ;
  /* font-family: arial, sans-serif; */
  border-collapse: collapse;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size:8pt; 
  /* font-style:italic; */
}


th {
  border: 1px solid #dddddd;
  /* text-align: center; */
  /* padding: 8px; */
  font-size:7pt; 
}

td { /* for evenly spaced olumns */
  /* width: 25% ; */
  border: 1px solid #dddddd;
  font-size:7pt; 
  /* text-align: center; */
  /* padding: 8px; */
}


/* tr:nth-child(even) {
  background-color: #dddddd;
} */


hr.style1{
	border-top: 1px solid #8c8b8b;
}


hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}


hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}


hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}


hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}


hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}


hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}


hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}


::-webkit-input-placeholder {
  font-style: italic;
  font-weight: normal;
  font-size: 12px
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/Preloader_3.gif) 50% 50% no-repeat #FFFFFF;
}

.datadiv {
  visibility: visible;
  opacity: .6;
  transition: visibility 0s, opacity 0.5s linear;
}

.datadiv:hover {
  visibility: visible;
  opacity: 1;
}


   option{
     font-weight: bold
     /* color: black */
    }
    input[type="text"]{
      color: #009132;
      font-weight: bold;
    }
 /* gradient background */
 .divgradient{
  background: #466368;
  background: -webkit-linear-gradient(#648880, #293f50);
  background:    -moz-linear-gradient(#648880, #293f50);
  background:         linear-gradient(#648880, #293f50);
 }

/* remove bootstrap rounded corners */
input,select,.btn {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

/* spacing in form-inline class */
.form-inline > label {
  margin-left:10px;
}

/* tab content borders */
.tab-pane {
  
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      border-radius: 0px 0px 5px 5px;
      padding: 10px;
      background-color: #648880
  }
  .nav-tabs {
      margin-bottom: 0;
  }

  /* change color of active nav tabs */
  .active a {
      background-color: #648880 !important; 
      -webkit-text-fill-color: #fff
      /* color: black */
    }

    /* .nav-tabs > li > a.active { */
      /* float: none;
      line-height: 19px;
      padding: 9px 10px 11px;
      text-decoration: none;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
      /* color:  #fff; */
  /* } */
          /* tab color */
      /* .nav-tabs>li>a {
        background-color: #648880; 
        border-color: #fff;
        color:#fff;
      } */

      /* active tab color */
      /* .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
        color: #648880;
        background-color: #648880;
        border: 1px solid #fff;
      } */

      /* hover tab color */
      /* .nav-tabs>li>a:hover {
        border-color: #000000;
        background-color: #111111;
      } */
  


  /* .nav-tabs > li.active > a {
      color: #FFF;
      font-size: 16px;
    } */

    /* .nav-tabs > li > a {
      color: #000;
    } */
  /* .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    background-color: #648880;
    border: 1px solid #dddddd;
    border-bottom-color: transparent;
    }  */

/*****************************TABLES LAYOUT*/
/* #region{ font-size: 5px} */
#imgicon1 {height:40px;width:40px;padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#printbtn{height:44px;width:190px;margin-left:40px;padding:0px 0px 0px 0px;}
/*#imgicon2 {height:40px;width:40px;padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}*/


   #nasipitwestdatacontent{
		display: table;
	 	width: 100%; 
	 	background: #fff;
	 	box-sizing: border-box;
   }

	 .captionfullname {
	 	display: block;
	 	width: 100%;
	 	background: #4988ed;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
	 	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
   
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
	 }

   
  .header-row {
    background: #8b8b8b;
    color: #fff;

  }

 .spanrow {
   display: table-row;
 }

 .cell {
   font-size:small;
   display: table-cell;
   padding: 6px; 
   border-bottom: 1px solid #e5e5e5;
   text-align: center;
   -webkit-print-color-adjust: exact;
 }
 .cell2 {
   display: table-cell;
   padding: 3px; 
   border-bottom: 1px solid #e5e5e5;
   text-align: center;
   height: 30px;
   -webkit-print-color-adjust: exact;
 }

 .cellheader {
   text-shadow: 1px 1px #505050;
   font-size:small;
   display: table-cell;
   padding: 6px; 
   border-bottom: 1px solid #e5e5e5;
   text-align: center;
   font-weight: bold;
   background: #7c827c;
   -webkit-print-color-adjust: exact;
 }

	.spanrow:nth-of-type(odd):hover{
    background-color:  #ffe20c;
  }
.spanrow:nth-of-type(even):hover{
    background-color:  #ffe20c;
  }
.spanrow:nth-of-type(odd){
    background-color:  rgb(243,243,243);
  }
.spanrow:nth-of-type(even){
    background-color:  #D3D3D3;
  }
  
   .captions {
	 	display: block;
	 	width: 100%;
	 	background: rgb(194, 193, 192);
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
	 	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
   }
  
   #captions {
	 	display: block;
	 	width: 100%;
	 	background: #94301B;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
	 	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
   }

   .captionheader {
	 	display: block;
	 	width: 100%;
	 	background: #81b3c2;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
    text-shadow: 2px 3px 1px rgba(0,0,0,.3); 
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
   }
   
   .captionheader2 {
	 	display: block;
	 	width: 100%;
	 	height: 45px;
	 	padding-left: 13px;
     font-size: 18px;
     font-weight: bold;
	 	line-height: 45px;
    text-shadow: 2px 3px 1px rgba(0,0,0,.3); 
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
	 }

   #captionheader {
	 	display: block;
	 	width: 100%;
	 	background: #4988ed;
	 	height: 55px;
	 	padding-left: 10px;
	 	color: #fff;
	 	font-size: 20px;
	 	line-height: 55px;
    text-shadow: 2px 3px 1px rgba(0,0,0,.3); 
	 	box-sizing: border-box;
		 -webkit-print-color-adjust: exact;
   }

	 .header-row {
	 	background: #8b8b8b;
     color: #fff;
     width: 100%;
     display: block;

	 }

	/* .row {
    display: table-row;

	} */
  .cellremarks {
    width: 100%;
		font-size:small;
		display: table-cell;
		padding: 6px; 
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
		-webkit-print-color-adjust: exact;
	}
	.cell {
		font-size:small;
		display: table-cell;
		padding: 6px; 
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
		-webkit-print-color-adjust: exact;
	}
	.cell2 {
		display: table-cell;
		padding: 3px; 
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
		height: 30px;
		-webkit-print-color-adjust: exact;
	}

	.cellheader {
    text-shadow: 1px 1px #505050;
		font-size:small;
		display: table-cell;
		padding: 6px; 
		border-bottom: 1px solid #e5e5e5;
		text-align: center;
		font-weight: bold;
		background: #7c827c;
		-webkit-print-color-adjust: exact;
	}


	.primary {
		text-align: left;
		-webkit-print-color-adjust: exact;
	}
	.secondary {
		text-align: right;
		padding-right: 60px; 
	}

 
	input[type="radio"],
	input[type="checkbox"]{
		display: none;
	}

/************************ END OF TABLE LAYOUT*/
#tablecontainer { /*allow auto use of scrollbars*/
		 overflow-x:auto;
		 /*overflow-x:scroll;*/
		 height:350px;
	 	width: 100%; 
	 }

#tablecontainer2 { /*allow auto use of scrollbars*/
		 /*overflow-x:auto;*/
		 /*overflow-x:scroll;*/
		 height:350px;
	 	width: 100%; 
	 }



/* Wobble Bottom */
@-webkit-keyframes hvr-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes hvr-wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.hvr-wobble-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active {
  -webkit-animation-name: hvr-wobble-bottom;
  animation-name: hvr-wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pulse Shrink */
@-webkit-keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
  -webkit-animation-name: hvr-pulse-shrink;
  animation-name: hvr-pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
/*end of my custom css******************************************************************/

.optlvl1 {
  /*color:#000;*/
  font-weight:bold;
}

.optlvl2 {
  /*color:#505050;*/
  color: #315a9b;
  font-weight:bold;
}

.optlvl3 {
  color:deepskyblue;
  /*font-weight:bold;*/
  /*color: yellow;*/
}


/* Lists */
ul {
  margin: 0;
  padding: 0;
}

/* Container */
#container {
  position: relative;
  padding: 20px 40px;
  padding-top: 80px;

  /* margin:0 0 0 0; */
}

/* Menu Button */
.menu-btn {
  width: 100px;
  padding: 10px;
  margin-bottom: 30px;
  background: #000;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}
.menu-btn:hover {
  opacity: 0.6;
}

/* Header */
.site-header {
  position: fixed;
  /* background: #04206b; */
  background: #010e31;
  color: #FFF;
  width: 100%;
  padding: 20px 0;
  text-align: center;
  z-index: 9998;
}

/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid #EEE;
  color: #999;
  padding: 10px;
  font-size: 0.8em;
  text-align: center;
}


/*# sourceMappingURL=demo.css.map */


/*Floating buttonup*/
#myBtnup {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 55px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /* background-color: #009132; Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  /* border-radius: 10px; Rounded corners */
}

/* #myBtnup:hover {
  background-color: #009132; Add a dark-grey background on hover
  opacity: 100
} */


/*Floating buttondown*/
#myBtndown {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /* background-color: #009132; Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  /* border-radius: 10px; Rounded corners */
}

/* #myBtndown:hover { */
  /* background-color: #009132; Add a dark-grey background on hover */
  /* opacity: 100 */
/* } */


/*Floating buttonmodule*/
#myBtnmodule {
  display: unset; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  /* bottom: 30px;  Place the button at the bottom of the page */
  top: 100px;
  /* bottom: 30px; */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  /* background-color: #009132; Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  /* border-radius: 10px; Rounded corners */
}

/* #myBtnmodule:hover { */
  /* background-color: #009132; Add a dark-grey background on hover */
  /* opacity: 100 */
/* } */