/*@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500&display=swap');*/
html {
    -webkit-font-smoothing: antialiased;
}
.materialStyle, .materialStyle li {line-height: 1.6}

.materialStyle h2 {position: relative; padding-bottom: 13px; margin-bottom: 20px}
.materialStyle .centre_panel h2:before {display: inline-block}
.materialStyle h2:before {background-color: #7575b4; width: 100px; height: 2px; content: ''; display: block; position: absolute; bottom: 0}

.materialStyle .panel {text-align: center; padding: 0 20px}
.materialStyle .panel + .panel {padding-top: 70px}
.materialStyle .panel + .panel.panel_sml {padding-top: 10px}
.materialStyle .panel + .panel.panel_med {padding-top: 30px}
.materialStyle .panel + .panel.panel_lrg {padding-top: 50px}
.materialStyle .panel, .materialStyle .panel * {box-sizing: border-box}
.materialStyle .panel a {transition: all .3s ease-in-out}
.materialStyle .panel p, .materialStyle .wide_panel {line-height: 1.6}

.materialStyle .panel_split_text_img > div {position: relative; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: center; text-align: initial}
.materialStyle .panel_split_text_img.flipped > div {flex-direction: row-reverse}
.materialStyle .panel_split_text_img > div .half {padding: 0 2%}
.materialStyle .panel_split_text_img > div .half img {display: block; margin: 10px auto; box-shadow: 0 0 20px rgba(0,0,0,0.1); max-width: 100%}
.materialStyle .panel_split_text_img > div .half img.no_shadow {box-shadow: none}

.materialStyle .centre_panel {max-width: 1100px; margin: auto}
.materialStyle .centre_panel p, .materialStyle .centre_panel h2 {text-align: center}
.materialStyle .centre_panel img {max-width: 100%; height: auto; display: block; margin: auto; box-shadow: 0 0 20px rgba(0,0,0,0.1)}
.materialStyle .centre_panel p + img {margin-top: 30px}

.materialStyle .wide_panel {padding: 0 62px 30px}
.materialStyle .panel ~ .wide_panel {padding-top: 70px}

.materialStyle .panel .spacer {width: 15px; height: 20px}

@media screen and (min-width: 740px) {
  .materialStyle .panel_split_text_img .half {width: 50%}
  .materialStyle .panel_split_text_img > div .half .text_wrapper {padding: 0 20px}
}

/*[dir="rtl"] #centreColumn .materialStyle .panel h2, [dir="rtl"]#tinymce .panel h2 {color: #971A3E}*/

/* Custom game notifications*/
.custom_notification, .custom_notification ~ * {text-align: center}
.custom_notification {width: 100%; height: 161px; overflow: hidden; border-radius: 4px}
.custom_notification img {object-fit: cover; height: 100% !important}
.custom_notification ~ p {padding-top: 15px !important; margin: 0 auto; font-size: 16px}
.custom_notification ~ p strong {font-size: 17px}
.custom_polaroid {display: flex; align-items: center; width: 800px; max-width: 100%; margin: auto}
.custom_polaroid img {margin-top: -70px !important}
.custom_polaroid .polaroid_space {width: 60px}
.custom_polaroid .polaroid_space + p {text-align: left}
@media screen and (max-width: 768px) {
  .custom_polaroid {align-items: center}
  .custom_polaroid img {margin-top: 0 !important; width: 200px}
}
@media screen and (max-width: 560px) {
  .custom_polaroid {display: block}
  .custom_polaroid img {float: left; margin: -4px 10px 0 0 !important; width: 100px}
}
.qatar_quiz_question {display: flex; align-items: center}
.qatar_quiz_question img {width: 100px !important; height: 100px !important; background-color: #e2e2e2; border-radius: 50%; padding: 1px}
.qatar_quiz_question span {background: #1e9c9c; color: #fff; padding: 5px 20px; border-radius: 30px; margin: 0 14px; font-size: 18px}

.optionsRibbon ul.inverted li a, .options_btn.inverted {
  background: #188A8A;
}
/*html, body, button {
  font-family: 'Cairo', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, #centreColumn .centerHeading, #courseToolbar .centerHeading, .quiz_points, .jconfirm .title, .mce-window-head .mce-title {
  font-family: 'Cairo', sans-serif !important;
}*/
.portal header {
  background: url('/files/36557/qoe-portal-header-bg.png?lmsauth=4c8e9f20e58d9ddfaf9c65b416ff9e5a143e7568') !important
}
@media screen and (max-width: 979px) {
  body.portal.home-carousel .mobileLogo h1 {
    background: url('/files/36557/qoe-portal-header-bg.png?lmsauth=4c8e9f20e58d9ddfaf9c65b416ff9e5a143e7568') #fff !important
  }
}
header {background: url('/files/36557/user-header-grey.png?lmsauth=a684a8d44ebf686ad16345e304a7f97730bf8aba') !important}
.profile_header .profile_background {background-image: url('/files/36557/user-header-grey.png?lmsauth=a684a8d44ebf686ad16345e304a7f97730bf8aba') !important}
#user-menu .sub-menu {background: url('/files/36557/user-header-grey.png?lmsauth=a684a8d44ebf686ad16345e304a7f97730bf8aba') !important}

highcharts-color-0 {
  fill: rgb(114, 0, 19) !important;
}
.langForm img[src*="arab.gif"] {visibility: hidden}
.langForm img[src*="arab.gif"] ~ label::after {
  background: url('/images/responsive/flags/32/qa.gif');
  background-size: cover;
  margin-right: 28px;
  content: '';
  width: 16px;
  height: 11px;
  position: absolute;
  display: block;
  top: 11px;
  left: 22px;
  border-radius: 0
}
[dir=rtl] .langForm img[src*="arab.gif"] ~ label::after {right: -28px; left: auto}

[src*="/il.gif"], [src*="/il.gif"] ~ * {
  display: none !important;
}

.sso_btn {
  visibility: hidden;
}
.saml2 {
  visibility: hidden;
}
.sso_btn:after {
  content: 'تسجيل الدخول بالحساب الرسمي';
  visibility: visible;
  display: block !important;
  background: #77122e !important;
  padding: 9px 20px !important;
  margin: 9px auto 20px !important;
  height: auto !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  border-radius: 50px;
  min-width: 75%;
  transition: opacity .3s ease-in-out;
  font-family: 'Cairo', sans-serif;
}
#facebox form.langForm .facebox-content div {height: auto; padding: 0; line-height: 32px}
#facebox form.langForm .facebox-content img {margin-top: 10px}

/* Custom adjustment for Cairo font in flyout nav */
@media screen and (min-width: 768px) {
  #user-menu ol > li .dropDown a i {position: relative; top: -4px}
}
.guides a img[src*='/neo/'] + span, .guides a[href*='/neo/'] > span, .guides a[href*='NEO'] > span {
  background-color: #77122e !important;
}
.guides a span span {
  text-align: right;
}
.tile_width_widget:not(.expanded_widget) .catalog_boxes > * h2
{
  font-family: 'Cairo', sans-serif !important;

}

.facebox-content dt:has(> a[href="/import_enrollments"]), .facebox-content dt:has(> a[href*="/class_student_invite/index/"]), .facebox-content dt:has(> a[href="/import_enrollments"]) + dd, .facebox-content dt:has(> a[href*="/class_student_invite/index/"]) + dd, .facebox-content dt:has(> a[href*="/class_teacher_invite/index/"]), .facebox-content dt:has(> a[href="/import_teachers"]), .facebox-content dt:has(> a[href*="/class_teacher_invite/index/"]) + dd, .facebox-content dt:has(> a[href="/import_teachers"]) + dd{
    display: none;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoWrapper2 {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 200px;
}

.videoWrapper2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body[user-roles*="teacher"]:not([user-roles*="administrator"]):not([user-roles*="monitor"]) a[href="/class_list"] {
  display: none;
}

#centreColumn ul li:before {
  background-position: 0 -5807px;
  width: 20px !important;
  height: 20px !important;
  background-size: 65px auto;
}