/*
 * mobile-game.css
 * Clean mobile UI layer for Arabic TravianZ / TatarWar.
 * Load after lang.css, compact.css, and travian.css when enabled.
 * Safe base version: no fixed resources, no forced global page breakage.
 */

@media (max-width: 1100px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        direction: rtl !important;
        text-align: right !important;
        background: #fff !important;
        overflow-x: hidden !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    body {
        padding-bottom: 90px !important;
    }

    .wrapper,
    div#dynamic_header,
    div#header,
    div#mid,
    div#content,
    div#build,
    div#footer {
        right: auto !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * 1) Banner / dynamic header
     */
    div#dynamic_header {
        position: relative !important;
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-position: center top !important;
        background-size: auto 78px !important;
    }

    /*
     * 2) Header links / icons
     */
    div#header {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 1px 5px rgba(0,0,0,.14) !important;
        z-index: 50 !important;
    }

    div#mtop {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 70px !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 7px !important;
        box-sizing: border-box !important;
        float: none !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    div#mtop a,
    div#mtop div#n5,
    div#mtop a#n1,
    div#mtop a#n2,
    div#mtop a#n3,
    div#mtop a#n4,
    div#mtop a#x1,
    div#mtop a#x2,
    div#mtop a#x3,
    div#mtop a#x4,
    div#mtop a#x5 {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.9) !important;
        box-shadow: 0 1px 5px rgba(0,0,0,.20) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    div#mtop img {
        max-width: none !important;
    }

    a#plus {
        position: absolute !important;
        left: 8px !important;
        top: 8px !important;
        margin: 0 !important;
        z-index: 60 !important;
    }

    /*
     * 3) Old side navigation
     * Keep it visible as horizontal menu for now.
     * Later we can convert it to hamburger/menu if needed.
     */
    div#side_navi {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f7f7f7 !important;
        border-bottom: 1px solid #ddd !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    div#side_navi a#logo {
        display: none !important;
    }

    div#side_navi p {
        margin: 0 !important;
        padding: 6px 4px !important;
        line-height: normal !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    div#side_navi p a {
        display: inline-block !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        color: #7b1f1f !important;
        text-decoration: none !important;
        font-size: 14px !important;
        border-radius: 7px !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        white-space: nowrap !important;
    }

    /*
     * 4) Main layout
     */
    div#mid {
        display: block !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    div#content,
    div#build,
    div.build,
    div.statistics,
    div.reports,
    div.messages,
    div.player,
    div.alliance,
    div.forum,
    div.plus,
    div.warsim,
    div.a2b,
    div.village3,
    div.cropfinder,
    div.support,
    div.universal,
    div.login,
    div.logout,
    div.signup,
    div.activate {
        position: relative !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 16px 8px 28px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        background: #fff !important;
    }

    div#content h1,
    div#build h1 {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 18px 8px 16px !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1.35 !important;
        text-align: right !important;
        font-weight: bold !important;
        color: #111 !important;
    }

    div#content h2,
    div#build h2,
    div#build h4 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin: 18px 8px 10px !important;
        text-align: right !important;
    }

    p {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    /*
     * 5) Resources bar
     * Relative, not fixed. Safer for current structure because res.tpl loads near the footer.
     */
    div#res {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        z-index: 40 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        border-top: 1px solid #eee !important;
        border-bottom: 1px solid #eee !important;
    }

    div#resWrap {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important;
        padding: 0 4px !important;
        width: max-content !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    div#res table {
        margin: 0 auto !important;
        width: auto !important;
    }

    div#res table td {
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    div#res table td.res {
        min-width: 82px !important;
        width: auto !important;
        max-width: 94px !important;
        padding: 0 3px !important;
        overflow: hidden !important;
    }

    div#res table td.res b,
    div#res .barWrapper b {
        display: inline-block !important;
        min-width: 72px !important;
        max-width: 84px !important;
        padding: 4px 6px !important;
        border-radius: 5px !important;
        background: #178a24 !important;
        color: #fff !important;
        text-align: center !important;
        direction: ltr !important;
        unicode-bidi: plaintext !important;
        font-size: 13px !important;
        font-weight: bold !important;
        line-height: 1.4 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    div#res .barWrapper {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    div#res .bar {
        display: none !important;
    }

    /*
     * Side info: keep below content, not side column.
     */
    div#side_info {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    div#side_info div.news {
        width: auto !important;
        margin: 10px 8px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        border: 1px dashed #ddd !important;
        background: #fff !important;
    }

    /*
     * Forms
     */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    input.text,
    input[type="text"],
    input[type="password"],
    select,
    textarea {
        height: auto !important;
        min-height: 36px !important;
        padding: 7px 9px !important;
        border: 1px solid #9bc56a !important;
        border-radius: 5px !important;
        background: #fff !important;
    }

    input[type="submit"],
    button,
    .button,
    a.build,
    a.arrow,
    p.btn input {
        min-height: 36px !important;
        padding: 7px 14px !important;
        border-radius: 7px !important;
        font-size: 15px !important;
    }

    /*
     * Tables
     */
    div#content table,
    div#build table {
        max-width: 100% !important;
        border-collapse: collapse !important;
    }

    div#content:not(.village1):not(.village2):not(.map) table,
    div#build table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    div#content:not(.village1):not(.village2):not(.map) table tbody,
    div#content:not(.village1):not(.village2):not(.map) table thead,
    div#content:not(.village1):not(.village2):not(.map) table tfoot,
    div#build table tbody,
    div#build table thead,
    div#build table tfoot {
        width: max-content !important;
    }

    td,
    th {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /*
     * Build pages
     */
    div#build a.build_logo img {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        float: right !important;
        margin: 0 0 10px 12px !important;
        max-width: none !important;
    }

    div#build p.build_desc {
        padding: 0 !important;
        margin: 10px 8px !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    div#build div#textmenu,
    div#textmenu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: flex-start !important;
        margin: 12px 0 !important;
        white-space: normal !important;
    }

    div#textmenu a {
        display: inline-block !important;
        padding: 4px 7px !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        border-radius: 6px !important;
        text-decoration: none !important;
    }

    /*
     * Preserve maps and sprite images
     */
    div.village1 img,
    div.village2 img,
    div.map img,
    div#map img,
    div#village_map img {
        max-width: none !important;
    }

    /*
     * dorf1
     */
    div#content.village1,
    div.village1 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0 24px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        text-align: center !important;
    }

    div.village1 div#village_map {
        float: none !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        width: 300px !important;
        height: 264px !important;
        margin: 0 auto 12px !important;
        transform: none !important;
    }

    div.village1 div#map_details {
        float: none !important;
        clear: both !important;
        width: calc(100% - 16px) !important;
        max-width: 360px !important;
        margin: 10px auto !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        text-align: right !important;
    }

    /*
     * dorf2
     */
    div#content.village2,
    div.village2 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0 24px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        text-align: center !important;
    }

    div.village2 div#village_map {
        width: 540px !important;
        height: 448px !important;
        position: relative !important;
        margin: 0 auto !important;
        overflow: visible !important;
        transform: none !important;
    }

    div.village2 img.map1 {
        width: 540px !important;
        height: 448px !important;
    }

    div.village2 img.map2 {
        width: 422px !important;
        height: 339px !important;
        right: 63px !important;
        top: 40px !important;
    }

    /*
     * Map page
     */
    div#content.map,
    div.map {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 0 24px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        text-align: center !important;
    }

    div.map div#map {
        float: none !important;
        margin: 0 auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /*
     * Messages / reports
     */
    div.messages div.msg_head,
    div.messages div.msg_content,
    div.messages div.msg_foot,
    div.messages div#read_content div#message,
    div.messages #write_content textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
     * Footer
     */
    div#footer,
    div#footer div#mfoot {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 8px 100px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /*
     * Optional bottom nav:
     * Keep disabled in clean base.
     */
}

/*
 * Small phones
 */
@media (max-width: 420px) {
    div#content h1,
    div#build h1 {
        font-size: 25px !important;
    }

    div#res table td.res b,
    div#res .barWrapper b {
        min-width: 66px !important;
        max-width: 76px !important;
        font-size: 12px !important;
        padding: 4px 5px !important;
    }

    div#mtop a,
    div#mtop div#n5 {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }
}

/* START mobile reference UBar */
#mobile_ref_topbar {
    display: none;
}

@media (max-width:1100px) {

    /*
     * مثل المرجع:
     * شريط علوي مستقل قبل صورة الهيدر.
     * لا يعتمد على منيو الكمبيوتر #side_navi.
     */

    #mobile_ref_topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;

        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;

        background: #fff !important;
        border: 0 !important;
        border-bottom: 1px solid #d9d9d9 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;

        direction: rtl !important;
        text-align: center !important;
        overflow: hidden !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }

    #mobile_ref_topbar a {
        display: block !important;
        flex: 1 1 auto !important;

        height: 42px !important;
        line-height: 42px !important;

        margin: 0 !important;
        padding: 0 4px !important;

        color: #222 !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        background: transparent !important;
        border: 0 !important;
        border-left: 1px solid #eee !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #mobile_ref_topbar a:first-child {
        border-right: 0 !important;
    }

    #mobile_ref_topbar a:last-child {
        border-left: 0 !important;
    }

    #mobile_ref_topbar a.mobile-ref-power {
        flex: 0 0 48px !important;
        max-width: 48px !important;
        font-size: 22px !important;
        line-height: 40px !important;
    }

    /*
     * منيو الكمبيوتر يبقى للكمبيوتر فقط.
     * في الجوال نخفيه حتى لا يظهر كأزرار مربعة أو قائمة يمين.
     */
    #side_navi {
        display: none !important;
    }

    /*
     * منع أي padding قديم كان مخصص لتحويل side_navi لمنيو علوي.
     */
    .wrapper {
        padding-top: 0 !important;
    }
}
/* END mobile reference UBar */

/* START mobile n5 split background fix */
@media (max-width:1100px){

  /*
   * n1-n4 = صور مفردة على img.
   * n5 = صورة واحدة على div#n5، والروابط داخلها مناطق ضغط فقط.
   * يوجد div#n5 أول للرسائل/التقارير، و div#n5 ثاني class=s1 للثكنة/الإسطبل.
   */

  div#mtop{
    display:flex !important;
    direction:rtl !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:8px !important;

    width:100% !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 auto !important;
    padding:0 !important;
    overflow:hidden !important;

    position:relative !important;
    right:auto !important;
    left:auto !important;
    top:auto !important;

    background:#fff !important;
    border:0 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
    z-index:20 !important;
    font-size:0 !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  /* n1-n4 فقط */
  div#mtop > a#n1,
  div#mtop > a#n2,
  div#mtop > a#n3,
  div#mtop > a#n4{
    display:block !important;
    float:none !important;
    position:relative !important;

    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;

    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    flex:0 0 70px !important;
    box-sizing:border-box !important;
  }

  div#mtop > a#n1 img,
  div#mtop > a#n2 img,
  div#mtop > a#n3 img,
  div#mtop > a#n4 img{
    display:block !important;

    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;

    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;

    background-repeat:no-repeat !important;
    background-position:0 0 !important;
    background-size:70px auto !important;

    opacity:1 !important;
    transform:none !important;
  }

  body.v35 a#n1 img{ background-image:url(../../img/vip/n1-rtl.png) !important; }
  body.v35 a#n2 img{ background-image:url(../../img/vip/n2-rtl.png) !important; }
  body.v35 a#n3 img{ background-image:url(../../img/vip/n3-rtl.png) !important; }
  body.v35 a#n4 img{ background-image:url(../../img/vip/n4-rtl.png) !important; }

  /*
   * كل div#n5 عبارة عن صورة كاملة واحدة 70x72.
   * الروابط داخله نصفين فقط.
   */
  div#mtop > div#n5{
    display:block !important;
    float:none !important;
    position:relative !important;

    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;

    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;

    background-repeat:no-repeat !important;
    background-position:0 0 !important;
    background-size:70px auto !important;

    border:0 !important;
    box-shadow:none !important;
    flex:0 0 70px !important;
    box-sizing:border-box !important;
  }

  /* الرسائل / التقارير حسب حالة الرسائل */
  body.v35 div#mtop > div#n5.i1{ background-image:url(../../img/vip/m1-rtl.png) !important; }
  body.v35 div#mtop > div#n5.i2{ background-image:url(../../img/vip/m2-rtl.png) !important; }
  body.v35 div#mtop > div#n5.i3{ background-image:url(../../img/vip/m3-rtl.png) !important; }
  body.v35 div#mtop > div#n5.i4{ background-image:url(../../img/vip/m4-rtl.png) !important; }

  /* الثكنة / الإسطبل */
  body.v35 div#mtop > div#n5.s1{
    background-image:url(../../img/vip/m33-rtl.png) !important;
  }

  /*
   * روابط n5 نصفية:
   * الرسائل يمين / التقارير يسار.
   * الثكنة يمين / الإسطبل يسار.
   */
  div#mtop > div#n5 > a{
    display:block !important;
    float:none !important;
    position:absolute !important;
    top:0 !important;

    width:35px !important;
    min-width:35px !important;
    max-width:35px !important;

    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:2 !important;
  }

  /* أول n5: الرابط الأول رسائل يمين، الثاني تقارير يسار */
  div#mtop > div#n5:not(.s1) > a:nth-child(1){
    right:0 !important;
    left:auto !important;
  }

  div#mtop > div#n5:not(.s1) > a:nth-child(2){
    left:0 !important;
    right:auto !important;
  }

  /* s1: الثكنة يمين، الإسطبل يسار */
  div#mtop > div#n5.s1 > a.messages{
    right:0 !important;
    left:auto !important;
  }

  div#mtop > div#n5.s1 > a.reports{
    left:0 !important;
    right:auto !important;
  }

  /*
   * مهم جدًا:
   * صور img داخل n5 ليست هي الصورة.
   * هي فقط x.gif لمساحة الضغط.
   */
  div#mtop > div#n5 > a > img,
  div#mtop > div#n5 img.l,
  div#mtop > div#n5 img.r{
    display:block !important;

    width:35px !important;
    min-width:35px !important;
    max-width:35px !important;

    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;

    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;

    background:none !important;
    background-image:none !important;
    background-position:0 0 !important;
    background-size:auto !important;
    background-repeat:no-repeat !important;

    opacity:0 !important;
    transform:none !important;
  }
}

@media (max-width:430px){
  div#mtop{
    gap:5px !important;
  }
}
/* END mobile n5 split background fix */


/* START mobile mtop up 3px */
@media (max-width:1100px){
  div#mtop{
    top:-3px !important;
  }
}
/* END mobile mtop up 3px */

/* START mobile mtop icons up without white frame */
@media (max-width:1100px){

  /*
   * لا نرفع div#mtop نفسه لأن خلفيته البيضاء تطلع فوق الأيقونات.
   * نرجعه طبيعي، ونرفع العناصر داخله فقط.
   */
  div#mtop{
    top:0 !important;
    overflow:visible !important;
  }

  div#mtop > a#n1,
  div#mtop > a#n2,
  div#mtop > a#n3,
  div#mtop > a#n4,
  div#mtop > div#n5{
    top:-3px !important;
  }
}
/* END mobile mtop icons up without white frame */

/* START mobile show side info and footer under content */
@media (max-width:1100px){

  /*
   * إظهار صناديق الأخبار/المهام/الروابط تحت المحتوى في الجوال.
   * بدون التأثير على الهيدر أو المنيو أو الموارد.
   */
  div#side_info{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:both !important;

    width:94vw !important;
    max-width:420px !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:28px auto 18px auto !important;
    padding:0 !important;

    overflow:visible !important;
    direction:rtl !important;
    text-align:right !important;
    box-sizing:border-box !important;
  }

  div#side_info > *{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /*
   * الفوتر تحت المحتوى والصناديق.
   */
  div.footer-stopper,
  div#footer,
  #footer,
  footer{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:20px auto 90px auto !important;
    padding:8px 0 !important;

    overflow:visible !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  /*
   * وقت السيرفر / زمن التحميل إن كان موجودًا بعد الفوتر.
   */
  div#stime,
  div#ltime,
  div#ltimeWrap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:4px auto 80px auto !important;
    padding:0 !important;

    text-align:center !important;
    box-sizing:border-box !important;
  }
}
/* END mobile show side info and footer under content */

/* START mobile hide visible scripts */
@media (max-width:1100px){
  div#side_info script,
  div#side_info style,
  div#side_info noscript,
  div#footer script,
  div#footer style,
  div#stime script,
  div#stime style,
  script,
  style{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }
}
/* END mobile hide visible scripts */

/* START mobile stime same footer */
@media (max-width:1100px){

  /*
   * وقت السيرفر يكون ملاصق/ضمن منطقة الفوتر بدل ما يظهر تحتها بعيد.
   */
  div#stime{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:-82px auto 80px auto !important;
    padding:0 0 8px 0 !important;

    text-align:center !important;
    font-size:11px !important;
    color:#777 !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }

  div#ltime,
  div#ltimeWrap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:none !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }
}
/* END mobile stime same footer */

/* START mobile stime attach to footer final */
@media (max-width:1100px){

  /*
   * الفوتر لا يترك فراغ كبير تحت نفسه.
   */
  div#footer,
  #footer,
  footer{
    margin-bottom:0 !important;
    padding-bottom:34px !important;
  }

  /*
   * وقت السيرفر موجود بعد الفوتر في HTML، لذلك نرفعه داخل مساحة الفوتر بصريًا.
   */
  div#stime{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:-118px auto 18px auto !important;
    padding:0 !important;

    top:0 !important;
    transform:none !important;

    text-align:center !important;
    font-size:11px !important;
    line-height:18px !important;
    color:#666 !important;
    background:transparent !important;
    z-index:5 !important;
    box-sizing:border-box !important;
  }

  div#ltime,
  div#ltimeWrap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:none !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    margin:0 auto !important;
    padding:0 !important;

    text-align:center !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }
}
/* END mobile stime attach to footer final */

/* START mobile footer stime right no gap final */
@media (max-width:1100px){

  /*
   * إزالة الفراغ الكبير أسفل الفوتر.
   */
  html,
  body{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  .wrapper,
  div#mid{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  div.footer-stopper{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /*
   * الفوتر نفسه.
   */
  div#footer,
  #footer,
  footer{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:20px auto 0 auto !important;
    padding:12px 10px 34px 10px !important;

    text-align:right !important;
    direction:rtl !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  /*
   * وقت السيرفر موجود بعد الفوتر في HTML.
   * نرفعه بصريًا داخل يمين الفوتر ونلغي فراغه السفلي.
   */
  div#stime{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    float:none !important;
    clear:both !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:-34px 0 0 0 !important;
    padding:0 12px 6px 0 !important;

    top:0 !important;
    right:0 !important;
    left:auto !important;
    transform:none !important;

    text-align:right !important;
    direction:rtl !important;
    font-size:11px !important;
    line-height:17px !important;
    color:#666 !important;
    background:transparent !important;
    box-sizing:border-box !important;
    z-index:10 !important;
  }

  div#ltime,
  div#ltimeWrap{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:static !important;
    float:none !important;
    clear:none !important;

    width:auto !important;
    max-width:100% !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    text-align:right !important;
    direction:rtl !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }

  div#ce{
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
}
/* END mobile footer stime right no gap final */

/* START statistics mobile layout v1 */
@media (max-width: 900px) {

  /*
   * صفحة الإحصائيات فقط
   */
  body:has(#content.statistics) {
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body:has(#content.statistics) .wrapper,
  body:has(#content.statistics) #mid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #content.statistics {
    float: none !important;
    clear: both !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
    background: #fff !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }

  body:has(#content.statistics) #content.statistics h1 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 34px !important;
    line-height: 1.4 !important;
    color: #111 !important;
  }

  /*
   * تبويبات الإحصائيات: اللاعبون / التحالفات / القرى / الأبطال / عام / معجزة العالم
   */
  body:has(#content.statistics) #textmenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px auto !important;
    padding: 0 0 6px 0 !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    direction: rtl !important;
    text-align: right !important;
    white-space: normal !important;

    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #textmenu a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;

    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: linear-gradient(#fff, #f7f7f7) !important;

    color: #75bd27 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #textmenu a.selected {
    border-color: #a6d66f !important;
    background: linear-gradient(#fff, #f0fae8) !important;
    color: #63ad1f !important;
  }

  /*
   * إزالة الفواصل النصية | الموجودة بين الروابط.
   */
  body:has(#content.statistics) #textmenu {
    font-size: 0 !important;
  }

  body:has(#content.statistics) #textmenu a {
    font-size: 13px !important;
  }

  /*
   * ترتيب أيقونات التصنيف الصغيرة أعلى الجداول إن وجدت.
   */
  body:has(#content.statistics) #content.statistics .subNavi,
  body:has(#content.statistics) #content.statistics .contentNavi,
  body:has(#content.statistics) #content.statistics .switch,
  body:has(#content.statistics) #content.statistics .tabs,
  body:has(#content.statistics) #content.statistics .navi,
  body:has(#content.statistics) #content.statistics p {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * الجداول الأساسية
   */
  body:has(#content.statistics) #content.statistics table {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto 16px auto !important;
    border-collapse: collapse !important;
    table-layout: auto !important;

    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #content.statistics table th,
  body:has(#content.statistics) #content.statistics table td {
    padding: 7px 5px !important;
    border: 1px solid #d6d6d6 !important;
    background: #fff !important;

    text-align: center !important;
    vertical-align: middle !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #content.statistics table th,
  body:has(#content.statistics) #content.statistics table thead td,
  body:has(#content.statistics) #content.statistics table tr:first-child td[colspan],
  body:has(#content.statistics) #content.statistics table tr:first-child th[colspan] {
    background: linear-gradient(#fafafa, #e9e9e9) !important;
    color: #111 !important;
    font-weight: bold !important;
  }

  body:has(#content.statistics) #content.statistics table a {
    color: #75bd27 !important;
    font-weight: bold !important;
    text-decoration: none !important;
  }

  /*
   * إصلاح جداول الإحصائيات المحددة حسب القوالب:
   * overview/general/villages/alliance/heroes/player/off/def
   */
  body:has(#content.statistics) #content.statistics table#player,
  body:has(#content.statistics) #content.statistics table#player_off,
  body:has(#content.statistics) #content.statistics table#player_def,
  body:has(#content.statistics) #content.statistics table#villages,
  body:has(#content.statistics) #content.statistics table#alliance,
  body:has(#content.statistics) #content.statistics table#heroes,
  body:has(#content.statistics) #content.statistics table#world_player,
  body:has(#content.statistics) #content.statistics table#world_tribes,
  body:has(#content.statistics) #content.statistics table.world,
  body:has(#content.statistics) #content.statistics table.row_table_data {
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * جداول أفضل 10: نخلي العمودين يبقون داخل الشاشة.
   */
  body:has(#content.statistics) #content.statistics table.top10,
  body:has(#content.statistics) #content.statistics table[class*="top"],
  body:has(#content.statistics) #content.statistics table[class*="Top"] {
    width: 100% !important;
  }

  /*
   * فورم البحث والتنقل أسفل الجدول.
   */
  body:has(#content.statistics) #content.statistics table#search_navi,
  body:has(#content.statistics) #content.statistics form table,
  body:has(#content.statistics) #content.statistics form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 18px auto !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #content.statistics input[type="text"],
  body:has(#content.statistics) #content.statistics input[type="number"],
  body:has(#content.statistics) #content.statistics input.text {
    width: 120px !important;
    max-width: 44vw !important;
    height: 34px !important;
    padding: 5px 8px !important;
    border: 1px solid #a6c96f !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #content.statistics input[type="submit"],
  body:has(#content.statistics) #content.statistics button,
  body:has(#content.statistics) #content.statistics .button {
    min-width: 68px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid #9ab86a !important;
    border-radius: 18px !important;
    background: linear-gradient(#fff, #ddd) !important;
    color: #222 !important;
    font-size: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /*
   * سبب المستطيلات الرمادية: side_info داخل صفحة الإحصائيات.
   * نخليه تحت المحتوى، لا يطفو بجانب الجداول.
   */
  body:has(#content.statistics) #side_info {
    position: static !important;
    float: none !important;
    clear: both !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(#content.statistics) #side_info table,
  body:has(#content.statistics) #side_info div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /*
   * نخفي عناصر جانبية مزخرفة إذا كانت تسبب فراغات/صور مقصوصة.
   */
  body:has(#content.statistics) #side_info .news,
  body:has(#content.statistics) #side_info .quest,
  body:has(#content.statistics) #side_info #quest,
  body:has(#content.statistics) #side_info #sidebarAfterContent {
    max-width: 100% !important;
  }

  body:has(#content.statistics) .footer-stopper,
  body:has(#content.statistics) .clear {
    clear: both !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.statistics) #content.statistics {
    width: calc(100% - 20px) !important;
    margin-top: 24px !important;
  }

  body:has(#content.statistics) #content.statistics h1 {
    font-size: 32px !important;
  }

  body:has(#content.statistics) #textmenu a {
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 7px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body:has(#content.statistics) #content.statistics table th,
  body:has(#content.statistics) #content.statistics table td {
    padding: 6px 4px !important;
    font-size: 14px !important;
  }

  body:has(#content.statistics) #side_info {
    width: calc(100% - 20px) !important;
  }
}
/* END statistics mobile layout v1 */


/* START spieler profile mobile layout v1 */
@media (max-width: 900px) {

  /*
   * صفحة العضوية / الملف الشخصي فقط:
   * spieler.php => #content.player
   */
  body:has(#content.player) {
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body:has(#content.player) .wrapper,
  body:has(#content.player) #mid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player {
    float: none !important;
    clear: both !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
    background: #fff !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }

  body:has(#content.player) #content.player h1 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 28px !important;
    line-height: 1.45 !important;
    color: #111 !important;
  }

  /*
   * تبويبات العضوية:
   * نظرة عامة / الملف الشخصي / التفضيلات / الحساب ...
   */
  body:has(#content.player) #content.player #textmenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px auto !important;
    padding: 0 0 6px 0 !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    direction: rtl !important;
    text-align: right !important;
    white-space: normal !important;

    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }

  body:has(#content.player) #content.player #textmenu a,
  body:has(#content.player) #content.player #textmenu span.none {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;

    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    background: linear-gradient(#fff, #f7f7f7) !important;

    color: #333 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player #textmenu a.selected {
    border-color: #a6d66f !important;
    background: linear-gradient(#fff, #f0fae8) !important;
    color: #63ad1f !important;
  }

  /*
   * الجداول العامة داخل العضوية.
   */
  body:has(#content.player) #content.player table {
    float: none !important;
    clear: both !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto 16px auto !important;
    border-collapse: collapse !important;
    table-layout: auto !important;

    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player table th,
  body:has(#content.player) #content.player table td {
    padding: 8px 6px !important;
    border: 1px solid #d6d6d6 !important;
    background: #fff !important;

    text-align: right !important;
    vertical-align: middle !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player table th,
  body:has(#content.player) #content.player table thead td,
  body:has(#content.player) #content.player table thead th,
  body:has(#content.player) #content.player table tr:first-child td[colspan],
  body:has(#content.player) #content.player table tr:first-child th[colspan] {
    background: linear-gradient(#fafafa, #e9e9e9) !important;
    color: #111 !important;
    font-weight: bold !important;
    text-align: center !important;
  }

  body:has(#content.player) #content.player table a {
    color: #75bd27 !important;
    font-weight: bold !important;
    text-decoration: none !important;
  }

  /*
   * صفحة نظرة عامة: جدول اللاعب والوصف.
   */
  body:has(#content.player) #content.player table#profile > tbody > tr > td.details,
  body:has(#content.player) #content.player table#profile > tbody > tr > td.desc1 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player table#profile > tbody > tr > td.empty {
    display: none !important;
  }

  body:has(#content.player) #content.player table#profile td.desc1,
  body:has(#content.player) #content.player table#profile td.desc2 {
    min-height: 120px !important;
  }

  body:has(#content.player) #content.player .desc1div,
  body:has(#content.player) #content.player .desc2div {
    width: 100% !important;
    min-height: 120px !important;
    max-width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * جدول القرى في النظرة العامة.
   */
  body:has(#content.player) #content.player table#villages {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(#content.player) #content.player table#villages td,
  body:has(#content.player) #content.player table#villages th {
    text-align: center !important;
  }

  body:has(#content.player) #content.player .aligned_coords,
  body:has(#content.player) #content.player .cox,
  body:has(#content.player) #content.player .coy,
  body:has(#content.player) #content.player .pi {
    display: inline !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
   * صفحة تعديل الملف الشخصي s=1:
   * لا نترك الوصف الكبير يقسم الجدول ويدفع الأعمدة.
   */
  body:has(#content.player) #content.player table#edit,
  body:has(#content.player) #content.player table#edit tbody,
  body:has(#content.player) #content.player table#edit tr,
  body:has(#content.player) #content.player table#edit th,
  body:has(#content.player) #content.player table#edit td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(#content.player) #content.player table#edit thead {
    display: block !important;
    width: 100% !important;
  }

  body:has(#content.player) #content.player table#edit thead tr {
    display: block !important;
  }

  body:has(#content.player) #content.player table#edit td.empty,
  body:has(#content.player) #content.player table#edit th.empty {
    display: none !important;
  }

  body:has(#content.player) #content.player table#edit td.desc1,
  body:has(#content.player) #content.player table#edit td.desc2 {
    display: block !important;
    width: 100% !important;
    min-height: 170px !important;
    padding: 8px !important;
  }

  body:has(#content.player) #content.player textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 160px !important;
    padding: 8px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /*
   * الحقول.
   */
  body:has(#content.player) #content.player input.text,
  body:has(#content.player) #content.player input[type="text"],
  body:has(#content.player) #content.player input[type="password"],
  body:has(#content.player) #content.player select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 6px 8px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }

  body:has(#content.player) #content.player .birth {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body:has(#content.player) #content.player .birth input.day,
  body:has(#content.player) #content.player .birth input.year {
    flex: 0 0 70px !important;
    width: 70px !important;
  }

  body:has(#content.player) #content.player .birth select {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  body:has(#content.player) #content.player .gend {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body:has(#content.player) #content.player .gend label,
  body:has(#content.player) #content.player .del_selection label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  body:has(#content.player) #content.player input.radio {
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 4px !important;
  }

  /*
   * صفحة الحساب s=3.
   */
  body:has(#content.player) #content.player table.account {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  body:has(#content.player) #content.player table.account th {
    width: 38% !important;
    text-align: right !important;
  }

  body:has(#content.player) #content.player table.account td {
    width: 62% !important;
  }

  body:has(#content.player) #content.player table.account td.note {
    display: table-cell !important;
    width: auto !important;
    text-align: right !important;
    color: #666 !important;
    line-height: 1.7 !important;
  }

  /*
   * جدول الأوسمة، حزمة الرسومات، الإجازة، الدعم.
   */
  body:has(#content.player) #content.player table.tbg,
  body:has(#content.player) #content.player table#gpack,
  body:has(#content.player) #content.player table#download,
  body:has(#content.player) #content.player table#support_mh,
  body:has(#content.player) #content.player table#del_acc {
    width: 100% !important;
    max-width: 100% !important;
  }

  /*
   * زر الحفظ/موافق.
   */
  body:has(#content.player) #content.player p.btn {
    display: block !important;
    width: 100% !important;
    margin: 18px auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body:has(#content.player) #content.player .trav_buttons,
  body:has(#content.player) #content.player button,
  body:has(#content.player) #content.player input[type="submit"] {
    min-width: 120px !important;
    height: 40px !important;
    padding: 0 18px !important;
    border: 1px solid #9ab86a !important;
    border-radius: 20px !important;
    background: linear-gradient(#fff, #ddd) !important;
    color: #222 !important;
    font-size: 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /*
   * السايد إنفو أسفل العضوية، لا يدخل في المحتوى.
   */
  body:has(#content.player) #side_info {
    position: static !important;
    float: none !important;
    clear: both !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #side_info table,
  body:has(#content.player) #side_info div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) .footer-stopper,
  body:has(#content.player) .clear {
    clear: both !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.player) #content.player {
    width: calc(100% - 20px) !important;
    margin-top: 24px !important;
  }

  body:has(#content.player) #content.player h1 {
    font-size: 26px !important;
  }

  body:has(#content.player) #content.player #textmenu a,
  body:has(#content.player) #content.player #textmenu span.none {
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 7px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body:has(#content.player) #content.player table th,
  body:has(#content.player) #content.player table td {
    padding: 7px 4px !important;
    font-size: 13px !important;
  }

  body:has(#content.player) #content.player table.account th,
  body:has(#content.player) #content.player table.account td {
    display: block !important;
    width: 100% !important;
  }

  body:has(#content.player) #content.player table.account th {
    border-bottom: 0 !important;
  }

  body:has(#content.player) #side_info {
    width: calc(100% - 20px) !important;
  }
}
/* END spieler profile mobile layout v1 */


/* START spieler overview mobile fix v2 */
@media (max-width: 900px) {

  /*
   * إصلاح جدول نظرة عامة اللاعب فقط:
   * القالب الأصلي table#profile فيه عمود تفاصيل + عمود وصف.
   * بالجوال نخليه عمودي بدل عمودين.
   */
  body:has(#content.player) #content.player table#profile,
  body:has(#content.player) #content.player table#profile > thead,
  body:has(#content.player) #content.player table#profile > tbody,
  body:has(#content.player) #content.player table#profile > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  body:has(#content.player) #content.player table#profile {
    margin: 0 auto 18px auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
  }

  body:has(#content.player) #content.player table#profile > thead > tr {
    display: block !important;
    width: 100% !important;
  }

  body:has(#content.player) #content.player table#profile > thead > tr > th,
  body:has(#content.player) #content.player table#profile > thead > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /*
   * نخفي صف العناوين "التفاصيل / الوصف" لأنه يسبب تقسيم الكمبيوتر.
   */
  body:has(#content.player) #content.player table#profile > thead > tr:nth-child(2) {
    display: none !important;
  }

  body:has(#content.player) #content.player table#profile > tbody > tr > td.details,
  body:has(#content.player) #content.player table#profile > tbody > tr > td.desc1 {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player table#profile > tbody > tr > td.empty {
    display: none !important;
  }

  /*
   * جدول التفاصيل الداخلي يكون كامل العرض.
   */
  body:has(#content.player) #content.player table#profile td.details > table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-collapse: collapse !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table tr {
    display: table-row !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table th,
  body:has(#content.player) #content.player table#profile td.details > table td {
    display: table-cell !important;
    width: 50% !important;
    padding: 8px 7px !important;
    text-align: right !important;
    vertical-align: middle !important;
    border: 1px solid #d6d6d6 !important;
    background: #fff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table th {
    background: linear-gradient(#fafafa, #e9e9e9) !important;
    font-weight: bold !important;
  }

  /*
   * صندوق الوصف.
   */
  body:has(#content.player) #content.player table#profile td.desc1 {
    border: 1px solid #d6d6d6 !important;
    min-height: 120px !important;
  }

  body:has(#content.player) #content.player table#profile .desc1div,
  body:has(#content.player) #content.player table#profile .desc2div {
    display: block !important;
    width: 100% !important;
    min-height: 100px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
  }

  /*
   * الصور داخل الوصف لا تكسر العرض.
   */
  body:has(#content.player) #content.player table#profile .desc1div img,
  body:has(#content.player) #content.player table#profile .desc2div img {
    max-width: 100% !important;
    height: auto !important;
  }

  /*
   * جدول القرى أسفل الملف.
   */
  body:has(#content.player) #content.player table#villages {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    table-layout: auto !important;
  }

  body:has(#content.player) #content.player table#villages th,
  body:has(#content.player) #content.player table#villages td {
    text-align: center !important;
    font-size: 14px !important;
    padding: 7px 5px !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.player) #content.player table#profile td.details > table th,
  body:has(#content.player) #content.player table#profile td.details > table td {
    font-size: 13px !important;
    padding: 7px 5px !important;
  }

  body:has(#content.player) #content.player table#villages th,
  body:has(#content.player) #content.player table#villages td {
    font-size: 13px !important;
    padding: 6px 4px !important;
  }
}
/* END spieler overview mobile fix v2 */


/* START spieler overview like desktop mobile v3 */
@media (max-width: 900px) {

  /*
   * نظرة عامة اللاعب تكون مثل الكمبيوتر:
   * التفاصيل يمين + الوصف يسار داخل نفس الجدول.
   */
  body:has(#content.player) #content.player table#profile {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 18px auto !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: #fff !important;
  }

  body:has(#content.player) #content.player table#profile > thead {
    display: table-header-group !important;
  }

  body:has(#content.player) #content.player table#profile > tbody {
    display: table-row-group !important;
  }

  body:has(#content.player) #content.player table#profile > thead > tr,
  body:has(#content.player) #content.player table#profile > tbody > tr {
    display: table-row !important;
    width: auto !important;
  }

  body:has(#content.player) #content.player table#profile > thead > tr > th,
  body:has(#content.player) #content.player table#profile > thead > tr > td {
    display: table-cell !important;
    width: auto !important;
    text-align: center !important;
  }

  /*
   * نُظهر صف التفاصيل/الوصف مثل الكمبيوتر.
   */
  body:has(#content.player) #content.player table#profile > thead > tr:nth-child(2) {
    display: table-row !important;
  }

  body:has(#content.player) #content.player table#profile > tbody > tr > td.details,
  body:has(#content.player) #content.player table#profile > tbody > tr > td.desc1 {
    display: table-cell !important;
    float: none !important;
    clear: none !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    border: 1px solid #d6d6d6 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.player) #content.player table#profile > tbody > tr > td.empty {
    display: none !important;
  }

  /*
   * جدول التفاصيل الداخلي يصغر داخل نصف الشاشة.
   */
  body:has(#content.player) #content.player table#profile td.details > table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table tr {
    display: table-row !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table th,
  body:has(#content.player) #content.player table#profile td.details > table td {
    display: table-cell !important;
    width: 50% !important;
    padding: 6px 4px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: right !important;
    vertical-align: middle !important;
    border: 1px solid #d6d6d6 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#content.player) #content.player table#profile td.details > table th {
    background: linear-gradient(#fafafa, #e9e9e9) !important;
    font-weight: bold !important;
  }

  /*
   * الوصف والصور داخل عمود الوصف، بدون فراغات كبيرة.
   */
  body:has(#content.player) #content.player table#profile td.desc1,
  body:has(#content.player) #content.player table#profile td.desc2 {
    min-height: 0 !important;
  }

  body:has(#content.player) #content.player table#profile .desc1div,
  body:has(#content.player) #content.player table#profile .desc2div {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    border: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#content.player) #content.player table#profile .desc1div img,
  body:has(#content.player) #content.player table#profile .desc2div img {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 6px auto !important;
  }

  /*
   * لا تخلي النجوم أو النصوص الطويلة توسع العمود.
   */
  body:has(#content.player) #content.player table#profile td,
  body:has(#content.player) #content.player table#profile th,
  body:has(#content.player) #content.player table#profile div {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /*
   * جدول القرى تحت الملف مثل الكمبيوتر لكن بعرض الجوال.
   */
  body:has(#content.player) #content.player table#villages {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin-top: 16px !important;
  }

  body:has(#content.player) #content.player table#villages th,
  body:has(#content.player) #content.player table#villages td {
    display: table-cell !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 6px 4px !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.player) #content.player table#profile td.details > table th,
  body:has(#content.player) #content.player table#profile td.details > table td {
    font-size: 12px !important;
    padding: 5px 3px !important;
  }

  body:has(#content.player) #content.player table#profile .desc1div,
  body:has(#content.player) #content.player table#profile .desc2div {
    font-size: 12px !important;
    padding: 6px 4px !important;
  }
}
/* END spieler overview like desktop mobile v3 */


/* START messages reports mobile layout v1 */
@media (max-width: 900px) {

  /*
   * الرسائل والتقارير:
   * nachrichten.php => #content.messages أو #content.message أحياناً
   * berichte.php    => #content.reports
   */
  body:has(#content.reports),
  body:has(#content.messages),
  body:has(#content.message) {
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body:has(#content.reports) .wrapper,
  body:has(#content.messages) .wrapper,
  body:has(#content.message) .wrapper,
  body:has(#content.reports) #mid,
  body:has(#content.messages) #mid,
  body:has(#content.message) #mid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body:has(#content.reports) #content.reports,
  body:has(#content.messages) #content.messages,
  body:has(#content.message) #content.message {
    float: none !important;
    clear: both !important;
    position: relative !important;
    right: auto !important;
    left: auto !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    overflow: visible !important;
    background: #fff !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }

  body:has(#content.reports) #content.reports h1,
  body:has(#content.messages) #content.messages h1,
  body:has(#content.message) #content.message h1 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 34px !important;
    line-height: 1.35 !important;
    color: #111 !important;
  }

  /*
   * تبويبات الرسائل والتقارير.
   */
  body:has(#content.reports) #textmenu,
  body:has(#content.messages) #textmenu,
  body:has(#content.message) #textmenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px auto !important;
    padding: 0 0 6px 0 !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    direction: rtl !important;
    text-align: right !important;
    white-space: normal !important;

    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
  }

  body:has(#content.reports) #textmenu a,
  body:has(#content.messages) #textmenu a,
  body:has(#content.message) #textmenu a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;

    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: linear-gradient(#fff, #f7f7f7) !important;

    color: #75bd27 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
  }

  body:has(#content.reports) #textmenu a.selected,
  body:has(#content.messages) #textmenu a.selected,
  body:has(#content.message) #textmenu a.selected {
    border-color: #a6d66f !important;
    background: linear-gradient(#fff, #f0fae8) !important;
    color: #63ad1f !important;
  }

  /*
   * الجداول.
   */
  body:has(#content.reports) #content.reports table,
  body:has(#content.messages) #content.messages table,
  body:has(#content.message) #content.message table {
    float: none !important;
    clear: both !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto 16px auto !important;
    border-collapse: collapse !important;
    table-layout: auto !important;

    background: #fff !important;
    box-sizing: border-box !important;
  }

  body:has(#content.reports) #content.reports table th,
  body:has(#content.reports) #content.reports table td,
  body:has(#content.messages) #content.messages table th,
  body:has(#content.messages) #content.messages table td,
  body:has(#content.message) #content.message table th,
  body:has(#content.message) #content.message table td {
    padding: 7px 5px !important;
    border: 1px solid #d6d6d6 !important;
    background: #fff !important;

    text-align: center !important;
    vertical-align: middle !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;

    box-sizing: border-box !important;
  }

  body:has(#content.reports) #content.reports table th,
  body:has(#content.reports) #content.reports table thead td,
  body:has(#content.reports) #content.reports table tr:first-child td[colspan],
  body:has(#content.messages) #content.messages table th,
  body:has(#content.messages) #content.messages table thead td,
  body:has(#content.messages) #content.messages table tr:first-child td[colspan],
  body:has(#content.message) #content.message table th,
  body:has(#content.message) #content.message table thead td,
  body:has(#content.message) #content.message table tr:first-child td[colspan] {
    background: linear-gradient(#fafafa, #e9e9e9) !important;
    color: #111 !important;
    font-weight: bold !important;
  }

  body:has(#content.reports) #content.reports table a,
  body:has(#content.messages) #content.messages table a,
  body:has(#content.message) #content.message table a {
    color: #75bd27 !important;
    font-weight: bold !important;
    text-decoration: none !important;
  }

  /*
   * قائمة التقارير / الرسائل: ضبط أعمدة الموضوع والوقت والتحديد.
   */
  body:has(#content.reports) #content.reports table#overview,
  body:has(#content.reports) #content.reports table#report_list,
  body:has(#content.messages) #content.messages table#overview,
  body:has(#content.message) #content.message table#overview {
    table-layout: auto !important;
  }

  body:has(#content.reports) #content.reports td.sel,
  body:has(#content.messages) #content.messages td.sel,
  body:has(#content.message) #content.message td.sel {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 4px !important;
  }

  body:has(#content.reports) #content.reports input.check,
  body:has(#content.messages) #content.messages input.check,
  body:has(#content.message) #content.message input.check {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
  }

  body:has(#content.reports) #content.reports td.sub,
  body:has(#content.reports) #content.reports td.subject,
  body:has(#content.reports) #content.reports td.rep,
  body:has(#content.messages) #content.messages td.sub,
  body:has(#content.messages) #content.messages td.subject,
  body:has(#content.message) #content.message td.sub,
  body:has(#content.message) #content.message td.subject {
    text-align: right !important;
  }

  body:has(#content.reports) #content.reports td.dat,
  body:has(#content.reports) #content.reports td.date,
  body:has(#content.messages) #content.messages td.dat,
  body:has(#content.messages) #content.messages td.date,
  body:has(#content.message) #content.message td.dat,
  body:has(#content.message) #content.message td.date {
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  /*
   * أزرار أسفل القائمة.
   */
  body:has(#content.reports) #content.reports th.buttons,
  body:has(#content.messages) #content.messages th.buttons,
  body:has(#content.message) #content.message th.buttons {
    text-align: left !important;
    white-space: nowrap !important;
  }

  body:has(#content.reports) #content.reports .trav_buttons,
  body:has(#content.reports) #content.reports button,
  body:has(#content.reports) #content.reports input[type="submit"],
  body:has(#content.messages) #content.messages .trav_buttons,
  body:has(#content.messages) #content.messages button,
  body:has(#content.messages) #content.messages input[type="submit"],
  body:has(#content.message) #content.message .trav_buttons,
  body:has(#content.message) #content.message button,
  body:has(#content.message) #content.message input[type="submit"] {
    min-width: 86px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #9ab86a !important;
    border-radius: 18px !important;
    background: linear-gradient(#fff, #ddd) !important;
    color: #222 !important;
    font-size: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /*
   * قراءة الرسالة / قراءة التقرير.
   */
  body:has(#content.reports) #report_surround,
  body:has(#content.messages) #read_content,
  body:has(#content.message) #read_content,
  body:has(#content.messages) .msg_content,
  body:has(#content.message) .msg_content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  body:has(#content.reports) #report_surround table,
  body:has(#content.reports) table#report_surround {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  body:has(#content.reports) #report_surround img,
  body:has(#content.messages) #read_content img,
  body:has(#content.message) #read_content img,
  body:has(#content.messages) .msg_content img,
  body:has(#content.message) .msg_content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /*
   * كتابة رسالة.
   */
  body:has(#content.messages) #write_content,
  body:has(#content.message) #write_content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #write_content input.text,
  body:has(#content.message) #write_content input.text,
  body:has(#content.messages) #write_content input[type="text"],
  body:has(#content.message) #write_content input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 6px 8px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }

  body:has(#content.messages) #message,
  body:has(#content.message) #message,
  body:has(#content.messages) textarea,
  body:has(#content.message) textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 180px !important;
    padding: 8px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
    resize: vertical !important;
  }

  body:has(#content.messages) #message_toolbar,
  body:has(#content.message) #message_toolbar,
  body:has(#content.messages) #message_resources,
  body:has(#content.message) #message_resources,
  body:has(#content.messages) #message_smilies,
  body:has(#content.message) #message_smilies {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /*
   * منع side_info من دخول الرسائل/التقارير.
   */
  body:has(#content.reports) #side_info,
  body:has(#content.messages) #side_info,
  body:has(#content.message) #side_info {
    position: static !important;
    float: none !important;
    clear: both !important;

    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    max-width: 720px !important;

    margin: 28px auto 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body:has(#content.reports) #side_info table,
  body:has(#content.reports) #side_info div,
  body:has(#content.messages) #side_info table,
  body:has(#content.messages) #side_info div,
  body:has(#content.message) #side_info table,
  body:has(#content.message) #side_info div {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(#content.reports) .footer-stopper,
  body:has(#content.reports) .clear,
  body:has(#content.messages) .footer-stopper,
  body:has(#content.messages) .clear,
  body:has(#content.message) .footer-stopper,
  body:has(#content.message) .clear {
    clear: both !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.reports) #content.reports,
  body:has(#content.messages) #content.messages,
  body:has(#content.message) #content.message {
    width: calc(100% - 20px) !important;
    margin-top: 24px !important;
  }

  body:has(#content.reports) #content.reports h1,
  body:has(#content.messages) #content.messages h1,
  body:has(#content.message) #content.message h1 {
    font-size: 32px !important;
  }

  body:has(#content.reports) #textmenu a,
  body:has(#content.messages) #textmenu a,
  body:has(#content.message) #textmenu a {
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 7px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body:has(#content.reports) #content.reports table th,
  body:has(#content.reports) #content.reports table td,
  body:has(#content.messages) #content.messages table th,
  body:has(#content.messages) #content.messages table td,
  body:has(#content.message) #content.message table th,
  body:has(#content.message) #content.message table td {
    padding: 6px 4px !important;
    font-size: 14px !important;
  }

  body:has(#content.reports) #side_info,
  body:has(#content.messages) #side_info,
  body:has(#content.message) #side_info {
    width: calc(100% - 20px) !important;
  }
}
/* END messages reports mobile layout v1 */


/* START messages read write mobile v2 */
@media (max-width: 900px) {

  /*
   * قراءة وكتابة الرسائل فقط.
   */
  body:has(#content.messages) #content.messages,
  body:has(#content.message) #content.message {
    width: calc(100% - 24px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  /*
   * إطار الورقة / الرسالة القديم.
   * نخليه داخل الشاشة بدل ما يتمدد بتصميم الكمبيوتر.
   */
  body:has(#content.messages) #content.messages #message,
  body:has(#content.message) #content.message #message,
  body:has(#content.messages) #content.messages #read_content,
  body:has(#content.message) #content.message #read_content,
  body:has(#content.messages) #content.messages #write_content,
  body:has(#content.message) #content.message #write_content,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message,
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 auto 18px auto !important;
    padding: 0 !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /*
   * جداول داخل الرسالة.
   */
  body:has(#content.messages) #content.messages #message table,
  body:has(#content.message) #content.message #message table,
  body:has(#content.messages) #content.messages #read_content table,
  body:has(#content.message) #content.message #read_content table,
  body:has(#content.messages) #content.messages #write_content table,
  body:has(#content.message) #content.message #write_content table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #content.messages #message td,
  body:has(#content.message) #content.message #message td,
  body:has(#content.messages) #content.messages #read_content td,
  body:has(#content.message) #content.message #read_content td,
  body:has(#content.messages) #content.messages #write_content td,
  body:has(#content.message) #content.message #write_content td {
    padding: 7px 6px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * رأس قراءة الرسالة: المرسل / الموضوع / التاريخ.
   */
  body:has(#content.messages) #content.messages .messageHeader,
  body:has(#content.message) #content.message .messageHeader,
  body:has(#content.messages) #content.messages #message_header,
  body:has(#content.message) #content.message #message_header,
  body:has(#content.messages) #content.messages .readHeader,
  body:has(#content.message) #content.message .readHeader {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-bottom: 1px solid #ddd !important;
  }

  /*
   * جسم الرسالة المقروءة.
   */
  body:has(#content.messages) #content.messages .messageContent,
  body:has(#content.message) #content.message .messageContent,
  body:has(#content.messages) #content.messages .msg_content,
  body:has(#content.message) #content.message .msg_content,
  body:has(#content.messages) #content.messages #message_content,
  body:has(#content.message) #content.message #message_content,
  body:has(#content.messages) #content.messages #read_content .content,
  body:has(#content.message) #content.message #read_content .content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 14px 12px !important;

    font-size: 17px !important;
    line-height: 2 !important;
    text-align: right !important;
    direction: rtl !important;

    background: #fff !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * لو قالب القراءة لا يستخدم كلاس واضح، طبّق على الخلايا الطويلة داخل read_content.
   */
  body:has(#content.messages) #content.messages #read_content td,
  body:has(#content.message) #content.message #read_content td {
    text-align: right !important;
    vertical-align: top !important;
  }

  body:has(#content.messages) #content.messages #read_content p,
  body:has(#content.message) #content.message #read_content p,
  body:has(#content.messages) #content.messages #read_content div,
  body:has(#content.message) #content.message #read_content div {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * كتابة رسالة: المستلم والموضوع.
   */
  body:has(#content.messages) #content.messages #write_content form,
  body:has(#content.message) #content.message #write_content form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #content.messages #write_content input.text,
  body:has(#content.message) #content.message #write_content input.text,
  body:has(#content.messages) #content.messages #write_content input[type="text"],
  body:has(#content.message) #content.message #write_content input[type="text"] {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;

    margin: 0 0 8px 0 !important;
    padding: 7px 10px !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;

    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  /*
   * شريط الأيقونات / الابتسامات / الموارد فوق صندوق الكتابة.
   * نخليه قابل للسحب أفقيًا بدل ما يطلع خارج الورقة.
   */
  body:has(#content.messages) #content.messages #message_toolbar,
  body:has(#content.message) #content.message #message_toolbar,
  body:has(#content.messages) #content.messages #message_resources,
  body:has(#content.message) #content.message #message_resources,
  body:has(#content.messages) #content.messages #message_smilies,
  body:has(#content.message) #content.message #message_smilies,
  body:has(#content.messages) #content.messages .messageToolbar,
  body:has(#content.message) #content.message .messageToolbar,
  body:has(#content.messages) #content.messages .smilies,
  body:has(#content.message) #content.message .smilies,
  body:has(#content.messages) #content.messages .bbToolbar,
  body:has(#content.message) #content.message .bbToolbar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 8px auto 0 auto !important;
    padding: 4px 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #content.messages #message_toolbar img,
  body:has(#content.message) #content.message #message_toolbar img,
  body:has(#content.messages) #content.messages #message_resources img,
  body:has(#content.message) #content.message #message_resources img,
  body:has(#content.messages) #content.messages #message_smilies img,
  body:has(#content.message) #content.message #message_smilies img,
  body:has(#content.messages) #content.messages .messageToolbar img,
  body:has(#content.message) #content.message .messageToolbar img,
  body:has(#content.messages) #content.messages .smilies img,
  body:has(#content.message) #content.message .smilies img,
  body:has(#content.messages) #content.messages .bbToolbar img,
  body:has(#content.message) #content.message .bbToolbar img {
    display: inline-block !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
  }

  /*
   * صندوق نص الرسالة.
   */
  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea,
  body:has(#content.messages) #content.messages textarea#message,
  body:has(#content.message) #content.message textarea#message,
  body:has(#content.messages) #content.messages #message textarea,
  body:has(#content.message) #content.message #message textarea {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 240px !important;

    margin: 0 auto !important;
    padding: 10px !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;

    direction: rtl !important;
    text-align: right !important;
    font-size: 16px !important;
    line-height: 1.8 !important;

    box-sizing: border-box !important;
    resize: vertical !important;
  }

  /*
   * حدود الورقة القديمة: نخليها داخل العرض ولا تقص النص.
   */
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message {
    border-left: 2px solid #333 !important;
    border-right: 2px solid #333 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /*
   * زر الإرسال / الرد / الحذف.
   */
  body:has(#content.messages) #content.messages .trav_buttons,
  body:has(#content.message) #content.message .trav_buttons,
  body:has(#content.messages) #content.messages button,
  body:has(#content.message) #content.message button,
  body:has(#content.messages) #content.messages input[type="submit"],
  body:has(#content.message) #content.message input[type="submit"] {
    display: inline-block !important;
    min-width: 110px !important;
    height: 40px !important;

    margin: 12px auto !important;
    padding: 0 18px !important;

    border: 1px solid #9ab86a !important;
    border-radius: 20px !important;
    background: linear-gradient(#fff, #ddd) !important;

    color: #222 !important;
    font-size: 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /*
   * التحذير الأحمر أسفل كتابة الرسالة.
   */
  body:has(#content.messages) #content.messages .error,
  body:has(#content.message) #content.message .error,
  body:has(#content.messages) #content.messages .warning,
  body:has(#content.message) #content.message .warning {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 10px !important;
    text-align: center !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * منع أي عنصر داخلي من دفع الصفحة أفقياً.
   */
  body:has(#content.messages) #content.messages *,
  body:has(#content.message) #content.message * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 520px) {
  body:has(#content.messages) #content.messages,
  body:has(#content.message) #content.message {
    width: calc(100% - 20px) !important;
  }

  body:has(#content.messages) #content.messages .messageContent,
  body:has(#content.message) #content.message .messageContent,
  body:has(#content.messages) #content.messages .msg_content,
  body:has(#content.message) #content.message .msg_content,
  body:has(#content.messages) #content.messages #message_content,
  body:has(#content.message) #content.message #message_content {
    font-size: 16px !important;
    line-height: 1.9 !important;
    padding: 12px 10px !important;
  }

  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea,
  body:has(#content.messages) #content.messages textarea#message,
  body:has(#content.message) #content.message textarea#message {
    min-height: 220px !important;
    font-size: 15px !important;
  }
}
/* END messages read write mobile v2 */


/* START message write mobile v3 */
@media (max-width: 900px) {

  /*
   * صفحة كتابة الرسالة فقط داخل nachrichten.php.
   * الهدف: ترتيب الورقة والحقول والأيقونات بدون لمس قائمة الرسائل.
   */
  body:has(#content.messages) #content.messages form,
  body:has(#content.message) #content.message form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * إطار الدفتر/الورقة.
   */
  body:has(#content.messages) #content.messages table,
  body:has(#content.message) #content.message table {
    max-width: 100% !important;
  }

  body:has(#content.messages) #content.messages #write_content,
  body:has(#content.message) #content.message #write_content,
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px auto !important;
    padding: 0 10px 18px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /*
   * صور حلقات الدفتر أو الهيدر الزخرفي لا تطلع خارج العرض.
   */
  body:has(#content.messages) #content.messages img,
  body:has(#content.message) #content.message img {
    max-width: 100% !important;
  }

  /*
   * جدول كتابة الرسالة لو كان مبني بخلايا قديمة:
   * نخلي الخلايا بلوكات عمودية حتى لا تنضغط.
   */
  body:has(#content.messages) #content.messages #write_content table,
  body:has(#content.message) #content.message #write_content table,
  body:has(#content.messages) #content.messages table.write,
  body:has(#content.message) #content.message table.write {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
  }

  body:has(#content.messages) #content.messages #write_content tbody,
  body:has(#content.message) #content.message #write_content tbody,
  body:has(#content.messages) #content.messages #write_content tr,
  body:has(#content.message) #content.message #write_content tr,
  body:has(#content.messages) #content.messages table.write tbody,
  body:has(#content.message) #content.message table.write tbody,
  body:has(#content.messages) #content.messages table.write tr,
  body:has(#content.message) #content.message table.write tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(#content.messages) #content.messages #write_content th,
  body:has(#content.message) #content.message #write_content th,
  body:has(#content.messages) #content.messages #write_content td,
  body:has(#content.message) #content.message #write_content td,
  body:has(#content.messages) #content.messages table.write th,
  body:has(#content.message) #content.message table.write th,
  body:has(#content.messages) #content.messages table.write td,
  body:has(#content.message) #content.message table.write td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  /*
   * عناوين المستلم/الموضوع.
   */
  body:has(#content.messages) #content.messages #write_content th,
  body:has(#content.message) #content.message #write_content th,
  body:has(#content.messages) #content.messages table.write th,
  body:has(#content.message) #content.message table.write th {
    color: #75bd27 !important;
    font-weight: bold !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding-bottom: 2px !important;
  }

  /*
   * حقول المستلم والموضوع.
   */
  body:has(#content.messages) #content.messages input[type="text"],
  body:has(#content.message) #content.message input[type="text"],
  body:has(#content.messages) #content.messages input.text,
  body:has(#content.message) #content.message input.text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 auto 10px auto !important;
    padding: 7px 10px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  /*
   * شريط الموارد الصغير فوق الأيقونات.
   */
  body:has(#content.messages) #content.messages .resources,
  body:has(#content.message) #content.message .resources {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 6px 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /*
   * شريط الأيقونات/الابتسامات: داخل العرض فقط وقابل للسحب.
   */
  body:has(#content.messages) #content.messages #message_toolbar,
  body:has(#content.message) #content.message #message_toolbar,
  body:has(#content.messages) #content.messages #message_resources,
  body:has(#content.message) #content.message #message_resources,
  body:has(#content.messages) #content.messages #message_smilies,
  body:has(#content.message) #content.message #message_smilies,
  body:has(#content.messages) #content.messages .bbToolbar,
  body:has(#content.message) #content.message .bbToolbar,
  body:has(#content.messages) #content.messages .smilies,
  body:has(#content.message) #content.message .smilies {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 0 !important;
    padding: 3px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #content.messages #message_toolbar *,
  body:has(#content.message) #content.message #message_toolbar *,
  body:has(#content.messages) #content.messages #message_resources *,
  body:has(#content.message) #content.message #message_resources *,
  body:has(#content.messages) #content.messages #message_smilies *,
  body:has(#content.message) #content.message #message_smilies *,
  body:has(#content.messages) #content.messages .bbToolbar *,
  body:has(#content.message) #content.message .bbToolbar *,
  body:has(#content.messages) #content.messages .smilies *,
  body:has(#content.message) #content.message .smilies * {
    display: inline-block !important;
    float: none !important;
    vertical-align: middle !important;
    max-width: none !important;
  }

  /*
   * صندوق الرسالة.
   */
  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 260px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    direction: rtl !important;
    text-align: right !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    box-sizing: border-box !important;
    resize: vertical !important;
  }

  /*
   * زر الإرسال لا يكون مقصوص.
   */
  body:has(#content.messages) #content.messages p.btn,
  body:has(#content.message) #content.message p.btn,
  body:has(#content.messages) #content.messages .btn,
  body:has(#content.message) #content.message .btn {
    display: block !important;
    width: 100% !important;
    margin: 14px auto 0 auto !important;
    padding: 0 0 10px 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body:has(#content.messages) #content.messages button,
  body:has(#content.message) #content.message button,
  body:has(#content.messages) #content.messages input[type="submit"],
  body:has(#content.message) #content.message input[type="submit"] {
    display: inline-block !important;
    min-width: 120px !important;
    height: 42px !important;
    margin: 12px auto !important;
    padding: 0 22px !important;
    border: 1px solid #9ab86a !important;
    border-radius: 22px !important;
    background: linear-gradient(#fff, #ddd) !important;
    color: #222 !important;
    font-size: 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.messages) #content.messages #write_content,
  body:has(#content.message) #content.message #write_content,
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea {
    min-height: 240px !important;
    font-size: 15px !important;
  }
}
/* END message write mobile v3 */


/* START message paper final mobile v4 */
@media (max-width: 900px) {

  /*
   * صفحة الرسائل فقط
   */
  body:has(#content.messages) #content.messages,
  body:has(#content.message) #content.message {
    overflow: visible !important;
  }

  /*
   * إطار الدفتر: نخليه داخل الشاشة، بدون قص الأيقونات أو الزر.
   */
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message,
  body:has(#content.messages) #content.messages #write_content,
  body:has(#content.message) #content.message #write_content,
  body:has(#content.messages) #content.messages #read_content,
  body:has(#content.message) #content.message #read_content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto 22px auto !important;
    padding: 0 10px 22px 10px !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  /*
   * حدود الورقة الجانبية تكون داخل العرض ولا تمتد زيادة.
   */
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message {
    border-left: 2px solid #222 !important;
    border-right: 2px solid #222 !important;
  }

  /*
   * رأس الدفتر/الحلقات: لا يقص، ولا يزاح يمين/يسار.
   */
  body:has(#content.messages) #content.messages .paper img,
  body:has(#content.message) #content.message .paper img,
  body:has(#content.messages) #content.messages .message img,
  body:has(#content.message) #content.message .message img {
    max-width: 100% !important;
    height: auto !important;
  }

  /*
   * ترتيب حقول الكتابة.
   */
  body:has(#content.messages) #content.messages #write_content table,
  body:has(#content.message) #content.message #write_content table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    table-layout: auto !important;
    border-collapse: separate !important;
  }

  body:has(#content.messages) #content.messages #write_content th,
  body:has(#content.message) #content.message #write_content th,
  body:has(#content.messages) #content.messages #write_content td,
  body:has(#content.message) #content.message #write_content td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  body:has(#content.messages) #content.messages #write_content th,
  body:has(#content.message) #content.message #write_content th {
    color: #75bd27 !important;
    font-weight: bold !important;
    font-size: 15px !important;
  }

  body:has(#content.messages) #content.messages #write_content input[type="text"],
  body:has(#content.message) #content.message #write_content input[type="text"],
  body:has(#content.messages) #content.messages #write_content input.text,
  body:has(#content.message) #content.message #write_content input.text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 auto 12px auto !important;
    padding: 7px 10px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }

  /*
   * أهم تعديل: شريط الأيقونات والابتسامات لا يختفي.
   * نخليه ارتفاعه ظاهر وقابل للسحب أفقيًا.
   */
  body:has(#content.messages) #content.messages #message_toolbar,
  body:has(#content.message) #content.message #message_toolbar,
  body:has(#content.messages) #content.messages #message_resources,
  body:has(#content.message) #content.message #message_resources,
  body:has(#content.messages) #content.messages #message_smilies,
  body:has(#content.message) #content.message #message_smilies,
  body:has(#content.messages) #content.messages .bbToolbar,
  body:has(#content.message) #content.message .bbToolbar,
  body:has(#content.messages) #content.messages .smilies,
  body:has(#content.message) #content.message .smilies {
    display: block !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 34px !important;
    height: auto !important;

    margin: 8px 0 6px 0 !important;
    padding: 4px 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;

    direction: rtl !important;
    text-align: right !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  body:has(#content.messages) #content.messages #message_toolbar *,
  body:has(#content.message) #content.message #message_toolbar *,
  body:has(#content.messages) #content.messages #message_resources *,
  body:has(#content.message) #content.message #message_resources *,
  body:has(#content.messages) #content.messages #message_smilies *,
  body:has(#content.message) #content.message #message_smilies *,
  body:has(#content.messages) #content.messages .bbToolbar *,
  body:has(#content.message) #content.message .bbToolbar *,
  body:has(#content.messages) #content.messages .smilies *,
  body:has(#content.message) #content.message .smilies * {
    display: inline-block !important;
    float: none !important;
    position: static !important;
    vertical-align: middle !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 2px !important;
  }

  /*
   * الموارد الصغيرة فوق شريط الأيقونات.
   */
  body:has(#content.messages) #content.messages .resources,
  body:has(#content.message) #content.message .resources,
  body:has(#content.messages) #content.messages .res,
  body:has(#content.message) #content.message .res {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  /*
   * صندوق نص الرسالة.
   */
  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 265px !important;

    margin: 0 auto 12px auto !important;
    padding: 10px !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 8px !important;
    background: #fafafa !important;

    direction: rtl !important;
    text-align: right !important;
    font-size: 16px !important;
    line-height: 1.8 !important;

    box-sizing: border-box !important;
    resize: vertical !important;
  }

  /*
   * زر الإرسال / الرد لا ينقص ولا ينزل خارج الورقة.
   */
  body:has(#content.messages) #content.messages p.btn,
  body:has(#content.message) #content.message p.btn,
  body:has(#content.messages) #content.messages .btn,
  body:has(#content.message) #content.message .btn {
    display: block !important;
    width: 100% !important;
    margin: 10px auto 0 auto !important;
    padding: 0 0 18px 0 !important;
    text-align: center !important;
    overflow: visible !important;
    clear: both !important;
  }

  body:has(#content.messages) #content.messages button,
  body:has(#content.message) #content.message button,
  body:has(#content.messages) #content.messages input[type="submit"],
  body:has(#content.message) #content.message input[type="submit"] {
    display: inline-block !important;

    min-width: 128px !important;
    height: 42px !important;

    margin: 10px auto 0 auto !important;
    padding: 0 22px !important;

    border: 1px solid #9ab86a !important;
    border-radius: 22px !important;
    background: linear-gradient(#fff, #ddd) !important;

    color: #222 !important;
    font-size: 15px !important;
    text-align: center !important;
    line-height: 40px !important;

    box-sizing: border-box !important;
  }

  /*
   * قراءة الرسالة: تحسين النص داخل الورقة.
   */
  body:has(#content.messages) #content.messages #read_content,
  body:has(#content.message) #content.message #read_content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:has(#content.messages) #content.messages #read_content td,
  body:has(#content.message) #content.message #read_content td {
    font-size: 16px !important;
    line-height: 1.9 !important;
    text-align: right !important;
    vertical-align: top !important;
    overflow-wrap: anywhere !important;
  }

  body:has(#content.messages) #content.messages #read_content p,
  body:has(#content.message) #content.message #read_content p {
    margin: 0 0 14px 0 !important;
    line-height: 1.9 !important;
  }
}

@media (max-width: 520px) {
  body:has(#content.messages) #content.messages .paper,
  body:has(#content.message) #content.message .paper,
  body:has(#content.messages) #content.messages .message,
  body:has(#content.message) #content.message .message,
  body:has(#content.messages) #content.messages #write_content,
  body:has(#content.message) #content.message #write_content,
  body:has(#content.messages) #content.messages #read_content,
  body:has(#content.message) #content.message #read_content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:has(#content.messages) #content.messages textarea,
  body:has(#content.message) #content.message textarea {
    min-height: 245px !important;
    font-size: 15px !important;
  }

  body:has(#content.messages) #content.messages #read_content td,
  body:has(#content.message) #content.message #read_content td {
    font-size: 15px !important;
  }
}
/* END message paper final mobile v4 */


/* START mtop icons balanced position v6 */
/*
ضبط نهائي للأيقونات الدائرية:
- لا تدخل على صورة الهيدر
- لا تنقص من الأسفل
- الكمبيوتر والجوال منفصلين
*/

div#header,
div#header div#mtop {
    overflow: visible !important;
}

/* الكمبيوتر */
@media (min-width: 701px) {
    div#header div#mtop {
        position: relative !important;
        top: -8px !important;
        margin-bottom: 2px !important;
        height: 88px !important;
        min-height: 88px !important;
        padding-bottom: 10px !important;
        overflow: visible !important;
        z-index: 50 !important;
    }

    div#mtop a#n1,
    div#mtop a#n2,
    div#mtop a#n3,
    div#mtop a#n4,
    div#mtop div#n5 {
        position: relative !important;
        top: 0 !important;
        overflow: visible !important;
        z-index: 51 !important;
    }

    div#mtop a#n1 img,
    div#mtop a#n2 img,
    div#mtop a#n3 img,
    div#mtop a#n4 img,
    div#mtop div#n5 img {
        top: 0 !important;
    }
}

/* الجوال */
@media (max-width: 700px) {
    div#header {
        height: auto !important;
        overflow: visible !important;
    }

    div#header div#mtop {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        height: 78px !important;
        min-height: 78px !important;
        padding-bottom: 10px !important;
        overflow: visible !important;
        z-index: 50 !important;
    }

    div#mtop a#n1,
    div#mtop a#n2,
    div#mtop a#n3,
    div#mtop a#n4,
    div#mtop div#n5 {
        position: relative !important;
        top: 0 !important;
        overflow: visible !important;
        z-index: 51 !important;
    }

    div#mtop a#n1 img,
    div#mtop a#n2 img,
    div#mtop a#n3 img,
    div#mtop a#n4 img,
    div#mtop div#n5 img {
        top: 0 !important;
    }
}
/* END mtop icons balanced position v6 */


/* TATAR_MOBILE_MSG_REPORT_SAME_AS_DESKTOP_V1 START */
/* مزامنة ضغط الرسائل والتقارير في الجوال مع ترتيب الهيدر الحالي */
@media screen and (max-width: 768px) {
    /*
      بلوك الرسائل/التقارير هو div#n5 الأول بدون class s1.
      لا نلمس بلوك الثكنة/الإسطبل لأنه class=s1.
    */
    div#mtop > div#n5:not(.s1) {
        position: relative !important;
        overflow: visible !important;
    }

    div#mtop > div#n5:not(.s1) > a {
        display: block !important;
        width: 50% !important;
        height: 35px !important;
        position: relative !important;
        z-index: 9999 !important;
        cursor: pointer !important;
    }

    /*
      حسب الهيدر الحالي:
      الرابط الأول = التقارير berichte.php
      الرابط الثاني = الرسائل nachrichten.php
      التقارير تستخدم img.l والرسائل تستخدم img.r
    */
    div#mtop > div#n5:not(.s1) > a:nth-child(1) {
        float: left !important;
    }

    div#mtop > div#n5:not(.s1) > a:nth-child(2) {
        float: right !important;
    }

    div#mtop > div#n5:not(.s1) > a img {
        pointer-events: none !important;
    }
}
/* TATAR_MOBILE_MSG_REPORT_SAME_AS_DESKTOP_V1 END */

/* TATAR_HEADER_FULL_SPRITE_FRAME_V1
 * Navigation assets use 70x100 frames (n1-n4 have two stacked frames).
 * Visible artwork occupies rows 21-89. Trim only transparent frame margins.
 */
body.v35 div#header {
  --tatar-nav-width: clamp(38px, calc((100vw - 48px) / 6), 52px);
  --tatar-nav-height: max(44px, calc(var(--tatar-nav-width) * 72 / 70));
  --tatar-nav-offset: calc(var(--tatar-nav-width) * -20 / 70);
  position: relative !important;
  display: flow-root !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 1px solid #bdb7a8 !important;
  border-radius: 4px !important;
  background: linear-gradient(#ffffff, #f3f1e8) !important;
  box-shadow: 0 1px 3px rgba(65, 57, 34, .18) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
body.v35 div#header div#mtop {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  direction: rtl !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 600px !important;
  height: calc(var(--tatar-nav-height) + 4px) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 2px 0 !important;
  overflow: visible !important;
}
body.v35 div#header div#mtop > a,
body.v35 div#header div#mtop > div#n5 {
  display: block !important;
  position: relative !important;
  flex: 0 0 var(--tatar-nav-width) !important;
  float: none !important;
  top: 0 !important;
  width: var(--tatar-nav-width) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tatar-nav-height) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: var(--tatar-nav-width) auto !important;
  background-position: 0 var(--tatar-nav-offset) !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}
body.v35 div#header div#mtop > a > img {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  background-size: var(--tatar-nav-width) auto !important;
  background-position: 0 var(--tatar-nav-offset) !important;
  background-repeat: no-repeat !important;
}
body.v35 div#header div#mtop > div#n5 > a {
  position: absolute !important;
  display: block !important;
  float: none !important;
  top: 0 !important;
  width: 50% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.v35 div#header div#mtop > div#n5:not(.s1) > a:first-child,
body.v35 div#header div#mtop > div#n5.s1 > a.messages {
  left: auto !important;
  right: 0 !important;
}
body.v35 div#header div#mtop > div#n5:not(.s1) > a:last-child,
body.v35 div#header div#mtop > div#n5.s1 > a.reports {
  left: 0 !important;
  right: auto !important;
}
/* END TATAR_HEADER_FULL_SPRITE_FRAME_V1 */

/* Desktop resources follow their position in #mid instead of the old 170px offset. */
@media (min-width: 1101px) {
  body.v35 div#header {
    --tatar-nav-width: 60px;
  }
  body.v35 div#mid > div#res {
    top: auto !important;
    bottom: auto !important;
  }
}