@font-face{
    font-family:'K24';
    src:url('../fonts/K24KurdishLight-Light.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

/* الهيدر الرسمي لنظام توزيع البنزين */

/* الهيدر الرسمي لنظام توزيع البنزين */
#official-government-header{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    border-top:5px solid #17385f !important;
    border-bottom:4px solid #c99a2e !important;
    box-shadow:0 4px 15px rgba(0,0,0,.10) !important;
  font-family:'K24',Tahoma,Arial,sans-serif !important;
    box-sizing:border-box !important;
}

#official-government-header *{
    box-sizing:border-box !important;
}

/* القسم العلوي */
#official-government-header .official-header-grid{
    width:min(1350px,100%) !important;
    min-height:220px !important;
    margin:0 auto !important;
    padding:18px 30px !important;

    display:grid !important;
    grid-template-columns:190px minmax(0,1fr) 190px !important;
    grid-template-areas:"government text ministry" !important;

    align-items:center !important;
    gap:25px !important;
    direction:ltr !important;
}

/* حاويات الشعار */
#official-government-header .official-logo{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:170px !important;

    overflow:visible !important;
}

#official-government-header .official-logo-government{
    grid-area:government !important;
}

#official-government-header .official-logo-ministry{
    grid-area:ministry !important;
}

/* شعار حكومة إقليم كردستان */
#official-government-header .official-logo-government img{
    display:block !important;
    width:150px !important;
    height:150px !important;
    max-width:150px !important;
    max-height:150px !important;
    object-fit:contain !important;
    background:transparent !important;
}

/* شعار الوزارة */
#official-government-header .official-logo-ministry img{
    display:block !important;
    width:145px !important;
    height:145px !important;
    max-width:145px !important;
    max-height:145px !important;
    object-fit:contain !important;
    background:transparent !important;
}

/* النص الأوسط */
#official-government-header .official-header-text{
    grid-area:text !important;
    text-align:center !important;
    direction:rtl !important;
    color:#17385f !important;
    line-height:1.55 !important;
}

#official-government-header .official-region{
    margin-bottom:7px !important;
    color:#17385f !important;
    font-size:31px !important;
    font-weight:800 !important;
}

#official-government-header .official-ministry{
    color:#17385f !important;
    font-size:24px !important;
    font-weight:800 !important;
}

#official-government-header .official-directorate{
    color:#243f5d !important;
    font-size:22px !important;
    font-weight:700 !important;
}

#official-government-header .official-section{
    color:#566575 !important;
    font-size:20px !important;
    font-weight:700 !important;
}

/* عنوان النظام */
#official-government-header .official-system-title{
    width:max-content !important;
    max-width:100% !important;
    margin:9px auto 0 !important;
    padding:8px 30px 0 !important;

    border-top:1px solid #d7dee6 !important;

    color:#0b7d3b !important;
    font-size:24px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
}

/* شريط المستخدم */
#official-user-bar{
    width:100% !important;
    min-height:58px !important;
    padding:9px 28px !important;
    margin:0 !important;

    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:15px !important;

    direction:rtl !important;
    background:#17385f !important;
    color:#ffffff !important;
   font-family:'K24',Tahoma,Arial,sans-serif !important;
    box-sizing:border-box !important;
}

#official-user-bar .official-user-name{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    min-width:0 !important;
}

#official-user-bar .official-role{
    padding:5px 12px !important;
    border:1px solid rgba(255,255,255,.30) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.14) !important;
}

#official-user-bar .official-date-time{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    direction:ltr !important;
    font-size:15px !important;
    font-weight:700 !important;
}

#official-user-bar .official-logout{
    justify-self:end !important;
    color:#ffffff !important;
    text-decoration:none !important;
    padding:7px 14px !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.14) !important;
}

#official-user-bar .official-logout:hover{
    background:rgba(255,255,255,.24) !important;
}

/* تابلت */
@media (max-width:800px){

    #official-government-header .official-header-grid{
        min-height:175px !important;
        grid-template-columns:110px minmax(0,1fr) 110px !important;
        gap:10px !important;
        padding:12px 8px !important;
    }

    #official-government-header .official-logo{
        height:115px !important;
    }

    #official-government-header .official-logo-government img{
        width:105px !important;
        height:105px !important;
        max-width:105px !important;
        max-height:105px !important;
    }

    #official-government-header .official-logo-ministry img{
        width:95px !important;
        height:95px !important;
        max-width:95px !important;
        max-height:95px !important;
    }

    #official-government-header .official-region{
        font-size:19px !important;
    }

    #official-government-header .official-ministry{
        font-size:17px !important;
    }

    #official-government-header .official-directorate,
    #official-government-header .official-section{
        font-size:14px !important;
    }

    #official-government-header .official-system-title{
        margin-top:5px !important;
        padding:5px 14px 0 !important;
        font-size:17px !important;
    }

    #official-user-bar{
        grid-template-columns:1fr auto !important;
        padding:8px 12px !important;
    }

    #official-user-bar .official-date-time{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        margin-top:3px !important;
    }
}

/* هاتف */
@media (max-width:520px){

    #official-government-header .official-header-grid{
        grid-template-columns:70px minmax(0,1fr) 70px !important;
        min-height:145px !important;
        gap:4px !important;
        padding:8px 4px !important;
    }

    #official-government-header .official-logo{
        width:70px !important;
        height:80px !important;
    }

    #official-government-header .official-logo-government img{
        width:68px !important;
        height:68px !important;
        max-width:68px !important;
        max-height:68px !important;
    }

    #official-government-header .official-logo-ministry img{
        width:64px !important;
        height:64px !important;
        max-width:64px !important;
        max-height:64px !important;
    }

    #official-government-header .official-region{
        margin-bottom:3px !important;
        font-size:13px !important;
    }

    #official-government-header .official-ministry,
    #official-government-header .official-directorate,
    #official-government-header .official-section{
        font-size:10px !important;
        line-height:1.45 !important;
    }

    #official-government-header .official-system-title{
        padding:4px 5px 0 !important;
        font-size:12px !important;
        line-height:1.3 !important;
    }

    #official-user-bar{
        min-height:0 !important;
        grid-template-columns:1fr !important;
        justify-items:center !important;
        gap:8px !important;
        padding:9px 10px !important;
        font-size:13px !important;
    }

    #official-user-bar .official-user-name{
        justify-content:center !important;
    }

    #official-user-bar .official-date-time{
        grid-column:auto !important;
        grid-row:auto !important;
        gap:12px !important;
        font-size:12px !important;
    }

    #official-user-bar .official-logout{
        justify-self:center !important;
    }
}