:root {
    --color-primary-base: 46 117 163;
    --color-primary-gradient: 36 77 103;
    --color-primary-button-text: 46 117 163;
    --color-primary-button-alternative-text: 255 255 255;

    --color-secondary-base: 243 126 47;
    --color-secondary-gradient: 224 100 16;
    --color-secondary-button-text: 255 255 255;

    --color-tertiary-base: 51 51 51;
    --color-tertiary-gradient: 0 0 0;
    --color-tertiary-button-text: 255 255 255;

    --color-success-base: 119 170 12;
    --color-success-gradient: 83 127 0;
    --color-success-button-text: 255 255 255;

    --color-info-base: 13 123 253;
    --color-info-gradient: 0 84 211;
    --color-info-button-text: 255 255 255;

    --color-warning-base: 245 206 1;
    --color-warning-gradient: 186 152 0;
    --color-warning-button-text: 0 0 0;

    --color-danger-base: 223 59 59;
    --color-danger-gradient: 180 0 21;
    --color-danger-button-text: 255 255 255;

    --color-form-base: 46 117 163;
}
/* ELPROFESSOR_LMS_BRANDING_V1 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

html[lang^="ar"],
html[lang^="ar"] body,
html[lang^="ar"] #app,
html[lang^="ar"] .app-main,
html[lang^="ar"] .app-sidebar,
html[lang^="ar"] .app-topbar,
html[lang^="ar"] input,
html[lang^="ar"] button,
html[lang^="ar"] select,
html[lang^="ar"] textarea {
  font-family: 'Cairo', 'Tajawal', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

html[lang^="ar"] .app-sidebar,
html[dir="rtl"] .app-sidebar,
[dir="rtl"] .app-sidebar {
  left: auto !important;
  right: 0 !important;
  border-right: 0 !important;
  border-left: 1px solid rgb(228 233 237) !important;
}

html[lang^="ar"] .app-main,
html[dir="rtl"] .app-main,
[dir="rtl"] .app-main {
  transition-property: margin-right !important;
}

html[lang^="ar"] .app-main:not(.app-main--no-sidebar),
html[dir="rtl"] .app-main:not(.app-main--no-sidebar),
[dir="rtl"] .app-main:not(.app-main--no-sidebar) {
  margin-left: 0 !important;
  margin-right: 15rem !important;
}

html[lang^="ar"] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
html[dir="rtl"] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
[dir="rtl"] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar) {
  margin-left: 0 !important;
  margin-right: 88px !important;
}

html[lang^="ar"] .app-sidebar__button,
html[dir="rtl"] .app-sidebar__button,
[dir="rtl"] .app-sidebar__button {
  right: auto !important;
  left: -1rem !important;
}

html[lang^="ar"] .app-sidebar .p-panelmenu-header.p-panelmenu-header-active,
html[lang^="ar"] .app-sidebar .p-panelmenu-header:hover {
  border-left-width: 0 !important;
  border-right-width: 4px !important;
}

.platform-logo img,
.platform-logo picture {
  height: 2rem !important;
  max-height: 2rem !important;
  width: auto !important;
}


/* ELPROFESSOR_LMS_BRANDING_V2_START */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@500;700;800&family=Almarai:wght@400;700;800&display=swap');

:root {
  --elp-font-sans: 'Almarai', 'Alexandria', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --elp-font-accent: 'Alexandria', 'Almarai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --elp-bg: #f4f6fa;
  --elp-surface: #ffffff;
  --elp-surface-soft: #f8fafe;
  --elp-border: #d9e2ef;
  --elp-border-strong: #c4d1e4;
  --elp-text: #162641;
  --elp-text-muted: #63728b;
  --elp-shadow: 0 18px 48px rgba(17, 39, 75, 0.1);
  --elp-shadow-soft: 0 12px 24px rgba(17, 39, 75, 0.06);
  --elp-radius-lg: 24px;
  --elp-radius-md: 16px;
  --elp-topbar-height: clamp(3.7rem, 4vw, 4.2rem);
  --elp-shell-offset: calc(var(--elp-topbar-height) + clamp(1.35rem, 2.1vw, 1.8rem));
  --elp-logo-width: clamp(8.75rem, 10vw, 11rem);
  --elp-logo-height: clamp(2rem, 2.4vw, 2.55rem);
  --elp-sidebar-width: 15rem;
  --elp-sidebar-collapsed: 88px;
}

html,
body {
  background: var(--elp-bg);
  color: var(--elp-text);
  font-family: var(--elp-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
option,
label,
legend,
.p-component,
.p-inputtext,
.p-dropdown-label,
.p-select-label,
.p-multiselect-label,
.p-dropdown-item,
.p-select-option,
.p-multiselect-item,
.p-menuitem-text,
.p-button-label,
.p-tabview-title,
.p-panelmenu .p-panelmenu-header-link,
.p-panelmenu .p-menuitem-link,
.p-datatable,
.login-section,
.login-section__subtitle,
.app-topbar,
.app-sidebar,
.app-main {
  font-family: var(--elp-font-sans) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.login-section__title,
.p-card .p-card-title,
.p-dialog .p-dialog-title,
.p-button .p-button-label,
.app-sidebar .p-panelmenu-header-label,
.app-sidebar .p-panelmenu-item-label,
.app-sidebar .p-menuitem-text,
.app-topbar .platform-logo,
.page-title {
  font-family: var(--elp-font-accent) !important;
}

::selection {
  background: rgba(20, 53, 101, 0.14);
  color: var(--elp-text);
}

a {
  color: #143565;
}

a:hover {
  color: #0d2346;
}

body.page-login {
  background:
    radial-gradient(circle at top right, rgba(194, 156, 84, 0.16), transparent 24%),
    radial-gradient(circle at top left, rgba(20, 53, 101, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
}

.login-section {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(196, 209, 228, 0.9) !important;
  border-radius: 32px !important;
  box-shadow: var(--elp-shadow) !important;
  backdrop-filter: blur(14px);
}

body.page-login .login-section::before {
  content: "";
  display: block;
  width: min(18rem, 82%);
  height: 4.5rem;
  margin: 0 auto 1.35rem;
  background: url('/themes/chamilo/images/header-logo.svg?v=20260421') no-repeat center center / contain;
}

body.page-login .login-section__title,
body.page-login .login-section__subtitle {
  text-align: center !important;
}

.login-section__title {
  color: var(--elp-text) !important;
  font-size: clamp(2.15rem, 3.4vw, 3.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 0.9rem !important;
}

.login-section__subtitle,
.text-subtle,
.text-muted-color {
  color: var(--elp-text-muted) !important;
}

.app-topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.96) 100%) !important;
  border-bottom: 1px solid var(--elp-border) !important;
  box-shadow: 0 14px 34px rgba(17, 39, 75, 0.08) !important;
  backdrop-filter: blur(18px);
  min-height: var(--elp-topbar-height);
  padding-inline: clamp(0.65rem, 1.2vw, 1.2rem) !important;
  padding-block: 0.45rem !important;
  gap: 0.85rem;
}

.app-topbar__start,
.app-topbar__items,
.app-topbar__end {
  display: flex;
  align-items: center;
}

.app-topbar__start {
  min-width: fit-content;
  flex: 0 0 auto;
  margin: 0 !important;
}

.app-topbar__items {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.7rem;
}

.app-topbar__end {
  flex: 0 0 auto;
  gap: 0.55rem;
  margin: 0 !important;
}

.platform-logo,
.platform-logo a {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}

.platform-logo {
  max-width: min(100%, 11.5rem);
  overflow: hidden;
}

.platform-logo a {
  width: var(--elp-logo-width) !important;
  max-width: 100% !important;
  height: var(--elp-logo-height) !important;
  background: none !important;
  overflow: hidden;
}

.platform-logo img,
.platform-logo svg,
.platform-logo picture {
  opacity: 1 !important;
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  pointer-events: auto;
}

.platform-logo span,
.platform-logo .font-semibold {
  display: none !important;
}

.user-avatar,
.app-topbar .user-avatar,
.app-topbar button,
.app-topbar .p-button,
.app-topbar .p-link {
  flex-shrink: 0;
}

.app-sidebar {
  background: linear-gradient(180deg, #fbfcff 0%, #f1f5fb 100%) !important;
  border-right: 0 !important;
  border-left: 1px solid var(--elp-border) !important;
  box-shadow: -12px 0 30px rgba(17, 39, 75, 0.05);
  width: var(--elp-sidebar-width) !important;
}

.app-sidebar__container {
  padding: 0.8rem 0.68rem 1rem;
}

.app-sidebar__top {
  font-family: var(--elp-font-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--elp-text-muted);
  padding-inline: 0.55rem;
  margin-bottom: 0.5rem;
}

.app-sidebar .p-panelmenu {
  margin-bottom: 0.34rem;
}

.app-sidebar .p-panelmenu-header-content,
.app-sidebar .p-panelmenu-item-content {
  border-radius: 16px;
}

.app-sidebar .p-panelmenu-header-link,
.app-sidebar .p-menuitem-link {
  border-radius: 14px !important;
  color: var(--elp-text) !important;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  min-height: 2.8rem;
  padding: 0.75rem 0.92rem !important;
  gap: 0.72rem;
}

.app-sidebar .p-panelmenu-header-link:hover,
.app-sidebar .p-menuitem-link:hover {
  background: rgba(20, 53, 101, 0.08) !important;
  color: #123565 !important;
}

.app-sidebar .p-panelmenu-header.p-panelmenu-header-active .p-panelmenu-header-link,
.app-sidebar .p-menuitem-active > .p-menuitem-content > .p-menuitem-link {
  background: rgba(20, 53, 101, 0.1) !important;
  color: #123565 !important;
}

.app-sidebar .p-panelmenu-header-label,
.app-sidebar .p-panelmenu-item-label,
.app-sidebar .p-menuitem-text {
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
}

.app-sidebar .p-panelmenu-header-icon,
.app-sidebar .p-panelmenu-item-icon,
.app-sidebar .p-submenu-icon {
  color: #24456f !important;
  font-size: 1rem;
}

.app-main {
  background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%) !important;
  min-height: 100dvh;
  overflow-x: clip;
  padding: var(--elp-shell-offset) clamp(1rem, 2vw, 1.6rem) 2rem !important;
}

.app-main > * {
  scroll-margin-top: calc(var(--elp-topbar-height) + 1rem);
}

.p-button {
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.p-button:not(.p-button-text):not(.p-button-link) {
  background: linear-gradient(135deg, rgba(20, 53, 101, 1) 0%, rgba(28, 72, 136, 1) 100%) !important;
  border-color: rgba(20, 53, 101, 1) !important;
}

.p-button:not(.p-button-text):not(.p-button-link):hover {
  background: linear-gradient(135deg, rgba(15, 41, 79, 1) 0%, rgba(23, 62, 120, 1) 100%) !important;
  border-color: rgba(15, 41, 79, 1) !important;
}

.p-button.p-button-text,
.p-button.p-button-link {
  color: #143565 !important;
}

.p-inputtext,
.p-dropdown,
.p-select,
.p-multiselect,
textarea {
  background: #fff !important;
  border: 1px solid var(--elp-border-strong) !important;
  border-radius: 14px !important;
  color: var(--elp-text) !important;
  box-shadow: none !important;
}

.p-inputtext:enabled:hover,
.p-dropdown:hover,
.p-select:hover,
.p-multiselect:hover,
textarea:hover {
  border-color: rgba(20, 53, 101, 0.55) !important;
}

.p-inputtext:enabled:focus,
.p-dropdown.p-focus,
.p-select.p-focus,
.p-multiselect.p-focus,
textarea:focus {
  border-color: rgba(20, 53, 101, 0.78) !important;
  box-shadow: 0 0 0 4px rgba(20, 53, 101, 0.12) !important;
}

.p-card,
.p-datatable,
.p-panel,
.p-fieldset,
.p-dialog,
.p-tabview-panels,
.page-login .login-section {
  border-radius: var(--elp-radius-lg) !important;
  box-shadow: var(--elp-shadow-soft) !important;
}

.app-main .p-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--elp-border) !important;
  overflow: hidden;
  border-radius: 28px !important;
}

.app-main .p-card .p-card-body {
  padding: 1.45rem 1.6rem !important;
}

.app-main .p-card .p-card-title {
  color: var(--elp-text) !important;
  font-family: var(--elp-font-accent) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  line-height: 1.3;
}

.app-main .p-card .p-card-content,
.app-main .p-card .p-card-content > div {
  color: var(--elp-text-muted) !important;
  font-size: 1rem;
  line-height: 1.72;
}

.app-main .flex.flex-col.gap-4 {
  gap: 1.25rem !important;
}

.item-button {
  border-radius: 14px;
  color: var(--elp-text) !important;
}

.app-sidebar .p-panelmenu-header-label,
.app-sidebar .p-panelmenu-item-label,
.app-sidebar .p-menuitem-text {
  font-size: 1.02rem !important;
  font-family: var(--elp-font-accent) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.app-sidebar .p-panelmenu-header-link,
.app-sidebar .p-menuitem-link {
  min-height: 3.05rem;
}

.app-main,
.app-main .p-card .p-card-content,
.app-main .p-card .p-card-content > div,
.app-main p,
.app-main li,
.app-main span,
.app-main .text-subtle,
.app-main .text-muted-color {
  font-family: var(--elp-font-sans) !important;
}

.item-button:hover {
  background: rgba(20, 53, 101, 0.08) !important;
}

.user-avatar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 244, 250, 0.96));
  border: 1px solid var(--elp-border);
  box-shadow: var(--elp-shadow-soft);
}

#legacy_content,
.section-content {
  background: transparent !important;
}

.p-datatable .p-datatable-thead > tr > th {
  background: #f5f7fb !important;
  color: var(--elp-text) !important;
  border-color: var(--elp-border) !important;
}

.p-datatable .p-datatable-tbody > tr > td {
  border-color: var(--elp-border) !important;
}

html[lang^='ar'],
html[data-lang^='ar'],
html[dir='rtl'],
body[dir='rtl'],
[dir='rtl'] {
  direction: rtl;
}

html[lang^='ar'] .app-main,
html[data-lang^='ar'] .app-main,
html[dir='rtl'] .app-main,
body[dir='rtl'] .app-main,
[dir='rtl'] .app-main,
html[lang^='ar'] .app-sidebar,
html[data-lang^='ar'] .app-sidebar,
html[dir='rtl'] .app-sidebar,
body[dir='rtl'] .app-sidebar,
[dir='rtl'] .app-sidebar,
html[lang^='ar'] .login-section,
html[data-lang^='ar'] .login-section,
html[dir='rtl'] .login-section,
body[dir='rtl'] .login-section,
[dir='rtl'] .login-section {
  text-align: right;
}

html[lang^='ar'] .app-sidebar,
html[data-lang^='ar'] .app-sidebar,
html[dir='rtl'] .app-sidebar,
body[dir='rtl'] .app-sidebar,
[dir='rtl'] .app-sidebar {
  left: auto !important;
  right: 0 !important;
  border-right: 0 !important;
  border-left: 1px solid var(--elp-border) !important;
}

html[lang^='ar'] .app-main,
html[data-lang^='ar'] .app-main,
html[dir='rtl'] .app-main,
body[dir='rtl'] .app-main,
[dir='rtl'] .app-main {
  transition-property: margin-right !important;
}

html[lang^='ar'] .app-main:not(.app-main--no-sidebar),
html[data-lang^='ar'] .app-main:not(.app-main--no-sidebar),
html[dir='rtl'] .app-main:not(.app-main--no-sidebar),
body[dir='rtl'] .app-main:not(.app-main--no-sidebar),
[dir='rtl'] .app-main:not(.app-main--no-sidebar) {
  margin-left: 0 !important;
  margin-right: var(--elp-sidebar-width) !important;
}

html[lang^='ar'] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
html[data-lang^='ar'] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
html[dir='rtl'] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
body[dir='rtl'] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar),
[dir='rtl'] #app.app--sidebar-inactive .app-main:not(.app-main--no-sidebar) {
  margin-left: 0 !important;
  margin-right: var(--elp-sidebar-collapsed) !important;
}

html[lang^='ar'] .app-sidebar__button,
html[data-lang^='ar'] .app-sidebar__button,
html[dir='rtl'] .app-sidebar__button,
body[dir='rtl'] .app-sidebar__button,
[dir='rtl'] .app-sidebar__button {
  right: auto !important;
  left: -0.85rem !important;
}

html[lang^='ar'] .app-sidebar .p-panelmenu-header.p-panelmenu-header-active,
html[data-lang^='ar'] .app-sidebar .p-panelmenu-header.p-panelmenu-header-active,
html[lang^='ar'] .app-sidebar .p-panelmenu-header:hover,
html[data-lang^='ar'] .app-sidebar .p-panelmenu-header:hover {
  border-left-width: 0 !important;
  border-right-width: 4px !important;
}

html[lang^='ar'] .app-topbar,
html[data-lang^='ar'] .app-topbar,
html[dir='rtl'] .app-topbar,
body[dir='rtl'] .app-topbar,
[dir='rtl'] .app-topbar {
  direction: rtl !important;
  text-align: right !important;
}

html[lang^='ar'] .app-topbar__start,
html[data-lang^='ar'] .app-topbar__start,
html[dir='rtl'] .app-topbar__start,
body[dir='rtl'] .app-topbar__start,
[dir='rtl'] .app-topbar__start {
  order: 3;
  margin-right: 0 !important;
  margin-left: 0.7rem !important;
}

html[lang^='ar'] .app-topbar__items,
html[data-lang^='ar'] .app-topbar__items,
html[dir='rtl'] .app-topbar__items,
body[dir='rtl'] .app-topbar__items,
[dir='rtl'] .app-topbar__items {
  order: 2;
  justify-content: flex-start !important;
}

html[lang^='ar'] .app-topbar__end,
html[data-lang^='ar'] .app-topbar__end,
html[dir='rtl'] .app-topbar__end,
body[dir='rtl'] .app-topbar__end,
[dir='rtl'] .app-topbar__end {
  order: 1;
  margin-right: auto !important;
  margin-left: 0 !important;
}

html[lang^='ar'] .app-main .p-card,
html[data-lang^='ar'] .app-main .p-card,
html[dir='rtl'] .app-main .p-card,
body[dir='rtl'] .app-main .p-card,
[dir='rtl'] .app-main .p-card,
html[lang^='ar'] .app-main .p-card .p-card-body,
html[data-lang^='ar'] .app-main .p-card .p-card-body,
html[dir='rtl'] .app-main .p-card .p-card-body,
body[dir='rtl'] .app-main .p-card .p-card-body,
[dir='rtl'] .app-main .p-card .p-card-body,
html[lang^='ar'] .app-main .p-card .p-card-content,
html[data-lang^='ar'] .app-main .p-card .p-card-content,
html[dir='rtl'] .app-main .p-card .p-card-content,
body[dir='rtl'] .app-main .p-card .p-card-content,
[dir='rtl'] .app-main .p-card .p-card-content,
html[lang^='ar'] #legacy_content,
html[data-lang^='ar'] #legacy_content,
html[dir='rtl'] #legacy_content,
body[dir='rtl'] #legacy_content,
[dir='rtl'] #legacy_content,
html[lang^='ar'] .section-content,
html[data-lang^='ar'] .section-content,
html[dir='rtl'] .section-content,
body[dir='rtl'] .section-content,
[dir='rtl'] .section-content {
  direction: rtl !important;
  text-align: right !important;
}

html[lang^='ar'] .app-main .p-card img,
html[data-lang^='ar'] .app-main .p-card img,
html[dir='rtl'] .app-main .p-card img,
body[dir='rtl'] .app-main .p-card img,
[dir='rtl'] .app-main .p-card img,
html[lang^='ar'] .app-main .p-card picture,
html[data-lang^='ar'] .app-main .p-card picture,
html[dir='rtl'] .app-main .p-card picture,
body[dir='rtl'] .app-main .p-card picture,
[dir='rtl'] .app-main .p-card picture {
  margin-right: 0 !important;
  margin-left: auto !important;
}

@media (max-width: 1280px) {
  :root {
    --elp-shell-offset: calc(var(--elp-topbar-height) + 1.2rem);
    --elp-logo-width: 9.4rem;
    --elp-logo-height: 2.2rem;
  }

  .app-topbar {
    padding-inline: 0.8rem !important;
  }
}

@media (max-width: 1024px) {
  .app-topbar {
    min-height: 3.7rem;
    padding-inline: 0.72rem !important;
  }

  .platform-logo a {
    width: 8.5rem !important;
    height: 2rem !important;
  }

  html[lang^='ar'] .app-main:not(.app-main--no-sidebar),
  html[data-lang^='ar'] .app-main:not(.app-main--no-sidebar),
  html[dir='rtl'] .app-main:not(.app-main--no-sidebar),
  body[dir='rtl'] .app-main:not(.app-main--no-sidebar),
  [dir='rtl'] .app-main:not(.app-main--no-sidebar) {
    margin-right: 0 !important;
  }

  .app-main {
    padding: calc(var(--elp-topbar-height) + 1rem) 0.9rem 1.6rem !important;
  }
}

@media (max-width: 768px) {
  .app-topbar {
    min-height: 3.45rem;
    padding-inline: 0.6rem !important;
    gap: 0.5rem;
  }

  .app-topbar__items {
    gap: 0.45rem;
  }

  .platform-logo {
    max-width: 7.75rem;
  }

  .platform-logo a {
    width: 7.75rem !important;
    height: 1.85rem !important;
  }

  .app-main {
    padding: calc(var(--elp-topbar-height) + 0.85rem) 0.75rem 1.3rem !important;
  }

  .app-main .p-card .p-card-body {
    padding: 1.2rem 1.1rem !important;
  }
}
/* ELPROFESSOR_LMS_BRANDING_V2_END */