﻿@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
:root {
  --colors-title: #161616;
  --colors-text: #161616;
  --text: #161616;
  --white: #ffffff;
  --primary-25: #f7fdf9;
  --primary-50: #f3fcf6;
  --primary-100: #dff6e7;
  --primary-200: #b8eacb;
  --primary-300: #88d8ad;
  --primary-400: #54c08a;
  --primary-500: #25935f;
  --primary-600: #1b8354;
  --primary-700: #166a45;
  --primary-800: #14573a;
  --primary-900: #104631;
  --primary-950: #092a1e;
  --neutral-25: #fcfcfd;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d2d6db;
  --neutral-400: #9da4ae;
  --neutral-500: #6c737f;
  --neutral-600: #4d5761;
  --neutral-700: #384250;
  --neutral-800: #1f2a37;
  --neutral-900: #111927;
  --neutral-950: #0d121c;
  --spacing-unit-50: 2px;
  --spacing-unit-1: 4px;
  --spacing-unit-2: 8px;
  --spacing-unit-3: 12px;
  --spacing-unit-4: 16px;
  --spacing-unit-5: 20px;
  --spacing-unit-6: 24px;
  --spacing-lg-1: 20px;
  --spacing-lg-2: 40px;
  --spacing-lg-3: 60px;
  --spacing-lg-4: 80px;
  --spacing-lg-5: 100px;
  /* btns - links */
  --tp-btn-primary: #dff6e7;
  --tp-btn-text-primary: #ffffff;
  --tp-btn-primary-hovered: #b8eacb;
  --tp-btn-primary-active: #88d8ad;
  --tp-primary-disabled-color: #9da4ae;
  --tp-btn-primary2: #0b8e39;
  --tp-btn-primary2-active: #14573a;
  --tp-btn-primary2-hovered: #166a45;
  --tp-secondary-disabled-back: transparent;
  --tp-secondary-disabled-color: #9da4ae;
  --tp-btn-neutral-back: #0d121c;
  --tp-btn-neutral-hover: #1f2a37;
  --tp-btn-neutral-active: #4d5761;
  --tp-btn-neutral-focus: #0d121c;
  --tp-neutral-disabled-back: transparent;
  --tp-neutral-disabled-color: #9da4ae;
  --spacing-none: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;
  --colors-gold-25: #fffef7;
  --colors-gold-50: #fffef2;
  --colors-gold-100: #fffce6;
  --colors-gold-200: #fcf3bd;
  --colors-gold-300: #fae996;
  --colors-gold-400: #f7d54d;
  --colors-gold-500: #f5bd02;
  --colors-gold-600: #dba102;
  --colors-gold-700: #b87b02;
  --colors-gold-800: #945c01;
  --colors-gold-900: #6e3c00;
  --colors-gold-950: #472400;
  --colors-error-25: #fffbfa;
  --colors-error-50: #fef3f2;
  --colors-error-100: #fee4e2;
  --colors-error-200: #fecdca;
  --colors-error-300: #fda29b;
  --colors-error-400: #f97066;
  --colors-error-500: #f04438;
  --colors-error-600: #d92d20;
  --colors-error-700: #b42318;
  --colors-error-800: #912018;
  --colors-error-900: #7a271a;
  --colors-error-950: #55160c;
  --colors-warning-25: #fffcf5;
  --colors-warning-50: #fffaeb;
  --colors-warning-100: #fef0c7;
  --colors-warning-200: #fedf89;
  --colors-warning-300: #fec84b;
  --colors-warning-400: #fdb022;
  --colors-warning-500: #f79009;
  --colors-warning-600: #dc6803;
  --colors-warning-700: #b54708;
  --colors-warning-800: #93370d;
  --colors-warning-900: #7a2e0e;
  --colors-warning-950: #4e1d09;
  --colors-info-25: #f5faff;
  --colors-info-50: #eff8ff;
  --colors-info-100: #d1e9ff;
  --colors-info-200: #b2ddff;
  --colors-info-300: #84caff;
  --colors-info-400: #53b1fd;
  --colors-info-500: #2e90fa;
  --colors-info-600: #1570ef;
  --colors-info-700: #175cd3;
  --colors-info-800: #1849a9;
  --colors-info-900: #194185;
  --colors-info-950: #102a56;
  --colors-success-25: #f6fef9;
  --colors-success-50: #ecfdf3;
  --colors-success-100: #dcfae6;
  --colors-success-200: #abefc6;
  --colors-success-300: #75e0a7;
  --colors-success-400: #47cd89;
  --colors-success-500: #17b26a;
  --colors-success-600: #079455;
  --colors-success-700: #067647;
  --colors-success-800: #085d3a;
  --colors-success-900: #074d31;
  --colors-success-950: #053321;
  --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%);
  --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%);
  --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
  --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
  --gradient-brand-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-brand-600) 0%, var(--colors-brand-700) 100%);
  --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%);
  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
  --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
}
/* From HF */
body {
  font-family: 'IBM Plex Sans Arabic', serif;
  font-weight: 500;
  font-style: normal;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 24px;
}
* {
  box-sizing: border-box;
}
.blindness {
  filter: grayscale(100%);
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
a {
  text-decoration: none;
  color: var(--text);
}
/* End From HF */
.btn {
  font-size: 100%;
}
.path {
  display: block;
  width: 100%;
  padding: 2rem 0 1rem 0;
  font-size: 14px;
  background-color: var(--primary-25);
  border: unset;
}
.path a.path-item:hover {
  text-decoration: underline !important;
}
.path_arrow {
  rotate: 90deg;
}
.path span {
  color: var(--neutral-500);
}
/* Buttons */
a.tp-link,
button.tp-link {
  display: inline-flex;
  border-radius: 4px !important;
  font-size: 1rem !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--neutral-100);
  color: var(--colors-text);
  text-decoration: none;
  border: 1px solid var(--neutral-100);
  font-weight: 600;
  padding: 8px 16px !important;
  padding-inline: 16px;
  vertical-align: top;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  font-size: 90% !important;
  height: max-content !important;
}
a.tp-link:hover,
button.tp-link:hover {
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
}
a.tp-link:focus-visible,
button.tp-link:focus-visible {
  background: transparent;
  border: 1px solid transparent;
  outline: 2px solid #000;
}
a.tp-link:active,
button.tp-link:active {
  background: var(--neutral-200);
  border: 1px solid var(--neutral-200);
}
a.tp-link:disabled .link-icon,
button.tp-link:disabled .link-icon,
a.disabled .link-icon,
a.secondary-disabled .link-icon {
  opacity: 0.4;
}
a.tp-link:disabled .link-text-icon,
button.tp-link:disabled .link-text-icon,
a.disabled .link-text-icon,
a.secondary-disabled .link-text-icon {
  opacity: 0.4;
}
a.tp-link .link-icon,
button.tp-link .link-icon {
  width: 24px;
  height: 24px;
}
a.tp-link .link-text-icon,
button.tp-link .link-text-icon {
  width: 24px;
  height: 24px;
}
#Hero-Section a.tp-link,
#Hero-Section button.tp-link {
  font-size: 16px;
  margin: 10px 0 0 10px;
}
a.tp-link-Primary,
button.tp-link-Primary {
  background-color: var(--primary-600);
  color: var(--tp-btn-text-primary);
  border-color: var(--primary-600);
}
a.tp-link-Primary:hover,
button.tp-link-Primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}
a.tp-link-Primary:focus-visible,
button.tp-link-Primary:focus-visible {
  background-color: var(--primary-600);
  color: var(--tp-btn-text-primary);
  outline: 2px solid #000;
}
a.tp-link-Primary:active,
button.tp-link-Primary:active {
  background: var(--primary-900);
  border-color: var(--primary-900);
}
a.tp-link-secondary,
button.tp-link-secondary {
  background-color: transparent;
  color: var(--text);
  border-color: var(--neutral-300);
}
a.tp-link-secondary:hover,
button.tp-link-secondary:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-200);
}
a.tp-link-secondary:focus-visible,
button.tp-link-secondary:focus-visible {
  background-color: transparent;
  border-color: #fff;
  outline: 2px solid #000;
}
a.tp-link-secondary:active,
button.tp-link-secondary:active {
  background: var(--neutral-200);
  border-color: var(--neutral-300);
}
a.tp-link-secondary:disabled,
button.tp-link-secondary:disabled,
a.secondary-disabled {
  background: var(--tp-secondary-disabled-back) !important;
  color: var(--tp-secondary-disabled-color) !important;
  border-color: var(--neutral-200) !important;
  cursor: auto;
}
a.tp-link-subtle,
button.tp-link-subtle {
    color: var(--text);
    background-color: transparent;
    border-color: transparent;
}
a.tp-link-subtle:hover,
button.tp-link-subtle:hover {
    color: var(--text);
    background-color: var(--neutral-100);
    border-color: transparent;
}
a.tp-link-subtle:focus-visible,
button.tp-link-subtle:focus-visible {
    color: var(--text);
    background-color: transparent;
    border-color: transparent;
    outline: 2px solid #000;
}
a.tp-link-subtle:active,
button.tp-link-subtle:active {
    background-color: var(--neutral-200);
    border-color: transparent;
}
a.tp-link-neutral,
button.tp-link-neutral {
  background-color: var(--tp-btn-neutral-back);
  color: #ffffff;
  border-color: var(--tp-btn-neutral-back);
}
a.tp-link-neutral:hover,
button.tp-link-neutral:hover {
  background-color: var(--tp-btn-neutral-hover);
  border-color: var(--tp-btn-neutral-hover);
}
a.tp-link-neutral:focus-visible,
button.tp-link-neutral:focus-visible {
  background-color: var(--tp-btn-neutral-focus);
  border-color: #ffffff;
  outline: 2px solid #000;
}
a.tp-link-neutral:active,
button.tp-link-neutral:active {
  background: var(--tp-btn-neutral-active);
  border-color: var(--tp-btn-neutral-active);
}
a.tp-link-neutral:disabled,
button.tp-link-neutral:disabled {
  background: var(--tp-neutral-disabled-back) !important;
  color: var(--tp-neutral-disabled-color) !important;
  border-color: var(--neutral-200) !important;
  cursor: auto;
}
a.tp-link:disabled,
button.tp-link:disabled,
.disabled {
  background: var(--neutral-200) !important;
  color: var(--tp-primary-disabled-color) !important;
  border: 1px solid var(--neutral-200) !important;
  cursor: auto !important;
}
a.tp-inline-link {
    color: var(--primary-600);
    text-decoration: none;
    padding-inline: 8px;
    outline: none;
}
a.tp-inline-link img {
    height: 16px;
    margin-bottom: 3px;
}
a.tp-inline-link:hover {
    color: var(--primary-400);
    text-decoration: underline;
   
}
a.tp-inline-link:focus-visible {
    color: var(--primary-600);
    outline: 2px solid #000;
    text-decoration: underline;
}
a.tp-inline-link:active {
    color: var(--primary-300);
    text-decoration: underline;  
}
a.tp-inline-link:visited {
    color: var(--primary-800);
    text-decoration: none;   
}
a.tp-inline-link:disabled {
    color: var(--neutral-400);
    text-decoration: none;
}
.tp-link-icon-only {
  padding: 8px !important;
}
.tp-link-iconbtn {
  padding: 8px !important;
}
.tp-banner-sec-link a.tp-link,
.tp-banner-sec-link button.tp-link {
  font-size: 16px;
  margin: 10px 0 0 10px;
}
.mr-4 {
  margin-right: 1rem;
}
.filter-section {
  width: 315px;
  float: right;
}
.courses-left {
  width: calc(100% - 315px);
  float: left;
}
/* Form */
.form-control {
	background: linear-gradient(#161616, #161616),linear-gradient(white, white);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 0 3px,auto;
	border-color: var(--neutral-400) !important;
	transition:  .2s ease-in-out;
    padding: .375rem .75rem !important;
}
.form-control:hover {
    border-color: var(--neutral-700) !important;
}
.form-control.is-invalid, .form-control.is-valid, textarea.form-control.is-invalid, textarea.form-control.is-valid{
	background-size: 0% 3px,auto;
	transition:  .2s ease-in-out;
	box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.06), 0px 4px 8px rgba(16, 24, 40, 0.1) !important;
	background-image: linear-gradient(#161616, #161616),linear-gradient(white, white);
	background-position: bottom;
}
.form-control.is-invalid{
	border-color: var(--colors-error-700) !important;
}
.form-control:focus {
    background-size: 100% 3px,auto !important;
    transition:  .2s ease-in-out;
    border-color:var(--neutral-400);
    box-shadow: 0px 2px 4px rgba(16, 24, 40, 0.06), 0px 4px 8px rgba(16, 24, 40, 0.1) !important;
    background-image: linear-gradient(#161616, #161616),linear-gradient(white, white);
    background-position: bottom;
}
.form-control:active {
    background: linear-gradient(#161616, #161616),linear-gradient(#F3F4F6,#F3F4F6);
    background-size: 100% 3px,auto;
    background-repeat: no-repeat;
    background-position: bottom center;
}
.form-control.is-invalid:focus{
	background-image: linear-gradient(var(--colors-error-700), var(--colors-error-700)),linear-gradient(white, white);
}
.form-control.is-invalid:active{
	background-image: linear-gradient(var(--colors-error-700), var(--colors-error-700)),linear-gradient(#F3F4F6,#F3F4F6);
}
.invalid-feedback {
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23B42318'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23B42318' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 15px;
    color: var(--colors-error-700);  
}
.text-danger {
    color: var(--colors-error-700) !important;
}
/* Checkbox *//* Radio */
.form-check {
    padding: 0 !important;
    padding-inline-start: 1.24px;
    display: flex !important;
    padding: .5rem !important;
    margin: 0;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5rem;
    margin-right: 1rem;
}
.form-check-input {
    position: relative;
    --bs-form-check-bg: #fff;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--neutral-500);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border-radius: 2px !important;
    
}
.form-check-input:active {
    filter: none !important;
}
.form-check-input:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: var(--neutral-100);
    z-index: -1;
    transition: all .2s ease-in-out;
    border: none;
}
.form-check-input:checked {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
}
.form-check-input:checked:hover {
    background-color:var(--primary-900) !important;
    border-color: var(--primary-900) !important;
}
.form-check-input:checked:focus {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    outline: 0;
    box-shadow: none;
}
.form-check-input:focus {
    border: 1px solid var(--neutral-500);
    outline: 0;
    box-shadow: none;
}
.form-check-input:focus-visible::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 2px;
    background-color: #fff;
    outline: 3px solid #161616 !important;
    z-index: -2;
    transition: all .2s ease-in-out;
}
.form-check-label {
    vertical-align: super;
    margin-inline-start: 5px;
    font-weight: 500;
    white-space: normal;
    padding-top: 2px;
    padding-right: 8px
}
.form-check-input[type=radio] {
    border-radius: 50% !important;
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 4 4'><circle r='2' fill='%23fff'/><circle r='1.3' fill='%231B8354'/></svg>") !important;
}
.form-check-input:checked[type=radio]:hover {
    --bs-form-check-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 4 4'><circle r='2' fill='%23fff'/><circle r='1.3' fill='%2314573A'/></svg>") !important;
}
/* dropdown*/
.dropdown-toggle {
  border: 1px solid #dee2e6 !important;
  border-radius: 4px;
  padding: 0.5rem !important;
  font-size: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  line-height: 1.5;
}
.dropdown-toggle:hover {
  border-color: #c4c4c4;
}
.dropdown-toggle:focus {
  box-shadow: none;
}
.dropdown-toggle::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  z-index: 2;
}
.dropdown-toggle.is-invalid::before{
	background-color: var(--colors-error-700);
}
.dropdown-toggle.show::before {
  transform: scaleX(1);
}
.dropdown-toggle::after {
  margin-right: auto;
  margin-left: 0;
  border: none;
  content: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.60372 8.55529C6.7256 8.71666 7.08951 9.1984 7.30624 9.47611C7.74031 10.0323 8.33342 10.7714 8.97323 11.5083C9.61627 12.2489 10.2918 12.9702 10.8919 13.5005C11.1928 13.7663 11.4571 13.9684 11.6753 14.0999C11.8804 14.2235 12.0016 14.2493 12.0016 14.2493C12.0016 14.2493 12.1192 14.2235 12.3244 14.0999C12.5425 13.9684 12.8068 13.7663 13.1078 13.5005C13.7079 12.9702 14.3834 12.2489 15.0264 11.5083C15.6662 10.7714 16.2593 10.0323 16.6934 9.47608C16.9101 9.19837 17.2735 8.7173 17.3954 8.55593C17.6411 8.22241 18.1111 8.15047 18.4446 8.3961C18.7781 8.64173 18.8494 9.11123 18.6037 9.44476L18.6018 9.4473C18.474 9.61655 18.0971 10.1156 17.8759 10.3989C17.4321 10.9677 16.8216 11.7286 16.1591 12.4917C15.4997 13.2511 14.7741 14.0298 14.101 14.6245C13.7653 14.9212 13.425 15.1879 13.0988 15.3845C12.7932 15.5687 12.4063 15.75 11.9998 15.75C11.5933 15.75 11.2064 15.5687 10.9008 15.3845C10.5747 15.1879 10.2344 14.9212 9.89869 14.6245C9.22557 14.0298 8.4999 13.2511 7.84058 12.4917C7.17803 11.7286 6.5676 10.9677 6.12372 10.399C5.90243 10.1154 5.52551 9.61637 5.39793 9.44747L5.39628 9.44528C5.15064 9.11176 5.22154 8.64179 5.55506 8.39615C5.88857 8.15053 6.35808 8.22179 6.60372 8.55529Z' fill='currentColor'/%3e%3c/svg%3e");
  display: inline-block;
  width: 24px;
  height: 24px;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform 0.3s ease;
  vertical-align: middle;
}
.dropdown-toggle.show::after {
  transform: scaleY(-1);
}
.dropdown-menu {
  border-radius: 4px;
  border: 1px solid #eee;
  margin-top: 4px !important;
  padding: 0.5rem;
}
.dropdown-item {
  padding: 0.5rem;
  text-align: right;
  transition: all 0.2s;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-item:hover {
  background-color: #f3f4f6;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: transparent;
  color: #000;
}
.dropdown-item.active::after {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3e%3cpath d='M16.9166 5.5L7.74992 14.6667L3.58325 10.5' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  color: #000;
}
/* Slick */
.slick-dotted.slick-slider {
  text-align: center;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li.slick-active button {
  background: var(--neutral2);
}
.slick-dots li button {
  background: var(--neutral-200);
  border-radius: 4px;
}
.slick-dots {
  bottom: -48px;
}
.slick-dots li button:hover {
  background: var(--neutral-300);
}
.slick-dots li.slick-active button {
  background: var(--primary-600);
}
.slick-dots li button:before {
  font-size: 0;
}
.slick-sub-div {
    width: 100%; 
    padding:0 1rem;
}
body {
  color: var(--colors-text);
}
.page-title {
  color: var(--colors-title);
  font-weight: 900;
  font-size: 170%;
  line-height: normal;
  background-color: var(--primary-25);
  padding: 1rem 0;
  margin-bottom: 2rem;
}
.page-top-section {
  padding: 0 0 4rem 0;
}
.page-section {
  padding: 4rem 0;
}
.section-title {
  display: flex;
}
.section-title h2 {
  color: var(--colors-title);
  font-weight: 800;
  font-size: 150%;
  line-height: normal;
  margin-bottom: 2rem;
}
.item-title {
  color: var(--colors-title);
  font-weight: 800;
  font-size: 105%;
  line-height: normal;
  padding: 0;
}
.sub-text {
  color: var(--neutral-600);
}
.light-text {
  color: var(--neutral-400);
}
.neutral-back {
  background-color: var(--neutral-600);
}
.primary-back {
  background-color: var(--primary-600);
}
.primary-back-light {
  background-color: var(--primary-50);
}
.neutral-back-light {
  background-color: var(--neutral-50);
}
.card {
  padding: 1rem;
  width: 296px;
  width: calc(100% - 1rem);
  text-align: right;
  max-width: 400px;
  border-radius: 1rem;
  margin: 0.5rem;
  display: inline-block;
  border: 1px solid var(--neutral-300);
}
.courses-sec .card,
.publications-sec .card,
.e-services-sec .card {
  width: 296px;
}
.courses-sec .card-img img {
  width: 100%;
  border-radius: 0.5rem;
  height: 174px;
}
.card:hover {
  /*
box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
background-color:var(--neutral-50);
border: 1px solid var(--neutral-300);
*/
}
.card-icon {
  background-color: var(--primary-50);
  width: 56px;
  height: 56px;
  padding: 14px;
  margin-bottom: 1rem;
  border-radius: 1rem;
}
.card-icon img {
  height: 28px;
  width: 28px;
}
.card-img {
  width: 100%;
  height: auto;
  padding: 0;
  margin-bottom: 1.5rem;
  /* border-radius: 0.25rem; */
}
.card-img img {
  width: 100%;
  border-radius: 0.5rem;
}
.publications-sec .card .card-img {
  text-align: center;
}
.publications-sec .card .card-img img {
  width: auto;
  height: 190px;
  border: 1px solid var(--neutral-200);
}
.card-title {
  color: var(--neutral-800);
  font-weight: 800;
  font-size: 110%;
  line-height: 30px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  height: 58px;
}
.card-text {
  height: 72px;
  margin-bottom: 1.5rem;
  color: var(--neutral-800);
  text-align: justify;
  overflow: hidden;
}
.card-tag {
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}
.card-tag span {
  background-color: var(--neutral-50);
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--neutral-200);
  color: var(--neutral-800);
  border-radius: 0.25rem;
  line-height: 14px;
}
.card-tag span.green-tag {
  background-color: #ecfdf3;
  border: 1px solid #abefc6;
  color: #085d3a;
}
.card-tag span img {
  height: 12px;
  margin-left: 4px;
}
.event_location {
  text-align: top;
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/location.svg);
  background-repeat: no-repeat;
  background-position: right 2px;
  padding-right: 32px;
  height: 48px;
  margin-bottom: 1rem;
}
.events-sec .card-tag {
  margin-bottom: 0;
}
.card-tag span {
  margin-bottom: 0.5rem;
  display: inline-block;
}
span.event_location {
  display: block;
  width: max-content;
  max-width: 100%;
}
.tag-mediume {
  padding: 0.25rem 0.75rem !important;
  font-size: 1rem;
  line-height: 24px !important;
  font-weight: 500;
}
span.tag-mediume img {
  width: 18px !important;
  height: 18px !important;
}
.card-news {
  width: 100%;
  max-width: 100%;
}
.card-news .card-img {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.card-events {
  padding: 1rem;
  background-color: var(--neutral-50);
  border-color: #fff;
  text-align: justify;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--neutral-200);
}
.card-events:hover {
  background-color: #fff;
  box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px;
}
.card-events .card-img {
  overflow: hidden;
  border-radius: 0.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
}
.card-events .card-img img {
  width: 100%;
}
.card-events .card-title {
  height: 93px;
  overflow: hidden;
  text-align: justify;
}
.course_filter {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: flex-end;
  padding-bottom: 20px;
}
.news-item {
  padding: 0.75rem 1.5rem;
}
.events-item {
  padding: 0.75rem 1.5rem;
}
.icon-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.packages {
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--neutral-200);
  background-color: var(--neutral-50);
  border-color: #fff;
}
.packages .title {
  padding-bottom: 1.5rem;
  font-size: 180%;
  color: var(--primary-600);
  line-height: normal;
}
.request_course {
  padding: 1.5rem;
  margin-top: 2rem;
  border-radius: 1rem;
  font-size: 120%;
  text-align: right;
  border: 1px solid #dee2e6;
}
.request_course a {
  display: block;
  margin-top: 1.5rem;
}
.filter-title {
  color: white;
  background-color: var(--neutral-600);
  padding: 1rem;
  border-radius: 0.25rem;
  font-size: 120%;
}
.filter-sub-title {
  background-color: var(--neutral-50);
  padding: 0.75rem;
  border-radius: 0.25rem;
  margin: 1rem 0 0 0;
}
.filter-items {
  border: 1px solid var(--neutral-300);
  /*min-height: 800px;*/
  border-radius: 0.25rem;
  margin-top: 0.25rem;
  border-color: #fff;
}
.filter-sub-items {
  border: 1px solid var(--neutral-100);
  border-radius: 0.25rem;
  padding: 0.75rem;
}
.filter-btns {
  padding: 1.25rem 0;
}
button.filter-close {
  display: none;
}
a.footer-sec-link {
  font-size: 100%;
}
.footer-sec-title {
  font-size: 120%;
}
.footer-sublinks a {
  font-size: 90%;
}
span.card-title {
  margin-bottom: 1.5rem;
  display: block;
  height: auto;
}
.course_img img {
  max-width: 300px;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
.filter-open {
  display: none !important;
}
.sdad-chanel img {
  height: 20px;
}
/* update */
.publications-sec .card .card-img img {
  width: auto;
  height: 190px;
  border: 1px solid var(--neutral-200);
}
.icon-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.form-row .form-radio input[type='radio']:checked {
  border: 3px solid #ffffff !important;
  outline: 1px solid var(--primary-600) !important;
}
.form-row-neutral .form-radio input[type='radio']:checked {
  border: 3px solid #ffffff !important;
  outline: 1px solid var(--neutral-950) !important;
}
/* all pages */
.page-title a,
.page-title button {
  font-size: 1rem !important;
}
.page-title h1{
  font-weight: 900 !important;
  font-size: 100% !important;
  padding-bottom: 1rem;
}
.space-y {
  line-height: 30px;
}
.course-term {
  padding: 1rem;
}
.course-term-title img {
  margin-left: 0.5rem;
}
.data_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  width: 100% !important;
}
.data_table thead th {
  padding: 0.5rem 1rem;
  font-size: 14px;
  color: var(--neutral-700);
  font-weight: 500;
  line-height: 30px;
  border: 0.5px solid var(--neutral-300);
  background: var(--neutral-100);
}
.data_table tr {
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
}
.data_table tbody td {
  height: 64px;
  color: var(--text);
  padding: 0.5rem 1rem;
  border: 0.5px solid var(--neutral-300);
}
.data_table tr:nth-child(even) {
  background-color: #f5f5f6;
}
.data_table tr:hover {
  background-color: var(--neutral-50);
}
.data_table thead th:first-child {
  border-radius: 0 8px 0 0;
}
.data_table thead th:last-child {
  border-radius: 8px 0 0 0;
}
.data_table tbody tr:last-child td:last-child {
  border-bottom-left-radius: 8px;
}
.data_table tbody tr:last-child td:first-child {
  border-bottom-right-radius: 8px;
}
.add-basket {
  display: block;
  text-align: left;
  margin: 1rem 0;
}
.opinion-box {
  padding: 1rem;
  width: 100%;
  text-align: right;
  border-radius: 1rem;
  margin-bottom: 1rem;
  display: block;
  border: 1px solid var(--neutral-300);
}
.opinion-text {
  border-top: 0.5px solid var(--neutral-300);
  padding-top: 1rem;
  margin-top: 1rem;
  color: var(--neutral-600);
}
/* Course page */
.Course-Detail-R {
  display: inline-block;
  width: 75%;
}
.Course-Detail-L {
  display: inline-block;
  width: 25%;
}
.Course-Detail-L .card:hover {
  box-shadow: none;
  background-color: transparent;
  border: 1px solid var(--neutral-300);
}
.Course-Detail-R-From-L {
  display: none;
}
.Course-Detail-R .card-img img {
  width: 100%;
  max-width: 400px;
}
.Course-left-card {
  width: 100%;
  padding: 24px;
}
.course-term-title {
  padding-bottom: 0.5rem;
}
.course_main_table {
  width: 100%;
  min-width: 720px;
}
/* Services page */
.Service-Detail-R {
  display: inline-block;
  width: 75%;
}
.Service-Detail-L {
  display: inline-block;
  width: 25%;
  margin-top: -252px;
}
.Service-Detail-L .card:hover {
  box-shadow: none;
  background-color: #fff;
  border: 1px solid var(--neutral-300);
}
.Service-Detail-R-From-L {
  display: none;
}
.Service-Detail-R .card-img img {
  width: 100%;
  max-width: 300px;
}
.Service-left-card {
  width: 100%;
  padding: 40px;
  margin: 0;
}
.feedback-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.feedback-card:hover {
  background-color: transparent;
  box-shadow: none;
}
.rating-container {
  padding: 10px 0;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0;
  margin: 4rem 0 0.5rem 0;
}
.rating-btn {
  text-align: left;
}
.rating-div {
  color: var(--primary-600);
  text-align: center;
  font-size: 24px;
}
.rating-div-sm {
  color: var(--primary-600);
  text-align: center;
  font-size: 16px;
}
.rating-text {
  color: var(--neutral-500);
}
.rating-done {
  color: var(--primary-600);
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/done.svg);
  background-repeat: no-repeat;
  background-position: right bottom;
  padding-right: 30px;
  padding-top: 8px;
  display: inline-block;
}
.star {
	position: relative;
	display: inline-block;
	color: #d3d3d3;
	font-size: inherit;
}
.half {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    color: var(--primary-600);
}
.side-item a {
  color: var(--primary-700);
}
.side-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.side-item-icon {
  width: 24px;
}
.side-item-icon img {
  width: 24px;
}
.side-item-data {
}
.hr-space {
  display: block;
  background-color: var(--neutral-200);
  height: 1px;
  margin: 1rem 0;
}
/* Tabs */
.nav-pills {
  gap: 3px;
  border-bottom: 3px solid var(--neutral-200);
  height: 48px;
  min-width: max-content;
}
.responsive-sec {
  width: 100%;
  overflow-x: auto;
}
.nav-pills li button {
  display: block;
  color: var(--neutral-700);
  font-size: 14px;
  font-weight: 400;
  padding: 12px 16px 12px 16px;
  border-radius: 0.25rem;
}
.nav-pills li button span {
  padding: 0 0 10px 0;
}
.nav-pills li button:hover {
  color: var(--text);
  background-color: var(--neutral-100);
}
.nav-pills li button:hover span {
  border-bottom: 3px solid var(--colors-text);
}
.nav-pills .nav-link.active {
  background-color: transparent;
  color: var(--text);
  font-weight: 500;
}
.nav-pills .nav-link.active span {
  border-bottom: 3px solid var(--primary-600);
}
.nav-pills li button:focus {
  background-color: var(--neutral-200);
}
.nav-pills li button:focus-visible {
  border: 2px solid var(--neutral-950) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* start accordion  */
.accordion-button:hover {
  background-color: var(--neutral-100);
}
.accordion-button:not(.collapsed):hover {
  background-color: var(--neutral-100);
}
.accordion-button:active {
  background-color: var(--neutral-200) !important;
  outline: none;
}
.accordion-button.collapsed {
  border-bottom-width: 0;
  font-weight: 700;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button:focus-visible {
  border: 2px solid var(--text);
}
.accordion-button:not(.collapsed) {
  font-weight: 700;
  background-color: #ffffff;
  color: var(--text);
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  outline: 0;
}
.accordion-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
.accordion-item {
  border-bottom: 1px solid var(--neutral-300);
}
.accordion-flush > .accordion-item:last-child {
  border-bottom: 1px solid var(--neutral-300);
}
.accordion-button {
  display: flex;
  padding: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  line-height: 1.6;
}
.accordion-button::after {
  background-size: auto;
  outline: 0;
  margin-left: 0;
  width: 12px;
  height: 12px;
}
.accordion-body {
  color: var(--neutral-700);
  font-weight: 400;
  padding: 8px 16px 24px 48px;
}
/* end accordion  */
/* publications details */
.pub-img {
  margin-bottom: 1rem;
}
.pub-img img {
  display: block;
  width: 100%;
  padding: 2px;
  border: 1px solid #dadee2;
  max-width: 380px;
}
.pub-price {
  display: block;
  margin: 0 0 1rem 0;
  color: var(--neutral-500);
}
.pub-price span.price {
  font-size: 3rem;
  color: var(--primary-600);
}
.pub-price img {
  margin-top: -37px;
}
hr{
	margin:0 14px;
	border-top: 2px solid var(--primary-600) !important;
	opacity: 1;
	border: unset;
}
/* end publications details */
/* news details */
.news-details-img {
  padding: 0 1rem;
  text-align: center;
}
.news-details-img img {
  width: 450px;
  max-width: 100%;
  max-height: 500px;
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--neutral-300);
}
/* end new details */
/* share button */
.shareon>*{
	height: 24px !important;
	min-width: 16px !important;
	background-color: #f8f8fb !important;
}

.shareon>:hover{
    background-color: #fff !important;
    opacity: 1 !important;
}

.shareon>.twitter:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/x-twitter.svg) !important;
}

.shareon>.whatsapp:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/whatsapp.svg) !important;
}

.shareon>.facebook:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/facebook.svg) !important;
}

.shareon>.linkedin:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/linkedin.svg) !important;
}

.shareon>.telegram:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/telegram.svg) !important;
}
.shareon>.copy-url:before{
	background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/copy-link.svg) !important;
}
.dropdown .dropdown-menu.show{
	display: block !important;
}
/* end share button */
/* Start corporate-training */
.corporate-card {
  padding: 0;
  max-width: 100%;
  width: 100%;
}
.corporate-card-text {
  font-weight: 400;
}
.corporate-span-title {
  color: var(--primary-800);
  font-weight: 600;
  display: inline-block;
}
.corporate-span {
  display: block;
  margin: 1rem 0;
}
.corporate-card-link {
  text-align: left;
  margin-bottom: 0;
}
/* End corporate-training */
.light-back {
  background-color: var(--neutral-50);
}
/* Start Help-Support */
.support-card {
  padding: 0;
}
.support-card-text {
  font-weight: 400;
}
.support-span-title {
  color: var(--primary-800);
  font-weight: 600;
  display: inline-block;
}
.support-span {
  display: block;
  margin: 1rem 0;
}
.support-card-link {
  text-align: left;
  margin-bottom: 0;
}
/* End Help-Support */
/* Start Login */
.login-box {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
}
.nic-login,
.ipa-login {
  background-color: var(--neutral-50);
  padding: 2rem 4rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--neutral-200);
}
.nic-login {
  text-align: center;
  background-color: var(--primary-50);
  border-radius: 1rem;
  border: 1px solid var(--primary-200);
}
.nic-login .tp-link {
  margin-top: 1rem;
}
.ipa-login {
  margin-top: 1rem;
}
.nic-login-logo {
  width: 200px;
  display: block;
  margin: 0 auto 1rem auto;
}
.login-box-title {
  font-weight: 800;
  font-size: 110%;
  line-height: 30px;
  overflow: hidden;
  width: 100%;
  padding-bottom: 0.5rem;
  text-align: center;
}
a.new-user {
  color: var(--primary-600);
  margin-right: 0.5rem;
}
a.new-user:hover {
  color: var(--primary-700);
}
a.new-user:active {
  color: var(--primary-800);
}
/* End Login */
/* Start board-members  */
.h_management_div {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  clear: both;
}
.h_management {
  width: 300px;
  margin: auto;
  text-align: center;
  color: var(--neutral-600);
  font-size: 14px;
  height: 531px;
  vertical-align: top;
  margin: 1rem;
}
.h_management .card-img {
  width: 266px;
  height: 313px;
  overflow: hidden;
}
.hm_name {
  color: var(--text);
  font-size: 140%;
  padding: 0.5rem 0;
}
.hm_title2 {
  height: 96px;
}
.in-section-title {
    display: block;
    width: 100%;
    padding: 40px 0 10px 0;
    font-size: 24px;
    font-weight: 600;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 10px;
    color: var(--text) !important;
}
/* End board-members  */
/* Start excellency-word  */
.his-excellency-word {
    align-items: stretch;
    }
.excellency-word {
    width: 100%;
    color: var(--neutral-600);
    height: 495px;
    vertical-align: top;
    max-width: 100%;
    text-align: center;
    height: auto;
}
.excellency-word  .hm_name {
font-size: 160%;
}
.excellency-word  img {
width: 100%;
max-width:300px;}
.excellency-word .card{
    width: 100%;
    height: auto;
}
.his-excellency-word .word-card {
    align-items: stretch;
    width: 100%;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
}
.excellency-text {
    padding:0 5%; 
    line-height: 24px; 
    text-align: justify;
}
/* end excellency-word */
/* academic-council */
.academic-article {
  font-family: 'IBM Plex Sans Arabic', serif;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  line-height: 1.5;
}
.academic-content {
  margin-top: 20px;
  margin-bottom: 20px;
}
.academic-lesson {
  padding-right: 20px;
  margin-top: 20px;
}
.academic-glossy {
  display: block;
}
.academic-glossy-word {
  display: inline-block;
  text-decoration: underline;
  width: 150px;
}
.academic-glossy-text {
  display: inline-block;
}
.ipa-side-menu-section .side-menu-section-scroll {
  position: relative;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed {
  margin-bottom: 24px;
  padding-top: 30px;
  position: sticky;
  top: 1px;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed span {
  margin-bottom: 8px;
  display: block;
  color: #384250;
  font-size: 14px;
  font-family: 'mediumFont';
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed h6 {
  margin-top: 12px;
  margin-bottom: 12px;
  color: #1f2a37;
  font-size: 20px;
  font-family: 'semiBoldFont';
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a {
  padding: 6px 16px;
  padding-left: 0px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: block;
  color: #384250;
  font-size: 14px;
  position: relative;
  border-radius: 0px;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a::before {
  content: '';
  height: 100%;
  width: 3px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: #fcfcfd;
  border-radius: 100px;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a:hover {
  border-radius: 2px 0px 0px 2px;
  background: #f3f4f6;
  text-decoration: none;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a:hover::before {
  background: #9da4ae;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a.active {
  background: none;
  color: #161616;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a.active::before {
  background: #1b8354;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a {
  margin-right: 16px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-right: 2px solid #d2d6db;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a::before {
  display: none;
  right: -18px;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a.active::before {
  display: block;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a:hover::before {
  display: block;
  background: #9da4ae;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu .sub-menu a {
  margin-right: 32px;
  padding: 6px 16px;
  display: block;
  color: #384250;
  font-size: 14px;
  border-right: 2px solid #d2d6db;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu .sub-menu.active {
  font-family: 'semiBoldFont';
  background: none;
}
.ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu .sub-menu.active::before {
  display: block;
  background: #1b8354;
}
.ipa-side-menu-section .academic-content-section {
  padding-top: 22px;
}
.ipa-side-menu-section .academic-content-section .section {
  margin-bottom: 32px;
}
[dir='ltr'] .ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a {
  padding-right: 0px;
  padding-left: 16px;
}
[dir='ltr'] .ipa-side-menu-section .side-menu-section-scroll .content-list-fixed a:before,
[dir='ltr'] .ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a:before {
  left: 0;
  right: auto;
}
[dir='ltr'] .ipa-side-menu-section .side-menu-section-scroll .content-list-fixed .sub-menu a {
  border-right: 0px;
  border-left: 2px solid #d2d6db;
  margin-right: 0px;
  margin-left: 16px;
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll {
  z-index: 1000;
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll .mobile-page-list {
  display: none;
  margin-bottom: 0px;
  padding: 20px;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background: #1b8354;
  z-index: 100000;
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll .mobile-page-list img {
  width: auto;
  filter: invert(1);
  transition: 0.3s;
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll .mobile-page-list.active img {
  transform: rotate(180deg);
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll .mobile-page-list h1 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 1.5rem;
  color: #fff;
}
.ipa-side-menu-section.regulatory-page .side-menu-section-scroll .mobile-page-list h4 {
  margin-bottom: 0px;
  color: #fff;
}
.ipa-side-menu-section .nav-pills {
  height: auto;
  border-bottom: none;
}
/* end academic-council */
/* Start management */
.management_div {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  clear: both;
}
.management {
  width: 300px;
  margin: auto;
  text-align: center;
  color: var(--neutral-600);
  font-size: 14px;
  height: 488px;
  vertical-align: top;
  margin: 1rem;
}
.management .card-img {
  width: 266px;
  height: 313px;
  overflow: hidden;
}
/* End management */
/* Start strategic */
.strategic {
  width: 100%;
  overflow: auto hidden;
  position: relative;
}
.container-st {
  width: 1040px;
  margin: auto;
  padding: 20px;
  margin-bottom: 20px;
  transform: translateX(72px);
}
.labels-st {
  position: absolute;
  top: 0;
  text-align: right;
}
.labels-st div {
  margin: 60px 0;
  font-size: 20px;
  color: var(--neutral-700);
}
.header-st {
  position: relative;
  width: 100%;
  height: 100px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-st::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 100px solid var(--neutral-600);
}
.header-text-st {
  position: absolute;
  color: white;
  font-size: 20px;
}
.latter-bar-st {
  background: var(--primary-600);
  padding: 1rem;
  height: fit-content;
  width: 100%;
  color: white;
  font-size: 18px;
  border-radius: 10px;
  margin-top: 10px;
  text-align: center;
}
.section-st {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: white;
  padding: 20px;
}
.section2-st {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--neutral-100);
  border-radius: 20px;
  padding: 20px;
}
.box-st {
  position: relative;
  width: calc(25% - 20px);
  text-align: center;
  margin: 10px;
  padding: 15px;
  background: var(--neutral-100);
  border-radius: 20px 0 20px 0;
  height: 260px;
}
.box-st2 {
  width: calc(25% - 20px);
  text-align: center;
  margin: 10px;
  padding: 15px;
  background: #ffffff;
  border-radius: 20px 0 20px 0;
}
.l-box {
  font-size: large;
  color: #003366;
}
.main-box {
  color: #003366;
  position: absolute;
  bottom: 30px; /* مسافة من الأسفل */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
.footer-st {
  background: var(--primary-600);
  color: white;
  padding: 1rem;
  margin-top: 10px;
  border-radius: 10px;
  text-align: center;
}
.container-st {
  width: 1040px;
  margin: auto;
  padding: 20px;
  margin-bottom: 20px;
  transform: translateX(72px);
}
/* End strategic */
/* Start branches */
#branchesParent .accordion-body {
  padding: 1rem 1rem 1.5rem 1rem;
}
.branch-title {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--neutral-100);
  border-radius: 0.25rem;
  font-size: 120%;
  margin-bottom: 10px;
}
.contact_l span {
  display: block;
  margin: 1rem;
  padding-right: 30px;
  background-position: right top;
  background-repeat: no-repeat;
}
.tel {
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/tel.svg);
}
.fax {
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/fax.svg);
}
.add {
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/location.svg);
}
/* End branches */
/* Start ADAL */
.adal-logo {
  width: 100%;
  max-width: 300px;
  margin: auto;
  display: block;
}
.adal-text {
  font-weight: 400;
  line-height: 200%;
  padding: 0 5%;
  text-align: justify;
}
.adal-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.adal-card .card-title {
  height: 34px;
}
/* End ADAL */
.list-items ul {
    padding:0 2rem 0 0;
}
.list-items li {
    margin: .5rem 0;
}
/* Start graduates */
.graduates-sec {
  text-align: center;
  margin: 1rem 0;
}
.graduates-card {
  margin: 1rem 10px;
  max-width: 340px;
}
.graduates-card .card-title {
  height: auto;
}
.graduates-card .card-links {
  text-align: left;
}
/* End graduates */
/* Start research */
.LP-section {
  padding: 40px 0 80px 0;
}
.bg-neutral-50 {
  background-color: var(--neutral-50);
}
/* Start Numbers */
.ipa-numbers {
  text-align: center;
}
.ipa-numbers .LP-section-title {
  font-weight: 500;
  font-size: 160%;
}
.ipa-numbers-box {
  text-align: center;
  margin: 1rem auto;
  width: 220px !important;
  background-color: var(--neutral-50);
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
.ipa-numbers-img {
  background-color: var(--primary-50) !important;
  width: 80px;
  height: 80px;
  border-radius: 25%;
  margin: auto;
  padding-top: 25px;
}
.ipa-numbers-img img {
  margin: auto;
  width: 30px;
}
.ipa-numbers-title {
  font-size: 30px;
  color: var(--primary-600);
}
.ipa-numbers-text {
  color: var(--neutral-500) !important;
  height: 48px;
}
/* End Numbers */
.research-sec .card .card-img img {
  width: auto;
  height: 190px;
  border: 1px solid var(--neutral-200);
  margin: auto;
}
.research-sec .card .card-title {
  height: 60px;
}
.research-section-title {
  width: 100%;
  padding: 40px 0 10px 0;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 10px;
}
.research-section-title .LP-section-title {
  font-size: 24px;
  font-weight: 600;
}
.research-top-sec .card-title {
  height: 24px;
}
.research-top-sec .card-text {
  height: 48px;
}
/* End research */
/* End consultations */
.consultations-logo img {
  margin: auto;
}
/* End consultations */
/* End consultations areas */
.consultations-areas {
  align-items: stretch;
}
.consultations-areas .card {
  margin: auto;
}
.consultations-areas .card-title {
  height: auto;
}
/* End consultations areas */
/* professional-partner */ 
.professional_partner {
  display: block;
  text-align: center;
}
.professional_partner .card-title {
  height: auto;
}
.professional_partner_items {
  text-align: center;
}
.professional_partner_items .card {
  text-align: center;
  border: none;
  width: 205px;
  background-color: var(--neutral-50);
}
.professional_partner_items .card-icon {
  margin: 1rem auto;
  background-color: #fff;
}
.professional_partner_items .card-title {
  height: auto;
}
/* end professional-partner */
/* Start Studies */
.studies-section-title .LP-section-title {
  font-size: 24px;
  font-weight: 600;
}
.studies-sec .card .card-title {
  height: auto;
}
.studies-experiences .card-text {
  height: auto;
}
.studies-section-title {
  padding: 40px 0 10px 0;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 10px;
}
/* End Studies */
/* Start GBO */
.tag-mediume img {
  display: inline-block;
}
.gbo-p {
  display: inline-block;
  width: 300px !important;
  max-width: 100% !important;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--neutral-100);
}
.gbo-p-logo {
  width: 100%;
  text-align: center;
  height: 90px;
}
.gbo-p-logo img {
  max-width: 70%;
  max-height: 90px;
  margin: auto;
  display: block;
}
.gbo-p-name {
  padding: 0.5rem;
}
/* End GBO */
/* Start GBO2 */
.gbo2-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.gbo2-card .card-title {
  height: auto;
}
.gbo2-card .card-text {
  height: auto;
}
/* End GBO2 */
/* paginations */
.paginations .ngx-pagination a, .pagination a {
    background-color: transparent !important;
    color: var(--text) !important;
    border-radius: 4px !important;
    border: transparent !important;
}

.paginations .ngx-pagination .current, .pagination .current{
    background-color: transparent !important;
    color: var(--text) !important;
    border-bottom: 3px solid var(--primary-600) !important;
}

.paginations .ngx-pagination a:hover, .pagination a:hover {
    background-color: var(--neutral-100) !important;
    color: var(--text) !important;
}

.paginations .ngx-pagination a:focus , .pagination a:focus{
    background-color: transparent !important;
    color: var(--text) !important;
    border: 2px solid var(--text) !important;
    box-shadow: unset !important;
}
/* end paginations */
/* Date picker */
.dropdown-menu.show {
  display: grid !important;
}

ngb-datepicker .ngb-dp-header {
  ngb-datepicker-navigation {
    .ngb-dp-arrow {
      .ngb-dp-arrow-btn {
        padding: 0 0.25rem;
        margin: 0 0.5rem;
        border: none;
        background-color: transparent;
        z-index: 1;
      }

      .btn-link {
        font-weight: 400;
        color: #02b9b4;
        text-decoration: none;
      }

      .ngb-dp-arrow-btn:focus {
        outline-width: 1px;
        outline-style: auto;
      }
    }

    .ngb-dp-arrow-prev {
      .ngb-dp-navigation-chevron {
        transform: rotate(45deg);
      }
    }

    .ngb-dp-arrow-next {
      .ngb-dp-navigation-chevron {
        transform: rotate(-135deg);
      }
    }

    ngb-datepicker-navigation-select {
      display: flex;
      flex: 1 1 9rem;
      .form-select {
        margin-right: 10px;
      }
    }
  }
}

ngb-datepicker .ngb-dp-content {
  .ngb-dp-month {
    ngb-datepicker-month {
      .ngb-dp-weekday {
        color: #5bc0de;
      }

      .ngb-dp-weekday,
      .ngb-dp-day {
        width: 3rem;
      }

      .bg-primary {
        background-color: #02a09a !important;
      }

      .ngb-dp-today {
        outline: none !important;
      }

      .btn-light {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
      }

      .btn-light.focus,
      .btn-light:focus,
      .btn-light:hover {
        color: #212529;
        background-color: #e2e6ea;
        border-color: #dae0e5;
      }

      .btn-light:not(:disabled):not(.disabled).active,
      .btn-light:not(:disabled):not(.disabled):active,
      .show > .btn-light.dropdown-toggle {
        color: #212529;
        background-color: #dae0e5;
        border-color: #d3d9df;
      }
    }
  }
}
[ngbDatepickerDayView] {
  width: 3rem !important;
}
.custom-month-grid ngb-datepicker-month {
	.ngb-dp-week{
		text-align: center;
	}
  	.ngb-dp-weekday,
  	.ngb-dp-day {
    	width: 56px;
  	}
  	.ngb-dp-weekday {
	    height: 48px;
	    font-style: normal;
	    line-height: 48px;
  	}
  	.ngb-dp-day {
	    height: 56px;
	    padding: 0.25rem;
    }
  	[ngbDatepickerDayView] {
	    width: 48px !important;
	    height: 48px !important;
	    line-height: 48px !important;
	    border-radius: 50%;
	    color: var(--text) !important;
    }
	[ngbDatepickerDayView].bg-primary{
		background-color: var(--primary-600) !important;
		color: #ffffff !important;
		font-weight: bold;
	}
	[ngbDatepickerDayView].outside{
    	color: var(--neutral-500) !important;
    	pointer-events: none;
	}
	.ngb-dp-day:focus-visible{
		outline: 2px solid var(--text) !important;
	}
	[ngbDatepickerDayView].bg-primary:hover{
		background-color: var(--primary-700) !important;
	}
	[ngbDatepickerDayView].bg-primary:active{
		background-color: var(--primary-900) !important;
	}
	[ngbDatepickerDayView]:hover:not(.bg-primary) {
	    background-color: var(--neutral-200) !important;
	    outline: 2px solid var(--neutral-200) !important;
	    color: var(--text) !important;
	}
	[ngbDatepickerDayView]:active:not(.bg-primary) {
	    background-color: var(--neutral-300) !important;
	    outline: 2px solid var(--neutral-300) !important;
	    color: var(--text) !important;
	}
	.ngb-dp-weekday {
	  font-family: 'IBM Plex Sans Arabic', serif;
	  color: #64748b !important;
	}
	.ngb-dp-weekdays {
	  border-bottom: 1px solid #ffffff;
	  border-radius: 0;
	  background-color: #ffffff;
	}
	.ngb-dp-day {
	  outline: none; /* Remove focus outline */
	}
	.ngb-dp-today [ngbDatepickerDayView]:not(.bg-primary){
	  border: 2px solid var(--primary-600) !important;
	  color: var(--primary-600) !important;
	  font-weight: bold;
	  outline: none !important;
	}
	.ngb-dp-today [ngbDatepickerDayView]:not(.bg-primary):hover{
	  border: 2px solid var(--primary-600) !important;
	  color: var(--primary-600) !important;
	  font-weight: bold;
	  background-color: var(--primary-100) !important;
	}
	.ngb-dp-today [ngbDatepickerDayView]:not(.bg-primary):active{
	  border: 2px solid var(--primary-600) !important;
	  color: var(--primary-600) !important;
	  font-weight: bold;
	  background-color: var(--primary-200) !important;
	}
	.ngb-dp-today [ngbDatepickerDayView].bg-primary{
	  background-color: var(--primary-600) !important; /* Keep solid blue background */
	  color: #ffffff !important; /* Keep white text */
	  border: 1px solid #fff !important;
	  outline: 2px solid var(--primary-600) !important;
	}
	.ngb-dp-today [ngbDatepickerDayView].bg-primary:hover{
	  background-color: var(--primary-700) !important; /* Keep solid blue background */
	  color: #ffffff !important; /* Keep white text */
	  border: 1px solid #fff !important;
	  outline: 2px solid var(--primary-700) !important;
	}
	.ngb-dp-today [ngbDatepickerDayView].bg-primary:active{
	  background-color: var(--primary-900) !important; /* Keep solid blue background */
	  color: #ffffff !important; /* Keep white text */
	  border: 1px solid #fff !important;
	  outline: 2px solid var(--primary-900) !important;
	}
	[ngbDatepickerDayView].bg-primary.outside {
	  color: #ffffff !important;
	  background-color: var(--primary-400) !important;
	}
	.ngb-dp-today [ngbDatepickerDayView].outside {
	  border: 2px solid var(--neutral-400) !important;
	  color: var(--neutral-400) !important;
	  font-weight: bold;
	  outline: none;
	  background: #ffffff;
	}
	.ngb-dp-today [ngbDatepickerDayView].bg-primary.outside {
	    background-color: var(--primary-200) !important;
	    color: #ffffff !important;
	    border: 1px solid #fff !important;
	    outline: 2px solid var(--primary-200) !important;
	    opacity: 1;
	}
	.ngb-dp-day.disabled {
	    background: #ffffff !important;
	    border: 1px solid #ffffff !important;
    }
    .ngb-dp-day.disabled [ngbDatepickerDayView]{
	    color: var(--neutral-400) !important;
	}
}
.custom-month-grid{
	.tp-link {
	  background: none !important;
	  border: none !important;
	  cursor: pointer !important;
	  padding: 4px 8px !important;
	  border-radius: 4px !important;
	  transition: background 0.2s !important;
	}
	.tp-link:hover {
	  background-color: #f1f3f5 !important;
	}
	.tp-link.disabled{
	  opacity: 0.4;
      cursor: default !important;
	}
	.tp-link.disabled:hover{
	  background-color: transparent !important;
	}
	.tp-link img {
	  width: 24px;
	  height: 24px;
	  opacity: 1;
	  margin-top: 6px;
	}
	.form-control {
	  border: none !important;
	  background-size: 100% 3px, auto !important;
	  transition: 0.2s ease-in-out;
	  border-color: var(--neutral-400) !important;
	  box-shadow: none !important;
	  background-image: none;
	  background-position: bottom;
	}
	.dropdown-toggle::before{
		background-color: #ffff;
	}
}
/* end Date picker */
button.currentـchoice {
    background-color: var(--primary-800) !important;
}
/* End ipa-magazine */
.ipa-magazine-sec {
    box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, .01), 0px 4px 8px -2px rgba(16, 24, 40, .06);
    padding: 1rem;
    text-align: right;
    border-radius: 1rem;
    margin: 1rem 0;
    display: block;
    border: 1px solid var(--neutral-200);
    width: 100%;
    background-color: #fff;
}
/* End ipa-magazine */
/* start ipa-magazine-result */
.mag-img {
  display: inline-block;
  width: 250px;
  text-align: right;
}
.mag-img-p {
  display: block;
  width: 100%;
  text-align: center;
}
.mag-img img {
  width: 250px;
}
.mag-filter {
  display: block;
  width: 100%;
  text-align: center;
}
.mag-filter .form-floating {
  display: inline-block;
  width: 35%;
  vertical-align: top;
  margin-left: 40px;
}
.mag-filter .form-floating2 {
  display: inline-block;
  width: 130px;
  vertical-align: top;
  padding-top: 10px;
}
.mag-filter {
  background-color: #f3f4f5;
  padding: 20px 20px 20px 20px;
}
.mag-result-box {
  display: block;
  width: 100%;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 20px;
  clear: both;
  overflow: auto;
}
.mag-result-box-right {
  width: 100%;
  float: right;
}
.mag-result-box-left {
  float: right;
  text-align: center;
  padding-top: 20px;
}
.mag-result-title {
  display: block;
  width: 100%;
  font-size: 20px;
  padding: 10px 0;
  color: var(--primary-600);
}
.mag-result-author {
  display: block;
  width: 100%;
  background-color: #f3f4f5;
  border-radius: 5px;
  padding: 8px 11px;
  margin-bottom: 10px;
}
.mag-result-details {
  margin-bottom: 10px;
}
.mag-result-details span {
  color: #9c9c9c;
  margin-right: 30px;
  margin-left: 5px;
}
.mag-result-details span.f-span {
  margin-right: 0;
}
.mag-result-for {
  display: block;
  width: 100%;
  padding: 20px 0 0 0;
  font-size: 20px;
}
.mag-result-for span {
  font-weight: bold;
}
.mag-no {
  display: block;
  width: 100%;
  font-size: 20px;
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
}
.mag-no-details-title {
  float: right;
  width: 120px;
  background-image: url('/ar/publications/PublishingImages/Magazine/mag-icon.png');
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.mag-no-details-no {
  float: right;
  width: 200px;
}
.mag-no-details-date {
  float: right;
  width: 400px;
}

.mag-intro {
  font-size: 18px;
  line-height: 40px;
  padding: 20px;
  text-align: justify;
  float: left;
  width: calc(100% - 300px);
}
.mag-tabs .tab-pane {
  background-color: #fff;
}
.mag-intro a {
  display: block;
  width: 220px;
  margin: auto;
  clear: both;
  margin-top: 20px;
  text-decoration: none;
  padding: 3px 40px 3px 20px;
  border: 1px solid #e6e9ec;
  border-radius: 5px;
  font-size: 22px;
  color: #2aa7c5;
  background-image: url('/ar/publications/PublishingImages/Magazine/mag-icon.png');
  background-position: right;
  background-repeat: no-repeat;
}
.mag-intro a:hover {
  background-color: #e6e9ec;
}
/* End ipa-magazine-result */
/* End abstracts */
.abstracts a{
    margin:0 0 20px 20px;
}
/* End abstracts */
/* Start Payment */
.Payment-right {
  background-color: var(--neutral-50);
}
.back-light {
  background-color: var(--neutral-50) !important;
}
.payment-card {
  background-color: #ffffff;
  margin: 0 0 16px 0;
}
.payment-card:last-child {
  margin: 0 0 0 0;
}
.payment-card .card-title {
  margin: 0.5rem 0 1rem 0;
  overflow: auto;
  height: auto;
}
.payment-card2 {
  background-color: transparent;
  margin: 0 0 16px 0;
}
.payment-card2 .card-title {
  margin: 0.5rem 0 1rem 0;
  overflow: auto;
  height: auto;
}
.payment-card .card-tag {
  font-size: 0.75rem;
  margin-bottom: 4px;
}
.item-price {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  color: var(--secondary);
  font-size: 36px;
  font-weight: 600;
  padding: 2rem 0 1rem 0;
  color: var(--primary-600);
}
.item-price img {
  height: 32px;
}
.item-price-discount{
	margin-bottom: 0;
	padding: 0;
    color: var(--neutral-300);
    font-size: 24px;
    text-decoration: line-through;
}
.item-price-discount img{
	height: 24px
}
.payment-code {
  margin-top: 32px;
}
/* End Payment */
/* Start User Section */
.user-section {
  display: flex;
}
.user-section-right {
  width: 250px;
  float: right;
}
.user-section-left {
  float: left;
  border-right: 10px solid #e9ebec;
  padding-right: 20px;
  text-align: right;
  width: calc(100% - 270px);
  margin-right: 20px;
}
a.user-main-item {
  display: block;
  width: 100%;
  font-weight: bold;
  padding: 16px;
  transition: transform 0.2s ease-in-out;
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/user-main-item-down.svg);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: 8px;
  border-bottom: 1px solid var(--neutral-300);
  background-color: transparent;
  color: var(--text);
}
a.user-main-item:hover {
  background-color: var(--neutral-100);
}
a.user-main-item:focus-visible {
  background-color: transparent;
  outline: 2px solid #000;
}
a.user-main-item:active {
  background-color: var(--neutral-200);
}
a.user-main-item-open {
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/user-main-item-up.svg);
}
a.user-sub-item {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) 8px;
  padding: 8px 0;
  padding-right: 40px;
  text-decoration: none;
  background-size: 24px;
}
a.user-sub-item:hover {
  background-color: var(--neutral-100);
}
a.user-sub-item:focus-visible {
  background-color: transparent;
  outline: 2px solid #000;
}
a.user-sub-item:active {
  background-color: var(--neutral-200);
}
a.user-sub-item-selected,
a.user-sub-item-selected:hover,
a.user-sub-item-selected:active,
a.user-sub-item-selected:focus-visible {
  background-color: var(--primary-50);
  color: var(--primary-600);
  cursor: default;
}
.user-section-right a.my-info {
  background-image: url(/ar/my-services/PublishingImages/my-info.svg);
}
.user-section-right a.my-job-info {
  background-image: url(/ar/my-services/PublishingImages/my-job-info.svg);
}
.user-section-right a.national-address {
  background-image: url(/ar/my-services/PublishingImages/national-address.svg);
}
.user-section-right a.qualification {
  background-image: url(/ar/my-services/PublishingImages/qualification.svg);
}
.user-section-right a.disability {
  background-image: url(/ar/my-services/PublishingImages/disability.svg);
}
.user-section-right a.bank-info {
  background-image: url(/ar/my-services/PublishingImages/bank-info.svg);
}
.user-section-right a.SS-Letter {
  background-image: url(/ar/my-services/PublishingImages/SS-Letter.svg);
}
.user-section-right a.settings {
  background-image: url(/ar/my-services/PublishingImages/settings.svg);
}
.user-section-right a.programs {
  background-image: url(/ar/my-services/PublishingImages/programs.svg);
}
.user-section-right a.schedule {
  background-image: url(/ar/my-services/PublishingImages/schedule.svg);
}
.user-section-right a.health-form {
  background-image: url(/ar/my-services/PublishingImages/health-form.svg);
}
.user-section-right a.nominations {
  background-image: url(/ar/my-services/PublishingImages/nominations.svg);
}
.user-section-right a.monthlty-rewards {
  background-image: url(/ar/my-services/PublishingImages/monthlty-rewards.svg);
}
.user-section-right a.cover-letter {
  background-image: url(/ar/my-services/PublishingImages/cover-letter.svg);
}
.user-section-right a.settlement {
  background-image: url(/ar/my-services/PublishingImages/settlement.svg);
}
.user-section-right a.disclosure-form {
  background-image: url(/ar/my-services/PublishingImages/disclosure-form.svg);
}
.user-section-right a.circulation {
  background-image: url(/ar/my-services/PublishingImages/circulation.svg);
}
.user-section-right a.blackboard {
  background-image: url(/ar/my-services/PublishingImages/blackboard.svg);
}
.user-section-right a.zoom {
  background-image: url(/ar/my-services/PublishingImages/zoom.svg);
}
.user-section-right a.withdrawal-request {
  background-image: url(/ar/my-services/PublishingImages/withdrawal-request.svg);
}
.user-section-right a.ethrai-courses {
  background-image: url(/ar/my-services/PublishingImages/ethrai-courses.svg);
}
.user-section-right a.invoices {
  background-image: url(/ar/my-services/PublishingImages/invoices.svg);
}
.user-section-right a.rules {
  background-image: url(/ar/my-services/PublishingImages/rules.svg);
}
.user-section-right a.dbicon-portal {
  background-image: url(/ar/my-services/PublishingImages/dbicon-portal.svg);
}
.user-section-right a.guide {
  background-image: url(/ar/my-services/PublishingImages/guide.svg);
}
.user-section-right a.blackboard {
  background-image: url(/ar/my-services/PublishingImages/blackboard.svg);
}
.user-section-right a.my-info.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/my-info_g.svg);
}
.user-section-right a.my-job-info.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/my-job-info_g.svg);
}
.user-section-right a.national-address.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/national-address_g.svg);
}
.user-section-right a.qualification.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/qualification_g.svg);
}
.user-section-right a.disability.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/disability_g.svg);
}
.user-section-right a.bank-info.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/bank-info_g.svg);
}
.user-section-right a.SS-Letter.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/SS-Letter_g.svg);
}
.user-section-right a.settings.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/settings_g.svg);
}
.user-section-right a.programs.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/programs_g.svg);
}
.user-section-right a.schedule.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/schedule_g.svg);
}
.user-section-right a.health-form.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/health-form_g.svg);
}
.user-section-right a.nominations.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/nominations_g.svg);
}
.user-section-right a.monthlty-rewards.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/monthlty-rewards_g.svg);
}
.user-section-right a.cover-letter.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/cover-letter_g.svg);
}
.user-section-right a.settlement.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/settlement_g.svg);
}
.user-section-right a.disclosure-form.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/disclosure-form_g.svg);
}
.user-section-right a.circulation.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/circulation_g.svg);
}
.user-section-right a.blackboard.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/blackboard_g.svg);
}
.user-section-right a.zoom.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/zoom_g.svg);
}
.user-section-right a.withdrawal-request.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/withdrawal-request_g.svg);
}
.user-section-right a.ethrai-courses.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/ethrai-courses_g.svg);
}
.user-section-right a.invoices.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/invoices_g.svg);
}
.user-section-right a.rules.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/rules_g.svg);
}
.user-section-right a.dbicon-portal.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/dbicon-portal_g.svg);
}
.user-section-right a.guide.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/guide_g.svg);
}
.user-section-right a.blackboard.user-sub-item-selected {
  background-image: url(/ar/my-services/PublishingImages/blackboard_g.svg);
}
.user-main-mobile-item {
  display: none;
}
/* End User Section */
#btn-loader {
	display: inline-block;
	width: 25px;
	height: 25px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: btn-loader 1s ease-in-out infinite;
	-webkit-animation: btn-loader 1s ease-in-out infinite;
	margin-right: 15px;
}

.btn-loader-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes btn-loader {
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes btn-loader {
	to {
		-webkit-transform: rotate(360deg);
	}
}
/* Start User Section Courses */
.course-filter a {
  display: inline-block;
}
.course-filter-item {
  display: inline-block;
  padding: 8px 16px;
  border-bottom: 3px solid var(--neutral-200);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.course-filter-item img {
  padding-left: 8px;
}
.course-filter-item.selected {
  border-bottom: 3px solid var(--primary-600);
  font-weight: 500;
  cursor: default;
}
.course-filter-item:hover {
  background-color: var(--neutral-100);
  border-bottom: 3px solid var(--text);
}
.course-filter-item:focus {
  background-color: var(--neutral-200);
  border-bottom: 3px solid var(--text);
}
.user-course-cards {
  display: block;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid var(--neutral-200);
  margin-top: 0.5rem;
}
.user-course-cards .card {
  width: 300px;
  padding-bottom: 0;
}
.user-course-cards .card .card-tag span {
  font-size: 14px;
  margin-bottom: 0.75rem;
}
.course-db {
  display: block;
  position: absolute;
  width: 200px;
  background-color: #fff;
  margin-right: -6px;
  margin-top: -5px;
  border-radius: 5px;
  border: 2px solid #fff;
  z-index: 999999;
  padding: 4px;
}
.course-db a {
  display: block;
  width: 100%;
  padding-right: 8px;
  margin-bottom: 4px;
}
.user-course-cards .card-img img{
	width: 266px;
	height: 178px;
}
/* End User Section Courses */
.sadad_details_title {
  padding: 1rem 0;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  color: var(--primary-600);
}
.sadad_details {
  display: block;
  width: 800px;
  max-width: 100%;
  margin: 1rem auto;
  padding: 2rem;
  border-radius: 1rem;
  font-size: 16px;
  background-color: var(--neutral-50);
  font-size: 18px;
}
.sadad_details-img {
  background-color: var(--primary-50) !important;
  width: 80px;
  height: 80px;
  border-radius: 25%;
  margin: 1rem auto;
  padding-top: 25px;
  text-align: center;
}
.sadad_details-img img {
  height: 30px;
}
.sadad-g {
  color: var(--primary-600);
}
.payment-error {
    background-color: var(--colors-error-50) !important;
}
/* help */
.side-widget:hover {
    background-color: var(--secondary2) !important;
}
.side-widget{
	box-shadow: none;
}
.contact-r {
  float: right;
  width: calc(100% - 320px);
}
.contact-l {
  float: left;
  width: 300px;
}
.contact-form {
  padding: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.contact-info {
	background-color: #ffffff;
	margin-bottom: 20px;
	padding: 16px;
	border-radius: 16px;
	box-shadow: none;
	margin-top: 20px;
	border: 1px solid var(--neutral-300);
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 15px;
  margin-top: 10px;
}
.icon-and-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  margin-top: 27px;
}
.custom-icon {
  width: 20px;
  height: 20px;
}
.contact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /*background-color: #f9f9f9;*/
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--primary);
}
.contact-actions a{
  color: var(--primary);
}
.contact-actions img {
	cursor: pointer;
}
.contact-details {
  margin-right: 20px;
}
.hd-notification img{
	display: flex;
	max-width: 80%;
	margin: auto;
}
.contact-info-data{
	background-color: #fff; 
	border-radius: 12px; 
	padding: 12px 12px 27px 12px;
}
/* end help */
/* Start SiteMap */
ul.sitemap-tree li {
  color: var(--primary-600);
}
a.sitemap-item {
  color: var(--primary-600);
  display: block;
  margin: 12px 0;
  width: max-content;
}
a.sitemap-item:hover {
  color: var(--primary-400) !important;
  text-decoration: underline;
}
a.sitemap-item:active {
  color: var(--primary-300) !important;
}
a.sitemap-item:visited {
  color: var(--primary-800);
}
a.sitemap-ex-link::after {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px;
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/home/footer-ex-link.svg);
  margin: 0 8px;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  content: '';
}
a.sitemap-pdf::after {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px;
  background-image: url(/_catalogs/masterpage/ar-sa/CPS/assets/img/internal/sitemap_pdf.svg);
  background-size: 16px;
  margin: 0 8px;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  content: '';
}
a.sitemap-item:focus-visible {
    outline: 2px solid #000;
}
/* End SiteMap */
.IPA-internal-notification {
    text-align: right;
    display: block;
    width: 100%;
    background-color: #fff;
}
.IPA-internal-notification ul li{  
    display: block;
    border-bottom: 1px solid var(--neutral-200);
    width: 100%;
}
@media (min-width: 1700px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1600px;
  }
}
@media (max-width: 1699px) {
  .courses-sec .card {
    width: 308px !important;
  }
  .publications-sec .card {
    width: 308px !important;
  }
  .e-services-sec .card {
    width: 308px !important;
  }
  .container-st {
    transform: translateX(-25px);
  }
}
@media (max-width: 1399px) {
  .courses-sec .card {
    width: 382px !important;
  }
  .publications-sec .card {
    width: 382px !important;
  }
  .e-services-sec .card {
    width: 382px !important;
  }
  .Course-Detail-R {
    display: block;
    width: 100%;
  }
  .Course-Detail-L {
    display: block;
    margin-top: 0;
    width: 100%;
  }
  .Course-left-card {
    min-width: calc(100% - 1rem) !important;
  }
  .Course-left-card .card-img {
    display: none;
  }
  .Course-left-card .card-title {
    display: none;
  }
  .Course-Detail-R-From-L {
    display: block;
  }
  .title-R {
    display: none;
  }
  .Course-Detail-R-From-L .card-title {
    height: auto;
  }
  .Course-Detail-R-From-L .card-text {
    height: auto;
  }
  .Service-Detail-R {
    display: block;
    width: 100%;
  }
  .Service-Detail-L {
    display: block;
    margin-top: 0;
    width: 100%;
  }
  .Service-left-card {
    max-width: calc(100% - 1rem) !important;
  }
  .Service-Detail-R-From-L {
    display: block;
  }
  .title-R {
    display: none;
  }
  .Service-Detail-R-From-L .card-title {
    height: auto;
  }
  .Service-Detail-R-From-L .card-text {
    height: auto;
  }
  .container-st {
    transform: translateX(-160px);
  }
}
@media (max-width: 1199px) {
  .courses-sec .card {
    width: 292px !important;
  }
  .publications-sec .card {
    width: 292px !important;
  }
  .e-services-sec .card {
    width: 292px !important;
  }
}
@media (max-width: 991px) {
  .packages {
    margin-bottom: 2rem !important;
  }
  .filter-section {
    display: block;
    position: fixed;
    z-index: 9999;
    background-color: #fff;
    top: 0;
    left: -350px;
    height: 100vh;
    overflow-y: scroll;
    padding: 0 10px 10px 10px;
    transition: 0.5s;
  }
  .filter-section-open {
    left: 0;
    transition: 0.5s;
  }
  .filter-title {
    border-radius: 0;
    position: fixed;
    width: 100%;
    z-index: 9999;
    padding: 22px 1rem 1rem 1rem;
  }
  .filter-items {
    padding-top: 60px;
  }
  .filter-title button {
    margin-top: -8px;
  }
  .filter-open {
    display: inline-block !important;
    margin: 0 1rem 0 0 !important;
  }
  button.filter-close {
    display: inline-block;
    margin-right: 120px;
  }
  .courses-left {
    width: 100%;
  }
  .courses-sec .card {
    width: calc(50% - 18px) !important;
  }
  .publications-sec .card {
    width: calc(50% - 18px) !important;
  }
  .e-services-sec .card {
    width: calc(50% - 18px) !important;
  }
  .courses-sec .card-tag span:nth-child(even) {
    margin-top: 8px;
    display: block;
    width: max-content;
  }
  .prev-stud {
    width: 100% !important;
  }
  #branchesParent .accordion-body {
  	padding: 1rem 0 1.5rem 0;
  }
  .row-box {
    width: auto;
  }
.custom-month-grid ngb-datepicker-month{
	.ngb-dp-weekday {
		font-size: 12px;
	}
	.ngb-dp-day {
		height: 34px;
		padding: 2px;
	}
	.ngb-dp-weekday,
	.ngb-dp-day {
		width: 34px;
	}
	[ngbDatepickerDayView] {
		width: 30px !important;
		height: 30px !important;
		line-height: 30px !important;
		border-radius: 50%;
		margin: 0;
		font-size: 13px;
	}
	.ngb-dp-weekday {
		height: 28px;
		line-height: 28px;
	}
	.ngb-dp-today [ngbDatepickerDayView]:not(.bg-primary) {
		line-height: 27px !important;
	}
}
.mag-filter .form-floating {
    display: block;
    width: 100%;
    margin-left: 40px;
    margin-bottom: 10px;
  }
   .item-price {
    padding: 0;
  }
  .payment-t-padding {
    padding-top: 0 !important;
  }
  .payment-b-padding {
    padding-bottom: 0 !important;
  }
  .payment-code {
    margin-top: 0;
  }
  .payment-rl-padding {
    padding: 0.5rem 0;
  }
  .user-section {
    display: block;
  }
  .user-section-right {
    display: block;
    width: 100%;
    overflow-x: scroll;
  }
  .user-section-left {
    display: block;
    width: 100%;
    clear: both;
    float: none;
    border-right: none;
    padding-right: 0;
    text-align: right;
    margin-right: 0;
  }
  .user-main-item {
    display: none !important;
  }
  .user-sub-item {
    display: inline-block !important;
    width: 120px !important;
    padding: 36px 8px 0 8px !important;
    background-position: center 8px !important;
    text-align: center;
    height: 94px;
    vertical-align: top;
  }
  .user-section-res {
    width: max-content;
  }
  .user-main-mobile-item {
    display: inline-block;
    padding: 8px 16px;
    border-bottom: 3px solid var(--neutral-200);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
    border-radius: 6px 6px 0 0;
  }
  .user-main-mobile-item img {
    padding-left: 8px;
  }
  .user-main-mobile-item-selected {
    border-bottom: 3px solid var(--primary-600);
    font-weight: 500;
  }
  .user-main-mobile-item:hover {
    background-color: var(--neutral-100);
    border-bottom: 3px solid var(--text);
  }
  .user-main-mobile-item:focus {
    background-color: var(--neutral-200);
    border-bottom: 3px solid var(--text);
  }
}
@media (max-width: 767px) {
  .packages {
    width: 400px;
    margin: 0 auto 2rem auto !important;
    max-width: 100%;
  }
  .news-item {
    padding: 24px 0;
  }
  .card-news {
    max-width: 400px;
    margin: 0 auto;
  }
  .events-item {
    padding: 24px 0;
  }
  .courses-sec {
    text-align: center;
  }
  .publications-sec {
    text-align: center;
  }
  .e-services-sec {
    text-align: center;
  }
  .courses-sec .card {
    width: 100% !important;
    margin: auto;
    max-width: 400px;
    margin: 0 0 24px 0;
  }
  .publications-sec .card {
    width: 100% !important;
    margin: auto;
    max-width: 400px;
    margin: 0 0 24px 0;
  }
  .e-services-sec .card {
    width: 100% !important;
    margin: auto;
    max-width: 400px;
    margin: 0 0 24px 0;
  }
  .course_filter {
    width: 400px;
    margin: 0 auto 2rem auto !important;
    max-width: 100%;
  }
  .rating-container {
    align-items: start;
  }
  .feedback-card {
    width: 100%;
}
.card {
    margin: 1rem 0 !important;
}
.Service-left-card {
    max-width: none;
}
.card-body {
   padding: 0;
}
.Service-left-card {
    max-width: 100% !important;
}
.news-item {
    padding: .75rem;
}
.corporate-card {
	padding: 1rem;
	width: 100%;
	max-width: 100%;
}
.support-card {
	padding: 1rem;
	width: 100%;
	max-width: 100%;
}
.h_management {
    margin: 1rem 0;
  }
  .courses-sec .card-img img {
    height: auto;
  }
  .mag-img {
    display: block;
    width: 100%;
  }
  .mag-intro {
    display: block;
    float: none;
    width: 100%;
  }
}
@media (max-width: 500px) {
  .nic-login,
  .ipa-login {
    padding: 2rem 1rem;
  }
}