@charset "utf-8";

/* CSS Document */

@font-face {

   font-family: DroidKufi-Regular;

   src: url(../fonts/DroidKufi-Regular.ttf), url(../fonts/DroidKufi-Regular.eot) format('truetype');

}

@font-face {

   font-family: LateefRegOT;

   src: url(../fonts/LateefRegOT.ttf), url(../fonts/LateefRegOT.eot) format('truetype');

}

@font-face {

   font-family: Changa-Light;

   src: url(../fonts/Changa/Changa-Light.ttf), url(../fonts/Changa/Changa-Light.eot) format('truetype');

}

@font-face {

   font-family: Cairo-Light;

   src: url(../fonts/Cairo/Cairo-Light.ttf), url(../fonts/Cairo/Cairo-Light.eot) format('truetype');

}



body{ margin:0; padding:0; font-family: 'DroidKufi-Regular', serif; font-size:14px; -webkit-overflow-scrolling: touch; direction: rtl; text-align: right;}

#contant-main{ width:100% ;max-width:1366px; position:relative; margin:auto; left:0; right:0; min-height: calc(100vh - 80px)}

#header{width:100%; position:relative;}

#linear-gradient{width:100%; height: 15%; position: absolute; bottom:0; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));}

#body{max-width:1232px; position:relative; margin:auto; left:0; right:0;}

#footer{width:100%; background-color: darkgrey; height: 50px; line-height: 50px; font-size: 12px; position:relative; text-align: center}

#footer label{color: gray}



#view_page{text-align: center}



#body menu{height:40px; width: 100%; max-width:1232px; position: absolute; margin: 0; padding: 0; margin-top: -50px; line-height: 40px; color: #fff;}



#body menu btn{height:40px; margin: 15px; cursor: pointer}



.shadow{box-shadow: 0 3px 6px -2px gray;}



.hint{color:#999999; font-size:12px; padding-right:5px;}

table{width:100%}

.more{ display: block; position: absolute; margin: auto; left: 10px; bottom: 5px; color: tomato; font-size: 10px; text-align: center}

.table {width: 100%; display: table; table-layout: fixed; position: relative; direction:rtl; text-align:right}

.table .table_row{width: 100%; height: 100%;  display: table-row; position: relative;}

.table .table_row .table_cell{ display: table-cell;  position: relative}
.padding{ padding: 5px;}


.list .table_cell{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 35px; line-height: 35px; padding-right: 5px }

.list .space{ height: 20px; line-height: 20px; padding-right: 5px; background-color: #E5E5E5; font-size: 10px; color: #969292}



h3{ padding:0px; margin:5px; font-weight:bold; border-right:3px solid #336699; color:#336699; text-align:right; padding-right:5px; margin-right:5px;}

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

a{ color:#336699; text-decoration: none;}


.msg_normal{width:98%; position: relative; margin-left: auto; margin-right: auto; background-color: e9e9e9; border: 1px solid #d3d3d3; border-radius: 10px; text-align: center; margin-top:5px; margin-bottom:5px; font-size:12px; padding:5px}

.msg_accept{width:98%; position: relative; margin-left: auto; margin-right: auto; background-color: #DBFFE4; border: 1px solid #C7FFD8; border-radius: 10px; text-align: center; margin-top:5px; margin-bottom:5px; font-size:12px; padding:5px}

.msg_error{width:98%; position: relative; margin-left: auto; margin-right: auto; background-color: #FFDBDB; border: 1px solid #FF9F9F; border-radius: 10px; text-align: center; margin-top:5px; margin-bottom:5px; font-size:12px; padding:5px}

.msg_hint{width:98%; position: relative; margin-left: auto; margin-right: auto; background-color: #FFFDDB; border: 1px solid #F3FF9F; border-radius: 5px; text-align: center; margin-top:5px; margin-bottom:5px; font-size:12px; padding:5px}



.postStyle{border-radius: 5px; height: 320px; width: 32.5%; display: inline-grid; position: relative; top: 0; margin: 0 5px 10px 5px; cursor: pointer}

.postStyle:hover{ box-shadow: 0 3px 6px -2px blue;}



.postStyle .body .imgdiv {width: 100%; height: 250px; overflow: hidden; position: relative; background-color:whitesmoke}

.postStyle .body .imgdiv .img{ min-height: 250px; width: 100%; right: 0;  border-radius: 5px 5px 0 0; position: absolute}

.postStyle .body .title{ padding: 0 3px 0 3px; font-size: 12px; height: 47px; overflow: hidden; text-align: right}

.postStyle .body .date{ margin: auto; bottom: 0px; position: absolute; width: 100%; height: 20px; text-align: right; overflow: hidden;}


.postImageInUpdate{ position: relative; width: 100px; height: 100px; margin: 2px; border: 1px solid #C5C5C5; display: inline-flex}

.postImageInUpdate img{ position: absolute; max-width: 100px; max-height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0 }



#vidow_page{ background-color:white}

.vid_div{ height:300px; overflow: auto;}

.vid_title-div vid-main-title{ font-size: 25px}

.vid_title-div .fa-youtube{ font-size: 30px; position: relative; color: red}

#menu_vid{ height: 300px; overflow-y: scroll}

#menu_vid .desc{height: 50px; margin: 3px; border-bottom: 1px solid #E3E3E3; cursor: pointer; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#menu_vid .desc vid-title{ width: 100%; color: gray; font-size: 14px; }

#menu_vid .desc vid-title .fa-youtube{ color: red; font-size: 13px}

#menu_vid .desc:hover{ background-color: #E3E3E3}

#play_vid .desc{ height: 300px;}


post-title{width:100%;font-size: 22px; display: block;}

post-subtitle{width:100%;  display: block; color: darkgray}

post-date{width:100%;  display: block; color: darkgray; text-align: left}

post-body img{ width:100%; max-width:500px; float: right; margin: 15px 0px 5px 5px; border-radius: 5px }

.input-group {direction: ltr}


.carousel{ max-height: 400px; overflow:hidden}


@media screen and (max-width: 860px)

{

	#view_page{background-color: #E7E7E7}

	.sec_group{margin-bottom: 15px; overflow-x: auto; height: 300px; white-space: nowrap; text-align: right; background-color: white}

	.postStyle{width: 180px; height: 220px; margin: 0 5px 10px 5px; position: relative; background-color:whitesmoke;}

	.postStyle .body{font-size: 8px; width: 180px}

	.postStyle .body .imgdiv {width: 100%; height: 150px; overflow: hidden; position: relative; }

	.postStyle .body .imgdiv .img{ min-height: 150px; max-width: 180px;  border-radius: 5px 5px 0 0; position: absolute}

	.postStyle .body .title{ padding: 0 3px 0 3px; height: 47px; width: 174px; text-align: right; text-overflow: ellipsis;  white-space: normal}

	.postStyle .body .date{ margin: auto; bottom: 0px; position: absolute; max-width: 180px; height: 20px; text-align: right; overflow: hidden; text-overflow: ellipsis;}

	#footer{width:100%; background-color: darkgrey; height: 50px; line-height: 50px; font-size: 10px; position:relative; text-align: center; text-overflow: ellipsis;}

}