/*--MF.DefaultCssAndPrprtsControls < ستايل شيت يستخدم لتطبيق ديفولت ستايل على الكنترولز واليوزركنترولز العامة في أي بروجيكت .. أنظر الدالة--*/
/*--MF.DefaultCssAndPrprtsControls < هذا الديفولت ستايل له تكملة (تطبق على اليوزركنترولز) في الدالة--*/
/*--ملحوظة: هذا الستايل شيت يمكن أن نضيف فيه كلاسات لكنترولز أو يوزركنترولز أخرى ولكن لا يُفضل تعديل الكلاسات الموجودة فيه حاليًا وذلك لأن الكلاس الديفولت هنا بيتطبق على الكنترول ثم يتم تطبيق الكلاس المُعطى له أثناء إنشائه في الإتش تي إم إل أو المُعطى له من خلال كود السي شارب .. واحنا مثلًا أثناء إعطاء الكلاس للكنترول من داخل السي شارب بنبقى حاطين في اعتبارنا شكل الكنترول بعد تنسيقه التنسيق الافتراضي الموجود هنا في الستايل شيت الحالي فلو جينا بعد كدة وغيرنا في الكلاس الديفولت هنا في خصائص احنا مش عاملينها في الكلاس المعطى ده سنجد أن الكنترول يظهر بشكل احنا مش عايزينه بمعنى أبسط لو مثلًا عندنا تيكست بوكس احنا حاطينه في مكان ما في الأبلكيشن ولئينا إن ويدث التيكست بوكس الافتراضي الموجود هنا ملائم لهذا التيكست بوكس وخلاص وافقنا عليه وتركناه سنجد أنه ليس من المستحب أن نغير بعد ذلك الويدث الافتراضي هنا والذي سيترتب عليه تغير ويدث التيكستبوكس اللي كنا عاملينه--*/
/*--====================================================--*/


/*-تعريف فونتس-*/
@font-face
{
    font-family:RBregular;
    src:url(../Fonts/RBregular.ttf);
}
@font-face
{
    font-family:Tajawal;
    src:url(../Fonts/Tajawal.ttf);
}
@font-face /*مع الأرقام الإنجليزي*/
{
    font-family:ProximaNova;
    src:url(../Fonts/ProximaNova.otf);
}
/*
@font-face
{
    font-family:Cairo;
    src:url(../Fonts/Cairo.ttf);
}
@font-face
{
    font-family:DroidKufi;
    src:url(../Fonts/DroidKufi.ttf);
}
@font-face
{
    font-family:ElMessiri;
    src:url(../Fonts/ElMessiri.ttf);
}
@font-face
{
    font-family:CircleBook;
    src:url(../Fonts/CircleBook.otf);
}
@font-face
{
    font-family:Bein;
    src:url(../Fonts/Bein.ttf);
}
@font-face
{
    font-family:Changa;
    src:url(../Fonts/Changa.ttf);
}
@font-face
{
    font-family:Diodrum;
    src:url(../Fonts/Diodrum.ttf);
}
@font-face
{
    font-family:TheSans;
    src:url(../Fonts/TheSans.otf);
}
@font-face
{
    font-family:NeoSans;
    src:url(../Fonts/NeoSans.ttf);
}
@font-face
{
    font-family:GessTwo;
    src:url(../Fonts/GessTwo.otf);
}
@font-face
{
    font-family:DinNextLtW23;
    src:url(../Fonts/DinNextLtW23.ttf);
}
@font-face
{
    font-family:HelveticaNeueLT;
    src:url(../Fonts/HelveticaNeueLT.ttf);
}
@font-face
{
    font-family:Greta;
    src:url(../Fonts/Greta.ttf);
}
@font-face
{
    font-family:SahlNaskh;
    src:url(../Fonts/SahlNaskh.ttf);
}
@font-face
{
    font-family:NotoNaskh;
    src:url(../Fonts/NotoNaskh.ttf);
}
@font-face
{
    font-family:JFFlat;
    src:url(../Fonts/JFFlat.ttf);
}
@font-face
{
    font-family:Almarai;
    src:url(../Fonts/Almarai.ttf);
}
@font-face
{
    font-family:IBMPlexArabicText;
    src:url(../Fonts/IBMPlexArabicText.otf);
}
@font-face
{
    font-family:FrutigerLTArabic;
    src:url(../Fonts/FrutigerLTArabic.ttf);
}
@font-face
{
    font-family:VIPHalaBold;
    src:url(../Fonts/VIPHalaBold.ttf);
}
@font-face
{
    font-family:AlqabasBold;
    src:url(../Fonts/AlqabasBold.ttf);
}
@font-face
{
    font-family:Cocon;
    src:url(../Fonts/Cocon.otf);
}
@font-face
{
    font-family:Mada;
    src:url(../Fonts/Mada.ttf);
}
@font-face /*مع الحروف والأرقام الإنجليزي*-/
{
    font-family:Prometo;
    src:url(../Fonts/Prometo.ttf);
}
@font-face /*مع الأرقام العربي*-/
{
    font-family:FarsiMahsa;
    src:url(../Fonts/FarsiMahsa.ttf);
}
@font-face
{
    font-family:Zarid;
    src:url(../Fonts/Zarid.ttf);
}
@font-face
{
    font-family:ReadexPro;
    src:url(../Fonts/ReadexPro.ttf);
}
*/

:root
{
    /*حنحددها من البروجيكت*/
    /*--MyFontFamily:RBregular;*/
}

/*المفروض هنا في الفايل نخلي فونت سايز لأي إليمينت (سواء في * أو في بادي) قيمته 0 (ونعمل فونت سايز في الفايل الحالي لجميع التاجات يبقى القيمة الافتراضية) لأن لو عندنا 2 إليمينت (مثل 2 تاج فونت أو 2 ديفاية ديسبلايهم إنلاين بلوك) جمب بعض بينهم سبيس بيدي السبيس فونت وبيكبر حجمه وبيعمل مسافة بين الإليمينتين*/

* /*-كلاس تنسيق يطبق أوتوماتيكيًا على جميع الإليمينتس-*/
{
    /*المفروض نحط في كلاس بادي أي بروبيرتي كنا: 1- ناويين نحطها هنا. و 2- إحتمال نستخدمها جوا البروجيكت. مثل فونت سايز أو لاين هاي أو... . وذلك عشان لو في البروجيكت إدينا إليمينت مثلا فونت 16 وجواه إليمينتس فيطبق عليهم 16 بالإنهيريت مش القيمة اللي في الكلاس الحالي*/

    outline-color:var(--MyBasicWebColor2); /*لون البورد اللي بيظهر في الإنبت المتفوكس*/
    -webkit-tap-highlight-color:transparent; /*إلغاء اللون الأزرق الذي بيظهر (على الموبايل) في باك جراوند الإليمينت عند الضغط عليه وذلك إذا كان الإليمنت قابل للضغط أو له لينك يفتحه*/
}

body /*-body كلاس تنسيق يطبق أوتوماتيكيًا على جميع إليمينتس الـ-*/
{
    margin:0px;
    font-size:14px;
	font-family:var(--MyFontFamily); /*-http://stackoverflow.com/questions/20050928/true-type-font-is-not-working-on-webkit-based-mobile-browsers أنظر .. Arabic web fonts لا يدعم الـ (webkit based mobile browser) ملحوظة: تطبيق الموبايل-*/
    line-height:19px; /*-نحتاجها مع بعض الفونتس المُعرفة فوق لأنهم بيعملوا مسافة كبيرة قبل وبعد السطر-*/
}


/*--تنسيق أي سكرول بار--*/
::-webkit-scrollbar /*--السكرول بار نفسه--*/
{
    width:7px; /*--عرض السكرول بار الرأسي--*/
    height:7px; /*--إرتفاع السكرول بار الأفقي--*/
}
::-webkit-scrollbar-track,     ::-webkit-scrollbar-corner /*--خلفية السكرول بار والكورنر بين زري السكرول بار الرأسي والأفقي--*/
{
    /*background-image:url(Images/Web_background.png);*/
    /*border:1px solid #CAE29A;*/
}
::-webkit-scrollbar-thumb /*--السكرول بار المتحرك--*/
{
    border:0px solid var(--MyBasicWebColor4);
    /*border-radius:3px;*/
	background-color:var(--MyBasicWebColor4);
}
::-webkit-scrollbar-thumb:vertical /*السكرول بار المتحرك الرأسي*/
{
}
::-webkit-scrollbar-thumb:horizontal /*السكرول بار المتحرك الأفقي*/
{
}
::-webkit-scrollbar-button /*--زر الأعلى والأسفل واليمين واليسار--*/
{
}

@media (min-width:768px)
{
    :not(html) ::-webkit-scrollbar-thumb /*:not(html) > عشان يستثني سكرول الإتش تي إم إل لأنها بتبوظ معاه*/
    {
	    background-color:transparent;
    }

    :not(html) :hover::-webkit-scrollbar-thumb /*:not(html) > أنظر فوق*/
    {
	    background-color:var(--MyBasicWebColor4);
    }

    ::-webkit-scrollbar-thumb:horizontal
    {
        border-bottom-width:2px;
    }
}
@media (max-width:767px)
{
    ::-webkit-scrollbar
    {
        width:2px;
        height:2px;
    }
}
html > ::-webkit-scrollbar /*html > لأننا لغينى فوق تنسيق السكرول للإتش تي إم إل*/
{
    width:2px;
    height:2px;
}

/*--تنسيق أي سكرول بار للفايرفوكس--*/
*
{
    scrollbar-width:thin;
    scrollbar-color:var(--MyBasicWebColor4) transparent;
}




/*--تنسيق بليسهولدر الإنبت--*/
::-webkit-input-placeholder
{
    font-size:11.5px;
    color:#AAAAAA;
}
/*--تنسيق بليسهولدر الإنبت للفايرفوكس--*/
::-moz-placeholder
{
    font-size:12px;
    color:#AAAAAA;
    text-align:var(--MyDirection1);
}



::selection /*تنسيق أي نص متسيليكت*/
{
    background-color:#1853A5;
    color:white;
}


table
{
    table-layout:fixed; /*--هي المفروض مالهاش علاقة بس الغباوة بقى يا إما نعمل للخلية ديسبلاي إنلاين بلوك بس ده حيجبرنا نحدد ويدث طبعا لكل الخلايا ومانعتمدش ان خلية حتتمدد لوحدها لباقي ويدث التيبل overflow-y الكلام بيخرج براها فلازم كمان نعمل للخلية overflow-x مع الخلية.. ملحوظة مع فايرفوكس لو عملنا مع الخلية overflow-x تعمل بشرط أن يكون للتيبل ويدث مع إن المفروض ويدث الخلية يكفي!!!!.. وهي تجعل خلية التيبل تلتزم بويدثها مش تكبر لو جواها كلمة كبيرة (أي الخلية تبقى زي الديف) وساعتها بقى نقدر نستخدم البروبيرتيي--*/
}

table td, div /*المفروض نضع هنا أي إليمينت ممكن يكونله ويدث وجواه نص مثل خلية تيبل أو ديف*/
{
    word-wrap:break-word; /*بتلغيها أي بتخلي الجملة وأي كلمة جواها على سطر واحد white-space:nowrap; جعل الكلمة جوه الإليمينت تنزل في سطرين لو كانت أكبر من ويدث الإليمينت.. وملحوظة البروبيرتي*/
}


img, a
{
    -webkit-user-drag:none; /*تستخدم مع بعض الإليمينتس مثل الصورة واللينك.. وتظهر فايدتها مثلا لو عاملين ديف وصممناها بحيث يتعملها سكرول بدراج الماوس وكان فيه في محتواياتها صورة فإن عند دراج الصورة بيتم سحبها وبيكنسل السكرول فهنا حنمنع السحب ده*//*منع عمل دراج بالماوس*/
}

textarea
{
    line-height:inherit;
}


.MyFloatPlaceholderLabel
{
    font-size:11.5px;
    color:Silver;
}

.TextBox_Gnrl
{
    width:200px;
	border-radius:3px;
    font-family:inherit;
}

.TextBox_Gnrl
{
    border:solid 1px #D1D1D1;
    padding-left:4px; padding-right:4px;
    height:30px;
    box-sizing:border-box;
}

[cscls=drpLst]
{
    background-color:White; /* عشان بتظهر على الموبايل جري */
    border:solid 1px #D1D1D1;
    width:200px;
    height:30px;
    box-sizing:border-box;
	border-radius:3px;
    cursor:pointer;
    font-family:inherit;
}
[cscls=drpLst]:disabled
{
    background-color:#F8F8F8;
}



[cscls=atg]
{
    display:inline-block; /*يبقى أوتوويدث a عشان ويدث التاج*/
    text-decoration:none; /*a إلغاء الأندرلاين من تحت الكنترولز الموضوعة داخل التاج*/
    color:inherit;
    text-decoration:inherit;
}

.CheckBox_Gnrl,     [cscls=rdobtn],     [cscls=rdobtnlst]
{
    display:inline-flex !important;
    border:1px solid Silver;
    border-radius:3px;
    cursor:pointer;
    font-size:12.5px;
    color:Gray;
    width:200px;
    height:30px;
    padding-top:3px;
    padding-left:4px; padding-right:4px;
    box-sizing:border-box;
}
.CheckBox_Gnrl input,     [cscls=rdobtn] input,     [cscls=rdobtnlst] input,     .CheckBox_Gnrl label,     [cscls=rdobtn] label,     [cscls=rdobtnlst] label
{
    cursor:inherit;
    vertical-align:top;
}
.CheckBox_Gnrl input,     [cscls=rdobtn] input,     [cscls=rdobtnlst] input
{
     -webkit-appearance:none; -moz-appearance:none; appearance:none; /*حذف التنسيق الافتراضي للكنترول*/
     outline:none;
     background-color:#FAFAFA;
     border:1px solid Silver;
     width:16px;
     height:16px;
     margin:0px;
     margin-top:3px;
}
.CheckBox_Gnrl input
{
     border-radius:3px;
}
[cscls=rdobtn] input,     [cscls=rdobtnlst] input
{
     border-radius:50%;
}
.CheckBox_Gnrl label,     [cscls=rdobtn] label,     [cscls=rdobtnlst] label
{
     padding-left:5px; padding-right:5px;
}
.CheckBox_Gnrl input:hover,     [cscls=rdobtn] input:hover,     [cscls=rdobtnlst] input:hover
{
     background-color:#DFDFDF;
}
.CheckBox_Gnrl input:checked,     [cscls=rdobtn] input:checked,     [cscls=rdobtnlst] input:checked
{
     border-color:var(--MyBasicWebColor2);
     /*background-color:#FAFAFA;*/
     background-color:var(--MyBasicWebColor2);
}
.CheckBox_Gnrl input:checked
{
    background-image:url(../CsJs/Images/Checkbox_Selected.png); background-size:cover;
}
[cscls=rdobtn] input:checked,   [cscls=rdobtnlst] input:checked
{
    background-image:url(../CsJs/Images/Radiobutton_Selected.png); background-size:cover;
}
.CheckBox_Gnrl input:checked + label,     [cscls=rdobtn] input:checked + label,     [cscls=rdobtnlst] input:checked + label /*-تنسيق الليبل عند تشك التشكبوكس/الراديوباتن-*/
{
    font-weight:bold;
    color:Black;
}

[cscls=rdobtnlst]
{
    padding-top:0px;
}



#dvLoadState8602521
{
    display: none;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 1000;
    width: 150px;
    height: 20px;
    text-align: center;
    font-size: 17px;
    background-color: black;
    color: white;
}


/*-------- MyExplainDsbldPage --------*/

@media (min-width:768px)
{
    .MyExplnDsbldPg_BoxExpln
    {
        width:470px;
        padding:10px;
        padding-top:17px;
    }
    .MyExplnDsbldPg_TxtExpln
    {
        font-size:17px;
        font-weight:bold;
        line-height:23px;
    }
    .MyExplnDsbldPg_ExplnShmnu
    {
        height:20px;
    }
    .MyExplnDsbldPg_ExplnNxtBtn
    {
        font-size:16px;
        padding:11px 15px !important;
    }
    .MyExplnDsbldPg_ExplnPrvBtn
    {
        font-size:16px;
        padding:10px 15px !important;
    }
}
@media (max-width:767px)
{
    .MyExplnDsbldPg_BoxExpln
    {
        width:350px;
        padding:7px;
        padding-top:10px;
    }
    .MyExplnDsbldPg_TxtExpln
    {
        font-size:15px;
    }
    .MyExplnDsbldPg_ExplnShmnu
    {
        height:15px;
    }
    .MyExplnDsbldPg_ExplnNxtBtn
    {
        font-size:15px;
        padding:9px 13px !important;
    }
    .MyExplnDsbldPg_ExplnPrvBtn
    {
        font-size:15px;
        padding:8px 13px !important;
    }
}



/*-------- MyTabPanel --------*/
.MyTabPanel
{
    background-color:var(--MyBasicWebColor2);
    box-shadow:0px 2px 5px 0px gray;
    border-radius:3px;
}
.MyTabPanel [OpenSelectors]:first-child /*أول تابة فقط وحنسقها في فايلات الإتجاه*/
{
}
[OpenSelectors]
{
    display:inline-block;
    cursor:pointer;
    color:var(--MyBasicWebColor5);
    padding-top:10px; padding-bottom:10px;
    text-align:center;
    vertical-align:top;
    /*font-weight:bold;*/
}
@media (min-width:768px)
{
    [OpenSelectors]
    {
        padding-left:12px; padding-right:12px;
        font-size:15px;
    }
}
@media (max-width:767px)
{
    [OpenSelectors]
    {
        padding-left:7px; padding-right:7px;
        font-size:14.4px;
    }
}
[OpenSelectors]:hover
{
    background-color:var(--MyBasicWebColor3);
    color:white;
}
.MyTabPanel_ActiveItem
{
    background-color:var(--MyBasicWebColor1);
    color:white;
}
.MyTabPanel_Indicator
{
    background-color:white;
    height:3px;
}

/*-------- MyLoadMore --------*/
.MyLoadMore_Body
{
    overflow-y:auto;
    max-height:352px; /*عاملينها ماكسهياي مش هياي عشان لو اللودمورد فاضية أو فيها سجلين تلاتة وكنا حاطين تحتها في البروجيكت كنترولز فتظهر تحتها مباشرة مش مسافة فاضية كبيرة الأول.. بس عيبها إن لو فيه رو إجمالي بيلزق برضه مش مشكلة بقى*/
}
.MyLoadMore_btnLoadMore
{
    display:inline-block;
    background-color:#FAFAFA;
    box-shadow:0px 0px 5px 0px silver;
    border-radius:3px;
    padding-left:15px; padding-right:15px;
    padding-top:3px; padding-bottom:4px;
    font-size:13px;
    color:#3F3F3F;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
    opacity:0.7;
}
.MyLoadMore_btnLoadMore:hover
{
    opacity:1;
}
.MyLoadMore_btnLoadMore:active
{
    filter:brightness(92%);
}
.MyLoadMore_Row,    .MyLoadMore_Header,     .MyLoadMore_Footer
{
    /*border-radius:3px;*/
    text-align:center;
    width:100%;
}
.MyLoadMore_Header,     .MyLoadMore_Footer
{
    cursor:default;
}
.MyLoadMore_Row
{
    background-color:white; /*#FAFAFA*/
    margin-top:0px;
    cursor:pointer;
    margin-top:3px;
}
.MyLoadMore_Header
{
    background-color:#FAFAFA;
    margin-top:0px;
}
.MyLoadMore_Footer
{
    background-color:#FAFAFA;
    margin-bottom:0px;
    font-weight:bold;
}
.MyLoadMore_ActiveRow
{
    background-color:#F7F9FF;
    border:solid 1px #193BFF;
    transition:background-color 200ms;
}

.MyLoadMore_Row,     .MyLoadMore_Row > tbody> tr > td,     .MyLoadMore_ActiveRow,     .MyLoadMore_ActiveRow > tbody> tr > td
{
}
.MyLoadMore_Row > tbody> tr > td,     .MyLoadMore_ActiveRow > tbody> tr > td
{
    border:0px solid #DDDDDD;
    border-bottom-width:1px;
    border-left-width:1px;
}
.MyLoadMore_Header,     .MyLoadMore_Header > tbody> tr > td,     .MyLoadMore_Footer,     .MyLoadMore_Footer > tbody> tr > td
{
    border:0px solid #E5E5E5;
}
.MyLoadMore_Header > tbody> tr > td,     .MyLoadMore_Footer > tbody> tr > td
{
    border-top-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
}
.MyLoadMore_Header
{
    border-right-width:1px;
}
.MyLoadMore_Body
{
    border:0px solid #E5E5E5;
    border-right-width:1px;
}

@media (min-width:768px)
{
    .MyLoadMore_Row,    .MyLoadMore_Header,     .MyLoadMore_Footer
    {
        margin-left:0px; margin-right:0px;
        width:calc(100% - 0px);
    }
}
@media (max-width:767px)
{
    .MyLoadMore_Row,    .MyLoadMore_Header,     .MyLoadMore_Footer
    {
        margin-left:0px; margin-right:0px;
        width:calc(100% - 0px);
    }
}
.MyLoadMore_Row [EditRow] [EditImg]
{
    /*cursor:pointer;*/ /*مش محتاجينها لأن عملنا الرو كله بوينتر*/
    opacity:0.7;
}
.MyLoadMore_Row [EditRow]:hover [EditImg]
{
    opacity:1;
    /*transition:opacity 150ms;*/ /*عشان واليوزر بيحرك الماوس عادي (رايح في حتة) فوق أزرار إيديت الروز ما تظهرش ومضة من الزر مالهاش لازمة*/
}

.MyLoadMore_Description
{
}
.MyLoadMore_NumberInDescription
{
    font-family:ProximaNova;
    font-size:16.5px;
    color:#FF8B00;
    text-shadow:0px 0px 1px var(--MyBasicWebColor2);
    letter-spacing:0.5px;
}


.MyInptSrch
{
    background-color:#FAFAFA;
    color:#3F3F3F;
}
.MyInptSrchHasValue
{
    background-color:white;
}


/*ماي موبايل إنبت*/

.MyMobileInputCntr{display:inline-block; width:200px; height:34px; position:relative; direction:ltr; text-align:left;}
.MyMobileInputTxt{width:100%; height:100%; box-sizing:border-box; letter-spacing:0.5px; padding-left:77px;/*!!!!(لازم يبقى مش أقل من ويدث أيقونة السيرش لأنها أبسوليت وبتكون فوق التيكست وده بيسبب على الموبايل عند ضغط التيكست بيعرض كونتيكستمنيو غبي بتاع الصورة(اللي المفروض بيظهر عند الضغط المطول عليها)(غيرناها لديف) المفروض يظهر بتاع الإنبت (كونتيكستمنيو الإنبت اللي المفروض بيكون كات وكوبي وبيست*/ }
.MyMobileInputTxt::-webkit-input-placeholder{font-size:14px; /*color:#8C8C8C;*/}

.MyMobileInputOpnMnu{display:inline-block; position:absolute; left:2px; top:2px; width:70px; height:calc(100% - 4px); padding-top:5px; box-sizing:border-box; cursor:pointer; background-color:#F7F7F7; border-radius:3px 0px 0px 3px; white-space:nowrap; text-align:center; letter-spacing:0.6px; user-select:none;}
:not(.MyMobileInputOpnMnuDsdbl).MyMobileInputOpnMnu:hover{background-color:#EDEDED;}

.MyMobileInputOpnMnuDsdbl{background-color:#FAFAFA; cursor:default;}
.MyMobileInputOpnMnuDsdbl .MyMobileInputbbtnflg{filter:grayscale(2%);/*جعل الصورة جراي*/ opacity:0.8;}
.MyMobileInputOpnMnuDsdbl .MyMobileInputbbtntxt{color:gray;}

.MyMobileInputMnu{display:none; position:fixed; /*top, left بنظبطهم في الجافاسكريبت*/ z-index:150; width:400px; height:320px; background-color:white; border:1px solid #D1D1D1; box-shadow:0px 3px 3px 0px rgba(0,0,0,0.12), 0px 6px 6px 0px rgba(0,0,0,0.25); border-radius:3px; /*padding:2px;*/ box-sizing:border-box; overflow-y:auto; overflow-x:hidden; font-size:15px;}
@media (max-width:768px){.MyMobileInputMnu{width:340px;}}

.MyMobileInputMnItmCntr{padding:7px 8px; cursor:pointer;}
.MyMobileInputMnItmCntr:hover{background-color:#EFEFEF;}
.MyMobileInputMnItmCntr_Activ{background-color:#E5E5E5;}

.MyMobileInputMnItmFlg{display:inline-block; width:20px; height:15px; margin-right:7px; margin-top:-10px; margin-bottom:-3px; background-repeat:no-repeat; background-image:url(Images/Flags.png); background-position-y:0px;}
.MyMobileInputMnItmNam{margin-right:8px;}
.MyMobileInputMnItmKey{color:gray;}

/*الفيكسيد بانيل*/
[MyFxdPnl]
{
    display:none;
    position:fixed;
    left:50%;
    z-index:200;
    box-sizing:border-box;
    background-color:white;
    border:solid 1px #D1D1D1;
    border-radius:3px;
    padding-top:42px;
    padding-left:1px; padding-right:1px; /*مسافة فاصلة لسكرول بار البادي*/
}
@media (min-width:768px)
{
    [MyFxdPnl]
    {
        top:50%;
        transform:translate(-50%,-50%);
        width:80%;
        height:88%;
    }
}
@media (max-width:767px)
{
    [MyFxdPnl]
    {
        transform:translateX(-50%);
        width:100%;

        /*حنعملهم في الجافاسكريبت لأن على الموبايل عند فتح كيبورد البوتوم والارتفاع بيعتبروا كأن الكيبورد مش مفتوح والتيكستبوكس اللي المفروض حكتب فيه بالكيبورد بيكون تحت الكيبورد في السكرول ومش باين*/
        /*bottom:?*/
        /*height:?*/
    }
}
.MyFxdPnl_Dsrp
{
    position:absolute;
    top:2px;
    left:2px;
    width:calc(100% - 29px - 9px);
    height:32px;
    box-sizing:border-box;
    background-color:#FAFAFA;
    border:1px solid #E5E5E5;
    border-radius:2px 0px 0px 0px;
    box-shadow:0px 0px 3px 0px #F2F2F2;
    font-size:15px;
	font-weight:bold;
    color:var(--MyBasicWebColor1); text-shadow:0px 0px 1px gray;
	white-space:nowrap;
    text-align:center;
    padding-top:4px;
}
.MyFxdPnl_Bdy
{
    overflow:auto;
    width:100%;
    /*height:100%; حنعملها في الجافاسكريبت*/
    padding:5px;
    padding-top:12px;
    padding-bottom:12px;
    box-sizing:border-box;
    text-align:center;
}
.MyFxdPnl_Ftr
{
    position:absolute;
    bottom:2px;
    left:2px;
    width:calc(100% - 4px);
    box-sizing:border-box;
    background-color:#FAFAFA;
    border:1px solid #E5E5E5;
    border-radius:0px 0px 2px 2px;
    padding:10px;
    padding-left:15px; padding-right:15px;
    text-align:right;
}
.MyFxdPnl_Close
{
    position:absolute;
    top:2px;
    right:2px;
    width:32px;
    height:32px;
    box-sizing:border-box;
    background-image:url(Images/MyFxdPnl_Close.png);
    background-color:#FAFAFA;
    border:1px solid #E5E5E5;
    border-radius:0px 2px 0px 0px;
    box-shadow:0px 0px 3px 0px #F2F2F2;
    cursor:pointer;
}
.MyFxdPnl_Close:hover
{
    background-color:#EAEAEA;
}
.MyFxdPnl_Close:active
{
    filter:brightness(92%);
}


.MyRadiosListCntr{position:relative; display:inline-block; border:solid 1px silver; border-radius:3px; width:200px; height:30px; box-sizing:border-box;}
.MyRadiosListItm{display:inline-block; width:50%; padding-top:4px; box-sizing:border-box; cursor:pointer;}
.MyRadiosListItm:hover{background-color:#F2F2F2;}
.MyRadiosListRdo{display:inline-block; width:20px; height:20px; box-sizing:border-box; border-radius:50%; box-shadow:0px 0px 0px 1px #CCCCCC; border:solid 4px #FAFAFA; background-color:#FAFAFA;}
.MyRadiosListTxt{display:inline-block; vertical-align:top;}
.MyRadiosListActvItm{border-color:white;}


/*التايمبيكر*/
.MyTimePickerBox
{
    display:inline-block;
    width:80px;
    height:30px;
    border:solid 1px silver;
    border-radius:3px;
    background-color:white;
    cursor:pointer;
    text-align:center;
    padding-top:4px;
    box-sizing:border-box;
    direction:ltr;
    margin-left:2px;

    transition:border-color 1500ms;
    transition-delay:300ms;
}
.MyTimePickerBoxActv
{
    border-color:black;
}
.MyTimePickerMenu
{
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:220;
    width:300px;
    height:300px;
    background-color:white;
    border:1px solid silver;
    border-radius:3px;
    padding-right:2px;
    box-sizing:border-box;
    text-align:center;
    font-size:20px;
    direction:rtl;
}
.MyTimePickerCtg
{
    display:inline-block;
    width:32.4%;
    height:100%;
    overflow-y:auto;
}
.MyTimePickerItm
{
    width:100%;
    height:50px; margin-top:5px; /*في الجافاسكريبت بنعمل على أساس مجموعهم سكرول*/
    background-color:#FAFAFA;
    padding-top:14px;
    box-sizing:border-box;
    cursor:pointer;
}
.MyTimePickerItm:not(.MyTimePickerActvItm):hover
{
    background-color:#EFEFEF;
}
.MyTimePickerActvItm
{
    background-color:var(--MyBasicWebColor1);
    color:white;
}
.MyTimePickerClear
{
    margin-top:83px;
    width:100%;
    padding-top:12px;
    padding-bottom:16px;
    border:solid 1px silver;
    box-sizing:border-box;
    cursor:pointer;
    font-size:16px;
}
.MyTimePickerDone
{
    margin-top:4px;
    width:100%;
    padding-top:12px;
    padding-bottom:16px;
    border:solid 1px silver;
    box-sizing:border-box;
    background-color:#EFEFEF;
    cursor:pointer;
}



/*الداتبيكر*/
@media (min-width:550px)
{
    .MyDatePickerMenu{width:536px;}
    .MyDatePickerCtgYears{width:95px;}
    .MyDatePickerCtgMonths{width:110px;}
    .MyDatePickerItmDay{width:43px; height:37px; margin:1px;}

    .MyDatePickerCtgYears,     .MyDatePickerCtgMonths,     .MyDatePickerCtgDays{height:340px;}

    .MyDatePickerBtnsLine{width:260px;}

    .MyDatePickerItmDay{padding-top:7px;}
    .MyDatePickerItmYear,     .MyDatePickerItmMonth{font-size:15px;}
}
@media (max-width:549px)
{
    .MyDatePickerMenu{width:360px;}
    .MyDatePickerCtgYears{width:53px;}
    .MyDatePickerCtgMonths{width:68px;}
    .MyDatePickerItmDay{width:31px; height:32px; margin:0.5px;}

    .MyDatePickerCtgYears,     .MyDatePickerCtgMonths,     .MyDatePickerCtgDays{height:300px;}

    .MyDatePickerBtnsLine{width:165px;}

    .MyDatePickerItmDay{padding-top:6px;}
    .MyDatePickerItmYear,     .MyDatePickerItmMonth{font-size:13px;}
}
.MyDatePickerBox
{
    width:200px;
    height:30px;
    border:solid 1px silver;
    border-radius:3px;
    cursor:pointer;
    padding-left:4px; padding-right:4px;
    box-sizing:border-box;
    font-size:14px;
    direction:ltr;
    outline:none;

    transition:border-color 1500ms;
    transition-delay:300ms;
}
.MyDatePickerBoxActv
{
    border-color:black;
}
.MyDatePickerMenu
{
    display:none;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:220;
    background-color:white;
    border:1px solid silver;
    border-radius:3px;
    padding-right:2px;
    box-sizing:border-box;
    text-align:center;
    font-size:20px;
    direction:rtl;
}
.MyDatePickerCtgYears,     .MyDatePickerCtgMonths
{
    overflow-y:auto;
    overflow-x:hidden;
}
.MyDatePickerItmYear,     .MyDatePickerItmMonth,     .MyDatePickerItmDay
{
    background-color:#FAFAFA;
    box-sizing:border-box;
    cursor:pointer;
    white-space:nowrap;
}
.MyDatePickerItmYear:not(.MyDatePickerActvItm):hover,     .MyDatePickerItmMonth:not(.MyDatePickerActvItm):hover,     .MyDatePickerItmDay:not(.MyDatePickerActvItm):hover
{
    background-color:#EFEFEF;
}
.MyDatePickerItmYear,     .MyDatePickerItmMonth
{
    width:100%;
    height:50px; margin-top:5px; /*في الجافاسكريبت بنعمل على أساس مجموعهم سكرول*/
    padding-top:14px;
}
.MyDatePickerItmDay
{
    font-size:14px;
    border:solid 1px silver;
}
.MyDatePickerActvToday /*إما نعمل إمبورتنت MyDatePickerActvItm لازم قبل*/
{
	background-color:#FCE958;
}
.MyDatePickerActvItm
{
    background-color:var(--MyBasicWebColor1);
    color:white;
}
.MyDatePickerCtgBtns
{
    position:absolute;
    bottom:10px;
    right:10px;
    text-align:right;
}
.MyDatePickerDone
{
    display:inline-block;
    width:70px;
    padding-top:8px;
    padding-bottom:8px;
    border:solid 1px silver;
    box-sizing:border-box;
    background-color:#EFEFEF;
    cursor:pointer;
    font-size:16px;
    margin-left:8px;
    text-align:center;
}
.MyDatePickerClear
{
    display:inline-block;
    width:70px;
    padding-top:8px;
    padding-bottom:8px;
    border:solid 1px silver;
    box-sizing:border-box;
    cursor:pointer;
    font-size:15px;
    text-align:center;
}
.MyDatePickerWeekName
{
    /*border:solid 1px silver;*/
	background-color:#EFEFEF;
    padding-bottom:3px;
    font-size:14px;
    /*font-weight:bold;*/
}
.MyDatePickerBtnsLine{margin:10px auto; height:1px; background-color:#8C8C8C;}



[DvIsMyMsgOrCnfrmBox]
{
    z-index:900;
}
[DvIsMyMsgOrCnfrmBox] .MyFxdPnl_Bdy
{
}
[DvIsMyMsgOrCnfrmBox] .MyFxdPnl_Dsrp
{
    text-align:left;
    padding-left:15px;
}
@media (min-width:768px)
{
    [DvIsMyMsgOrCnfrmBox]
    {
        width:500px;
    }
}
@media (max-width:767px)
{
    [DvIsMyMsgOrCnfrmBox]
    {
        /*width:90%;*/
    }
}


/*كنترولز الجنرال ماستربيدج*/
.dvUnsupportedCookies
{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:200;
    background-color:#FFEBE8;
    border:1px solid #dd3c10;
    border-radius:3px;
    padding:15px; padding-top:25px; padding-bottom:25px;
    box-sizing:border-box;
}
@media (min-width:768px)
{
    .dvUnsupportedCookies{ width:75%;}
}
@media (max-width:767px)
{
    .dvUnsupportedCookies{width:calc(100% - 20px);}
}


#divLoading{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1000; border-radius:7px; background-color:rgba(0,0,0,0.6); display:none;}
#divLoading img{width:52px;}

#divEndSlowRequest{display:none; position:fixed; left:50%; top:60%; transform:translate(-50%,-50%); z-index:1000; color:red; text-decoration:underline; cursor:pointer; font-size:15px; line-height:16px; background-color:white; border:solid 1px silver; border-radius:5px; box-shadow:0px 0px 10px 0px gray; padding:4px; padding-bottom:9px;}
#divEndSlowRequest:hover{background-color:#EBEBEB;}


/*النوتيفيكيشن*/
.MyNotifBox_Cntnr
{
    position:relative;
    /*background-color:white;*/ /*حنعملها في الجافاسكريبت*/
    border:solid 1px silver; /*اللون ده حيتغير على حسب نوع النوتيفيكيشن*/
    border-left-width:4px;
    border-radius:4px;
    /*box-shadow:0px 0px 5px 2px silver;*/
    width:100%; /*جعلنا تظبيط ويدثها في الديف الحاوية للنوتيفيكيشنز مش هنا عشان الديف الحاوية تبقى على قد النوتيفيكيشنز لأنها لو أكبر وكان فيه زر ما في نفس البوزيشن الأفقي للديف الحاوية حتبقى فوقه ومش حيشتغل كليكه*/
    /*margin-top:15px;*/ /*عشان لو فيه نوتيفيكيشن أخرى معروضة*/ /*حنعملها في الجافاسكريبت*/
    padding-top:10px;
    padding-bottom:12px;
}
@media (max-width:767px)
{
    .MyNotifBox_Cntnr
    {
        padding-top:4px;
        padding-bottom:6px;
    }
}
.MyNotifBox_Close
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:10px;
    width:20px;
    height:20px;
    padding:4px; /*عشان نكبر مساحة ضغط الزر شوية*/
    cursor:pointer;
    opacity:0.5;
}
.MyNotifBox_Close:hover
{
    opacity:1;
}
.MyNotifBox_Icon
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:10px;
    width:28px;
    height:28px;
}
.MyNotifBox_Title,     .MyNotifBox_Message
{
    margin-right:48px; /*=   MyNotifBox_Close.width  +  MyNotifBox_Close.allhorizontalpadding  +  (MyNotifBox_Close.right * 2)   */
    margin-left:/*48px*/40px; /*=   MyNotifBox_Icon.width  +  (MyNotifBox_Icon.left * 2)   */
}
.MyNotifBox_Title
{
    font-size:15px;
    font-weight:bold;
    color:#F7F7F7;
}
.MyNotifBox_Message
{
    margin-top:6px;
    /*text-align:justify;*/ /*(لو عايزينها نعملها في البروجيكت (نبتعتها مع نص النوتيفيكيشن*/
    color:white;
}
.MyNotifBox_ClsBar
{
    position:absolute;
    bottom:0px;
    left:-3px; /*المفروض 0 ولكن عشان ويدث بوردر الكونتر*/
    width:100%;
    height:2px;
    background-color:white;
}

#dvMyNotifBoxs
{
    position:fixed;
    left:10px;
    z-index:900;
}
@media (min-width:768px)
{
    #dvMyNotifBoxs
    {
        width:330px;
        bottom:20px; /*عشان يظهر ويب بار البروجيكت*/
    }
}
@media (max-width:767px)
{
    #dvMyNotifBoxs
    {
        width:270px;
        bottom:10px;
    }
}

/*الديسكريبشن*/
.MyDscrpMsg
{
    display:inline-block;
    cursor:pointer;
    vertical-align:middle;
    opacity:0.7;
}
.MyDscrpMsg:hover
{
    opacity:1;
}
.MyDscrpMsg img
{
    width:13px;
}

.HiddenElement
{
    position:fixed;
    top:-1000px;
    left:-1000px;
    width:1px;
    height:1px;
    opacity:0;
}


/*لأن دول بيجبروا اليوزر الإتجاه المحدد حتى لو غيرها بضغط كنترول شيفت dir="rtl" حنستبدلهم في الجافاسكريبت بـ
[ArabicDesign]
{
    direction:rtl;
    text-align:right;
}
[EnglishDesign]
{
    direction:ltr;
    text-align:left;
}*/