/* @font-face {
        font-family: 'PoppinsRegular';
        src: url(../fonts/Poppins-Regular.eot);
        src: url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url(../fonts/Poppins-Regular.woff2) format('woff2'), url(../fonts/Poppins-Regular.woff) format('woff'), url(../fonts/Poppins-Regular.ttf) format('truetype'), url('../fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
        font-weight: 700;
        font-style: normal
	} */
  @font-face {
      font-family: 'SSTArabicRoman';
      src: url(../fonts/SST-Arabic-Roman.eot);
      src: url('../fonts/SST-Arabic-Roman.eot?#iefix') format('embedded-opentype'), url(../fonts/SST-Arabic-Roman.woff2) format('woff2'), url(../fonts/SST-Arabic-Roman.woff) format('woff'), url(../fonts/SST-Arabic-Roman.ttf) format('truetype'), url('../fonts/SST-Arabic-Roman.svg#SST-Arabic-Roman') format('svg');
      font-weight: 700;
      font-style: normal;
  }

  @font-face {
      font-family: 'SSTArabicBold';
      src: url(../fonts/SST-Arabic-Bold.eot);
      src: url('../fonts/SST-Arabic-Bold.eot?#iefix') format('embedded-opentype'), url(../fonts/SST-Arabic-Bold.woff2) format('woff2'), url(../fonts/SST-Arabic-Bold.woff) format('woff'), url(../fonts/SST-Arabic-Bold.ttf) format('truetype'), url('../fonts/SST-Arabic-Bold.svg#SST-Arabic-Bold') format('svg');
      font-weight: 700;
      font-style: normal;
  }

  :focus {
      outline: 0px solid transparent;
  }

  b {
      font-family: 'SSTArabicBold';

  }

  html,
  body {
      margin: 0 0 0 0;
      overflow: hidden;
  }

  * {
      box-sizing: border-box;
  }

  body {
      margin: 0;
      padding: 0;
      font-family: 'SSTArabicRoman';
      font-size: 20px;
  }

  .ui-menu {}

  #menu {
      background: #F9F9F9;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 545px;
      margin: 0 auto;
      position: relative;
      box-sizing: border-box;
       font-size: 20px;
  }

  /* #menu:before {
        content: "";
        position: absolute;
        top: 0px;
        left: -291px;
        width: 291px;
        height: 466px;
        background-image: url('../images/left_img.jpg');
    } */

  #menu .title {
      display: block;
      line-height: 21px;
      text-decoration: none;
      position: relative;
  }

  .expand:after {
      content: '';
      /* display: inline-block; */
      padding: 0px;
      background: transparent url('../images/plus-icon.png') no-repeat scroll top left;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 0;
      transform: translate(-50%, -50%);
  }

  .collapse:after {
      content: '';
      /* display: inline-block; */
      padding: 0;
      background: transparent url('../images/minus-icon.png') no-repeat scroll center center;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%, -50%);
      margin: 0;
  }

  .collapse,
  .expand {
      display: block;
      color: #ffffff;
      text-align: center;
      float: left;
      cursor: pointer;
      width: 25px;
      height: 52px;
      line-height: 50px;
      position: absolute;
      border: 0;
      background: transparent;
      z-index: 1;
      box-sizing: border-box;
      left: 8px;
      top: 3px;
  }

  .empty {
      display: block;
      color: #ffffff;
      text-align: center;
      float: left;
      cursor: pointer;
      width: 25px;
      height: 35px;
      line-height: 35px
  }

  .title {
      display: block;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;

  }

  .expand~.title::after,
  .expand~.subMenu .title::after {
      content: '';
      position: absolute;
      background: transparent url('../images/disable-icon.png') no-repeat scroll center center;
      background-size: 10px 10px;
      width: 10px;
      height: 10px;
      right: 25px;
      top: 50%;
      margin: -4px 0 0 0;
  }

  .expand~.title.completed::after,
  .expand~.subMenu .title.completed::after {
      background: transparent url('../images/normal.png') no-repeat scroll center center;
      background-size: 10px 10px;
  }

  .expand.collapse~.title::after,
  .expand.collapse~.subMenu .title::after {
      right: 25px;
  }

  ul {
      list-style: none;
      padding: 0;
      margin: 0;
      color: #115a9e;
  }

  ul li {
      position: relative;
      color: #115a9e;
  }

  ul li span.subMenu_title.title .liChild {
      color: #115A9E;
  }

  ul li ul li:last-child {
      border-bottom: none
  }

  ul>li,
  ul>li>ul,
  ul>li>ul>li {
      list-style: none
  }

  ul li span.title .liChild {
      text-decoration: none;
      cursor: pointer;
      display: block;
      padding: 16px 50px 18px 40px;
      pointer-events: auto;
      margin: 0;
      font-size: 16px;
      line-height: 18px;
      color: #111111;
      border: 0;
      width: 100%;
      text-align: left;

      background: #F9F9F9;
      font-family: 'SSTArabicRoman';
  }

  ul.subMenu li span.title .liChild {
      padding: 16px 50px 18px 15px;
  }

  ul li span.title .liChild.disablePage {
      color: rgba(46, 46, 56, 0.4);
      pointer-events: none;
  }

  /*ul li span.title .liChild.current {
        color: #2e2e38;
        background: #ffe600;
        margin-left: 25px
    }*/

  ul li span.title .liChild:hover {
      text-decoration: none
  }

  ul>li>ul,
  ul>li>ul>li {
      padding: 0;
      margin: 0
  }

  .active>span.title {
      background-color: #F9F9F9;
  }

  .active>span.title .liChild {
      color: #27ACAA;
      font-weight: 700
  }

  ul#menu li>span.expand+span.title+ul li>span.title,
  ul>li>ul>li span.expand,
  ul>li>ul>li span.collapse,
  ul#menu li>span.empty+span.title+ul li>span.title,
  ul>li>ul>li span.empty {
      padding-left: 30px
  }

  ul#menu li>span.expand+span.title+ul li>span.expand+span.title+ul li span.title,
  ul#menu li>span.empty+span.title+ul li>span.empty+span.title+ul li span.title {
      padding-left: 75px
  }

  ul>li.complete>span.title::before {
      content: ' ';
      background: none no-repeat;
      background-size: 17px 17px;
      position: absolute;
      width: 17px;
      height: 17px;
      right: 9px;
      top: 9px
  }

  ul.subMenu li .liChild {
      padding-left: 15px;
  }

  ul.subMenu {
      /*transition: opacity 1s ease-out;
        opacity: 0;*/
      height: 0;
      overflow: hidden
  }

  ul.subMenu.visible {
      /*transition: opacity 1s ease-out;*/
      opacity: 1;
      height: auto;
      /* padding-left: 25px;*/
  }



  #menu .headerWrapper .closePop {
      background: #F9F9F9 url(../images/close.png) no-repeat;
      border: 0;
      position: absolute;
      right: 15px;
      top: 42px;
      cursor: pointer;
      height: 24px;
      width: 24px;
      display: inline-block;
      /* transform: translateY(-50%); */
      z-index: 1;
  }

  #menu .headerWrapper .closePop:hover {
      background: #F9F9F9 url(../images/close_hover.png) no-repeat;
  }


  #menu .modalBoday {
      height: 460px;
      overflow: hidden;
      overflow-y: auto;
  }

  #menu .modalBoday::-webkit-scrollbar {
      width: 5px;
  }

  #menu .modalBoday::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px #707070;
  }

  #menu .modalBoday::-webkit-scrollbar-thumb {
      background-color: #EF4144;

  }

  #menu .modalBox {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      display: block;
      overflow: hidden;
      border: 1px solid black;
      -webkit-overflow-scrolling: touch;
      outline: 0;
  }

  #menu .modalContentWrapper {
      /* -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            */
  }

  #menu .headerWrapper {
      background: #F9F9F9;
      position: relative;
      line-height: 60px;
      padding: 15px 35px 0 35px;
      /* <!-- border-bottom: 1px solid rgba(255, 255, 255, 0.2); --> */
  }

  #menu .headerWrapper h4 img {
      margin-right: 5px;
      padding-bottom: 2px;
  }

  #menu .closePop {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer
  }

  #menu .closePop img {
      height: 40px;
      width: 40px
  }

  #menu .modalBoday {
      position: relative;
      padding: 0 0 4px 0
  }

  #menu .headerWrapper h4.modalTitle {
      margin: 0;
      color: #EF4144;
      font-size: 35px;
      display: inline-block;
      position: relative;
      width: 100%;
  }

  #menu .headerWrapper h4.modalTitle:before {
      content: "";
      position: absolute;
      left: 0px;
      bottom: 0;
      height: 1px;
      width: 100%;
      /* border-bottom: 1px solid rgba(46, 46, 56, 0.2); */
  }

  #menu .modalContentWrapper,
  #menu .modalWrapper {
      position: absolute;
      width: 100%;

  }

  #menu .leftBlock,
  #menu .rightBlock {
      width: 46%;
      float: left;
      padding: 0 1.5% 0 1.5%;
      display: flex;
      align-items: center
  }

  #menu .modalBoday {
      position: relative;
      padding: 0 10px;
      background: #F9F9F9;
      margin: 0 25px;
  }

  #course_title {
      margin: 0;
      height: 0;
  }

  ul.subMenu li span.subMenu_title {
      padding-left: 0;
  }

  ul.subMenu li span.subMenu_title .liChild {
      padding-left: 35px;
  }

  ul#menu_list {
      padding-top: 10px;
  }

  ul#menu_list li span.title .liChild.current {
      margin-left: 0;
      color: #333333;
      background: #F9F9F9;
      font-family: 'SSTArabicBold';
      cursor: default;
      pointer-events: none;
  }

  ul#menu_list li span.title .liChild:hover {
      color: #333333;
      background: #F9F9F9;
      /*transition: background-color 0.5s ease*/
  }

  /* ul#menu_list li .subMenu span.title .liChild:hover {
        color: #115A9E;
    } */

  ul#menu_list>li {
      border-bottom: none;
      position: relative;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding-bottom: 2px;
  }

  ul#menu_list>li.open .expand.collapse {
      background: transparent;
  }

  ul#menu_list>li .expand.collapse {
      background: #ebebec;
  }

  ul#menu_list>li.open span.subMenu_title.title .liChild {
      background: #EF3E42;
      color: #ffffff;
      border-radius: 5px;
      font-family: 'SSTArabicBold';
  }

  ul#menu_list>li span.subMenu_title.title .liChild {
      background: #ebebec;
      color: #707070;
      border-radius: 5px;
      font-family: 'SSTArabicBold';
  }