@font-face {
    font-display: swap;
	font-family: 'Nastaliq';
	src: url('Nastaliq/Jameel Noori.ttf');
}

.naskh  {color:purple; direction:rtl; font-family:Naskh, sans-serif; font-size:1.0em; word-spacing:0; letter-spacing:-0.02em; line-height:1.5;} 
.nastaliq {font-family:calibri, Nastaliq; font-size:1.18em; word-spacing:0.1em; letter-spacing:-0.01em; line-height:1.25; direction:rtl; padding:10px 0;}

html {font-size:17px; line-height:1.0; scrollbar-width: none;}
body {font-family:roboto;}
/*BLURT*/
.bl-prompt {border:1px solid #888;}
.bl-content {padding-bottom:5px; margin-bottom:0px;}
.bl-content p {margin-bottom:10px;}
.bl-header {margin-top:20px;}
.bl-header h2 {font-size:1.4em;}
.bl-footer {margin-bottom:30px;}

.bl-prompt::placeholder{
  color: #ddd;
  opacity: 1; /* Firefox */
}

.bl-prompt::-ms-input-placeholder { /* Edge 12 -18 */
  color: #ddd;
}
.bl-form ul{list-style:none; text-align:left; margin:auto; font-size:18px; color:indigo; width:50%; padding:0 0 0 20%; }
.bl-form li {padding:5px 0px;}
.bl-form input {font-size:24px; padding:4px 10px; font-weight:bold; color:indigo;}
.bl-form textarea {font-size:18px; padding:4px 10px; font-weight:bold; color:indigo; width:70%; height:60px;}
.bl-form label {margin-right:10px;}
.bl-form fieldset {margin:10px 0; border:unset;}

.bl-box button {padding:3px 20px; border-radius:6px; font-size:17px; font-weight:normal;}
/*---*/

#main {position:relative;}

#loading {position:fixed; z-index:9999; top:0; bottom:0; left:0; right:0; background:#ddd5;}
#loading img {position:absolute; width:80px; top:45%; left:45%;}

/* --- */
header {position: fixed; top:0; left: 0;right: 0;margin:0; z-index:20000; font-size:16px; margin:0; background:#026d2f;}
.logo .label {font-size:14px; opacity:0.8; font-weight:bold;}
.navbar {padding:0px;}
.navbar-toggler {xvertical-align:middle; padding:20px 0 0 0; width:64px; max-width:70px;color:#115740; font-size:40px; line-height:0; background:white; border-radius:unset; margin:0; top:0; left:0; bottom:0; text-align:center; border:2px solid #115740; position:absolute; float:left;}
.navbar > .container {position:relative; height:40px; display:flex; justify-content:space-between; align-items:center; padding-left:0; border:1px solid white; border-left-width:3px; border-right-width:4px; border-bottom-width:2px;}
.navbar .fontSize {float:right; margin-right:0px;}
.navbar-brand {float:left; margin-left:90px; text-decoration:none; color:#fff;}
.navbar-content {margin:0; border:3px solid white; max-height:80vh; overflow-y:scroll; background:orange;}
#textSizePlus, #textSizeMinus, #toggleUrduFont, #NKUrduFont, #NQUrduFont {opacity:0.6; font-size:0.7em; color:#fff; font-weight:bold;}
#textSizePlus {font-size:16px; padding:0 15px 0 0;}
#textSizeMinus {font-size:11px; padding:0 0 0 15px;}
#user_mobile_number {color:#ddd; font-size:0.8em; padding-top:2px;}
#securityCheck label {font-weight:bold; color:#888;}
#securityCheck #country_code {font-size:20px; text-align:center; padding:4px 10px; margin-top:10px; width:100px; border:1px solid #888;}
#securityCheck #mobile_number {font-size:24px; text-align:center; padding:6px 10px; margin-top:10px; width:210px; border:1px solid #888;}

header.inside {display:flex; justify-content:space-between;  align-items:center; color:#eee; padding:14px 0;}
header.inside .back {display:flex; align-items:center;}
header.inside .backArrow {padding-left:20px; width:0; height:0; border-top:6px solid transparent; border-right:15px solid #fff; border-bottom:6px solid transparent;}
header.inside .label {padding-left:18px; font-size:18px; font-weight:bold;}

.hide {display:none;}
/* --- */
#pageContent {position:fixed; overflow-y:scroll; top:43px; bottom:38px; left:0; right:0;}
/* --- */
/* background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit; */
.post.parent {font-size:1.2em;}
.post {position:relative; border-radius:4px; margin:5px 8px 5px 5px;}
X.post:first-of-type {border-radius:4px; margin:10px 8px 8px 5px;}
x.post:not(:first-of-type) {border-radius:4px; margin:6px 8px 6px 14px;}
.post:nth-child(odd) {background: #ffe; border:1px solid #bbb;}
.post:nth-child(even) {background: #f8f8ff; border:1px solid #bbb;}

.post .head {position:relative; z-index:1000; white-space:nowrap; padding:15px 5px 0.4em 8px; height:14px;}
.post .head .userLogo {float:left; margin-right:8px;}
.post .head .userLogo .logo img {width:2.5em; height:2.5em; border-radius:50% 50%;}
.post .head .userInfo {float:left;  font-size:15px;}
.post .head .userInfo .userName {float:left; font-weight:bold; padding-right:10px;}
.post .head .userInfo .userID {float:left;}
.post .head .timestamp {float:right; font-size:13px;}
.post .content {margin:0.3em 10px;}
.post .content .text {font-size:1.25em; line-height:1.25em; }
.post .content .media {margin-top:10px;}
.post .content .media .image.img {display:inline-block; width:50%; max-height:200px; overflow:hidden;}
.post .content .media .video.img {display:inline-block; width:50%; max-height:200px; overflow:hidden;}
.post .content .media .image.img.fullWidth {width:100%; max-height:400px;}
.post .content .media .video.img.fullWidth {width:100%; max-height:400px;}
.post .content .media .image.horizontal.img img {width:100%;}
.post .content .media .video.horizontal.img img {width:100%;}
.post .content .media .image.vertical.img img {height:200px; margin-left:-75%;}
.post .content .media .video.vertical.img img {height:300px; margin-left:-75%;}
.post .content .media .image.vertical.img.fullWidth img {height:unset; margin-left:unset; width:200%;}
.post .content .media .video.vertical.img.fullWidth img {height:unset; margin-left:unset; width:100%;}
.post .content .media .video.img video {margin-left:-60%; height:200px;}
.post .content .media img {border:1px solid #fff;}
.post .content .reply {display:none;}

.post .head .replying {float:right;  font-size:15px;}
.post .head .replying .replyingTo {float:left; font-weight:bold; padding-right:10px;}
.post .head .replying .label {float:left;}

X.post .post .content .text {font-size:1.18em;}
.post .post:first-of-type .content .text {font-size:1.18em;}
.post .post:not(:first-of-type) {border-radius:4px; margin:6px 30px 6px 30px;}

.reply .post {background:unset; border:unset;}
.reply .post .content {position:relative; margin:0.3em 6px 0 10px;}
.reply .post .postArea .content .text {width:76%; Xmin-height:100px; font-size:1.05em;}
.reply .post .postArea .content .media {position:absolute; width:20%; top:0; right:0; margin-top:3px;}
.reply .post .postArea .content .media .img {width:100%; aspect-ratio:1; margin-bottom:5px; border:1px solid #888;}
.reply .post .replyArea {xbackground:#ffe;}
.reply .post .replyArea .content .text {background:#ffe; min-height:300px; border:1px solid #ccc; padding:10px; font-size:1.25em;}
.reply .post .replyArea .content .media {}
.reply .post .replyArea .content .media .img {border:1px solid #888;}

.repost .post {background:unset; border:unset;}
.repost .post .content {position:relative; margin:0.3em 6px 0 10px;}
.repost .post .postArea .content .text {width:76%; Xmin-height:300px; font-size:1.05em;}
.repost .post .postArea .content .media {position:absolute; width:20%; top:0; right:0; margin-top:3px;}
.repost .post .postArea .content .media .img {width:100%; aspect-ratio:1; margin-bottom:5px; border:1px solid #888;}
.repost .post .repostArea {xbackground:#ffe;}
.repost .post .repostArea .content .text {background:#ffe;background:#ffe; min-height:300px; border:1px solid #ccc; padding:10px; font-size:1.25em;}
.repost .post .repostArea .content .media {}
.repost .post .repostArea .content .media .img {border:1px solid #888;}

.new_post .post {background:unset; border:unset;}
.new_post .post .content {position:relative; margin:0.3em 6px 0 10px;}
.new_post .post .new_postArea {}
.new_post .post .new_postArea .content .text {background:#ffe; min-height:300px; border:1px solid #ccc; padding:10px; font-size:1.25em;}
.new_post .post .new_postArea .content .media {}
.new_post .post .new_postArea .content .media .img {border:1px solid #888;}

#main.posts .post .foot .row1 {display:none;}
#main.post .post .foot .row1 {display:flex;}
.post .foot .row1 {xbackground:#ffc; height:30px; font-size:0.7em; padding: 0px 10px 0.2em; display:flex; justify-content:space-between; align-items:center;}
.post .foot .row2 {xbackground:#ffc; height:30px; font-size:0.7em; padding: 0px 10px 0.2em; display:flex; justify-content:space-between; align-items:center;}
.post .foot .row2 div {display:flex; justify-content:space-between; align-items:center;}
.post .foot .row2 div .value {display:inline-block;}

.post .foot .row2 > div {cursor:pointer;}
.post .foot .row2 .reply     .img {display:inline-block; width:22px; height:26px; margin-left:3px; margin-right:3px; background:url(../img/icons/icons-blue-1.png)  -36px -34px / 144px no-repeat;}
.post .foot .row2 .repost    .img {display:inline-block; width:22px; height:26px; margin-left:3px; margin-right:3px; background:url(../img/icons/icons-blue-1.png)  -85px -11px / 144px no-repeat;}
.post .foot .row2 .likes     .img {display:inline-block; width:22px; height:26px; margin-left:3px; margin-right:3px; background:url(../img/icons/icons-blue-1.png)   -8px -37px / 144px no-repeat;}
.post .foot .row2 .dislikes  .img {display:inline-block; width:22px; height:26px; margin-left:3px; margin-right:3px; background:url(../img/icons/icons-blue-1.png)   -8px -10px / 144px no-repeat;}
.post .foot .row2 .views     .img {display:inline-block; width:22px; height:26px; margin-left:3px; margin-right:3px; background:url(../img/icons/icons-blue-2.png) -140px -18px / 220px no-repeat;}
.post .foot .row2 .bookmarks .img {display:inline-block; width:22px; height:26px; margin-left:0px; margin-right:5px; background:url(../img/icons/icons-blue-1.png)  -86px -37px / 144px no-repeat;}
.post .foot .row2 .shares    .img {display:inline-block; width:22px; height:26px; margin-left:5px; margin-right:0px; background:url(../img/icons/icons-blue-1.png)  -111px -12px / 144px no-repeat;}
.post .foot .row2 .delete    .img {font-size:20px; color:#888; play:inline-block; width:22px; xheight:26px; margin-left:5px; margin-right:0px; Xbackground:url(../img/icons/icons-blue-1.png)  -111px -12px / 144px no-repeat;}

.post .foot .row2 .reply     .img:hover {background-position: -36px -108px;}
.post .foot .row2 .repost    .img:hover {background-position: -85px  -84px;}
.post .foot .row2 .likes     .img:hover {background-position:  -8px -109px;}
.post .foot .row2 .dislikes  .img:hover {background-position:  -8px  -82px;}
.post .foot .row2 .views     .img:hover {background-position:-140px  -46px;}
.post .foot .row2 .bookmarks .img:hover {background-position: -86px -108px;}
.post .foot .row2 .shares    .img:hover {background-position:-111px  -85px;}
.post .foot .row2 .delete    .img:hover {Xbackground-position:-111px  -85px;}

.post .foot .row3 > div {cursor:pointer;}
.foot .row3 {height:30px; font-size:0.7em; padding: 0px 10px 0.2em; display:flex; justify-content:unset; align-items:center;}
.foot .row3 .add-media .img {display:inline-block; width:35px; height:32px; margin-left:3px; margin-right:15px; background:url(../img/icons/png.jpg) 0px -3px / 41px no-repeat;}
.foot .row3 .add-media .img:hover {background-position: -1px -4px;}
.foot .row3 .add-gif   .img {display:inline-block; width:35px; height:24px; margin-left:3px; margin-right:3px; background:url(../img/icons/gif.png) 0px -2px / 34px no-repeat;}
.foot .row3 .add-gif   .img:hover {background-position: -2px -2px;}
.foot .row3 .send {position:absolute; cursor:pointer;right:20px; padding:9px 17px; background:darkblue; color:#fff; letter-spacing:0.5px; font-weight:bold; border-radius:4px;}
.foot .row3 .send:hover {background:blue;}

.media #pageContent {xposition:relative; display:flex; align-items:center; justify-content:center; background:#026d2f; top:0px; bottom:0; margin:44px 0 35px 0;}
#pageContent #pageInner #media {}
#pageContent #pageInner #media img {width:100%;}

.new_post .foot {position:absolute; display:grid; width:100%;}
#alertOne {position:absolute; display:grid; justify-content:center; left:0; right:0; bottom:40px; }
#alertOne .alertOneMsg {font-size:16px; padding:10px 24px; border-radius:30px; background:#026d2f; color:#fff; min-width:120px; justify-content:center; text-align:center;}
/* --- */
footer {position:fixed; display:flex; justify-content:space-between; align-items:center; bottom:0; left:0; right:0; height:35px; padding:0px 17px; font-size:18px; color:white; background:#026d2f; font-size:29px;}
footer > div {cursor:pointer;}
footer .home {font-size:22px;}
footer .new_post {cursor:pointer; background:#026d2f88; color:#fff8; position: absolute; right: 7px; bottom: 7px; font-size: 50px; border-radius: 50%; padding: 3.5px 0 0; margin: 0; border:1px solid #aaa; line-height:46px;}
/* --- */


/*--- PopUpMsg ---*/

.PopUpMsg {
    background: rgba(0,0,0,.4);
    display: none;
    position: fixed;
    text-align: center;
    top: 0;
    right: 0;
	bottom: 0px;
    left: 0;
    z-index: 10000;
    line-height: initial;
    color:#fff;
    font-family: arial;
}
.PopUpMsg .helper {
    /*display: inline-block;*/
    /*height: 100%;*/
    /*vertical-align: middle;*/
}
.PopUpMsg .inside {
    /*text-align: center;*/
    /*display: inline-block;*/
    /*height: auto;*/
    min-height: 300px;
    /*vertical-align: middle;*/
    /*width: 80%;*/
    /*position: relative;*/
    height:100%;
}
.PopUpMsg .closeButton {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 26px;
    width: 30px;
    height: 30px;
    padding-right: 30px;
    color: #FF0;
    background:url(../images/closeX30.png);
}

.PopUpMsg .alert .msg {
	background:#fff;
	color:#000;
	font-size:18px;
}

.PopUpMsg #uploadForm {
	margin:0;
	height:100%;
}

.PopUpMsg ul {
	text-align:left;
	list-style-type: none;
	font-size:18px;
	width:100%;
}
.PopUpMsg ul li {
	text-align:left;
	padding:5px 0px;
	width:100%;
}

.PopUpMsg #targetLayer {background: #750200; padding-bottom:10px;}

.PopUpMsg #targetLayer img {width:90%;}

.PopUpMsg .upload-preview {
	width:100%; 
	height:100%;
	object-fit:contain;
}

/*--- /PopUpMsg ---*/