/* ============ Begin NEW CODE ================ */
/*__________________________________________*/
/* Begin Virtual Pagination new Nav buttons */
/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/
.paginationstyle { /*Style for demo pagination divs*/
    /*width: 205px;*/ /*moved to code in ihk01Bab01.aspx*/
    /*text-align: center;*/
    /*______________________________________________الأزرار*/
    /*background-color:ButtonFace; border-style:dotted;*/
    background-color: #e1e1e1;
    width: 205px;
    display: block; /* text-align: left; لم تنفع*/ /* float: left; ولا تنفع*/
    height: 30px;
    /*background-color:#fff;*/ /* #fff;*/ /*#f1f1f1;*/ /*أرضية أزرار التصفح*/
}

    .paginationstyle select { /*Style for demo pagination divs' select menu*/
        border: 1px solid navy; /*????*/
        margin: 0 15px;
    }

    .paginationstyle a { /*Pagination links style*/
        padding: 0 5px;
        text-decoration: none;
        /*border: 1px solid black;*/ /*لو أردت تحويد الأسهم بمربع*/
        color: navy;
    }

        .paginationstyle a:hover, .paginationstyle a.selected {
            color: #000;
            background-color: #FEE496; /*لون أرضية الهوفر على أزرار التصفح*/
        }

        .paginationstyle a.disabled, .paginationstyle a.disabled:hover { /*Style for "disabled" previous or next link*/
            /*background-color: white;*/ /*لون أرضية زري أول وآخر صفحة عند الوصول إلى بداية أو نهاية الملف*/
            cursor: default;
            /*لون زري أول وآخر صفحة عند الوصول إلى بداية أو نهاية الملف*/
            color: #b1b1b1; /*#d1d1d1;*/ /*#c1c1c1;*/ /*هافت أكثر#d1d1d1;*/ /*ORG #929292;*/
            border-color: transparent;
        }

        .paginationstyle a.imglinks { /*Pagination Image links style (class="imglinks") */
            border: 0;
            padding: 0;
        }

            .paginationstyle a.imglinks img {
                vertical-align: bottom;
                border: 0;
            }

            .paginationstyle a.imglinks a:hover {
                background: none;
            }

    .paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected { /*Pagination div "flatview" links style*/
        color: #000;
        background-color: yellow;
    }
/*________________________________________*/
/* End Virtual Pagination new Nav buttons */






/*_______________________________*/
/*Begin Nass says: for swipe btns*/

/* https://css-tricks.com/practical-css-scroll-snapping/ */
/*Example 2: Horizontal slider*/

.gallery {
    border: 1px solid lightgray;
    /*border-right:#e6e6e6 2px solid; border-left:#e6e6e6 2px solid;*/

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px; /*قرب شريط كل صفحة لطرفي اليسار واليمين*/
    text-align: center; /*توسيط أسماء الصفحات*/
    display: grid;
    /*إعطاء مجال لإظهار جزء من ص2*/
    /*best:34vw*/
    grid-template-columns: repeat(63, 52px); /*    (16, 28vw);*/ /*(10, 30vw)*/
    /*grid-template-rows: repeat(10, 30vw); Not Appl*/ /*(10, 30vw)*/
    grid-column-gap: 10px; /*بعد الصفحة التالية عن الأول*/
    /*grid-row-gap: 1rem; Not Appl*/
    flex-wrap: wrap;
    overflow-x: scroll; /*Org overflow: scroll;*/
    height: 30px; /*الإرتفاع الكلي لشريط التصفح*/
    width: 290px; /*230px;*/ /*best:185px;  155px; العرض الكلي لشريط التصفح*/
    scroll-snap-type: x mandatory;
    scroll-padding-right: 0px; /*grid-column-gap: 10px; لا تنتج فراغ في أول جزء مثل الفراغ بين باقي الأجزاء*/

    background-color: #f2f2f2; /*لون الفراغات بين أسماء الأجزاء*/ /*#f2f2f2;*/ /*#e6e6e6;*/ /*#fff;*/
}

ul.mylist {
    /* ^^^^^^ to avoid css code to general <ul> & <li> in the whole page*/
    /*empty for: avoiding css code to general <ul> & <li> in the whole page*/
}

    /*Nass*/
    ul.mylist li { /*Org was li {*/
        /*^^^^^^ to avoid css code to general <ul> & <li> in the whole page--> */
        scroll-snap-align: start; /*Org center   -  start    ستارت تسمح بظهور جزء من ص2*/
        display: inline-block;
        border-radius: 3px; /*زوايا منحنية*/
        font-size: 10pt;
        /*background-color:#e1e1e1; نقل لتاغ جديد لـ إى تحت*/ /*#fff;*/ /*#d6d6d6;*/ /*#f2f2f2;*/ /*هافت جدا#fdfdfd;     #e6e6e6;*/ /*#b3b3b3;رصاصي قاتم*/
        /*color:red;*/ /*لون خط أسماء الأجزاء*/
        /*color:#b3b3b3; background-color:#f2f2f2; ألأوان أرضية فاتحة الكتاب وخطها */
        /*color: referr to <a .. class="hover-mobile" ..*/
    }

        ul.mylist li a {
            display: block;
            background-color: #e6e6e6; /*#e1e1e1;*/ /*أرضية أزرار الأجزاء */
            /*الأصل إى تاغ يعطي لونين قبل وبعد الضغد على الزر*/
            /*لكن لأن منيو السوايب يتكرر تحت لم تستطع جعل الإثنان يظهران نفس الزر المضغوط*/
            color: black;
			height: 30px; width: 55px;
        }
/*ul.mylist li a:hover {  للدسك توب فقط
		display:block;
		background-color:yellow;
		color:blue;
	}*/

/*الكلاسان التاليان ليس لهما علاقة بفنكشن النقل أو الإخفاء والإظهار*/
/*فقط تحوي بروبرتيز لكيفية تزبيط شريط السوايب وأسهمه وألوانه*/

/*1 وعاء رئيسي بعرض الموبايل يحمل شريط السوايب والأسهم*/
.parent_swipe_div {
    /*<!--visibility:  hidden للموبايل / visible; للدسك توب-->*/
    display: flex;
    justify-content: center;
    color: #d6d6d6;
    top: 115px;
    width: 100%;
    height: 30px; /*visibility: visible;*/
    /* for testing Mobile background-color:yellow;*/
}
/*2 وعاء فرعي يحمل السهمين يمين يسار*/
.child_swipe_div {

    /*______________________________________*/
    /* style-new-code- مجلوب من الأصل الملغي */     
/*float: left;*/
    /*______________________________________*/

    margin-top:-5px;/*padding-bottom: 5px;*/
    font-size: 25pt;/*15pt;*/
    /* for testing Mobile - background-color:#333;*/
}

/* see div id="locator" _____________ جديد يضع صورة في أي مكان على الشاشة______________https://allwebco-templates.com/support/S_add_div.htm*/
/*#locator { position: absolute; visibility: visible; left: 20px; top: 3000px; height: 100px; width: 150px; z-index: 200; }*/
/*#locator { position: absolute; visibility: visible; left: 20px; top: 3000px; height: 100px; width: 150px; z-index: 200; }*/

/*_______________________________*/
/*End Nass says: for swipe btns*/









/*___________________________________________________________________________________________________________________________*/
/* ######################### style-new-code.css توجد ملفات أخرى غير موجودة  هنا وموجودة في ################################# */
/*___________________________________________________________________________________________________________________________*/



                                    /* style-new-code.css وها قد جلبت من هناك  */

                                    /* style-910_849.css ولا تنسى حذفها من */
                                    /* لتكرارها هناك */

.left2 {
    padding: 0px 30px 0px 50px;
    float: left;
    width: 28%;
    height: 510px;
}
/*approved*/
/*was width:30%*/

.main2 {
    padding: 0px 0px 0px 0px;
    float: left;
    width: 44%;
    height: 510px;
}
/*approved*/
/*was width:40%*/

.right2 {
    padding: 0px 50px 0px 30px;
    float: left;
    width: 28%;
    height: 510px;
}
/*approved*/
/*was width:30%*/





/* ????? ?? ??? ???? ??? ??????? */

/* for  ??????? ??????? */

/* -------------------????? ?????? ????? ?? ??????-------------------- */
.subleftmargin {
    width: 5.2%; /*background-color: Aqua*/
}

.subleft {
    width: 22.0%;
    padding: 0px 26px 0px 6px; /*background-color:  Fuchsia*/
}

.submain {
    width: 61.7%;
    padding: 0px 25px 0px 25px; /* background-color: Aqua*/
}

.subright {
    width: 11.1%;
    border-left: #e6e6e6 1px solid /*#a3a5a9*/
}
/* -------------------???? ??????? ????? ?? ???? ????? ?? ?????-------------------- */
.sub2left {
    width: 15.4%; /*background-color: Yellow*/
}

.sub2main {
    width: 71.0%;
    padding: 0px 25px 0px 35px;
}

.sub2right {
    width: 11.1%;
    border-left: #e6e6e6 1px solid /*#a3a5a9*/
}

.sub2leftmargin {
    width: 2.5%; /*background-color: Aqua*/
}
/* ????? ?? ??? ???? ??? ??????? */



/* for  ????? ??? 1 + ???? ????? ????? 3 */

.lleft {
    padding: 20px 28px 10px 8.2%;
    float: left;
    width: 25%;
}
/* ORG   defaukt.aspx غريب أنه محذوف لأن الكلاس موجود في ص
        .mmain {
            padding: 0px 25px 10px 25px;
            float: left;
            width: 50%;
        }
        */
/* ?? ??????? ??????2 + ????? ????? ????2 ?? ??????*/
.mmain1 {
    padding: 20px 28px 10px 28px;
    float: left;
    width: 25%;
}
/* ?? ??????? ??????1 + ????? ????? ????3 ?? ??????*/
.mmain2 {
    padding: 20px 28px 10px 28px;
    float: left;
    width: 25%;
}


/* .rright ???? ?????? ?????? ??? ???? ????? ??????? ?? ?????? ????*/
/* ________________________________________________*/

/*???? ?????? ???? ?????default 
                .rright {
                    padding: 20px 8.2% 10px 25px;
                    float: left;
                    width: 25%;
                    display: block;*/ /*id="id="right-main-kurduba" " ?????? ??? ??????*/
/*}*/



/* @700 غير موجود في */
/* @900 وموجود في */
/* width: 100%; */
.rright-3-col {
    padding: 20px 8.2% 10px 28px;
    float: left;
    width: 25%;
}






/* @700 غير موجود في */
/* @900 وموجود في */
/* كامل كما هنا */
.left4 {
    /*background-color: #fff;
              /*padding: 0px 36px 0px 5.8%;*/
    padding: 0px 1.8% 0px 5.4%; /* padding: 0px 2% 0px 5.2%; */
    float: left;
    width: 33.33333%;
    height: 510px;
}

.main4 {
    padding: 0px 3.6% 0px 3.6%; /* 2.6% = .5 * 5.2 */
    float: left;
    width: 33.33333%;
    height: 510px;
}

/* @700 غير موجود في */
/* @900 وموجود في */
/* width: 100%; */
.right4 {
    padding: 0px 5.4% 0px 1.8%;
    float: left;
    width: 33.33333%;
    height: 510px;
}







/* @700 غير موجود في */
/* @900 وموجود في */
/* كامل كما هنا */
.left5 {
    padding: 40px 28px 10px 8.2%;
    float: left;
    width: 34%;
}

/* @700 غير موجود في */
/* @900 وموجود في */
/* كامل كما هنا */
.main5 {
    padding: 40px 45px 10px 45px;
    float: left;
    width: 34%;
}

/* @700 غير موجود في */
/* @900 وموجود في */
/* كامل كما هنا */
.right5 {
    padding: 40px 8.2% 10px 28px;
    float: left;
    width: 32%;
}





/* @700 غير موجود في*/
/* @900 وموجود في */
/* كامل كما هنا */
.left_kut {
    padding: 20px 30px 10px 25px;
    float: left;
    width: 20%;
}


/* @700 موجود في width: 100%;*/
/* @900 وموجود في  width: 100%; متكررة عدة مرات هناك*/
/* وأيضا كامل كما هنا */
.main1_kut {
    float: left;
    /*width: 35%;*/
}



/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.right_kut {
    padding: 20px 8.2% 10px 28px;
    float: left;
    /*width: 45%;*/
}
/*approved*/
/*The width is 20%, by default*/








/* $$ ===== 1st Row + 3d Row ??? ???? ???? ?? ??????? ????? ???? ====== 


/* ====  2nd Row OK - Video / ??? ??????? ??????? ??????? - ????? - ????? ???? ????1  ======= */


/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.left_poetry {
    background-color: #fff;
    /*padding-right:25px;*/
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    /*height:100%;*/
    width: 30%; /* 24.75%; /* The width is 20%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.main_poetry {
    background-color: #fff;
    padding-right: 25px;
    padding-left: 25px;
    float: left;
    /*height:100%;*/
    width: 40%; /* 50.5%;/* The width is 60%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.right_poetry {
    background-color: #fff;
    /*padding-left:28px; padding-right:30px;*/
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    /*height:100%;*/
    width: 30%; /* 24.75%; /* The width is 20%, by default */
    text-align: center;
}







/* @700 غير موجود في*/
/* @900 وموجود في */
/* كامل كما هنا */
.leftmargine_white {
    background-color: #fff; /* Lime */
    /*height:100%;*/
    width: 5.2%;
}

/* @700 غير موجود في*/
/* @900 وموجود في */
/* كامل كما هنا */
.leftmargine_black {
    background-color: #333;
    width: 5.2%;
}

/* @700 غير موجود في*/
/* @900 وموجود في */
/* كامل كما هنا */
.rightmargine_white {
    background-color: #fff; /* Lime */
    /*height:100%;*/
    width: 5.2%;
}

/* @700 غير موجود في*/
/* @900 وموجود في */
/* كامل كما هنا */
.rightmargine_black {
    background-color: #333;
    width: 5.2%;
}







/* === 4th Row - Must Reads + 5th Row - Most Popular - Rankings - Smart Living  ??? ?????? ???? ????2 === */

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.left_ikhtartu_lakum {
    background-color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    width: 33%;
}

.main_ikhtartu_lakum {
    background-color: #fff;
    padding-right: 25px;
    padding-left: 25px;
    float: left;
    width: 34%;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.right_ikhtartu_lakum {
    background-color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    width: 33%;
    text-align: center;
}
/* .leftmargine_white { ????? ???? ????
        .left_ikhtartu_lakummargine {
          background-color:#fff;
          width:5.2%;
        }
        /* .leftmargine_white { ????? ???? ????
        .right_ikhtartu_lakummargine {
          background-color:#fff;
          width:5.2%;
        }
        */







/* =========== 6th Row ?? ????? ??????? ????? ?? U.S  ??? ???? ???? ???? ????? ???????? ???? ?? ========= */

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.left_book {
    background-color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    width: 25%;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.main_book {
    background-color: #fff;
    padding-right: 25px;
    padding-left: 25px;
    float: left;
    width: 27%;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.right_book {
    background-color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    float: left;
    width: 48%;
    text-align: center;
}

/* .leftmargine_white { ????? ???? ????
        .left_book_margine {
          background-color:#fff;
          width:5.2%;
        }
        /* .leftmargine_white { ????? ???? ????
        .right_book_margine { 
          background-color:#fff;
          width:5.2%;
        }
        */








/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.left_footer {
    padding-right: 10px;
    float: left;
    width: 17.4%;
    height: 100%;
    text-align: right;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.main_footer {
    padding-right: 10px;
    float: left;
    width: 18.4%;
    height: 100%;
    text-align: right;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.main2_footer {
    padding-right: 10px;
    float: left;
    width: 30.4%;
    height: 100%;
    text-align: right;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.right_footer {
    padding-right: 10px;
    float: left;
    width: 19.4%;
    height: 100%;
    text-align: right;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.leftmargine_footer {
    float: left;
    width: 7.2%;
    height: 100%;
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.rightmargine_footer {
    float: left;
    width: 7.2%;
    height: 100%;
}








/* ============ ???? ????? ?????? ?????? ???????? ====== ????? 4 ????? ?????? =================== */
/* Case: 4 images ( + 2 margin-book only) /  ?? ???? ??? ???????? ??? ??????? ?????? ?????? ??? */


/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.others {
    /*background-color:#2196F3;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.32%; /* The width is 20%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.rasael {
    /*background-color:#f1f1f1;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.28%; /* The width is 60%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.kutub {
    /*background-color:#4CAF50;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.28%; /* The width is 20%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.muhalla {
    /*background-color:#2196F3;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.28%; /* The width is 20%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.fisal {
    /*background-color:#f1f1f1;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.28%; /* The width is 60%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.ihkam {
    /*background-color:#4CAF50;*/
    padding: 0px; /*20px;*/
    float: left;
    width: 14.28%; /* The width is 20%, by default */
}

/* @700 غير موجود في*/
/* @900 وموجود في   width: 100%*/
/* كامل كما هنا */
.taqreeb {
    /*background-color:#4CAF50;
      padding:0px;/*20px;*/
    float: left;
    width: 14.28%; /* The width is 20%, by default */
}