@font-face { font-family: 'rayat'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../font/rayat.woff2) format('woff2'); }
@font-face { font-family: 'uthman'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../font/uthman.woff2) format('woff2'); }
*{box-sizing: border-box;}
a{text-decoration: none;color: green;}
.mi,mi,[mi],[ico]::before {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
[ico]::before {content: attr(ico);}
body,html {padding: 0;margin: 0;height: 100%;}
body {font-size: 16pt;font-family: 'rayat','traditional arabic';}
main { display: flex; direction: rtl; background: #eed;height: 100%; }
article { flex-grow: 1; padding: 10px;overflow: auto;}
header { background: #ffe; border-radius: 10px 0 0 10px; padding: 10px; box-shadow: -10px 0 10px -14px; margin: 5px 0;display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;}
grw,[grw],.grw{display: block;flex-grow: 1;}
b[type] { display: inline-block; text-align: center; margin: 10px 0; color: green;font-family: 'uthman','rayat','traditional arabic';font-weight: normal;}
md { text-align-last: center; text-align: start; }

::-webkit-scrollbar { height: 6px; width: 6px }
::-webkit-scrollbar-track { background: #eed; border-radius: 6px }
::-webkit-scrollbar-thumb { background: #bba; border-radius: 6px }
::-webkit-scrollbar-thumb:hover { background: #9b9b9b; }
::-webkit-scrollbar-button { display: none; }