body{
    font-family: 'IRANSans';
    direction: rtl;
}
a{
    text-decoration: none !important;
}
.ltr{
    direction: ltr;
}
.center{.masjed .title .subject span
    text-align: center !important;
}
.hidden{
    display: none;
}
.tooltip-inner{
    font-family: 'IRANSans';
    background-color: #a8b9bd;
    color: #fff;
    font-weight: 300;
}
.tooltip.bottom .tooltip-arrow{
    border-bottom-color: #a8b9bd;
}
#main{
    text-align: center;
    margin-bottom: 50px;
}
.logo{
    display: inline-block;
    background: url("../images/logo.png");
    width: 313px;
    height: 248px;
}
.logo-min{
    display: inline-block;
    background: url("../images/logo-min.png");
    width: 203px;
    height: 136px;
    margin-top: 10px;
}
.etekaf{
    position: relative;
    padding: 25px 60px 15px 60px;
    overflow: auto;

}
.etekaf .title{
    color: #ffffff;
    margin: auto;
    max-width: 432px;
    position: relative;
    z-index: 20;
    background: #06d0e1;
    border-radius: 8px;
    line-height: 55px;
    padding: 0 20px;
    cursor: default;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.etekaf .title.error{
    background: #F44336;
    padding: 0;
    max-width: initial;
    font-size: 12px;
}
.etekaf .title h1{
    font-size: 20px;
    display: inline-block;
}
.etekaf .title .time{
    font-size: 14px;
    margin-right: 5px;
}
.register{
    color: #ffffff;
    max-width: 432px;
    position: relative;
    margin: -55px auto 0 auto;
    z-index: 10;
    line-height: 50px;
    transition: all 0.5s ease-in-out;
}
.register2{
    float: left;
    margin: -7px auto 0 auto;
    color: #ffffff;
    max-width: 432px;
    position: relative;
    z-index: 10;
    line-height: 50px;
    transition: all 0.5s ease-in-out;
}
.register2 .reg2{
    margin: 0 20px;
    background: #0bbdcc;
    border-radius: 8px;
    padding: 5px 75px 0 75px;
    cursor: default;
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    color: #fff;
}
.etekaf:hover .register, .etekaf .register.mobile{
    margin: -7px auto 0 auto;
}
.register .reg{
    margin: 0 20px;
    background: #0bbdcc;
    border-radius: 8px;
    padding: 5px 100px 0 100px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    color: #fff;
    line-height: 50px;
}
.register .reg:hover{
    background: #0898a5;
}
.operators .btn-box{
    display: inline-block;
}
.operators .btn{
    background: #d3dcde url("../images/icons-w.png") no-repeat;
    height: 56px;
    width: 56px;
    margin-left: 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.operators .btn:hover{
    background-color: #a8b9bd;
}
#Tracking{
    background-position-x: -385px;
}
#Blog{
    background-position-x: -330px;
}
#News{
    background-position-x: -275px;
}
#Gift{
    background-position-x: -220px;
    background-color: #9CCC65;
}
#Gift:hover{
    background-color: #7CB342;
}
#Message{
    background-position-x: -165px;
}
#feedback{
    background-position-x: -110px;
    margin-left: 0;
}


.header{
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    line-height: 50px;
    margin-top: 40px;
    text-align: right;
    padding: 0 15px;
    border-radius: 4px;
}
.header .title{
    color: #666666;
    font-weight: bold;
    font-size: 17px;
    display: inline-block;
}
.header .btn{
    float: left;
    padding: 5px 15px;
    border-radius: 5px;
    background: #eeeeee;
    color: #fff;
    margin-top: 11px;
    margin-right: 10px;
    transition: all 0.2s ease-in-out;
}
.header .btn.active{
    background: #00BCD4;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
.header .btn:hover{
    background: #8BC34A;
}
#capacity{
    margin: 12px 34px;
    overflow: auto;
}
#capacity .text{
    font-size: 12px;
    display: inline-block;
    background: #607d8b;
    border-radius: 4px;
    float: left;
    padding: 2px 7px;
    color: #fff;
    cursor: default;
}

.masjed{
    margin: 0 25px 15px 25px;
}
.masjed .title{
    background: #fcfcfc;
    border: 1px solid #ededed;
    box-shadow: 0 1px 5px rgba(0,0,0,.12);
    border-radius: 6px;
    line-height: 45px;
    text-align: right;
    padding: 0 15px;
    cursor: default;
    z-index: 20;
    display: inline-block;
    width: 100%;
    position: relative;
}
.masjed .title .subject{
    font-size: 15px;
    color: #666666;
    display: inline-block;
}
.masjed .title .subject span{
font-size: 15px;
    color: #fff;
    font-weight: 400;
    background: #f44336;
    border-radius: 15px;
    padding: 0 15px;
}
.masjed .title .list{
    color: #fff;
    border-radius: 4px;
    background: #8bc34a;
    padding: 0 5px;
    display: inline-block;
    line-height: 22px;
    font-size: 10px;
    margin-right: 5px;
    font-weight: 300;
    transition: all 0.2s ease-in-out;
}
.masjed .title .list:hover{
    background: #FFC107;
}
.masjed .title .capacity,.masjed .title .remaining, .masjed .completed{
    float: left;
    color: #fff;
    border-radius: 4px;
    display: inline-block;
    line-height: 22px;
    font-size: 13px;
    margin-right: 5px;
    margin-top: 11px;
    min-width: 55px;
    text-align: center;
}
.masjed .title .capacity{
    background: #00bcd4;
}
.masjed .title .remaining{
        background: #60c445;
}
.masjed .completed{
    background: #f44336;
    min-width: 113px;
}
.masjed .information{
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 4px;
    text-align: right;
    padding: 20px;
    line-height: 30px;
    font-size: 15px;
    margin: -5px 20px 0 20px;
    /*margin: -45px 20px 0 20px;*/
    position: relative;
    z-index: 10;
    /*display: none;*/
}
.masjed .information .address, .masjed .information .tel{
margin-left: 122px;
    font-size: 13px;
}
.masjed .information .cost{
    position: absolute;
    bottom: -7px;
    background: #607d8b;
    color: #fff;
    font-size: 11px;
    left: 0;
    right: 0;
    text-align: center;
    border-radius: 0 0 4px 4px;
    line-height: 18px;
}
.masjed .information .btn{
    background: #CDDC39;
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    line-height: 58px;
    padding: 0 20px;
    transition: all 0.2s ease-in-out;
}
.masjed .information .btn.blue{
     background: #06d0e1;
}
.masjed .information .btn:hover{
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
#completed{
    border-top:1px solid #dfdfdf;
    padding-top: 15px;
    margin: 15px 25px;
}
.masjed.inaccessible{

}
.masjed.inaccessible .title{
    background: #ffe6e6;
    border:1px solid #ffb7b7;
    box-shadow: 0 1px 5px rgba(255,0,0,.12);
    cursor: default;
}
.masjed.inaccessible .title .subject{
    color: #B71C1C;
}
.masjed.inaccessible .title .remaining{
    background: #F44336;
}
.masjed.inaccessible .information{
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    color: #B71C1C;
}
#completed .masjed{
    margin: 0 0 15px 0;
}
#completed .masjed .title{
    background: #ffe6e6;
    border:1px solid #ffb7b7;
    box-shadow: 0 1px 5px rgba(255,0,0,.12);
    cursor: default;
}
#completed .masjed .title .list{
    background: #ffcece;
    cursor: pointer;

}#completed .masjed .title .list:hover{
     background: #ffb6b6;
 }
.Mosque{
    color: #dbdbdb;
    font-size: 14px;
    position: absolute;
    top: -25px;
    right: 10px;
}
.Mosque span{
    font-size: 9px;
}
#StepThree, #StepFour, #StepFive{
    /*display: none;*/
}
.box{
    background: #ffffffbf;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
    margin-top: 40px;
    text-align: right;
    padding: 0 15px;
    border-radius: 4px;
    position: relative;
}
.box .level{
    border:1px solid #f2f2f2;
    box-shadow: 0 0 5px rgba(0,0,0,0.08) inset;
    border-radius: 4px;
    position: absolute;
    left: 20px;
    top:12px;
}
.box .level .cell{
    border-right:1px solid #f2f2f2;
    height: 27px;
    width: 19px;
    float: left;
}
.box .level .cell.active{
    background: #cddc39;
    border-right-color:#e1ef57;
}
.box .level .cell:first-child{
    border-radius: 4px 0 0 4px;
}
.box .level .cell:last-child{
    border-radius: 0 4px 4px 0;
    border: none;
}
.box .title{
    font-size: 17px;
    font-weight: bold;
    line-height: 50px;
    color: #666666;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px;
}
.box .title.end{
    border-bottom: 3px solid #d6e35e;
    margin-bottom: -10px;
}
.box .change{
    margin: 20px 0 0 0;
    overflow: inherit;
}
.box .change.ajax{
    margin-top: -20px;
    overflow: hidden;
}
.box .form{
    margin: 30px 0;
    padding: 0 15px;
}
.box .form .row{
    margin-bottom: 15px;
}
.box .form .row:last-child{
    /*margin-bottom: 0;*/
}
.box .input{
    position: relative;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.06);
}
.box .input:last-child{
    margin-bottom: 0;
}
.box .input:after{
    content: "";
    position: absolute;
    left: 0;
    top:0;
    width: 0;
    height: 0;
    border-top: 10px solid #06d0e1;
    border-left: 0 solid transparent;
    border-right: 10px solid transparent;
}
.box .input.free:after{
    content: "";
    border: none;
}
.box .input:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    border-radius:4px 0 0 4px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    z-index: 1;
}
.box .input.success input, .box .input.er input{
    padding-left: 40px;
}
.box .input.R:after{
    border-top-color: #ff5722;
}
.box .input.success:before{
    /*content: "\1f5f8";*/
    content: "\2713";
    background: #06d0e1;
    line-height: 50px;
}
.box .input.er:before{
    content: "\292b";
    background: #ff5722;
    padding-left: 1px;
    line-height: 45px;
}
.box input, .box select, .box textarea{
    line-height: 43px;
    background: #fff;
    border:1px solid #dbdbdb;
    border-radius: 4px;
    width: 100%;
    padding: 0 10px;
    outline: none;
    box-shadow: none;
    text-align: right;
}
.box select{
    height: 45px;
    color: #757575;
    padding-right: 7px;
}
.box textarea{
    margin-bottom: -7px;
}
.birth input{
    text-align: center;
}
.contact-tel{
    border-top: 1px solid #dbdbdb;
    line-height: 55px;
    text-align: center;
}
.contact-tel span{
    padding-right: 3px;
    font-weight: bold;
}
.contact-tel span:first-child{
    padding-right: 6px;
    font-weight: 300;
}
.box .send{
    border-top: 1px solid #dbdbdb;
    padding: 23px 15px 28px 15px;
    transition: all 0.2s ease-in-out;
}
.box .send .row{
    margin: 0!important;
}
.box .send .btn{
    font-size: 18px;
    background: #06d0e1;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: block;
    line-height: 45px;
    padding: 0;
    box-shadow: 0 5px 5px rgba(0,0,0,0.06);
    transition: all 0.2s ease-in-out;
    margin: 2px 0;
    width: 100%;
}
.box .send .btn.back{
    background: #ff5722;
}
.box .send .btn.submit{
    background: #cddc39;
}
.box .send .btn:hover, .box .send .btn:focus{
    box-shadow: 0 3px 5px rgba(0,0,0,0.06);
    margin: 4px 0 0 0;
    outline: none;
}
.box .error{
    background: #ffeee8;
    border-right: 2px solid #ff5722;
    border-left: 2px solid #ff5722;
    margin: 20px 15px -15px 15px;
    font-size: 12px;
    line-height: 30px;
    padding: 0 10px;
}
.box .info{
    background: rgba(6, 208, 225, 0.1);
    border-right: 2px solid #06d0e1;
    border-left: 2px solid #06d0e1;
    margin: 20px 15px 20px 15px;
    font-size: 12px;
    line-height: 30px;
    padding: 0 10px;
}
.box .warning{
    background: #FFA000;
    border-right: 2px solid #FFC107;
    border-left: 2px solid #FFC107;
    margin: 20px 15px 10px 15px;
    font-size: 12px;
    line-height: 30px;
    padding: 0 10px;
    color: #ffffff;
}
.box .successful{
    background: #edf7ee;
    border-right: 2px solid #4CAF50;
    border-left: 2px solid #4CAF50;
    margin: 20px 15px -15px 15px;
    font-size: 12px;
    line-height: 30px;
    padding: 0 10px;
}
.box .successful.v2{
    background: #7CB342;
    border-right: 2px solid #558B2F;
    border-left: 2px solid #558B2F;
    color: #fff;
}
#address{
    padding: 8px 10px;
    line-height: 25px;
    min-height: 65px;
    resize: none;
    overflow:hidden;
    margin-bottom: -7px;
}
.list{
    position: relative;
    transition: all 0.2s ease-in-out;
}
.list .input{
    z-index: 20;
}
#StepFour .list .input{
    z-index: 55;
}
.items{
    background: #eeeeee;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #dfdfdf;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 10;
}
#FieldLists{
    z-index: 50;
}
.items .item{
    line-height: 30px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    padding: 0 20px;
    background: #eeeeee;
    color: #666666;
    transition: all 0.1s ease-in-out;
}
.items .item:hover{
    background: #06d0e1;
    color: #fff;
    padding-right: 25px;
}
.items .item:hover .line{
    border-bottom-color: #06d0e1;
}
.items .item .line{
    border-bottom: 1px solid #dbdbdb;
    transition: all 0.1s ease-in-out;
}
.items .item:first-child .line{
    margin-top: 10px;
}
.items .item:last-child .line{
    border-bottom: none;
    margin-bottom: 5px;
}
#field, #job, #skill{
    background: transparent;
}
#fieldBG, #jobBG, #skillBG{
    position: absolute;
    top: 0;
    z-index: -1;
}
.selection{
    position: absolute;
    z-index: 30;
    top: 0;
    width: auto;
    height: auto;
    padding-top: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    transition: all 0.2s ease-in-out;
}
.selection.focus{
    width: 100%;
    height: 100%;
    top: 42px;
    background: #fafafa;
    border-color: #dbdbdb;
    border-radius: 0 0 4px 4px;
}
.selection.focus.add{
    border-radius: 0;
}
.selection .select{
    float: right;
    background: #3ab1e4;
    color: #fff;
    padding: 0 10px 0 0;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 9px;
    line-height: 25px;
    cursor: default;
}
.select .remove{
    display: inline-block;
    width: 20px;
    text-align: center;
    font-size: 14px;
    background: #1c96ca;
    border-radius: 3px 0 0 3px;
    margin-right: 10px;
    padding-top: 2px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}
.select .remove:hover{
    background: #1885b4;
}
#JobLists{
    z-index: 16;
}
#StepFive .input.two{
    z-index: 10;
}
#userSkills{
    z-index: 15;
}
#SkillLists{
    z-index: 5;
}


#StepFinal .row{
    margin-bottom: 6px;
}
#StepFinal .row:first-child{
    margin-bottom: 18px;
}
#StepFinal .row .col-lg-6:first-child{
    padding-right: 0;
}
#StepFinal .row .col-lg-6:last-child{
    padding-left: 0;
}
#StepFinal .form{
    margin: 10px 0;
}
#StepFinal .send{
    padding: 23px 0 28px 0;
}
.image{
    width: 95px;
    height: 95px;
    background: #e7eaed url("../images/user.png") center center no-repeat;
    border-radius: 4px;
    display: inline-block;
    float: right;
}
.collection{
    margin-right: 102px;
}
.information{
    background: #f2f4f6;
    border-radius: 4px;
    line-height: 44px;
}
.collection .information:first-child{
    margin-bottom: 7px;
}
.information .subject{
    background: #e7eaed;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    min-width: 90px;
    font-size: 14px;
    font-weight: 200;
    color: #666666;
    padding-right: 7px;
}
.collection .information .subject{
    min-width: 130px;
    padding-right: 15px;
}
.information.home .subject{
    display: block;
    text-align: center;
    border-radius: 4px 4px 0 0;
}
.information .value{
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: #666666;
    padding-right:5px;
}
.information .value.none{
    font-weight: 200;
    color: #bdbdbd;
}
.information.home .value{
    padding: 10px;
    line-height: 30px;
    text-align: justify;
    font-size: 14px;
}
.collection .information .value{
    width: calc(100% - 135px);
    text-align: center;
    padding-right: 0;
}
.box.rp{
    padding: 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.27);
}
.tr{
    text-align: center;
}
.headlines{
    line-height: 52px;
    background: #f0f0f0;
    font-size: 16px;
    border-radius: 5px 5px 0 0;
}
.tr .headlines{
    background: #5bc0de;
    color: #fff;
}
.main{
    line-height: 40px;
}
.tr .main{
    font-size: 17px;
    letter-spacing: 8px;
    color: #607D8B;
    line-height: 50px;
}
.cell{
    display: inline-block;
    cursor: default;
    color: #666666;
}
.package .cell:nth-child(1), .package .cell:nth-child(2){
    width: 37.85%;
    border-left: 1px solid #f0f0f0;
    padding-right: 20px;
}
.package .cell:nth-child(2), .package .cell:nth-child(3){
    padding-right: 5px;
}
.package .cell:nth-child(3){
    width: 22.5%;
}
.footer{
    line-height: 45px;
    background: #f0f0f0;
    overflow: auto;
}
.footer .cell{
    float: right;
}
.footer .cell:nth-child(1){
    color: #f0f0f0;
}
.footer .cell:nth-child(2){
    text-align: left;
    padding-left: 10px;
    font-size: 17px;
}
.footer .cell:nth-child(3){
    background: #5bc0de;
    color: #fff;
    border-radius: 0 0 0 5px;
    margin-right: 4px;
    width: 23.42%;
    padding-right: 10px;
}
.pay .headlines{
    padding-right: 20px;
}
.pay{
    cursor: default;
}
.pay .main{
    overflow: auto;
    line-height: 70px;
}
.pay .main .text{
    font-size: 14px !important;
    color: #666666 !important;
    float: none !important;
}
.pay .main div:first-child{
    float: right;
    margin-right: 20px;
}
.pay .main div:last-child{
    float: left;
    margin-left: 20px;
    font-size: 20px;
    color: #f44336;
}
.pay .deposit{
    margin-bottom: 10px;
    padding: 0 10px;
}
.pay .deposit .record{
    background: #fcd2cf;
    overflow: auto;
    line-height: 40px;
    border-radius: 4px;
    color: #a03030;
    margin-bottom: 5px;
}
.pay .deposit .record.none{
    background: #f1f1f1;
    color: #969696;
    text-align: center;
}
.pay .deposit .record.w{
    background: #fff2cc;
    color: #997300;
}
.pay .deposit .record.w .status{
    background: #FFC107;
}

.pay .deposit .record.success{
    background: #e6f2d9;
    color: #33520e;
}
.pay .deposit .record .status{
    display: inline-block;
    float: right;
    background: #f44336;
    color: #fff;
    min-width: 140px;
    text-align: center;
}
.pay .deposit .record.success .status{
    background: #8bc34a;
}
.pay .deposit .record.success .transaction{
    background: #8bc34a;
    float: right;
    margin-right: 5px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 3px;
    margin-top: 10px;
}
.pay .deposit .record .date{
    display: inline-block;
    margin-left: 10px;
    float: left;
    direction: ltr;
}
.pay .footer .btn{
    display: block;
    border-radius: 0 0 5px 5px;
    color: #fff;
    font-size: 16px;
    background: #f44336;
    line-height: 35px;
    cursor: pointer;
    width: 100%;
}
.pay .footer .btn.print{
    background: #8bc34a;
}
.pay .record .btn{
    background: #f44336;
    color: #fff;
    font-size: 12px;
    line-height: 11px;
    border-radius: 3px;
    margin-right: 5px;
    outline: none;
}
#follow input.focus{
    letter-spacing: 10px;
}
#printBox{
    display: none;
}
/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.none{
    display: none !important;
}