@font-face {
  font-family: 'BYekan';
  src: url('fonts/BYekan.eot?#') format('eot'),
       url('fonts/BYekan.woff') format('woff'),
       url('fonts/BYekan.ttf') format('truetype');
}
@font-face {
  font-family: 'BTitrBold';
  src: url('fonts/BTitrBold.eot?#') format('eot'),
       url('fonts/BTitrBold.woff') format('woff'),
       url('fonts/BTitrBold.ttf') format('truetype');
}

@font-face {
  font-family: 'BBCNassim';
  src: url('fonts/BBCNassim.eot?#') format('eot'),
       url('fonts/BBCNassim.woff') format('woff'),
       url('fonts/BBCNassim.ttf') format('truetype');
}

body {
   font: 12px/1.3em tahoma, Arial;
   line-height:1em;
   direction:rtl;
   font: normal 1.05em byekan;
   color: #222;
   margin: 0;
}

/* Links */
a:link, a:visited {
  color: #0066CC;
  text-decoration: none;
}

a:hover, a:active {
  color: #990066;
  text-decoration: none;
}

#header{
  height: auto;
  width:100%;
  height: 60px;
  float: right;
  background: #0167af;
  border-bottom: 1px solid #fff;
}

/* ----header -----*/

#header #title{
float: right;
font: normal 1.3em BTitrBold;
color: #fff;
margin: 10px 10px 0 0;
}

#header #logo{
float: left;
border-radius:100%;
background: #eee;
}

#header #logo img{
  margin: 5px;
  width: 50px;
  height: 50px;
}

/* --------------navigation------------- */

#navi{
    width: 100%;
    float: right;
    height: 42px;
    background: #5F5F5F url(../images/bg-menu.gif) repeat-x bottom;
}
#navi .right{float: right;}
#navi ul{padding: 0px;margin: 0px;}
#navi li{
  display: inline-block;
  position: relative;
}

#navi li a{
    color: #fff;
    padding: 6px 15px 5px 15px;
    border-bottom: medium none;
    display: inline-block;
    border-left: 1px solid #777;
    float: right;
    margin-right: -4px;
}

#navi a:hover{color: #fff;background: #000;}

#navi li ul li{display: block;}

#navi ul ul a{
  border-left: none;
  min-width: 170px;
  margin-right: 0px;
}

#navi .sub {
    margin-top: 37px;
    position: absolute;
    z-index: 9999;
    visibility: hidden;
    background: #5F5F5F;
    width: 100%;
    min-width: 200px;
    display: block;
    margin-right: -4px;
}

#navi li:hover>.sub {visibility: visible;}

#navi .left{float: left;}

#navi .left a{float: left; background: #EB0000;}

#navi .left a:hover{
    background: #000;
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
}
#navi span{
    float: right;
    padding: 6px 15px 5px !important;
    border-right: 1px solid #777;
    color: #CACC9A;
}

/* ---- content -----*/

#content{
  margin:0.4% 0.75% ;
  float: left;
  width: 96%;
  background: #f3f5f5;
  padding: 1.25%;
}

#epayform{
border: 5px solid #ccc;
border-radius: 2px;
margin: 0 auto;
padding: 20px;
width: 24%;
background: #eee;
}

#epayform #step{
	max-width: 100%;
	height: auto;
}

/* ---- footer -----*/

#footer{
    clear: both;
    width: 100%;
    height: 60px;
    background: #5F5F5F url(../images/bg-footer.gif) repeat-x top;
}

#footer span{
    float: left;
    max-height: 40px;
    max-width: 220px;
    margin-top: 17px;
}

#footer img{
    height: auto;
    width: 100%;
}

#footer p{
    float: right;
    font:normal 11px tahoma;
    margin-right: 10px;
    color: #999;
    padding-top: 15px;
}

#footer a{color: #E3E144;}

/* ------- forms ------*/

.mandatory{
  color:#f00;
  font: normal 15px Byekan;
  }

input, textarea, select{
  background: #fff;
  border: 1px solid #444;
  font: normal 15px Byekan;
  color:#111111;
  vertical-align:middle;
  padding:2px;
  opacity: 0.9;
  filter: alpha(opacity = 90);
  }
input:hover, textarea:hover, select:hover {
  border: 1px solid #111;
  opacity: 1;
  filter: alpha(opacity = 100);
  }

input:focus, textarea:focus, select:focus {
    background: #F0FFF0;
    border: 1px solid #111;
  }

.reset{cursor: pointer;}

.submit{
  padding:1px 6px 3px 6px;
  cursor: pointer;
  color:#fff;
  background: #0167AF;
  border: 1px solid #333;
  border-radius: 3px;
}

.submit.epay{
  font-size: 11px ;
  font-family: tahoma;
}

.submit:hover{
  cursor: pointer;
  background: #FF4500;
  border: 1px solid #000;
}

.submit:focus{
  background: #0066CC;
}

#myform div {
    margin-bottom: 20px;
}

#myform label{
    color:#A30300;
    display: block;
    margin: 20px 0 0 0;
}

#loading{
    margin: 0 auto;
    text-align: center;
}

form #account input,form #loan input{
text-align: center;
}

#myform h3{
	text-align: center;
	border: 1px solid #B22222;
	border-radius: 3px;
	font-weight: normal;
	color: blue;
}
#myform p{
	clear: both;
}

#hideinput {display: none;}

/* ------------------ Table Styles bartik ------------------ */

table {
  border: 1px solid #000;
  border-spacing: 0;
  font-size: 0.8em;
  margin: 10px 0;
  width: 100%;
}

table tr th {
  border-bottom-style: none;
  text-align: right !important;
  background-color: #73AD21;
  color: #FFF;
  font:normal 1em byekan;
  text-align: center;
}

tr:nth-child(even) {
   background-color: #F0F0F0;
}

tr:nth-child(odd) {
    background: #D6D6D6;
}

tr td,
tr th {
  padding: 2px 6px;
  border: 1px solid #fff;
  vertical-align: middle;
}

.sticky-header{ z-index:100;}

tr:hover{ background-color: rgba(129,208,177,.3);}
table td a {color: #0066CC; }


table .left{
text-align: left;
}
table .right{
text-align: right;
}
table .center{
text-align: center;
}


#epayform table #col1{
	font: normal 1.4em BBCNassim;
}

#epayform table #col2{
	font-size: 1.2em;
	color:#A30300; 
}

td#col2{
	color:#A30300; 
}

a#btn-bank{
	float: left;
	margin: 0px 0 20px 0;
}

/* ----- notify ----*/

#note{
    clear: both;
    font:normal 11px tahoma;
    line-height: 2em;
    border: 1px solid #73AD21;
    background: #F3FFE5;
    text-align: justify;
    padding-left: 20px;
}

#msg{
    border: 1px solid #73AD21;
    background: #F3FFE5 url('../images/msg.png');
    background-position: right;
    background-repeat: no-repeat;
    padding: 5px 35px 5px 5px;
    text-align: justify;
    margin: 20px 0px;
}

#warning{
    border: 1px solid #FF5252;
    background: #FFF0F2 url('../images/warning.png');
    background-position: right;
    background-repeat: no-repeat;
    padding: 10px 40px 10px 15px;
    text-align: justify;
    margin: 20px 0px;
}

/*---- epayment state page ----*/

#epaystate td{
 font-size: 17px;
}

#epaystate .faild{
  color: red;
}

#epaystate .success{
  color: green;
}

/* ---- print - button----*/

#prntpag{
display: block;
float: left;
width: 35px;
height: 35px;
background: url('../images/print.png') no-repeat;
margin: -42px 0 0 7px;
}

#prntpag:hover{
opacity: 0.8;
}

button {
    background: #0167AF;
    color: #fff;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 2px 5px 2px 5px;
    font: normal 15px Byekan;
    cursor: pointer;
    margin: 5px 0 -5px 0;
    float: left;
}

button:hover {
background: #FF4500;
}

/*---steps -----*/
#gam1,#gam2,#gam3{
clear: both; 
margin: 0 auto;
}
#gam1{min-height:50px; }
#gam2,#gam3{min-height:65px; }

#stp1,#stp2,#stp3,#stp3no{
  width: 29%;
  height: 38px;
  border: 4px solid #fff;
  border-top-left-radius: 35px;
  border-bottom-left-radius: 20px;
  font: normal 1em BBCNassim;
  text-align: right;
  float: right;
  display:inline;
  position: relative;
}

#gam1 #stp1{background: #D0E8F6; padding: 10px 1% 0px 1%;}
#gam2 #stp1,#gam3 #stp1{background: #3D924E;color: #fff; padding: 10px 1% 0px 1%;}
#gam3 #stp2,#gam3 #stp3{background: #3D924E;color: #fff;}
#gam3 #stp3no{background: #ee4b4b; color: #fff;}

#stp2, #stp3, #stp3no{
  margin-right: -7%;
  padding: 10px 7% 0px 1%;
}

#gam1 #stp2,#gam1 #stp3,#gam2 #stp3{
  background: #9e9e9e;
  color: #fff;
}
#gam2 #stp2{background: #D0E8F6;}

#stp1{z-index: 3;}
#stp2{z-index: 2;}
#stp3,#stp3no{z-index: 1;}

#stp1 span,#stp2 span,#stp3 span,#stp3no span{
  float: right;
  width: 28px;
  height: 28px;
  border: 2px dotted #fff;
  border-radius: 30px;
  font: normal 1.1em BYekan;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

#gam1 #stp1 span{background: #008DCC;}
#gam1 #stp2 span,#gam1 #stp3 span,#gam2 #stp3 span{background: #5F5F5F;}

#gam2 #stp1 span,#gam3 #stp1 span,#gam3 #stp2 span,#gam3 #stp3 span{background: #0F5B00;}
#gam2 #stp2 span{background: #008DCC;}
#gam3 #stp3no span{background: #c60707;}

#gam1 .blink,#gam2 .blink,#gam3 .blink{
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration:0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

#gam1 .blink,#gam2 .blink,#gam3 .blink {   
  animation-duration: 1000ms;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#btnapp{
    clear: both;
    margin: 20px 0;
    padding: 20px;
}
#btnapp button{
    text-align: center;
    color: #fff;
    background: #6b71e1;
    font-size: 1.3em;
    width: 100%;
}
#btnapp button:hover{
    background: #595fca;
}

/*---- media ----*/
@media screen and (max-width: 1500px) {
    #epayform{width: 29%;}
}

@media screen and (max-width: 1400px) {
    #epayform{width: 31%;}
}

@media screen and (max-width: 1250px) {
    #epayform{width: 34%;}
}

@media screen and (max-width: 1150px) {
    #epayform{width: 39%;}
}

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

    #epayform{width: 41%;}
}
@media screen and (max-width: 900px) {
    #navi span{display: none;}
    #epayform{width: 45%;}
}    
@media screen and (max-width: 850px) {
    #navi span{display: none;}
    #epayform{width: 47%;}
}
@media screen and (max-width: 820px) {
    #header #logo{display: none;}
    #epayform{width: 58%;}   
}
@media screen and (max-width: 648px) {
    #header #logo{display: none;}
    #epayform{width: 68%;}   
}

@media screen and (max-width: 550px) {
    #epayform{width: 76%;} 
    #gam3ok,#prntpag {display: none;}
}

@media screen and (max-width: 500px) {
    #epayform{width: 82%;} 
}

@media screen and (max-width: 450px) {
   #navi .right li:last-child{display: none;}
    #epayform{width: 88%;}  
}
@media screen and (max-width: 430px) {
   #navi .right li:last-child{display: none;}
    #epayform{width: 90%;}  
    #stp1,#stp2,#stp3{
  	height: 55px;
  	margin-bottom: 20px;
  	border: 3px solid #fff;
  	border-top-left-radius: 60px;
  	border-bottom-left-radius: 30px;
  	font: normal 0.9em BBCNassim;
  	}
}