/* Light */
@font-face {
  font-family: 'ItfQomraArabic';
  src:
    url('/assets/moi/fonts/itfQomraArabic-Light.woff') format('woff'),
    url('/assets/moi/fonts/itfQomraArabic-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: 'ItfQomraArabic';
  src:
    url('/assets/moi/fonts/itfQomraArabic-Regular.woff') format('woff'),
    url('/assets/moi/fonts/itfQomraArabic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'ItfQomraArabic';
  src:
    url('/assets/moi/fonts/itfQomraArabic-Bold.woff') format('woff'),
    url('/assets/moi/fonts/itfQomraArabic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
    --forest-color: #054239;
    --forest-dark-color: #002623;
    --forest-light-color: #428177;
    --gold-color: #b9a779;
    --gold-light-color: #edebe0;
    --gold-dark-color: #988561;
    --red-color: #CE1126;
    --umber-color: #4a151e;
    --umber-light-color: #6b1f2a;
    --umber-dark-color: #260f14;
    --charcoal-color: #161616;
    --grey-color: #3d3a3b;
    --white-color: #ffffff;

    --control-bg: color-mix(in srgb, var(--gold-light-color) 30%, transparent) !important;
    --heading-color: var(--charcoal-color);
    --text-neutral: var(--charcoal-color);
    --text-color: var(--forest-dark-color);
    --text-muted: var(--grey-color);
    --text-light: var(--grey-color);
    --text-dark: var(--white-color);
    --fg-hover-color: var(--gold-light-color);
    --sidebar-select-color: var(--gold-light-color);
    --btn-default-bg: var(--gold-light-color);
    --bg-light-gray: color-mix(in srgb, var(--gold-light-color) 20%, transparent) !important;
    --border-primary: color-mix(in srgb, var(--forest-color) 30%, transparent) !important;;
    --control-bg-on-gray: color-mix(in srgb, var(--gold-light-color) 60%, transparent) !important;
    --timeline-badge-bg: color-mix(in srgb, var(--gold-light-color) 60%, transparent) !important;
    --invert-neutral: var(--forest-dark-color);
    --disabled-control-bg: color-mix(in srgb, var(--gold-light-color) 30%, transparent) !important;
    --subtle-fg: var(--gold-light-color);
    --gray-50: var(--gold-light-color);
    --icon-stroke: var(--forest-color);
    --gray-900: var(--forest-dark-color);
    --btn-default-hover-bg: var(--gold-light-color);
    --primary: var(--forest-dark-color);

    --font-arabic-family: 'ItfQomraArabic', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --size-medium: 16px;
    /* optional fallback base */
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --right-arrow: url("data: image/svg+xml;utf8, <svg width='10' height='12' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%23edebe0' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    --left-arrow: url("data: image/svg+xml;utf8, <svg width='10' height='12' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%23edebe0' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
}

body {
  margin: 0;
  padding: 0;

  /* Use your Arabic font by default */
  font-family: var(--font-arabic-family);
  font-weight: var(--font-weight-regular);
}
body:not([data-path="login"]) {
  width: 100%;
  height: auto;
}

a,b,strong,h1,h2,h3,h4,h5,h6,p,span,div,button,label,input,textarea,select {
  font-family: var(--font-arabic-family);
  font-weight: var(--font-weight-bold);
}

.centered.splash {
    background-color: var(--forest-color) !important;
    width: 100%;
    height: 100%;
    margin: -1px;
    padding: 0;
    overflow: hidden;
}

.centered.splash img {
    display: none !important;
}

.centered.splash::after {
    content: "";
    position: absolute;

    width: 200px;
    height: 200px;

    background-image: url("/assets/moi/images/favicon.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 10;
}

#page-error .page_content {
    background-color: var(--white-color);
    padding: 0 14px;
    display: block;
    position: relative;
    border: 1px solid var(--gold-color) !important;
    border-radius: 12px;
    z-index: 20;
}

#page-error .page_content .hljs {
    background-color: var(--gold-light-color) !important;
    color: var(--forest-dark-color);
}

#page-error .page_content .hljs .hljs-string{
    color: var(--gold-color);
}

#page-error .page_content .hljs .hljs-number{
    color: var(--umber-light-color);
}

#page-error .page_content .hljs .hljs-built_in{
    color: var(--forest-light-color);
}

#page-error .page_content p {
    color: var(--forest-dark-color);
}