@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --unnamed-color-blue: #005aab;
  --unnamed-color-border-blue: #143c79;
  --unnamed-color-yellow: #ffc40d;
  --unnamed-color-greyBlue: #475677;
  --unnamed-color-green: #009e41;
  --unnamed-color-light-grey: #f5f5f5;
  --unnamed-color-ECF3F9: #ecf3f9;

  /*font-sizes */
  --unnamed-font-size-15: calc(15px * 0.8); /*footer links */
  --unnamed-font-size-16: calc(16px * 0.8); /* what student say card text */
  --unnamed-font-size-19: calc(19px * 0.8); /* header */
  --unnamed-font-size-18: calc(18px * 0.8); /* labels  */
  --unnamed-font-size-20: calc(20px * 0.8); /* text and subtitles */
  --unnamed-font-size-22: calc(
    22px * 0.8
  ); /* cards title (our learning journey index.html) */
  --unnamed-font-size-24: calc(24px * 0.8); /* course title  */
  --unnamed-font-size-30: calc(30px * 0.8); /* title  */
  --unnamed-font-size-35: calc(35px * 0.8); /* titles  */
  --unnamed-font-size-80: calc(
    80px * 0.8
  ); /* numbers under banner index.html */

  /* font weight */
  --unnamed-font-weight-100: 100;
  --unnamed-font-weight-200: 200;
  --unnamed-font-weight-300: 300;
  --unnamed-font-weight-400: 400;
  --unnamed-font-weight-500: 500;
  --unnamed-font-weight-600: 600;
  --unnamed-font-weight-700: 700;
  --unnamed-font-weight-800: 800;
}
@font-face {
  font-family: Aljazera;
  src: url("/static/mitx/fonts/Aljazeera Regular.ttf");
}

@font-face {
  font-family: Aljazera;
  src: url("/static/mitx/fonts/Al-Jazeera-Arabic Bold.ttf");
  font-weight: bold;
}

body {
  overflow-x: unset !important;
}

*:not(.icon, .fa) {
  font-family: Aljazera !important;
}

.page-hero-banner:before {
  background-color: #005aab !important;
  background-image: url("/static/mitx/images/assets/Component.png") !important;
  background-size: 100% 98% !important;
}

.page-hero-banner:before {
  background-color: #005aab !important;
  background-image: url("/static/mitx/images/assets/Component.png") !important;
  background-size: 100% 98% !important;
}

.page-hero-banner {
  background-image: url("/static/mitx/images/assets/Component.png") !important;
  background-size: 100% 98% !important;
  margin-bottom: 0 !important;
}

.page-banner {
  bottom: 5px;
  position: fixed;
  right: 10px;
  min-width: 30%;
  max-width: calc(100% - 20px);
  animation: fadeMessage 5s linear 5s forwards;

}
.page-banner .alert {
  display: flex;
  align-items: center;
}
.page-banner .alert.alert-danger {
  color: var(--unnamed-color-blue);
  background-color: var(--unnamed-color-yellow);
}
.page-banner .alert.alert-success {
  color: white;
  background-color: var(--unnamed-color-green);
}
@-webkit-keyframes fadeMessage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@-moz-keyframes fadeMessage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }

}

@-ms-keyframes fadeMessage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@-o-keyframes fadeMessage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes fadeMessage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@media only screen and (min-width: 1920px) {
  html .window-wrap .content-wrapper,
  body .window-wrap .content-wrapper {
    max-width: unset !important;
  }
}

@media only screen and (max-width:991px){
 .page-banner{
  bottom: 2px;
  width: calc(100% - 20px);
  z-index: 99999;
 }
}