@font-face{font-display:swap;font-family: "KFGQPC Uthmanic Script HAFS";font-style:normal;font-weight:400;
  src:url(fonts/font/UH1_Ver17.woff2)}
@font-face{font-display:swap;font-family: "KFGQPC Uthmanic Script HAFS";font-style:normal;font-weight:700;
  src:url(fonts/font/UH1B_Ex1_Ver12.woff2)}
@font-face{font-display:swap;font-family: "KFGQPC Uthmanic Script HAFS";font-style:normal;
  src:url(fonts/font/UthmanicHafs_V22.ttf)}

#mainwrap{width:100%;height:100%;max-width:1440px;margin:0 auto;text-align:left;clear:both}
#contentarea{width:100%;height:100%;position:relative}
.list_header{margin:-12px 0 5px 4.5%;background-color:#fff;width:40em;padding:0 0.2em;color:#009414;border-radius: 9px;border: solid 1px #d1d1d1;}
 .time_zone th,.tld th{background-color:#edffd4;color:#444}
.tld td,.tld th{border:solid 1px #ccc;padding:5px;font-size:1.1em}
.time_zone td, .time_zone th{border:solid 1px #ccc;padding:5px;font-size:0.9em}

img{border:0}
.tld td img{margin:0 auto !important;}
@media screen and (max-width:719px){.tld td img{margin:0px auto !important;}}

.cont_text{text-align:justify;}

#centercolumn .list{background-color:#fff;border:solid 1px #d1d1d1;border-radius:9px;float:left;position:relative;width:100%;text-align:center;margin:5px 0 12px 0;padding:0}
.column1{float:left;text-align:left;list-style-type:none;margin:10px 2%;width:28%}
.column1{width:46%}
#centercolumn{margin-right:0.3%;width:auto;min-height:400px}
@media screen and (max-width:719px){.list_header{width:72%}}
#centercolumn{margin-left:1%}
@media screen and (max-width:570px){.column1{min-width:95.7%}}
td.letter{border:none;padding:3px 8px}
td .letter a{font-size:1.1em;font-weight:bold;padding:0 4px;display:block;color:#009414;}
@media screen and (max-width:1130px){.list_header{width:67%}}
@media screen and (max-width:1020px){#centercolumn{margin-right:0.3%;width:auto;min-height:400px} .list_header{font-size:0.87em}}
#footernav {text-align: center;float: left;width: 100%;padding-bottom: 0.875em;font-size: 0.875em;margin-top: 30px;}
.footernav-panel {
cursor: pointer;
  border-bottom: none !important;
  border: 1px solid #D1D1D1;
}
@media screen and (max-width:570px){.column1{min-width:95.7%} #footernav{padding:1em 0 2.125em 0}
#footernav{padding-bottom:3em}}
@media only screen and (max-width:319px){#footernav{padding-bottom:5em}}
.module.textmodule{height:100%;border: none;background:none;line-height: 150%;font-size: 14px;}
.module.textmodule-all{height:100%;padding:15px;border-top: 1px solid rgba(255, 255, 255, 0.05);border-bottom: 1px solid rgba(0, 0, 0, 0.4);background:none;}

table.name-surahs tbody td{border-bottom:1px solid #ccc}
table.name-surahs tbody tr:first-child td{border-top:1px solid #ccc}

.wikitable .rank-sorting {
  background-color: #edffd4;
  color: #444;
  font-weight: bold;
}

tbody tr:nth-of-type(odd).showpanel{background-color: #F9F9F9;}


/*table.name-surahs tbody tr.odd,table.name-surahs tbody tr:nth-of-type(odd){background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAI0lEQVR42u3MsQ0AAAjDMMb+fzEcwVZHyuq58jkQCAQCa8EFgt0MgQxxZLYAAAAASUVORK5CYII=) 0 0 repeat}*/

table.name-surahs caption{color:#777}
table.name-surahs thead{background:#efefef;background:-moz-linear-gradient(50% 0%,#f7f7f7 0%,#e8e8e8 100%);background:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#f7f7f7),color-stop(100%,#e8e8e8))}
table.name-surahs thead th{color:#888;font-size:16px;font-weight:normal}
table.name-surahs tr{border-top:1px solid #d3d3d3}
table.name-surahs tr:hover,table.name-surahs tbody tr:nth-of-type(odd):hover,table.name-surahs tbody tr.odd:hover{background:#fff;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.06);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.06);box-shadow:inset 0 1px 1px rgba(0,0,0,0.06)}
table.name-surahs tr td,table.name-surahs tr th{border-left:1px solid #d3d3d3;color: #666;}
table.name-surahs tfoot tr{border-bottom:1px solid #c3c3c3;background:rgba(0,0,0,0.02);color:#999}
.caption,.overlay{text-shadow:none}
table.name-surahs tr td:nth-child(2){font-family: "Droid Arabic Kufi" !important;}
table.name-surahs{width:100%}
table.name-surahs th{font-size:16px;font-weight:normal;text-align:left}
table.name-surahs th,table.name-surahs td{padding:5px}
table.name-surahs tbody,table.name-surahs tfoot{font-size:12px}
table.name-surahs .bold{font-weight:bold}
table.name-surahs .center{text-align:center}
table.name-surahs td {font-size: 14px;vertical-align:middle}
table.name-surahs caption{font-size:11px;}

table.postal_codes td,table.postal_codes .country{padding: 5px 5px !important;border: 1px solid rgba(169, 169, 169, 0.43);text-align: left;}
table.postal_codes .country_hover:hover{background: #FAFAFA;}
table.postal_codes tr td:nth-child(2):hover{background: #FAFAFA;}
.postal.codes-first, table.postal_codes td.country, table.postal_codes .codeBold{background: #FAFAFA;font-weight: 700!important;color: #333!important;}

.arbicjordanzipcode{width:100%}
.arbicjordanzipcode tr td:nth-child(2):hover{background: #2F4F4F;color: #FFF !important;}
.arbicjordanzipcode tr td:first-child{background: #2F4F4F;border-left: 1px solid #D6D4D4;font-weight: 600;text-align: center;color: #FFF !important;}
.arbicjordanzipcode .tdziro:hover{background: none !important;}
.arbicjordanzipcode tr{border: 1px solid #D6D4D4;}
.arbicjordanzipcode tr td:nth-child(2){border-left: 1px solid #D6D4D4;}
.arbicjordanzipcode .zipcitycodeBold tr td:hover{background: none !important;}
.arbicjordanzipcode .codeBold{background: #2F4F4F!important;font-weight: 700 !important;color: #FFF !important;border: 1px solid .D6D4D4 !important;}
.arbicjordanzipcode .zipcity{background: #2F4F4F!important;font-weight: 700 !important;color: #FFF !important;}
.arbicjordanzipcode tr td:first-child:hover{background: #2F4F4F!important;color: #FFF !important;}

.table.html-color > tbody > tr:nth-of-type(2n+1){background-color: #FBFBFB;}
.table.html-color > tbody > tr > td, .table.html-color > tbody > tr > th {padding: 5px;border: 1px solid #EEE;text-align:center;}

.countries-of-the-world_img{background: rgba(63, 51, 30, 0.82) url("../img/Stone.jpg") no-repeat fixed center bottom / cover;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);-moz-box-shadow: inset 0 0 10px #000000;-webkit-box-shadow: inset 0 0 10px #000000;box-shadow: inset 0 0 10px #000000;overflow: hidden;}

 .time_zone{color: rgba(13, 73, 158, 0.87);float:left;margin:0 2.5% 0.5em 2.5%} .t_first{width:42%}
.dst_s, .dst_e, .ex_l{color:#0b3;font-size:93%} .dst_e{color:#f00} .dst_p{color:#0b3} .standard{font-weight:bold} td .dst_e{display:block}
.mlt p{margin-left:1em;color:#444} .bg-yellow{background:#ffffd4} .bg-green{background:#e1ffd7} .bg-blue{background:#e6fffa}
.mlt a{text-decoration:underline} .mlt span{font-weight:bold;color:#076fff} span.red{color:#f00}

@media screen and (max-width:1060px){.time_zone{width:95.8%;margin: 10px 2%;} .list_header{width:96%;margin-left:.6em} #centercolumn{margin-right:0.3%;width:auto} #topnav ul{width:85%}
#queue {overflow: scroll;}
}
@media screen and (max-width:350px){#centercolumn{margin:0 0.3%} .cont_text{width:94%;margin-left:2%} .time_zone{font-size:0.875em} td .dst_s, td .dst_e, .ex_l{font-size:0.6875em} .t_first{width:30%}}

.t.letter{font-size:1.1em;font-weight:bold;padding:0 4px;display:block;margin: 10px 0px 0px;color:#009414;text-align: left;}

 .time_zone td:last-child {color: #555;}
 .time_zone a:hover {color: #F00;}
 .tab-tr.even {background-color: #F9F9F9;}
.d_state span {color: #FF4500;font-size: 73%;font-weight: normal;}
 .time_zone a {color: #076FFF;}
.d_cap {font-weight: bold;}.t_region {width: 30%;}

.currencies td:last-child, .currencies th:last-child {text-align: center;font-weight: bold;color: #e80028;}

 .region{font-size:82%;color:#444}
.eetz{color:#bd9500} .msktz{color:#ed6e00} .samtz{color:#dc0a21} .yektz{color:#b10049} .omstz{color:#a9009d}
.kratz{color:#3700a2} .irktz{color:#002b83} .yaktz{color:#007cb6} .vlatz{color:#009f7c} .sretz{color:#2e8602} .peetz{color:#7b9702}

.ex_l {color: #888;}.codes, .currencies {width: 95%;}.cap_c, .cur_c, tt {color: #0B3;}

p.dst_period{margin:5px 0 0 0;color:#009414;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;padding:2px 5%;font-family:Arial}
p.dst_period span{display:block;font-weight:normal}
p.dst_period span.dst_st{color:#555;font-size:1em}
 .offset{width:17%}
.nftz{color:#007cb6} .actz{color:#3700a2} .ptz{color:#9d9f02} .mtz{color:#dc0a21} .ctz{color:#ed6e00} .etz{color:#a9009d}
.cont_text span{font-size:1.125em} .cont_text span span{font-size:1em;font-weight:bold} .cont_text ul{list-style-type:none;margin:0 2em 0.5em 2em;text-align:left}

@media screen and (max-width:480px){.cont_text ul{margin:0 1em 0.5em 1em}}
@media screen and (max-width:350px){.cont_text{width:94%;margin-left:2%} .offset{width:15%}}
.time_zone tbody tr:hover td,.time_zone tbody tr:hover th{background-color: rgba(0, 0, 0, 0.06) !important}

.cap td:last-child {color: #009414;}

.table-bordered {background: #fff;outline: 1px solid #dddede;outline-offset: -9px;border: 9px solid #f5f5f5;overflow:hidden;padding: 30px !important;color: #333333;}
.table-bordered-white-inside {background: #fff;outline: 1px solid #dddede;outline-offset: -9px;border: 9px solid #f5f5f5;padding:15px;}


.countries{padding:4px;line-height:1.4;background-color:#f8f9fa;border:1px solid #c8ccd1;border-radius:0;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto;margin-bottom:24px;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.countries .names{font-size:1.2em}

.car_brands .car_brand_names {
  font-size: 1.2em;
  margin-bottom: 10px;
  padding: 6px 0;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  color: #181818;
  font-weight: 600;
  line-height: normal;
  background-color: #f8f9fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car_brands {
  padding: 4px;
  line-height: 1.4;
  background-color: #fff;
  border: 1px solid #c8ccd1;
  border-radius: 0;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: 270px;
  margin-bottom: 24px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-25 .car_brands {
  height: 240px !important;
}
@media (max-width: 767px) {
.car_brands {
  height: 220px;
  }
}
.car_brands .flags {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.car_brands:hover, .jordan-signs-names:hover {
  background-color: #f8f9fa;
}
.car_brands:hover .car_brand_names, .jordan-signs-names:hover .signs-names {
  background-color: #fff;
}
@media (max-width: 767px) {
  .car_brands .alpha-2 {
    display: none;
  }
}
.countries .capitals,.countries .names{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:normal}

.jordan-signs-names {
  padding: 4px;
  line-height: 1.4;
  background-color: #fff;
  border: 1px solid #c8ccd1;
  border-radius: 0;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin-bottom: 24px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jordan-signs-names .signs-names {
  font-size: 1.2em;
  margin-bottom: 10px;
  padding: 6px 0;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  color: #181818;
  font-weight: normal;
  line-height: normal;
  background-color: #f8f9fa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.countries .capitals{font-size:.9em;margin-bottom:4px}
.car_brands .alpha-2{font-size:.7em;font-weight: normal;color:#999}
.countries .flags{display:block;max-width:100%;width:100%;height:auto;border-radius:4px}
.countries:hover{background-color:#eee}
.countries:hover .flags {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#cms .rte ul {
  list-style-type: disc;
}

.post-title {
  font-weight: bold;
  font-size: .9em !important;
}
.gallerybox .thumb{
    background: url(../img/Checker-16x16.png) repeat;
}

.countries .cursor-help{
    cursor: help;
}
#center_column .footer_links .button:hover {
  color: #4CAF50 !important;
}

.module_subtitle_list {
  cursor: pointer;
}

@media screen {
  img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
.region-color {
  display: inline-block;
  min-width: 1.25em;
  height: 1.25em;
  line-height: 1.25;
  margin: 1px 4px 1px 0;
  text-align: center;
  border: 1px solid #999;
}

/*
@media (min-width: 1200px) {
  #queue .sticky-header > thead > tr:first-child, #queue .sticky-header > caption + tbody > tr:first-child, #queue .sticky-header > tbody:first-child > tr:first-child, #queue .sticky-header-multi > thead {
    position: sticky;
    top: 50px;
    z-index: 10;
  }
}
@media (min-width: 1200px) {
  #queue .sticky-header .wikitable, #queue .sticky-header.wikitable {
    border-collapse: separate;
    border-spacing: 0;

  }
}*/

.zip-code {
  font-weight: bold;
  text-align: center;
  color: #009414;
}
@media (max-width: 599px) {
  #queue .table-sticky {
    margin: 0 0 0.5em 0;
    min-width: 599px;
  }

}



#queue {margin: 0 10px;}


@media (min-width: 768px) {
th:after,
th:before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}

th:before {
  top: -1px;
  border-top: 1px solid #ccc;
}

th:after {
  bottom: -1px;
  border-bottom: 1px solid #ccc;
}
.table {
  border-collapse: collapse;
}

.table-sticky thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
}
.content_only .table-sticky thead th {
  top: 0;
}
}
table {
  margin-bottom: 5px;
}

@media screen {
  .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
    border: 1px solid var(--border-color-base,#ccc);
  }
}


.flag {
  background-size: contain;
  height: 20px;
  width: 26.5px;
  margin: auto;
}

@media (max-width: 767px) 
{.rte .twelve {width: 100%; }
}
/*
@media (min-width: 768px) {
  .cms-137 .footer-container {
    background: linear-gradient(#fff7 0 0), url(../img/Petra_Jordan.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
.footer-bg-img {
  background-color: rgba(241,241,241,.5);
}
}
*/

#AFG {background-image: url(../img/flags-svg/AFG.svg);}
#ALA {background-image: url(../img/flags-svg/ALA.svg);}
#ALB {background-image: url(../img/flags-svg/ALB.svg);}
#DZA {background-image: url(../img/flags-svg/DZA.svg);}
#ASM {background-image: url(../img/flags-svg/ASM.svg);}
#AND {background-image: url(../img/flags-svg/AND.svg);}
#AGO {background-image: url(../img/flags-svg/AGO.svg);}
#AIA {background-image: url(../img/flags-svg/AIA.svg);}
#ATA {background-image: url(../img/flags-svg/ATA.svg);}
#ATG {background-image: url(../img/flags-svg/ATG.svg);}
#ARG {background-image: url(../img/flags-svg/ARG.svg);}
#ARM {background-image: url(../img/flags-svg/ARM.svg);}
#ABW {background-image: url(../img/flags-svg/ABW.svg);}
#AUS {background-image: url(../img/flags-svg/AUS.svg);}
#HMD {background-image: url(../img/flags-svg/HMD.svg);}
#AUT {background-image: url(../img/flags-svg/AUT.svg);}
#AZE {background-image: url(../img/flags-svg/AZE.svg);}
#BHS {background-image: url(../img/flags-svg/BHS.svg);}
#BHR {background-image: url(../img/flags-svg/BHR.svg);}
#BGD {background-image: url(../img/flags-svg/BGD.svg);}
#BRB {background-image: url(../img/flags-svg/BRB.svg);}
#BLR {background-image: url(../img/flags-svg/BLR.svg);}
#BEL {background-image: url(../img/flags-svg/BEL.svg);}
#BLZ {background-image: url(../img/flags-svg/BLZ.svg);}
#BEN {background-image: url(../img/flags-svg/BEN.svg);}
#BES {background-image: url(../img/flags-svg/BES.svg);}
#BMU {background-image: url(../img/flags-svg/BMU.svg);}
#BTN {background-image: url(../img/flags-svg/BTN.svg);}
#BOL {background-image: url(../img/flags-svg/BOL.svg);}
#BIH {background-image: url(../img/flags-svg/BIH.svg);}
#BWA {background-image: url(../img/flags-svg/BWA.svg);}
#BRA {background-image: url(../img/flags-svg/BRA.svg);}
#VGB {background-image: url(../img/flags-svg/VGB.svg);}
#BRN {background-image: url(../img/flags-svg/BRN.svg);}
#BGR {background-image: url(../img/flags-svg/BGR.svg);}
#BFA {background-image: url(../img/flags-svg/BFA.svg);}
#BDI {background-image: url(../img/flags-svg/BDI.svg);}
#KHM {background-image: url(../img/flags-svg/KHM.svg);}
#CMR {background-image: url(../img/flags-svg/CMR.svg);}
#CAN {background-image: url(../img/flags-svg/CAN.svg);}
#CPV {background-image: url(../img/flags-svg/CPV.svg);}
#CYM {background-image: url(../img/flags-svg/CYM.svg);}
#CAF {background-image: url(../img/flags-svg/CAF.svg);}
#TCD {background-image: url(../img/flags-svg/TCD.svg);}
#CHL {background-image: url(../img/flags-svg/CHL.svg);}
#CHN {background-image: url(../img/flags-svg/CHN.svg);}
#COL {background-image: url(../img/flags-svg/COL.svg);}
#COM {background-image: url(../img/flags-svg/COM.svg);}
#COD {background-image: url(../img/flags-svg/COD.svg);}
#COG {background-image: url(../img/flags-svg/COG.svg);}
#COK {background-image: url(../img/flags-svg/COK.svg);}
#CRI {background-image: url(../img/flags-svg/CRI.svg);}
#CIV {background-image: url(../img/flags-svg/CIV.svg);}
#HRV {background-image: url(../img/flags-svg/HRV.svg);}
#CUB {background-image: url(../img/flags-svg/CUB.svg);}
#CYP {background-image: url(../img/flags-svg/CYP.svg);}
#CZE {background-image: url(../img/flags-svg/CZE.svg);}
#DNK {background-image: url(../img/flags-svg/DNK.svg);}
#DJI {background-image: url(../img/flags-svg/DJI.svg);}
#DMA {background-image: url(../img/flags-svg/DMA.svg);}
#DOM {background-image: url(../img/flags-svg/DOM.svg);}
#TLS {background-image: url(../img/flags-svg/TLS.svg);}
#ECU {background-image: url(../img/flags-svg/ECU.svg);}
#EGY {background-image: url(../img/flags-svg/EGY.svg);}
#SLV {background-image: url(../img/flags-svg/SLV.svg);}
#GNQ {background-image: url(../img/flags-svg/GNQ.svg);}
#ERI {background-image: url(../img/flags-svg/ERI.svg);}
#EST {background-image: url(../img/flags-svg/EST.svg);}
#ETH {background-image: url(../img/flags-svg/ETH.svg);}
#FLK {background-image: url(../img/flags-svg/FLK.svg);}
#FRO {background-image: url(../img/flags-svg/FRO.svg);}
#FJI {background-image: url(../img/flags-svg/FJI.svg);}
#FIN {background-image: url(../img/flags-svg/FIN.svg);}
#FRA {background-image: url(../img/flags-svg/FRA.svg);}
#REU {background-image: url(../img/flags-svg/REU.svg);}
#GUF {background-image: url(../img/flags-svg/GUF.svg);}
#ATF {background-image: url(../img/flags-svg/ATF.svg);}
#GLP {background-image: url(../img/flags-svg/GLP.svg);}
#NCL {background-image: url(../img/flags-svg/NCL.svg);}
#MYT {background-image: url(../img/flags-svg/MYT.svg);}
#MAF {background-image: url(../img/flags-svg/MAF.svg);}
#PYF {background-image: url(../img/flags-svg/PYF.svg);}
#GAB {background-image: url(../img/flags-svg/GAB.svg);}
#GMB {background-image: url(../img/flags-svg/GMB.svg);}
#GEO {background-image: url(../img/flags-svg/GEO.svg);}
#DEU {background-image: url(../img/flags-svg/DEU.svg);}
#GHA {background-image: url(../img/flags-svg/GHA.svg);}
#GIB {background-image: url(../img/flags-svg/GIB.svg);}
#GRC {background-image: url(../img/flags-svg/GRC.svg);}
#GRL {background-image: url(../img/flags-svg/GRL.svg);}
#GRD {background-image: url(../img/flags-svg/GRD.svg);}
#GUM {background-image: url(../img/flags-svg/GUM.svg);}
#GTM {background-image: url(../img/flags-svg/GTM.svg);}
#GIN {background-image: url(../img/flags-svg/GIN.svg);}
#GNB {background-image: url(../img/flags-svg/GNB.svg);}
#GUY {background-image: url(../img/flags-svg/GUY.svg);}
#HTI {background-image: url(../img/flags-svg/HTI.svg);}
#HND {background-image: url(../img/flags-svg/HND.svg);}
#HKG {background-image: url(../img/flags-svg/HKG.svg);}
#HUN {background-image: url(../img/flags-svg/HUN.svg);}
#ISL {background-image: url(../img/flags-svg/ISL.svg);}
#IND {background-image: url(../img/flags-svg/IND.svg);}
#IDN {background-image: url(../img/flags-svg/IDN.svg);}
#IRN {background-image: url(../img/flags-svg/IRN.svg);}
#IRQ {background-image: url(../img/flags-svg/IRQ.svg);}
#IRL {background-image: url(../img/flags-svg/IRL.svg);}
#ISR {background-image: url(../img/flags-svg/ISR.svg);}
#ITA {background-image: url(../img/flags-svg/ITA.svg);}
#JAM {background-image: url(../img/flags-svg/JAM.svg);}
#JPN {background-image: url(../img/flags-svg/JPN.svg);}
#JOR {background-image: url(../img/flags-svg/JOR.svg);}
#KAZ {background-image: url(../img/flags-svg/KAZ.svg);}
#KEN {background-image: url(../img/flags-svg/KEN.svg);}
#KIR {background-image: url(../img/flags-svg/KIR.svg);}
#PRK {background-image: url(../img/flags-svg/PRK.svg);}
#KOR {background-image: url(../img/flags-svg/KOR.svg);}
#KWT {background-image: url(../img/flags-svg/KWT.svg);}
#KGZ {background-image: url(../img/flags-svg/KGZ.svg);}
#LAO {background-image: url(../img/flags-svg/LAO.svg);}
#LVA {background-image: url(../img/flags-svg/LVA.svg);}
#LBN {background-image: url(../img/flags-svg/LBN.svg);}
#LSO {background-image: url(../img/flags-svg/LSO.svg);}
#LBR {background-image: url(../img/flags-svg/LBR.svg);}
#LBY {background-image: url(../img/flags-svg/LBY.svg);}
#LIE {background-image: url(../img/flags-svg/LIE.svg);}
#LTU {background-image: url(../img/flags-svg/LTU.svg);}
#LUX {background-image: url(../img/flags-svg/LUX.svg);}
#MAC {background-image: url(../img/flags-svg/MAC.svg);}
#MKD {background-image: url(../img/flags-svg/MKD.svg);}
#MDG {background-image: url(../img/flags-svg/MDG.svg);}
#MWI {background-image: url(../img/flags-svg/MWI.svg);}
#MYS {background-image: url(../img/flags-svg/MYS.svg);}
#MDV {background-image: url(../img/flags-svg/MDV.svg);}
#MLI {background-image: url(../img/flags-svg/MLI.svg);}
#MLT {background-image: url(../img/flags-svg/MLT.svg);}
#MHL {background-image: url(../img/flags-svg/MHL.svg);}
#MTQ {background-image: url(../img/flags-svg/MTQ.svg);}
#MRT {background-image: url(../img/flags-svg/MRT.svg);}
#MUS {background-image: url(../img/flags-svg/MUS.svg);}
#MEX {background-image: url(../img/flags-svg/MEX.svg);}
#FSM {background-image: url(../img/flags-svg/FSM.svg);}
#MDA {background-image: url(../img/flags-svg/MDA.svg);}
#MCO {background-image: url(../img/flags-svg/MCO.svg);}
#MNG {background-image: url(../img/flags-svg/MNG.svg);}
#MNE {background-image: url(../img/flags-svg/MNE.svg);}
#MSR {background-image: url(../img/flags-svg/MSR.svg);}
#MAR {background-image: url(../img/flags-svg/MAR.svg);}
#MOZ {background-image: url(../img/flags-svg/MOZ.svg);}
#MMR {background-image: url(../img/flags-svg/MMR.svg);}
#NAM {background-image: url(../img/flags-svg/NAM.svg);}
#NRU {background-image: url(../img/flags-svg/NRU.svg);}
#NPL {background-image: url(../img/flags-svg/NPL.svg);}
#NLD {background-image: url(../img/flags-svg/NLD.svg);}
#ANT {background-image: url(../img/flags-svg/ANT.svg);}
#NZL {background-image: url(../img/flags-svg/NZL.svg);}
#NIC {background-image: url(../img/flags-svg/NIC.svg);}
#NER {background-image: url(../img/flags-svg/NER.svg);}
#NGA {background-image: url(../img/flags-svg/NGA.svg);}
#NIU {background-image: url(../img/flags-svg/NIU.svg);}
#MNP {background-image: url(../img/flags-svg/MNP.svg);}
#NOR {background-image: url(../img/flags-svg/NOR.svg);}
#SJM {background-image: url(../img/flags-svg/SJM.svg);}
#BVT {background-image: url(../img/flags-svg/BVT.svg);}
#OMN {background-image: url(../img/flags-svg/OMN.svg);}
#PAK {background-image: url(../img/flags-svg/PAK.svg);}
#PLW {background-image: url(../img/flags-svg/PLW.svg);}
#PSE {background-image: url(../img/flags-svg/PSE.svg);}
#PSE-1 {background-image: url(../img/flags-svg/PSE.svg);}
#PAN {background-image: url(../img/flags-svg/PAN.svg);}
#PNG {background-image: url(../img/flags-svg/PNG.svg);}
#PRY {background-image: url(../img/flags-svg/PRY.svg);}
#PER {background-image: url(../img/flags-svg/PER.svg);}
#PHL {background-image: url(../img/flags-svg/PHL.svg);}
#PCN {background-image: url(../img/flags-svg/PCN.svg);}
#POL {background-image: url(../img/flags-svg/POL.svg);}
#PRT {background-image: url(../img/flags-svg/PRT.svg);}
#PRI {background-image: url(../img/flags-svg/PRI.svg);}
#QAT {background-image: url(../img/flags-svg/QAT.svg);}
#ROU {background-image: url(../img/flags-svg/ROU.svg);}
#RUS {background-image: url(../img/flags-svg/RUS.svg);}
#RWA {background-image: url(../img/flags-svg/RWA.svg);}
#SHN {background-image: url(../img/flags-svg/SHN.svg);}
#TDC {background-image: url(../img/flags-svg/TDC.svg);}
#KNA {background-image: url(../img/flags-svg/KNA.svg);}
#LCA {background-image: url(../img/flags-svg/LCA.svg);}
#SPM {background-image: url(../img/flags-svg/SPM.svg);}
#VCT {background-image: url(../img/flags-svg/VCT.svg);}
#WSM {background-image: url(../img/flags-svg/WSM.svg);}
#SMR {background-image: url(../img/flags-svg/SMR.svg);}
#STP {background-image: url(../img/flags-svg/STP.svg);}
#SAU {background-image: url(../img/flags-svg/SAU.svg);}
#SEN {background-image: url(../img/flags-svg/SEN.svg);}
#SRB {background-image: url(../img/flags-svg/SRB.svg);}
#SYC {background-image: url(../img/flags-svg/SYC.svg);}
#SLE {background-image: url(../img/flags-svg/SLE.svg);}
#SGP {background-image: url(../img/flags-svg/SGP.svg);}
#SVK {background-image: url(../img/flags-svg/SVK.svg);}
#SVN {background-image: url(../img/flags-svg/SVN.svg);}
#SLB {background-image: url(../img/flags-svg/SLB.svg);}
#SOM {background-image: url(../img/flags-svg/SOM.svg);}
#ZAF {background-image: url(../img/flags-svg/ZAF.svg);}
#SSD {background-image: url(../img/flags-svg/SSD.svg);}
#ESP {background-image: url(../img/flags-svg/ESP.svg);}
#LKA {background-image: url(../img/flags-svg/LKA.svg);}
#SDN {background-image: url(../img/flags-svg/SDN.svg);}
#SUR {background-image: url(../img/flags-svg/SUR.svg);}
#SWZ {background-image: url(../img/flags-svg/SWZ.svg);}
#SXM {background-image: url(../img/flags-svg/SXM.svg);}
#SWE {background-image: url(../img/flags-svg/SWE.svg);}
#CHE {background-image: url(../img/flags-svg/CHE.svg);}
#SYR {background-image: url(../img/flags-svg/SYR.svg);}
#TWN {background-image: url(../img/flags-svg/TWN.svg);}
#TJK {background-image: url(../img/flags-svg/TJK.svg);}
#TZA {background-image: url(../img/flags-svg/TZA.svg);}
#THA {background-image: url(../img/flags-svg/THA.svg);}
#TLS {background-image: url(../img/flags-svg/TLS.svg);}
#TGO {background-image: url(../img/flags-svg/TGO.svg);}
#TKL {background-image: url(../img/flags-svg/TKL.svg);}
#TON {background-image: url(../img/flags-svg/TON.svg);}
#TTO {background-image: url(../img/flags-svg/TTO.svg);}
#TUN {background-image: url(../img/flags-svg/TUN.svg);}
#TUR {background-image: url(../img/flags-svg/TUR.svg);}
#TKM {background-image: url(../img/flags-svg/TKM.svg);}
#TCA {background-image: url(../img/flags-svg/TCA.svg);}
#TUV {background-image: url(../img/flags-svg/TUV.svg);}
#UGA {background-image: url(../img/flags-svg/UGA.svg);}
#UKR {background-image: url(../img/flags-svg/UKR.svg);}
#ARE {background-image: url(../img/flags-svg/ARE.svg);}
#GBR {background-image: url(../img/flags-svg/GBR.svg);}
#ACI {background-image: url(../img/flags-svg/ACI.svg);}
#USA {background-image: url(../img/flags-svg/USA.svg);}
#UMI {background-image: url(../img/flags-svg/UMI.svg);}
#URY {background-image: url(../img/flags-svg/URY.svg);}
#UZB {background-image: url(../img/flags-svg/UZB.svg);}
#VUT {background-image: url(../img/flags-svg/VUT.svg);}
#VAT {background-image: url(../img/flags-svg/VAT.svg);}
#VEN {background-image: url(../img/flags-svg/VEN.svg);}
#VNM {background-image: url(../img/flags-svg/VNM.svg);}
#VIR {background-image: url(../img/flags-svg/VIR.svg);}
#WLF {background-image: url(../img/flags-svg/WLF.svg);}
#ESH {background-image: url(../img/flags-svg/ESH.svg);}
#YEM {background-image: url(../img/flags-svg/YEM.svg);}
#ZMB {background-image: url(../img/flags-svg/ZMB.svg);}
#ZWE {background-image: url(../img/flags-svg/ZWE.svg);}
#IOT {background-image: url(../img/flags-svg/IOT.svg);}
#CXR {background-image: url(../img/flags-svg/CXR.svg);}
#CUW {background-image: url(../img/flags-svg/CUW.svg);}
#CCK {background-image: url(../img/flags-svg/CCK.svg);}
#GGY {background-image: url(../img/flags-svg/GGY.svg);}
#IMN {background-image: url(../img/flags-svg/IMN.svg);}
#JEY {background-image: url(../img/flags-svg/JEY.svg);}
#NFK {background-image: url(../img/flags-svg/NFK.svg);}
#BLM {background-image: url(../img/flags-svg/BLM.svg);}
#SGS {background-image: url(../img/flags-svg/SGS.svg);}
#KOS {background-image: url(../img/flags-svg/KOS.svg);}
#EUR {background-image: url(../img/flags-svg/EUR.svg);}
#TIBET {background-image: url(../img/flags-svg/TIBET.svg);}

.fancybox-title-float-wrap .child {white-space: break-spaces;}
.fancybox-title-float-wrap {margin-bottom: -65px;}

.grid-block {
background: #f7f7f7;
padding: 20px;
border: none;
outline: 2px solid #dddede;
outline-offset: -9px;
border-radius: 5px;
}
.caption-titles {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #b4975a !important;
}

  @media (min-width: 1200px){
.countries .passport {
  height: 146.65px !important;
}}
  @media (max-width: 767px) {
.countries .passport {
  height: 184.583px !important;
}}
  @media (min-width: 768px) {
.countries .passport {
  height: 187.633px;
}}





#flag {
  padding: 4px;
  border: 1px solid #c8ccd1;
  display: inline-block;
  overflow: hidden;
  width: 300px;
  margin: 4px 4px 17px !important;
}

.car-brands-statistics {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}



@media (max-width: 768px) {
    .mobile-table tr { display: block !important; margin-bottom: 15px; }
    .mobile-table td { display: block !important; width: 100% !important; padding: 5px !important; }
    .mobile-card { margin-bottom: 15px !important; }
    .mobile-image { width: 100% !important; height: auto !important; }
    .mobile-text { font-size: 14px !important; }
}



.alphabet-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.alphabet-nav a {
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: bold;
  min-width: 25px;
  text-align: center;
  color: white !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.9em;
  transition: background 0.3s, color 0.3s;
  display: block;
}

.alphabet-nav a:hover {
  background: #ffcc00 !important;
  color: #2e5540 !important;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {

    .alphabet-nav {
        gap: 3px;
    }
    
    .alphabet-nav a {
        padding: 6px 8px;
        min-width: 30px;
        font-size: 12px;
    }
    }
    
    
    
 
.recipe-data ol {
  list-style-type: decimal;
  padding-left: 17px;
}
.recipe-data ul {
  list-style-type: disc;
  margin: 0.3em 0 0 1.7em;
}
   .content-full {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0;
}
@media (max-width: 768px) {
  .content-full {
    display: flex;
    flex-wrap: wrap;
    justify-content: normal;
  }}
  
  .recipe-info-single-big > li::after {
  border: 2px solid #44a25c;
  border-radius: 22px;
  position: absolute;
  left: 0;
  top: 17px;
  height: 8px;
  width: 8px;
}
  .recipe-info-single-big > li {
  border-right: 1px solid rgba(51, 51, 51, 0.07);
  float: left;
  font-weight: 500;
  counter-increment: articles;
  line-height: 1.6;
  margin: 0;
  position: relative;
}

.recipe-info-single-big em {
  font-style: normal !important;
}

.recipe-info-single-big li ul {
  text-align: left;
  list-style: none !important;
}
    
 .time-and-difficulty-group a{
  color: #0645ad;
}


/* 2. تنسيق مجموعات البيانات (تم تصغير المساحة) */
.time-and-difficulty-group,
.nutritional-info-group {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fff;
    /* 🔴 تم إزالة خصائص Flexbox المتعلقة بتوزيع الأعمدة */
    display: block; /* للتأكد من عدم وجود تعارض */
}

.nutritional-info-group {
    border: 1px solid #77b7a4;
    border-radius: 6px;
}
.nutritional-info-group .group-title {
    background-color: #fff;
}

.nutritional-info-group .text-center p {
  line-height: 1.6;
  width: 100%;
  clear: both;
  display: block;
  background: #69af9a;
  border: 1px solid #77b7a4;
    border-radius: 5px;
}
.nutritional-info-group .text-center {
    color: #e1fff6;
}

/* 4. تنسيق مجموعة الوقت (إزالة تنسيقات Flexbox القديمة) */
/* نركز فقط على إزالة الهوامش والحدود من الفقرات p داخل أعمدة Bootstrap */
.time-and-difficulty-group p {
    margin: 0;
    padding: 3px 0;
    /* 🔴 تم إزالة border-right: 1px solid #eee; */
}

/* 5. تنسيق المعلومات الغذائية (إزالة تنسيقات Flexbox القديمة) */
.nutritional-info-group p {
    /* 🔴 تم إزالة flex: 1 1 150px; و margin: 0 5px; */
    margin-top: 5px; /* لإضافة فاصل بسيط بين الأعمدة في الصفوف الجديدة */
    margin-bottom: 5px;
    font-size: 0.9em;
    padding: 5px;
    border: 1px dashed #77b7a4;
    border-radius: 3px;
}
.nutritional-info-group p strong {
    color: #4c4c4c;
}

/* 6. تنسيق العناوين الرئيسية للمكونات والتعليمات */
.recipe-section-title {
    font-size: 1.6em;
    color: #5cb85c;
    border-bottom: 1px solid #77b7a4;
    padding-bottom: 5px;
    margin-top: 30px;
}

/* 7. حل مشكلة تجاوز النص */
.ingredients-list,
.instructions-steps,
.additional-notes,
.chef-notes,
.recipe-details-wrapper p {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.time-and-difficulty-group .row > div {
  border-right: 1px solid #eee;
  padding-bottom: 5px;
}


/* إضافة حدود رأسية بين أعمدة نظرة عامة على الوصفة */
.time-and-difficulty-group .row > div {
    /* تطبيق حد على جميع الأعمدة داخل الصف */
    border-right: 1px solid #eee; 
    padding-bottom: 5px; /* مسافة بسيطة في الأسفل */
}

/* إزالة الحد من العمود الأخير في الصف */
.time-and-difficulty-group .row > div:last-child {
    border-right: none;
}
/* تنسيق عام للأيقونات في قسم الوصفة */
.time-and-difficulty-group i,
.nutritional-info-group i,
.recipe-section-title i {
    color: #5cb85c; /* لون أخضر (للتناسق مع العنوان الرئيسي) */
    margin-inline-end: 5px; /* مسافة بسيطة بين الأيقونة والنص */
}

/* لون مختلف لأيقونات التغذية لجعلها مميزة (اختياري) */
.nutritional-info-group i {
    color: #fffef3; /* لون أرجواني */
}

.prep-time i, .cook-time i, .total_time i, .servings i, .skill_level i, .cuisine_type i {
  margin-top: 4px !important;
  margin-right: 10px;
}

@media (max-width: 767px) {
.prep-time, .cook-time, .total_time, .servings, .skill_level, .cuisine_type {
  padding-left: 0;
  padding-right: 0;
    padding-top: 5px;
}
.content-full {
  margin-left: 0.7em !important;
}
.cook-time, .servings {
  border-right: none !important;
}
  
.prep-time i, .cook-time i, .total_time i, .servings i, .skill_level i, .cuisine_type i {
  width: 20% !important;
  margin-bottom: 10px;
}
  .prep-time, .cook-time, .total_time, .servings {
  border-bottom: 1px solid #e3e3e3;
}
}
@media (min-width: 768px) {
  .col-sm-2_4 {
    width: 16.66%;
  padding-left: 0;
  padding-right: 0;
  }
}


.recipe-info-single-big {
  text-align: left;
  display: block;
  padding: 5px 0 5px 0 !important;
  background: #fafafa;
  border: 1px dashed rgba(0,0,0,0.17);
  border-radius: 6px;
}
.content-full {
  display: block;
  float: left;
  position: relative;
  width: 95%;
  font-size: 13px;
}

.recipe-info-single-big > li {
  text-align: left;
  list-style: none;
  display: inline-block;
  border-right: 1px solid #e3e3e3;
}
.recipe-info-single-big > li:last-child {
  border-right: none;
}
.prep-time i, .cook-time i, .total_time i, .servings i, .skill_level i, .cuisine_type i {
  float: left;
  margin-left: 10px;
  color: #e4e1db;
  font-size: 34px;
  margin-right: 10px;
  display: block;
}
.prep-time i, .cook-time i,
.total_time i, .servings i,
.skill_level i, .cuisine_type i {
  color: #e4e1db;
  font-size: 34px;
}
.recipe-info-single-big li ul {
  margin: 0 !important;
  text-align: left;
  list-style: none;
  display: block;
}
.recipe-info-single-big li ul {
  text-align: left;
  list-style: none;
}
.recipe-info-single-big > li {
  text-align: left;
  list-style: none;
}
.prep-time li:last-child,
.cook-time li:last-child,
.total_time li:last-child,
.servings li:last-child,
.skill_level li:last-child,
.cuisine_type li:last-child {
  color: #bf9764;
}
.time-and-difficulty-group {
  border: none;padding: 0;
}

.listing-places img {
  margin: 0 !important;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  filter: brightness(85%);
  max-height: 200px;
}
@media (max-width: 767px) {
.cms-complete-cooking-recipe-index .listing-places img {
  max-height: 170;
}
}
.col-md-4 {
  padding: 0 10px 0;
}
.list-group {
  padding: 0;
}














.recipet-additional-info {
  margin-bottom: 15px;
  font-size: 14px;
  padding: 8px 15px 8px;
  background-color: #fcfcfc;
  border: 1px solid #eee;
  border-radius: 4px;
}
.recipet-additional-info, .recipet-text {
  overflow: hidden;
}
.recipet-additional-info .fll {
  float: left;
}
.recipet-additional-info .flr {
  float: right;
}
@media (max-width: 768px) {
.recipet-additional-info .flr {
  float: left;
}
.recipet-additional-info .cms-stats-header {
  display: flex;
  gap: 5px !important;
}
}
.recipet-like-button {
  margin-top: -8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.blog-post-likes, .recipet-single .recipet-views {
  float: right;
}
.blog-post-likes {
  margin-right: 0px !important;
  display: inline-block;
  vertical-align: top;
}
.recipet-like-button .fa-solid {
  color: #007bff;
  margin-left: 5px;
  margin-right: 5px;
  content: "\f087";
}
.recipet-like-button .txt {
  font-size: 14px;
  color: #555;
  margin-left: 5px;
  margin-right: 5px;
}
.blog-post-likes .txt {
  margin: 0 !important;
}
.blog-post-likes .total-likes-nb {
  margin-left: 5px !important;
  display: inline-block !important;
  font-weight: 700;
  font-family: "Open Sans",sans-serif;
  height: 17px;
  color: #F44336;
  padding: 2px 5px;
  line-height: 12px;
  border: 1px solid #333;
  background: #fff;
  text-align: center;
  font-size: 12px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  z-index: 97;
}
.simpleblog-like-button .total-likes-nb {
  font-weight: bold;
  font-size: 16px;
  color: #007bff;
  background-color: #e9ecef;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 5px;
  min-width: 20px;
  text-align: center;
}
.simpleblog-single .likes-nb {
  cursor: pointer;
}
.simpleblog-single .post-views {
  margin-right: 50px !important;
}

.vj_icn {
  width: 38px;
  height: 38px;
  vertical-align: middle;
  float: left;
  margin-left: 10px;
  fill: #4c4c4c;
  margin-right: 10px;
  display: block;
}

#cooktime .vj_icn:hover {
  fill: #69af9a;
}



















/* هذا الجزء يتم تطبيقه فقط عندما يكون عرض الشاشة أقل من 768 بكسل (مثلاً) */
@media screen and (max-width: 768px) {

    /* 1. التنسيقات الأساسية (لا تغيير) */
    .responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr { 
        display: block; 
    }
    
    .responsive-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* 2. تعديل تنسيق الصف (لإزالة مظهر "الصندوق/البطاقة") */
  .responsive-table tr {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
  }
    
    /* 3. تعديل تنسيق الخلية (لإزالة الفواصل الداخلية) */
    .responsive-table td { 
        border: none;
    }

    /* إزالة الفاصل السفلي من آخر عنصر في كل صف (للحصول على مظهر أكثر نظافة) */
    .responsive-table tr td:last-child {
        border-bottom: none;
    }
    
}



.recipe-details-wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 7%),0 23px 22px -18px rgb(0 0 0 / 11%);
  margin: 40px auto 36px;
  background: linear-gradient(315deg, #f1f5168c 0%, #419043 60%);
  padding: 4px;
}
.main-recipe-content {
  padding: 32px;
  background: #fff;
  border-radius: 12px;
}

.flag-img {
  border: solid 1px #ddd;
  width: 91.42857142857143px;
  height: 68.57142857142857px;
  max-width: initial !important;
  margin: 4px !important;
}
@media screen and (max-width: 719px) {
  .flag-img {
    max-width: 100% !important;
  width: auto;
  height: auto;
  }
}

  .cms-share-buttons .btn {
    font-size: 0;
    width: 40px;
    padding: 10px;
    text-align: center;
    border-radius: 6px !important;
  }

    .cms-share-buttons .btn i {
        font-size: 16px;
        margin: 0;
    }


/* 1. تنسيق الشارة بجانب العنوان */
.locked-badge {
  background-color: #495057;
  color: #e9ecef;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 8px;
  
  /* الحل النهائي للتوسيط */
  display: table;      /* تجعل العنصر يعامل كجدول ليقبل التوسيط */
  margin-left: auto;   /* هامش يسار تلقائي */
  margin-right: auto;  /* هامش يمين تلقائي */
  
  border: 1px solid #dee2e6;
  cursor: help;
  text-shadow: none;
  text-align: center;  /* توسيط النص داخل الشارة */
}


/* 2. تنسيق المنطقة المحجوبة (التي تحتوي على الصورة) */
.disabled-area {
    cursor: not-allowed;
    position: relative;
    display: block;
}

/* 3. الرسالة التي تظهر عند مرور الفأرة (المعدلة لسحب الترجمة) */
.disabled-area::after {
    content: attr(data-tooltip); /* هذا هو التعديل الأهم: يسحب النص من الكود */
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* يمنع التداخل مع الفأرة */
    white-space: nowrap;
    z-index: 10;
}

.disabled-area:hover::after {
    opacity: 1;
}

/* 4. إضافي: تعتيم الصورة للمناطق المحجوبة */
.grayscale-img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
}