#foreca {
    background-image: url(/css/images/foreca.png)
}

#foreca2 {
    background-image: url(/css/images/foreca2.png)
}

#pwr {
    background-image: url(/css/images/pwr.png)
}

#bbc {
    background-image: url(/css/images/bbc.png)
}

#ttrd {
    background-image: url(/css/images/ttrd.png)
}

#wndg {
    background-image: url(/css/images/wndg.png)
}

#kwtr {
    background-image: url(/css/images/kwtr.png)
}

#meto {
    background-image: url(/css/images/meto.png)
}

#cola {
    background-image: url(/css/images/cola.png)
}

#wrf1 {
    background-image: url(/css/images/wrf1.png)
}

#wrf2 {
    background-image: url(/css/images/wrf2.png)
}

#kmdl {
    background-image: url(/css/images/kmdl.png)
}

#mtsr {
    background-image: url(/css/images/mtsr.png)
}

#ucar {
    background-image: url(/css/images/ucar.png)
}

#wxts {
    background-image: url(/css/images/wxts.png)
}

#mytr {
    background-image: url(/css/images/mytr.png)
}

#noaa {
    background-image: url(/css/images/noaa.png)
}

#octr {
    background-image: url(/css/images/octr.png)
}

#omwr {
    background-image: url(/css/images/omwr.png)
}

#rnbr {
    background-image: url(/css/images/rnbr.png)
}

#hmwr {
    background-image: url(/css/images/hmwr.png)
}

#jtpn {
    background-image: url(/css/images/jtpn.png)
}

#mtpl {
    background-image: url(/css/images/mtpl.png)
}

#rnpk {
    background-image: url(/css/images/rnpk.png)
}

#icst {
    background-image: url(/css/images/icst.png)
}

#gemf {
    background-image: url(/css/images/gemf.png)
}

#pswc {
    background-image: url(/css/images/pswc.png)
}

#lght {
    background-image: url(/css/images/lght.png)
}

#st24 {
    background-image: url(/css/images/st24.png)
}

#nlno {
    background-image: url(/css/images/nlno.png)
}

#emrt {
    background-image: url(/css/images/emrt.png)
}

#wndc {
    background-image: url(/css/images/wndc.png)
}

#oman {
    background-image: url(/css/images/oman.png)
}

#nas1 {
    background-image: url(/css/images/nas1.png)
}

#nas2 {
    background-image: url(/css/images/nas2.png)
}

#airw {
    background-image: url(/css/images/airw.png)
}

#rapd {
    background-image: url(/css/images/rapd.png)
}

#nasa {
    background-image: url(/css/images/nasa.png)
}

#mtbl {
    background-image: url(/css/images/mtbl.png)
}

#mage {
    background-image: url(/css/images/mage.png)
}

#wttr {
    background-image: url(/css/images/wttr.png)
}

#pme1 {
    background-image: url(/css/images/pme1.png)
}

#eum2 {
    background-image: url(/css/images/eum2.png)
}

#eum1 {
    background-image: url(/css/images/eum1.png)
}

#wxbl {
    background-image: url(/css/images/wxbl.png)
}

#kndx {
    background-image: url(/css/images/kndx.png)
}

#wrgr {
    background-image: url(/css/images/wrgr.png)
}

#clmb,
#clmb2 {
    background-image: url(/css/images/clmb.png)
}

#clm2 {
    background-image: url(/css/images/clm2.png)
}

#arbw {
    background-image: url(/css/images/arbw.png)
}

#pme2 {
    background-image: url(/css/images/pme2.png)
}

#bbcc {
    background-image: url(/css/images/bbcc.png)
}

#uci {
    background-image: url(/css/images/uci.png)
}

#gis {
    background-image: url(/css/images/gis.png)
}

#nor {
    background-image: url(/css/images/nor.png)
}

#drm {
    background-image: url(/css/images/drm.png)
}

#kwr {
    background-image: url(/css/images/kwr.png)
}

#imap {
    background-image: url(/css/images/imap.png)
}

#fajr {
    background-image: url(/css/images/fajr.png)
}

#sm {
    background-image: url(/css/images/sm.png)
}

#mtcl {
    background-image: url(/css/images/mtcl.png)
}

#mtpz {
    background-image: url(/css/images/mtpz.png)
}

#rmap,
#rmap2 {
    background-image: url(/css/images/rmap.png)
}

#wonl {
    background-image: url(/css/images/wonl.png)
}

#thwr {
    background-image: url(/css/images/thwr.png)
}

#mt5m {
    background-image: url(/css/images/mt5m.png)
}

#rnfc {
    background-image: url(/css/images/rnfc.png?1)
}

#bsc {
    background-image: url(/css/images/bsc.png)
}

#rhis {
    background-image: url(/css/images/rhis.png)
}

#gdi {
    background-image: url(/css/images/gdi.png)
}

#acrd {
    background-image: url(/css/images/acrd.png)
}

#acrd2 {
    background-image: url(/css/images/acrd2.png)
}

#rad,
#rad2 {
    background-image: url(/css/images/rad.png?1)
}

#sa3d {
    background-image: url(/css/images/sa3d.png?1)
}

#crvs {
    background-image: url(/css/images/crvs.png)
}

#gfsm,
#iconm,
#ncrm {
    background-image: url(/css/images/gfsm.png?1)
}

#ncst {
    background-image: url(/css/images/ncst.png)
}

#clst {
    background-image: url(/css/images/clst.png?1)
}

#clst2 {
    background-image: url(/css/images/clst2.png?1)
}

#dust,
#dust2 {
    background-image: url(/css/images/dust.png)
}

#fog {
    background-image: url(/css/images/fog.png)
}

#ligtn {
    background-image: url(/css/images/ligtn.png)
}

#anm5 {
    background-image: url(/css/images/anm5.png)
}

#rnmp {
    background-image: url(/css/images/rnmp.png)
}

#ramt {
    background-image: url(/css/images/ramt.png)
}

#ecmf {
    background-image: url(/css/images/ecmf.png)
}

#bbc2 {
    background-image: url(/css/images/bbc2.png)
}

#clrn {
    background-image: url(/css/images/clrn.png)
}

#rdal {
    background-image: url(/css/images/rdal.png)
}

#rart {
    background-image: url(/css/images/rart.png)
}

#rge {
    background-image: url(/css/images/rge.png)
}

#clrd {
    background-image: url(/css/images/clrd.png)
}

#wmec {
    background-image: url(/css/images/wmec.png)
}

#acsg {
    background-image: url(/css/images/acsg.png)
}

#mgfs {
    background-image: url(/css/images/mgfs.png)
}

#pxrd {
    background-image: url(/css/images/pxrd.png)
}

#gemm {
    background-image: url(/css/images/gemm.png)
}

#ecmwf {
    background-image: url(/css/images/ecmwf.png)
}

#clst3 {
    background-image: url(/css/images/clst3.png?1)
}

#mocl {
    background-image: url(/css/images/mocl.png)
}

#arfc {
    background-image: url(/css/images/arfc.png)
}

#mtbr {
    background-image: url(/css/images/mtbr.png)
}

#gr2 {
    background-image: url(/css/images/gr2.png)
}

#nxt6hr {
    background-image: url(/css/images/nxt6hr.png)
}

#wemd {
    background-image: url(/css/images/wemd.png)
}

#nrain {
    background-image: url(/css/images/nrain.png)
}




#blackradar,
#blackradarpro,
#yellowradarpro {
    background-image: url(/css/images/blackradar.png)
}

#yellowradar {
    background-image: url(/css/images/yellowradar.png)
}

#greenradar {
    background-image: url(/css/images/greenradar.png)
}

#newradar {
    background-image: url(/css/images/newradar.png)
}

#tafsir {
    background-image: url(/css/images/tafsir.png)
}

#hadith {
    background-image: url(/css/images/hadith.png)
}

.b_div {
    text-align: center;
    width: 100%;
    direction: rtl;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: auto;
    white-space: nowrap;
    margin-top: 0;
    border-top: none;
    background: linear-gradient(to top, #fff 0%, #ECECEC 100%) !important;
}

.btn {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: myFirstFont;
    color: #fff;
    font-size: 4.2vw;
    padding: 10px 20px;
    text-decoration: none;
    width: 50%;
    min-width: 33%;
    height: 100%;
    background: rgba(126, 145, 158, .8);
    background-size: cover;
    text-shadow: 0 1px #333, 0 -1px #333332, 1px 0 #333, -1px 0 #333, 0 0 15px rgba(0, 0, 0, .6), 1px 1px 0 rgba(0, 0, 0, .5), 0 0 .1em rgba(0, 0, 0, .5), 0 0 .01em rgba(0, 0, 0, .5);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid;
    box-shadow: inset -1px -1px 5px 0px #00000066;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    cursor: default;
}

.btn2,
.btn3 {
    height: 100%;
    font-size: 4.2vw;
    padding: 1% 2%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    text-decoration: none;
    font-family: myFirstFont;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    cursor: default;
}

.btn2 {
    background: #000;
    text-shadow: 0 1px #333, 0 -1px #333332, 1px 0 #333, -1px 0 #333, 0 0 15px rgba(0, 0, 0, .6), 1px 1px 0 rgba(0, 0, 0, .5), 0 0 .1em rgba(0, 0, 0, .5), 0 0 .01em rgba(0, 0, 0, .5), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6), 0 0 15px rgba(0, 0, 0, .6);
    user-select: none
}

.btn3 {
    min-width: 50%;
    background: rgba(52, 152, 219, .8);
    text-shadow: 0 1px #333, 0 -1px #333332, 1px 0 #333, -1px 0 #333, 0 0 15px rgba(0, 0, 0, .6), 1px 1px 0 rgba(0, 0, 0, .5), 0 0 .1em rgba(0, 0, 0, .5), 0 0 .01em rgba(0, 0, 0, .5);
    user-select: none;
    background-size: cover
}

.btn:hover {
    background: rgba(255, 255, 255, .5);
    background-size: cover;
    text-decoration: none
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

#iframe-container,
body,
html {
    height: 100%;
    width: 100%;
    margin: 0
}

.d9c {
    background-color: #4CAF50;
    border: 1px solid green;
    color: #fff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    height: 8%
}

#title,
.btyr:disabled {
    color: #000
}

.d9c:hover {
    background-color: #3e8e41
}

.title {
    width: 100%;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    line-height: 2.2em;
    background: linear-gradient(to bottom, #fff 0%, #ECECEC 100%) !important;
    margin: 0;
    border-bottom: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

#scrolly button,
.btyr {
    text-decoration: none
}

@media (min-width:961px) {
    html {
        background-image: url(/css/images/body.png)
    }

    body {
        width: 90%;
        margin: 0 auto
    }
}

@font-face {
    font-family: myFirstFont;
    src: url('/fonts/me_quran.woff') format('woff'),
        url('/fonts/me_quran.ttf') format('truetype')
}

#title {
    font-family: myFirstFont;
    text-decoration: none;
    font-size: 6.4vw;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.btyr {
    width: 33%
}

#scrolly {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    margin: 0 auto;
    white-space: nowrap;
    text-align: center
}

#scrolly button {
    width: 12.5%
}

@media all and (orientation:landscape) {
    .btn {
        font-size: 3vw;
        width: 33%
    }
}

@media all and (orientation:portrait) {
    .btn {
        font-size: 4.2vw;
        width: 50%
    }
}

#no-js-div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 9999;
    top: 0;
    left: 0
}

#no-js-alert {
    background: #fff6bf;
    background-position: 15px 50%;
    text-align: right;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #ffd324;
    border-bottom: 2px solid #ffd324;
    border-left: 2px solid #ffd324;
    border-right: 2px solid #ffd324;
    direction: rtl
}

button:after,
a.btn:after,
a.btn2:after,
a.btn3:after {
    content: ''
}

.new:after {
    content: ' جديد';
    font-size: 2vw;
    color: red
}

.update:after {
    content: ' تحديث';
    font-size: 2vw;
    color: red
}

.late:after {
    content: ' متأخر';
    font-size: 1.5vw;
    color: red
}

.pro:after {
    content: 'Pro';
    font-size: 2vw;
    color: red
}

.container {
    display: flex
}

.container>div {
    flex: 1
}

.link:hover {
    color: black !important
}

.hide,
.pro {
    display: none;
}

.btn:disabled,
.btn2:disabled {
    opacity: 0.8;
    border: solid 2px darkred;
}

#footer {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #444;
    display: block;
    font-size: 13px;
    margin: 10px;
    padding: 5px;
    text-align: center;
    overflow-x: auto;
    white-space: nowrap
}

#footer a {
    color: #444;
    text-decoration: none
}

button:focus {
    outline: 0;
}

.btn2 {
    background-image: url(/pages/radar/ksac/)
}

#f_btns {
    display: flex;
    width: 100%;
    gap: 0;
}

#f_btns button {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 16px;
}

#f_btns button:disabled {
    background-color: #007bff;
    color: white;
    cursor: default;
}

#timeButtons {
    display: flex;
    width: 100%;
    gap: 0;
}

#timeButtons button {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 14px;
}

#timeButtons button:disabled {
    background-color: #007bff;
    color: white;
    cursor: default;
}