@font-face{
      font-family:"BYekan";
      src:url(../fonts/BYekan.eot)format('eot'),
          url(../fonts/BYekan.woff)format('woff'),
          url(../fonts/BYekan.ttf)format('ttf');

}
body{
      background:url(../img/bg.jpg);
 background-color:#000;
      font:11px tahoma,geneva,sans-serif;
      font-size:11px;
}
@media(min-width:500px){
      .container{
            max-width:500px;
      }
}
#header{
      float:right;
      width:100%;
      height:4px;
      background:#014a53;
}
.head-btn{
      
      font-family:BYekan ;
       background:#014a53;
       color:#fff!important;
       border-radius:0 0 8px 8px!important;
}
.main{
      float:right;
      width:100%;
      background:#ececec;
      padding:20px;
      margin-top:20%;
      border-radius:20px;
      direction:rtl;
      border:6px solid #014a53;
}
.main hgroup{
      float:right;
      width:100%;
      margin-top:-20px;
      direction:rtl;
}
.main hgroup h3{
      font-family:BYekan ;
      font-weight:bold;
      float:right;
      width:100%;
      color:#014a53;
      text-align:right;
      /* text-shadow:0px 1px 0px #015f6c; */
}
.main hgroup h3 sub{
       float:left;
      /* color: #E43825; */
}
.main hgroup h3 sub a{
       font-family:BYekan ;
      /* color: #E43825; */
}
.main p{
      text-align:right;
       color: #014a53; 
       font-family:BYekan ;
}
.line{
      float:right;
      width:100%;
      height:1px;
      background:#014a53;
      margin-bottom:10px;
}
.line-cloud{
      background:#eee!important;
}
.clear{
       clear:both;
}
.table{
      direction:rtl;
      font-family:BYekan ;
      color: #014a53; 
        
      /* background:#f41c1c ; */
}
.table td{
      border:0!important;
      /* color: #f41c1c;  */
      /* color: #f41c1c;  */
        
      /* background:#f41c1c ; */
}
.table th{
      font-family:BYekan ;
       text-align:center;
       /* color: #f41c1c;  */
        /* color: #f41c1c; 
        
        background:#f41c1c ; */
}
.table td span{
       color:#014a53;
       margin-left:10px;
}
.form-control{
      box-shadow:inset 0 0 0 0;
      box-shadow:0 0 0 0!important;
      padding:4px!important;
      height:auto;
      border-radius:10px;
      border-color: #014a53;
      text-align: center;
      background:#f6f6f6;
      font-family:BYekan ;
      font-size: 10px;
     
}
.form-control:focus{
      border:1px solid #ccc;
      background:#fff;
      border-color: #008799;
}
.main label{
      float:right;
      width:100%;
      direction:rtl;
      font-weight:normal;
      position:relative;
      top:4px;
      font-family:BYekan ;
      color: #014a53;
}
.main label span{
      color:#ff6918;
     
      padding-right: 1px;
}
.my-btn{
      background:#2ecc71!important;
      border-radius:30;
      border: 1px;
      border-color: #28ad60;
      color:#fff!important;
      direction:rtl;
      font-family:BYekan ;
}
.my-btn:hover{
      background:#48D583!important;
}
.my-btn span{
      float:right;
      position:relative;
      left:5px;
      top:3px;
}
.btn-danger{
      background:#e74c3c!important;
      border:0!important;
}
.btn-danger:hover{
      background:#E43825!important;
}
footer {
      text-align: center;
      padding: 20px;
      /* background: #333; */
      color: #ffffff;
    }
.alert{
       float:right;
       width:100%;
       font-weight:bold;
       /* color:#63ff01; */
}
.errorMessage{
       float:right;
       width:100%;
       color:#E60000;
       margin-bottom:-8px;
}
::selection{
       background:#666;
       color:#eee;
}
.btn-default{
       border-radius:0;
       font:12px BYekan ;
       padding:8px!important;
       background:#f6f6f6;
}
.btn-default:hover{
       background:#fff!important;
}

.ring
{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 width:200px;
 height:200px;
 background:transparent;
 border:3px solid #3c3c3c;
 border-radius:50%;
 text-align:center;
 line-height:200px;
 font-family:sans-serif;
 font-size:23px;
 color:#fff000;
 letter-spacing:2px;
 text-transform:uppercase;
 text-shadow:0 0 10px #fff000;
 box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ring:before
{
 content:'';
 position:absolute;
 top:-3px;
 left:-3px;
 width:100%;
 height:100%;
 border:3px solid transparent;
 border-top:3px solid #fff000;
 border-right:3px solid #fff000;
 border-radius:50%;
 animation:animateC 2s linear infinite;
}
.spannn
{
 display:block;
 position:absolute;
 top:calc(50% - 2px);
 left:50%;
 width:50%;
 height:4px;
 background:transparent;
 transform-origin:left;
 animation:animate 2s linear infinite;
}
.spannn:before
{
 content:'';
 position:absolute;
 width:16px;
 height:16px;
 border-radius:50%;
 background:#fff000;
 top:-6px;
 right:-8px;
 box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
 0%
 {
   transform:rotate(0deg);
 }
 100%
 {
   transform:rotate(360deg);
 }
}
@keyframes animate
{
 0%
 {
   transform:rotate(45deg);
 }
 100%
 {
   transform:rotate(405deg);
 }
}