* {font-family:noto kufi arabic,sans-serif; }

body,html {overflow-x:hidden;}
body{direction:rtl; text-align:right; padding:0; margin:0 auto; background-color:#f5f5f5; }

a:hover{color:red}
a{text-decoration:none; color:#555; }
img{display:block;max-width:100%}

ol,ul,li,p,h2,img,input,div,h1,h2,h3,h4,h5,h6,button,table,td,content,footer,textarea,input,audio,select,nav,text,b{font-size:12pt; outline-width:0; padding:0; margin:0; font-weight:400 }

li{list-style-type:none}
p,div{font-size:10pt}

header {
    padding:5px 0;
    background-color:#fff;
    display:table;
    width:100%;
    position:fixed;
    z-index:5;
    left:0;
    top:0;
    border-bottom: 2px solid #ddd;
}

.loader { position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; width:50px; height:50px; z-index:10; }
.lds-dual-ring {
    /* change color here */
    color: #f47e60
  }
  .lds-dual-ring,
  .lds-dual-ring:after {
    box-sizing: border-box;
  }
  .lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6.4px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }
  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

html.menuOpen,html.menuOpen body { overflow:hidden; }
.box { max-width:600px; margin:auto; } 
html.menuOpen .mainMenu { display:block; width:300px; height:100vh; overflow-x:hidden; top:0; left:0; z-index:7; position:fixed; } 
html.menuOpen .main { transform:0; }
html.menuOpen header { right:300px; }

.main { background-color:#fff; } 
.mainMenu { display:none;  background-color:#fff; }
.mainMenu .user { background-color:#23519b; display:table; width:100%; padding:8px 0; }
.mainMenu .user img { width:40px; height:40px; border-radius:40px; float:right; margin:0 5px; }
.mainMenu .user text { color:#fff; font-size:11pt; margin-top:5px; }

.mainMenu a.inMenu { display:table; width:90%; padding:7px 4%; }
.mainMenu a.inMenu ion-icon { font-size:14pt; margin-top: 5px; float:right; margin-left:5px; }
.mainMenu a.inMenu text { font-size:10pt; }

html.menuOpen .closeMenu { display:block; position:fixed; top:0; left:300px; width:100%; height:100vh; z-index:6; background-color:rgba(0,0,0,0.5);}

header a { color:#555; padding:0 5px; display:inline-table;  }
header a:hover { color:#fff; }
header a i { font-size:26pt !important; }
header a img { width:25px; height:25px; margin-top:4px; }

header .right { float:right;  }
header .right a { position:relative; transform: translateY(10px); }
header .right a span { position:absolute; top:-10px; right:27px; }
header .center { padding:0 !important; margin:auto; float:none !important;  margin-top:3px; display:table !important; } 
header .center img { width:130px; height:auto; margin:2px 0 0 0 !important; margin-top:10px; display:table; }
header .left { float:left; } 
header .left a { float:left; }
header .left a img { height:30px; width:30px;  }
header .left a text, header .right a text { font-size:8pt; display:block; text-align: center; margin-top:-8px; font-weight: 600; }

header form { display:none; width:100%; padding:15px 10px; position:absolute; top:50px; right:0; background-color:#0c3e8d }
header form input { font-size:11pt; color:#222; padding:4px 2%; width:95%; border-radius:5px; border:0; }

.marqBox { display:flex; flex-direction:row; align-items: center; background-color:#e31e25; margin-top:65px; position:relative; }
.marqBox i { background-color:#3d3d3d; font-size:16pt; color:#fff; padding:8px; }
.marqBox span { display:table; position:absolute; top:2px; right:20px; color:#fff; background-color:#e82022; width:16px; font-size:8pt; padding:2px 0; border-radius:20px; line-height: 10pt; text-align:center; }

.marq { flex:1; overflow:hidden; width:100%; white-space: nowrap; }
.marq a { display:inline-table; white-space:normal; width:300px; border-left:0.5px solid rgba(255,255,255,0.5); padding:0 10px; }
.marq a time { color:rgb(209, 25, 25); display:inline-block; transform: translateY(-2px); font-weight:bold; color:#fff; margin-left:5px }
.marq a strong { white-space: nowrap; font-weight: normal; transform: translateY(4px); display:inline-block; width:260px; overflow:hidden; color:#fff }

.videoIcon { position:absolute; top:0; right:0; background-color: rgba(0,0,0,0.6); z-index:1; color:#fff; padding:5px; font-size:14pt; }  

.mainArticle { background-color:#fff; position:relative; }  
.mainArticle img { width:100% } 
.mainArticle div { display:flex; align-items: center; position:absolute; bottom:0; background:rgba(0,0,0,0.8); padding:5px 0;  } 
.mainArticle h1 { color:#fff; font-size:10pt; padding:5px; font-weight:bold; padding-right:10px; }
.mainArticle span { color:#fff; display:inline-table; padding-left:10px; width:100px; border-left:3px solid #d42323; text-align:left; font-size:8pt; }
.mainArticle p { padding:10px 5px; padding-bottom:20px; font-size:10pt;  color:#777}

.secArticle { border-top:1px solid #ddd}
.sec { display:table; width:95%; padding:10px 2.5%; position: relative; }
.sec .videoIcon { top:10px; right:10px; font-size:12pt; }

.sec:nth-child(even) { background-color: #eee; }

.sec.colored.d-4,.sec.colored.d-6 { background: #013eaf !important; }
.sec.colored.d-5 { background: #b21413 !important; }
.sec.colored h2 { color:#fff }
.sec.colored p { color:#fff }
.sec.colored time { color:#fff }

.sec img { width:170px; float:right;   margin-left:10px;  }
.sec h2 { font-size:10pt; font-weight:bold; line-height: 160%; }
.sec p { font-size:9pt; color:#777; line-height: 150%; }
.sec time { font-size:9pt; color:#999;}

.title { padding:2%; background-color:#23519b; display:table; width:96%; color:#fff; font-weight: bold; font-size:14pt;}

.cams { background-color:#fff; width:100%; display:table; }
.sideBySide { width:31%; padding:10px 1%; float:right; display:table; }
.sideBySide text { font-size:10pt; text-align:center; display:block; font-weight: bold; margin-top:5px; }
.sideBySide img { border-bottom:2px solid rgb(209, 25, 25) }

.loadMore { background: #f1f1f1; padding-top:15px; border-top:1px solid #eee; margin-top:-10px;  }

.default { background-color: #fff; display:table; border:1px solid #eee; padding:10px 2%; margin:0 3%; margin-bottom:10px; width:90%; position:relative; box-shadow:0px 1px 2px rgba(0,0,0,0.1); border-right:3px solid #eb4545 }
.default img { width:100%;  }
.default iframe { width:100%; aspect-ratio: 1 / 1; }
.default video { width:100%; } 
.default price { position:absolute; bottom:75px; background-color:#e63939; color:#fff; right:2%; font-size:12pt; padding:1px 10px;}
a.buyNow { display:block; margin-top:10px; padding:5px 0; width:100%; background-color:#23519b; color:#fff !important; text-align:center; border:0; font-size:14pt; } 

.default h3 { font-size:14pt; max-height:76px; overflow:hidden; font-weight: bold; }
.default p { font-size:12pt; color:#777 }
.default time { font-size:10pt; color:#999 }

.catIn { width:100%; margin-top:50px; background-color:#fff; }
.catIn a.art { display:table; width:96%; padding:10px 2%; border-top:1px solid #ddd; position:relative; }
.catIn a.art .videoIcon { font-size:12pt; top:10px; right:10px; }
.catIn a.art img { width:170px; aspect-ratio: 16/9; float:right; margin-left:10px; }
.catIn a.art h2 { font-size:11pt; color:#111; font-weight:bold;  }
.catIn a.art time { color:#999 }

.crumb { padding:10px; background-color:#053684; color:#fff;  }
.crumb a { font-size:12pt; font-weight:bold; color:#fff; }

.paging { padding:15px; background-color:#f5f5f5; border-top:1px solid #ddd; }
.paging a { text-align:center; margin:2px;  display:inline-table; width:35px; padding:3px 0; background-color:#555; color:#fff; border-radius:5px; }
.paging a#checked { background-color:#23519b }

.articleBox { width:100%; padding-top:50px; background-color:#fff; position:relative; }
.articleBox price { position:absolute; top:75px; background-color:#e63939; color:#fff; right:0; font-size:12pt; padding:1px 10px; } 
.articleBox .articleImg { width:100% }
.articleBox h1 { font-size:16pt; font-weight:bold; color:#000; }
.articleBox .artInfo { background-color:#f5f5f5; color:#888; padding:3px 5px; border-radius:5px; margin:15px 0; }
.articleBox .articleData, .articleBox .articleData * { font-size:12pt !important; color:#111 !important;  }

.footerAds { position:fixed; z-index:5; right:0; bottom:0; width:100%; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.3); display:flex; justify-content: center; align-items: center; background-color: #eee; }
.footerAds iframe, .bodyAdBox iframe { margin:auto; display:table; max-width:100% !important; } 

.bodyAdBox { display:table; background-color:#ddd; padding:8px; margin:25px auto; }

.popupAdBox { transform:translateY(100vh); transition: all 0.3s; position:fixed;  width:100vw; height:100vh; top:0; right:0; z-index:6; background-color:#fff; }
.popupAdBox.open { transform:translateY(0); }
.popupAdBox .close { position:absolute; top:10px; right:10px; padding:5px; }
.popupAdBox .close i {  background:#000; color:#fff; padding:3px; }

.popupAdBox .popupInside { position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; display:table; }

.liveCameras { border:0; width:100%; aspect-ratio:16/10  } 

.catsAndShare { display:flex; flex-direction:row;  }
.catsAndShare a { padding:5px 10px; background-color: #053684; color:#fff; margin-left:5px; font-weight:bold; }
.catsAndShare a i { float:right; margin-left:5px; font-size:14pt; margin-top:4px; }
.catsAndShare a:nth-child(2) { background-color: #d42323; }

.shareSections { display:none; z-index:10; position:fixed; background-color: rgba(0,0,0,0.8); width:100%; height:100%;  }
.shareSections .close { position:absolute; top:10px; right:10px; background-color: transparent; border:0; }
.shareSections .close i { color:#fff; padding:5px; font-size:20pt; }
.shareSections iframe { width:100%; height:100%; border:0; }

.timeAndShare { display:flex; flex-direction: row; justify-content: space-between; margin:10px 0; }
.timeAndShare a { font-size:9pt; display:inline-table; background-color: #eee; border-radius:10px; padding:2px 5px; }
.timeAndShare a i { font-size:12pt; float:right; margin-left:2px; margin-top:2px; color:#999; }
.timeAndShare a.shareThisClick { background: #628090; color:#fff; }
.timeAndShare a.shareThisClick i { color:#fff; }

.fullTextFeed { padding-top:10px; font-size:10pt; }

.searchIn { padding:15px; background:#1852ad; }
.searchIn input { padding:3px 10px; width:100%; border:0; border-radius:5px; }

.moreFeedTitle { text-decoration: underline; color:#7ea5cb }

.weatherBox { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.5); z-index:6; display:none; }
.weatherBox.open { display:block; }
.weather { position:fixed; bottom:0; right:0; width:100vw; height:50vh; background-color:#fff; z-index:6; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:20px 20px 0 0; }
.weather .close{ position:absolute; top:10px; left:10px;  }
.weather .close i { background: #ddd; padding:4px; border-radius:30px; }

.weather h5 { text-align: center; display:table; margin:auto; border-bottom:1px solid #ddd; padding:5px 10px; color:#555; margin-top:15px; }

.weather .bigW { display:flex; flex-direction: row; padding:20px; justify-content: space-between; align-items: center; }
.weather .bigW text span { font-size:50pt; font-weight: normal; color:#999; display:block; text-align: center; }
.weather .bigW i { font-size:60pt; color: #888; }

.smallW { gap:5px; display:flex; flex-direction: row; justify-content: center; }
.smallW  div { background: #eee; text-align: center; width:22%; padding:10px 0; border-radius: 15px; }
.smallW  div *  { display:block }

.smallW  div i { color:#999 }
.smallW  div span { color:#999 }
.smallW  div text { color:#999; font-size:10pt; }

.asw-menu-btn { z-index:8 !important }

.commentsBox { padding:5px; background-color: #eee; border-top:1px solid #ddd; margin-top:5px; }
.commentsBox .noComments {  display:flex; align-items: center;  }
.commentsBox .noComments i { margin-left:5px; color:#91c252 }
.commentsBox .noComments text { line-height: 100%; font-size:9pt;  }

.popupData { position:fixed; top:0; right:0; width:100vw; height:100vh; z-index:9; background-color: rgba(0,0,0,0.5);  }
.popupData *  { box-sizing: border-box; }
.insidePopup { animation: popupOpen 0.3s; transform: translateY(0); height:200px; position:absolute; bottom:0; width:100%; display:flex; flex-direction: column; background-color: #fff; border-radius: 20px 20px 0 0; z-index: 9; }
.insidePopup h5 { padding:8px 10px; display:flex; justify-content: space-between; align-items: center; font-weight: 600; font-size:10pt;  }
.insidePopup h5 a i { background-color: #999; border-radius: 50%; padding:2px; color:#fff; }

@keyframes popupOpen {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform:translateY(0);
    }
}


.insidePopup .popupInfo { min-height:0; padding:10px; background-color: #f8f8f8; display:flex; flex-direction: column; flex:1; border-top:1px solid #ddd; }
.commentsBoxIn { flex:1; min-height:0; overflow:auto; }


.commentsForm { padding:5px;  }
.commentsForm input, .commentsForm textarea { width:100%; padding:5px 8px; border:1px solid #eee; font-size:10pt; border-radius: 15px; margin-bottom:8px; }

.commentsForm div { display:flex; justify-content: space-between; align-items: center; }
.commentsForm div button { background-color:#0489ff; border:0; color:#fff; padding:2px 12px; border-radius: 10px; }
.commentsForm div span { color:#1a7e1d; font-size:10pt; font-weight: bold; }

.commentsBoxIn .comBox { display:flex; flex-direction: column; }
.commentsBoxIn .comBox li { display: flex; gap:10px; background-color: #fff; box-shadow: 2px 1px 3px rgba(0,0,0,0.1); border-radius: 20px; padding:5px 8px; margin-bottom:10px; max-width:90%; align-self:flex-start; }
.commentsBoxIn .comBox li b { font-weight: bold; }
.commentsBoxIn .comBox li h6 { font-size:10pt; font-weight: 600; margin-top:4px; }
.commentsBoxIn .comBox li p { font-size:10pt; color:#777; }
.commentsBoxIn .comBox li date { font-size:9pt; color:#999; }

.articleAdBox { background-color: #eee; padding:20px 10px; border:1px solid #ddd; border-right:0; border-left:0;  }
.articleAdBox a { background-color: #fff; display:flex; gap:10px; padding:10px; border:1px solid #ddd; position:relative; }
.articleAdBox a span { position:absolute; top:-16px; color:#fff; right:0px; background-color: #444; line-height: 140%; font-size:9pt; padding:0 5px; }
.articleAdBox img { width:120px; }
.articleAdBox div { display:flex; flex-direction: column; }
.articleAdBox div h5 { font-size:11pt; font-weight: 600; }
.articleAdBox div h6 { font-size:10pt; font-weight:300; color:#777 }

.videoBox { display:flex; justify-content: center; align-items: center; position: relative; }
.videoBox .videoIconIn { position:absolute; background-color: rgba(255,255,255,0.5); padding:4px; border-radius: 50%; font-size:30pt; color:#000; z-index:1; margin-bottom:20px; }


.popupStartAds.hidden { display:none; }
.popupStartAds { position:fixed; z-index:8; top:0; left:0; background-color: rgba(0,0,0,0.7); display:flex; justify-content: center; align-items: center; width:100%; height:100%; }
.popupStartAds > div { animation: popupAddLoad 0.3s linear; transform: scale(1); position:relative; box-shadow:0 0 20px rgba(0,0,0,0.3); padding:10px; }
.popupStartAds .close { position:absolute; top:10px; left:10px; cursor: pointer; }
.popupStartAds .close span { background-color: #000; color:#fff; padding:4px; font-size: 24pt; }

@keyframes popupAddLoad {
    0% {
    transform: scale(0);
    }
    100% {
    transform: scale(1);
    }
}