@font-face {
    font-family: wyekan;
    src: url(../../fonts/WYekan.ttf);
}

body{
    overflow-x:hidden;
}
/*********************************PAGE STYLE***********************************/
.showContent{
    margin-right:auto;
    margin-left:auto;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    width: 700px;
    
}
/*********************************FONT STYLE***********************************/

.smallfont{
    font-size: 10px;
}

/******************************************************************************/
.acc-menu li{
    list-style:none;
}
p,a,input,textArea,select{
    font-family: wyekan;
}
.loginForm{
width:400px;
height: auto;
border:1px solid #fff;
margin-right:auto;
margin-left:auto;	
direction:rtl;
background-color:#FFFFFF;
padding:0px;
margin-top:200px;

}
.loginForm .img {
	text-align: center;
	padding: 0px !important;
	margin-top: -100px;
	margin-bottom: 50px;
}
.loginForm div{
padding:10px;
margin-bottom:10px;	
font-family: wyekan;
}
.loginForm div .username,.loginForm div input[type=password]{
    font-family: wyekan;
width:270px !important;
height:30px;	
}
.loginForm div input[type=text]{
    font-family: wyekan;
width:205px;
height:30px;	
padding: 0px;
border: 1px solid #ABADB3;
}
.loginForm div input[type=submit]{
	background-color:#000;
	border:none !important;
	width:380px;
	height:70px;
	color:#fff;
        margin-top: 10px;
        font-family: wyekan;
	
}
.loginForm div label{
	color:#666;
	display:inline-block;
	width:100px;	
        font-family: wyekan;
}
body{
background-color:#000000;
}
.fright{
    float: right;
}
i.fright{
    margin:10px;
}
.save{
	background-color: green;
	display: inline-block;
	padding: 20px;
	width: 770px;
	text-align: center;
    font-weight:bold;
	color: #fff;
	margin-top: -60px;
	position: relative;
}
.nok{
    padding:10px;
    background-color:#DC322F;
    width:1000px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    direction:rtl;
    color: #fff;
    font-family:wyekan;
    top:10px;
    left:32%;
    
}
.ok{
    padding:10px;
    background-color:#008000;
    width:1000px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    direction:rtl;
    color: #fff;
    font-family:wyekan;
    top:10px;
    left:32%;
    
}
.paneltable{
    direction: rtl;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.paneltable th{
    text-align: center !important;
    color:#fff !important;
    background-color: #e10000;
    padding-top: 2px;
    padding-bottom: 2px;
    border:1px solid #ccc;
    border-collapse: collapse;
     direction: rtl;
}
.paneltable td{
    text-align: center !important;
    color:#666;
    padding-top: 2px;
    padding-bottom: 2px;
    border:1px solid #ccc;
    border-collapse: collapse;
    direction: rtl;
}
.paneltable td a{
    color: #666;
}
.paneltable tr:hover{
    background-color: #fafafa;
    cursor: pointer;
}

.paneltable tr{
    background-color: #fff;
}
.green{
    background-color: #44b820;
    color: #fff !important;
}
.red{
    background-color: #ea2f56;
    color: #fff !important;
}
.orange{
    background-color: #f6b944;
    color: #fff !important;
}
.panelform{
    direction: rtl;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    padding-top: 30px;
    padding-bottom:0px;
}
.panelform.setting div input[type=text]{
text-align:left !important; 	
}
.panelform div{
    padding: 5px;
    padding-right: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    height:auto;
    overflow:auto;
}
.panelform div label{
    display: inline-block;
    width: 160px;
    color: #666;
}
.panelform div input[type=file]{
    display: inline-block;
    width:665px;
    
}
.panelform div input:focus,.panelform div textarea:focus{
    border-color: #e10000 !important;
}
.panelform div textArea.v1{
    background-color: #fff;
    min-width: 770px;
    max-width: 770px;
    max-height: 300px;
    min-height: 300px;
    display: inline-block;
    padding-right: 5px;
}
.panelform div input[type=text]{
    width: 770px;
    border: 1px solid #ccc;
    height: 40px;
    padding-right: 5px;
}
.panelform div select{
    width: 255px;
    height: 40px;
    border: 1px solid #ccc;
}
.formtitle{
    text-align: right;
    font-weight: bold;
    font-size: 18px;
}
.panelform div textArea.v2{
    background-color: #fff;
    min-width: 770px;
    max-width: 770px;
    max-height: 100px;
    min-height: 100px;
    display: inline-block;
    padding-right: 5px;
}
.note-form{
    font-size:12px;
    color:#666;
    display: block;
    text-align:center;
}
.panelform div input[type="submit"]{
    float: left;
    padding: 20px;
    border-radius: 0px;
    border: none;
    width:150px;
    color: #fff;
    
}
.go_save_with_publish{
    background-color:#44b820;
}
.go_save_without_publish{
    background-color:#F6B944;
}
.pageContent {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}
/***************************CUSTOM WIDTH CLASSAS STYLES*********************/
.width1col{
    width:99.5% !important;
}
.width2col {
	width: 49.5%  !important;
	
}
.width2colwl{
   width: 39.7% !important;
}
.width2d3col{
    width: 70%  !important;
}
.width1d3col{
    width: 14.3%  !important;
}
.width3col{
    width:33%;
}


/*********************************FORM STYLE********************************/
form div{
    padding: 20px;
}
form div input[type=text],form div input[type=username]{
    font-family: wyekan;
    color:#666;
    height: 40px;
    border:1px solid #ccc;
    padding:5px;
}
select{
    border:1px solid #ccc;
    height: 40px;
	color: #666;
}
.jdate{
    width:50px !important;
}
.jmonth{
     width:70px !important;
}
.jyear{
    width: 105px !important;
}
.jyear2{
   width: 40px !important; 
}
.set-date select{
    width: 75px !important;
}
.proedit label{
    width:80px !important;
    font-weight:500;
}
.proedit .col1 {
	width: 875px !important;
}
.proedit .col2 {
	width: 395px !important;
}
.txtarea{
    min-height:150px;
    max-height:150px;
}
.txtarea2{
    min-height:70px;
    max-height:70px;
}
/*********************************LOADING***********************************/
.loading{
position: relative;
display: inline-block;
}
.loading:after,.loading:before{
    content: '';
    position: absolute;
    top:0px;right:0px;bottom:0px;left:0px;
   
}
.loading:before{                    
 background-color: rgba(0,0,0,.3);
}
.loading:after{
    background-image:url(../img/loading/loading.svg) !important;
    padding: 3px;
    background-repeat:no-repeat;
    background-position:center center;
}
.submitloading{
padding: 0px !important;
float:left;
}
/*********************************BUTTON STYLE***********************************/
.btnstyle1 {
	color: #fff;
	padding: 20px;
	background-color: #000;
    display: inline-block;
}
.btnstyle1:hover{
    color:#fff;
    cursor: pointer;
}


.btnstyle2{
  	color: #fff;
	padding: 20px;
	background-color: #e10000;
    display: block;  
    width:100%;
    border:none;
}
/*********************************LINK STYLE***********************************/
.link_style1{
	display: block;
	padding-top:5px;
	padding-bottom: 5px;
}
.link_style1:hover{
    color:#e10000;
}
/*********************************POPUP STYLE***********************************/
.popupContainer{
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    top:0px; bottom:0px; left:0px; right:0px;
    z-index: 100000;
    display: none;
}
.closePopup {
	font-family: verdana;
	color: #fff;
	background-color: #e10000;
	border-radius: 100%;
	position: absolute;
    bottom: 10%;
	top: 9%;
	right: 34%;
	z-index: 1000;
	width: 40px;
	text-align: center;
	height: 40px;
	font-size: 20px;
}
.closePopup:hover{
cursor: pointer
}
.closePopup2 {
	font-family: verdana;
	color: #fff;
	background-color: #e10000;
	border-radius: 100%;
	position: fixed;
    bottom: 10%;
	top: 50px;
	right: 19%;
	z-index: 1000;
	width: 40px;
	text-align: center;
	height: 40px;
	font-size: 20px;
}
.closePopup2:hover{
cursor: pointer
}
.customerContent {
	position: absolute;
	top: 12%;
	width: 600px;
	border: 1px solid #fff;
	right: 35%;
	background-color: #fff;
	padding-top: 20px;
    padding-bottom: 20px;
}
.customerContent2 {
	position: absolute;
	top: 5%;
	width: 800px;
	border: 1px solid #fff;
	right: 20%;
	background-color: #fff;
	padding-top: 20px;
    padding-bottom: 20px;
}
.customerContent2 form div{
    padding: 10px;
}
/*********************************pagination STYLE***********************************/
.pagination_style1 {
	text-align: left;
	display: inline-block;
	float: left;
}
.pagination_style1 .list{
    margin:10px 0;
    direction: rtl;
}
.pagination_style1 .item{
    display: inline-block;
    text-align: center;
    float: left;
    margin: 0 3px;
}
.pagination_style1 .link{
    display: block;
    height: 25px;
    line-height:21px;
    width: 25px;
    border:1px solid #ccc;
    color: #666;
    font-weight: bold;
    font-size:13px;
}
.pagination_style1 .link:hover {
    text-decoration: underline;
}
.pagination_style1 .item.active .link {
    background-color: #e10000;
    color: #fff;
}
.pagininfo_style1 {
    font-size: 12px;
}

/********************************* work-post STYLE***********************************/
.work-post {
    overflow: hidden;
}
.work-post-gal {
    position: relative;
    border:1px solid #dfdfdf;
}

.work-post-gal img {
    width: 100%;
    -webkit-backface-visibility: hidden;
    height: 200px;
}

.work-post-content {
    background: #333;
    height:auto;
    overflow:auto;
    position: relative;
    padding: 20px;
}
.latest-post .work-post-content {
    background-color:#Fff;
     padding: 0px;
}
.work-post-content h5{
    color: #fff !important;
    text-align:center;
    font-family:wyekan;
}
.work-post-content span {
    display: inline-block;
    color: #4984aa;
    font-style: italic;
    font-family: 'WYekan', sans-serif;
    font-size: 12px;
}
ul.filter {
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid #dbdbdb;
    float:right;
}

ul.filter li {
    float: left;
    border-right: 1px solid #eee;
}

ul.filter li a {
    position: relative;
    display: inline-block;
    color: #7e7e7e;
    font-size: 15px;
    font-family: 'WYekan', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
    padding: 12px 17px;
    background: #fff;
}

ul.filter li a.active,
ul.filter li a:hover {
    color: #fff;
    background: #e10000;
}

ul.filter li a.active:after,
ul.filter li a:hover:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border: 1px solid #e10000;
    z-index: 2;
    transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
}

ul.filter li a i {
    color: #7e7e7e;
    font-size: 17px;
    margin-right: 10px;
    vertical-align: middle;
}

ul.filter li a.active i,
ul.filter li a:hover i {
    color: #fff;
}

.portfolio-container {
    width: 1170px;
    margin-left: -15px;
    margin-bottom: 20px;
    float:right;
    text-align:right;
}

.portfolio-container .work-post {
    margin: 15px;
    
}

.portfolio-container .work-post .work-post-content,
.latest-projects .work-post .work-post-content {
    direction: rtl;
}

.with-4-col .portfolio-container .work-post {
    width: 262px;
}

.with-3-col .portfolio-container .work-post {
    width: 360px;
    float: left;
}

.with-2-col .portfolio-container .work-post {
    width: 555px;
}

ul.pagination-list {
    margin-bottom: 38px;
}

ul.pagination-list li {
    display: inline-block;
}

ul.pagination-list li a {
    display: inline-block;
    background: #fff;
    padding: 5px 10px;
    border: 1px solid #eee;
    text-decoration: none;
    font-family: 'WYekan', sans-serif;
    font-size: 13px;
    color: #000;
    transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
}

ul.pagination-list li a.active,
ul.pagination-list li a:hover {
    background: #e10000;
    color: #fff;
}
.work-post-content {
	background: #333;
	height: auto;
	overflow: auto;
	position: relative;
	padding: 20px;
}

.carousel-box .work-post-gal img{
    height: auto;
}
.hover-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,0,0,0.8);
    transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
}


.hover-box a {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -o-transform: scale(0.1);
    -webkit-backface-visibility: hidden;
}

.work-post:hover .hover-box {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-backface-visibility: hidden;
}

.work-post:hover .hover-box a {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-backface-visibility: hidden;
}

.hover-box a:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    background: url('../../../images/zoom-after.png') center center no-repeat;
    transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
}

.hover-box a:hover:after {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    opacity: 0;
}

.hover-box a.zoom {
    right: 50%;
    margin-right: 5px;
    background: url('../../../images/zoom.png') center center no-repeat;
}
.hover-box a.delete {
    right: 50%;
    margin-right: 5px;
    background: url('../../../images/delete.png') center center no-repeat;
}
.hover-box a.edit{
    left: 50%;
    margin-right: 5px;
    background: url('../../../images/school.png') center center no-repeat;
}

.hover-box a.page {
    left: 50%;
    margin-left: 5px;
    background: url('../../../images/page.png') center center no-repeat;
}
.proact {
	background-color: #e10000;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
}
.proact span {
	display: block;
	padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    background-color:  #e10000;
}
.proact span:hover {
	display: block;
	padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    background-color:  #666;
}
.proact span a{
    color:#fff;
    font-size:18px;
}
.publish_sit{
    color:#fff;
    padding:5px;
    position: absolute;
    bottom:0px;
    right:0px;
    width: 30px;
    height:30px;
    text-align: center;
}
.publish_sit:hover{
    cursor: pointer;
}
.publish_sit i{
    color :#fff;
    font-size: 14px;
}
.green{
    background-color: #44b820; 
}
.orange{
    background-color: #F6B944;
}
.postDate {
	background-color: red;
	display: inline-block;
	width: 50px;
	float: right;
	height: 120px;
        margin-left:5px;
}
.postDate span{
    color:#fff !important;
    font-size:18px !important;
    display:block !important;
    margin-top: 5px;
    text-align: center;
    
}
.work-post-content h5 ,.work-post-content p{
    color: #fff !important;
    text-align:right;
    width:320px;
}

/********************************* PAGEVIEW STYLE***********************************/
.pageview_style1 ul li{
   float: left; 
   list-style: none;
}
.pageview_style1 ul li a{

padding: 5px;
border:1px solid #ccc;
margin-right:5px;
font-size:20px;
width: 40px;
height:40px;
display: inline-block;
color:#666;
text-align: center;
}
.pageview_style1 ul li a.active{
    color:#fff;
    background-color: #e10000;
}
.pageview_style1 ul li a:hover{
    color:#fff;
    background-color: #e10000;
}
/********************************* SLIDER MANAGMENT STYLE***********************************/
.sliderSetting{
    height: auto;
    overflow: auto;
}
.sliderPic{
    width: 210px;
    float: left;
    text-align: center;
}
.sliderControler{
    display: block;
    text-align: center;
    
}
.sliderPic img{
    width: 188px;
    margin-bottom:10px;
}
.sliderControler span {
	width: 60px;
	display: inline-block;
	text-align: center;
	font-size: 16px;
}
.sliderControler span.copy{
    background-color: #F6B944;
}
.sliderControler span.trash{
    background-color: #DC322F;
	width: 95px;
	text-align:center;
}
.sliderControler span.edit{
    background-color: #44b820;
	width: 95px;
	text-align:center;
}
.sliderControler span a{
    color: #fff;
    width:95px;
    display: inline-block;
}
.slideshow_detail{
    float: right;
    color: #666;
}
.slideshow_detail span{
    display: inline-block;
}
.slideshow_detail span.rownum {
	background-color: #e10000;
	color: #fff;
	text-align: center;
    padding: 5px;
	padding-top:80px;
	height: 180px;
    
}
.slideshow_detail span b {
	display: block;
}
.slideshowadd select{
    width: 280px !important;
}

/********************************* VERTICAL TABLE STYLE ***********************************/
.verticaltb{
    background-color: #fff;
    border-collapse: collapse;
    width: 800px;
    margin-right:auto;
    margin-left:auto;
}
.verticaltb td, .verticaltb th{
    border: 1px solid #ccc;
    padding: 5px;
    font-family:wyekan;
    font-size:13px;
    font-weight: normal;
    text-align: center;
} 
.verticaltb th{
    color:#fff;
    background-color: #666;
    
}
/*************************** LIST_STYLES *****************************/

.cat_chart li.item1 {
	list-style: none;
	float: right;
	height: 300px;
	margin-right: 20px;
	width: 460px;
    border:1px solid #ccc;
    background-color:#fff;
}

.nav_chart li.item1 {
	list-style: none;
	width: 700px;
}
.nav_chart li.item2,.nav_chart li.item3,.nav_chart li {
	list-style: none;
}
.item1{
    margin-top:10px;
}
.cat_chart li.item1 .link1{
    font-weight: bold;
    width: 458px;
    background-color: #eee;
    padding:10px;
    display: inline-block;
}
.nav_chart li.item1 .link1{
    font-weight: bold;
    width: 400px;
    background-color: #fff;
    padding:10px;
    display: inline-block;
}
.nav_chart li.item1 .link2{
    background-color: #fafafa;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
}
.nav_chart li.item1 .link3{
    background-color: #e2e1e1;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
}
.nav_chart li.item1 .link4{
    background-color: #ccc;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
}

.nav_chart li.item1 .link5{
    background-color: #e5e5e5;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
}

.add_cat{
    color: #F6B944;
}
.step1ul{
    border-right: 3px solid #e10000;
    margin-right: 20px;
    margin-top: 10px;
}
.step2ul{
    border-right: 3px dashed #F6B944;
    margin-right: 20px;
    margin-top: 10px;
}
.step1ul .add_cat{
    background-color:#e10000;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
    color: #fff;
    text-align:center;
    font-size:18px;
}
.step2ul .add_cat{
    background-color:#F6B944;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
    color: #715623;
    text-align:center;
    font-size:18px;
}

.step3ul{
    border-right: 3px solid #cbf085;
    margin-right: 20px;
    margin-top: 10px;
}
.step4ul{
    border-right: 3px dashed #8bdce1;
    margin-right: 20px;
    margin-top: 10px;
}
.step5ul{
    border-right: 3px solid #c520e3;
    margin-right: 20px;
    margin-top: 10px;
}
.step3ul .add_cat{
    background-color:#cbf085;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
    color: #404e26;
    text-align:center;
    font-size:18px;
}
.step4ul .add_cat{
    background-color:#8bdce1;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
    color: #2c4749;
    text-align:center;
    font-size:18px;
}

.step5ul .add_cat{
    background-color:#c520e3;
    padding:10px;
    width: 400px;
    display: inline-block;
    margin-top:10px;
    color: #2c4749;
    text-align:center;
    font-size:18px;
}

.step4ul ,.step3ul,.step2ul,.step5ul{
    display:none;
}
#add_cat{
    position: absolute;
    top:0px; right:0px; bottom:0px; left:0px;
    background-color: rgba(0,0,0,.8);
    display: none;
}
#add_cat2{
    position: fixed;
    top:30px; right:0px; bottom:0px; left:0px;
    background-color: rgba(0,0,0,.8);
    display: none;
}
.icon{
    display: inline-block;
    background-color: #e10000;
    color:#fff;
    padding:5px;
    text-align:center;
    width: 20px;
}
 .count{
    font-weight: normal;
    font-size:11px;
    color:#e10000;
}
.link2{
    display:inline-block;
    width:300px;
    font-size:18px;
    color: #002a80;
}
.link3{
    display:inline-block;
    width:200px;
    color: #666;
    font-size:16px;
}
.down{
    float:left;
}
/*************************** DIALOG BOX STYLES *****************************/
.ui-dialog{
    background-color: #fff;
    padding:20px;
}
.ui-dialog button{
    padding:5px;
    background-color:#666;
    color:#fff;
    width:225px;
    border:none;
    margin-left:5px;
}
.ui-dialog-title{
    text-align: right;
    direction: rtl !important;
    display: inline-block;
}
.fixpos{
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top:0px; right:0px;bottom:0px;left:0px;
    display: none;
}

.welcome{
    width:800px;
    text-align:center;
    padding:50px;
    line-height: 30px;
    font-size:16px;
   color:#666;
border:1px solid #ccc;
margin-right:auto;
margin-left:auto;
margin-top:100px;
}
.showlink{
text-align:left;
font-size:11px;
color:#fff;
}
.useful {
	position: absolute;
	background-color: orange;
	padding: 5px;
	color: #fff;
}