body::-webkit-scrollbar {
    width: 8px;               /* width of the entire scrollbar */
  }
  
  body::-webkit-scrollbar-track {
    background: #f1f1f1;        /* color of the tracking area */
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: #888;    /* color of the scroll thumb */
    border-radius: 0;       /* roundness of the scroll thumb */
      /* creates padding around scroll thumb */
  }
  .sidebar.active{
      width: 75px !important;
  }
  .sidebar-menu.active .dropdown:hover > ul{
  position: absolute;
      width: 180px;
      background: #fff;
      left: 75px;
      display: block;
      top: 0;
      padding-left: 10px;
  }
  .dropdown .singl_menu{
      color: #000;
      font-size: 15px;
      display: flex;
      align-items: center;
      padding: 0 !important;
  }
  .sidebar-menu.active .dropdown .singl_menu{
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  
  }
  .sidebar-menu.active .dropdown .singl_menu label{
      width: 100%;
  }
  .sidebar-menu .dropdown .singl_menu label:after{
      visibility: hidden !important;
  }
  .sidebar-menu.active .dropdown .singl_menu label i{
      margin-right: 0;
  }
  
  .sidebar-menu.active .sidebar-menu h4{
      display: none;
  }
  .sidebar-menu.active .cat_heading{
      text-align: center;
  }
  .sidebar-menu.active .cat_heading i{
      display: block;
  }
  .sidebar-menu.active .dropdown ul{
  display: none;
  }
  .sidebar-menu.active .dropdown ul li:hover{
  background: #f1f1f1;
  }
  .sidebar-menu.active{
  padding: 0;
  }
  .sidebar-menu.active .dropdown label {
    display: flex;
      padding: 15px 8px;
      justify-content: center;
      align-items: center;
      width: auto;
  }
  .sidebar-menu.active label:hover {
      background-color: #f1f1f1;
      border-radius: 0;
  }
  .dots_b{
     position: relative;
      border: 0.125rem solid #fff;
      width: 5px;
      height: 5px;
      line-height: 1;
      border-radius: 50%;
      background: #bdc5d1;
      display: none; 
      transition: 0.5s;
  }
  .user_icon_n{
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .sidebar-menu.active label .dots_b{
      display: block;
          margin-right: 5px;
  }
  .sidebar-menu.active label:hover .dots_b{
  background: #377dff;
  }
  .pure-form{
      position: relative;
  }
  .pure-form i{
      position: absolute;
      top: 51%;
      left: 15px;
      transform: translateY(-50%);
      color: #222;
  }
  .topbar-option{
      display: flex;
      align-items: center;
      margin-bottom: 0!important;
  }
  .profile_section_btn{
      width: 2.40625rem;
      height: 2.40625rem;
      border-radius: 50%;
      padding: 5px;
      position: relative;
  }
  .profile_section_btn img{
      width: 2.40625rem;
      border-radius: 50%;
  }
  .avatar-sm-status{
      position: absolute;
      bottom: 5px;
      right: 0;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      white-space: nowrap;
      text-align: center;
      vertical-align: baseline;
      border: 0.125rem solid #fff;
      width: 10px;
      height: 10px;
      line-height: 1;
      font-size: .65625rem;
      border-radius: 50%;
      background: #00c9a7;
  }
  .active-sm-status{
       display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      white-space: nowrap;
      text-align: center;
      vertical-align: baseline;
      border: 0.125rem solid #fff;
      width: 10px;
      height: 10px;
      line-height: 1;
      font-size: .65625rem;
      border-radius: 50%;
      margin-right: 5px;
      
  }
  .active-sm-status.one{
  background: #00c9a7;
  }
  .active-sm-status.two{
    background: rgb(237,76,120);  
  }
  .active-sm-status.three{
   background: rgb(245,202,153);   
  }
  .profile_section{
      position: absolute;
      top: 70px;
      right: -800%;
      width: 200px;
      background: #fff;
      height: auto;
      padding: 20px;
      border-radius: 10px;
      transition: 0.5s;
      opacity: 0;
  }
  .profile_section.active{
  right: 0;
  opacity: 1;
  }
  .profile_section.hide{
  right: -800%;
  opacity: 0;
  }
  .divider{
  width: 95%;
  height: 1px;
  background: #f1f1f1;
  margin: 15px auto 5px;
  }
  .profile_name_i{
  display: flex;
      align-items: flex-start;
      justify-content: space-between;
  }
  .profile_name_i .img_p{
  width: 40px;
      height: 40px;
      border-radius: 50%;
  }
  .profile_name_i .img_p img{
  width: 100%;
      height: 100%;
      border-radius: 50%;
  }
  .profile_name_i .name_p{
      position: relative;
      padding-left: 0px;
  }
  .profile_name_i .name_p h3{
  position: relative;
  font-size: 16px;
      line-height: 23px!important;
      margin-bottom: 8px!important;
font-weight: 500!important;
      
  }
  .profile_name_i .name_p p{
  position: relative;
  font-size: 14px;
  color: #000;
      margin: 0;
  }
  .dropdown_profile{
      position: relative;
  }
  .dropdown_profile ul{
      position: absolute;
      right: 122%;
      background: #fff;
      padding: 20px 15px;
      width: 150px;
      display: flex;
      border-radius: 10px;
      flex-direction: column;
  }
  .sidebar-menu-pr{
      transition: 0.5s;
      opacity: 0;
      right: 0;
      z-index: -1;
  }
  .sidebar-menu-pr.active{
  transition: 0.5s;
      opacity: 1;
      right: 115%;
      z-index: 1;
  }
  .dropdown_profile li{
      width: 90%;
      padding: 4px 8px;
      border-radius: 10px;
  }
  .dropdown_profile li a{
  padding: 10px 0;
      font-size: 14px;
      max-width: 100%;
      display: flex;	
      border-radius: 10px;
      padding: 8px 8px;
          display: flex;
      align-items: center;
  }
  .dropdown_profile li a:hover{
      background: #f1f1f1;
  }
  .dropdown_profile ul li{
      margin-right: 0;
  }
  .dropdown_profile ul li a{
      font-size: 14px;
  
  }
  .dropdown_profile .main_menu{
  position: relative;
  }
  .dropdown_profile .main_menu:after{
  position: absolute;
      content: "\f077";
      color: #000;
      font-weight: 800;
      font-family: 'Font Awesome 6 Pro';
      font-size: 12px;
      top: 9px;
      right: 10px;
      margin-left: 4px;
      transform: rotate(90deg);
  }
  
  .actiities_box{
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 36, 0.4);
      position: fixed;
      top: 0;
      right: -100% !IMPORTANT;
      z-index: 111;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transition: 0.5s;
      opacity: 0;
  }
  .actiities_box.active{
      right: 0% !IMPORTANT;
      opacity: 1;
  }
  .actiities_box_child{
      background: #fff;
      position: relative;
      width: 350px;
      height: 100%;
  }
  .header_ac{
      padding: 20px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #ccc;
  }
  .header_ac i{
      cursor: pointer;
  }
  
  
  /*==============================actiities_box_timleine=================*/
  .actiities_box_timleine{
  padding: 10px 25px 30px;
  }
  .timeline_content_b{
  margin-top: 30px;
  }
  .timeline_content_b .top_t{
  display: flex;
      align-items: flex-start;
      padding: 8px 0;
      position: relative;
  }
  .timeline_content_b .t_img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  
  }
  .timeline_content_b .t_img img{
  width: 40px;
  border-radius: 50%;
  position: relative;
  }
  .timeline_content_b .t_img:after{
    
      position: absolute;
      top: 54px;
      left: 6%;
      transform: translateX(-6%);
      width: 2px;
      height: 70%;
      border-left: 0.125rem solid rgba(231,234,243,.7);
      content: "";
  
  }
  .timeline_content_b .t_content_b{
  width: 100%;
  }
  
  .timeline_content_b .t_content_b h4{
    font-size: 15px;
  }
  .timeline_content_b .t_content_b p{
    font-size: 14px;
  }
  .timeline_content_b ul{
  padding-left: 5px;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: flex-start;
  }
  .timeline_content_b ul li{
      width: 100%;
  
  }
  .timeline_content_b .doc_b_box{
  
      display: flex;
      align-items: center;
      width: 100%;
      background: #f1f1f1;
      padding: 8px 0;
      margin-top: 8px;
      border-radius: 8px;
  }
  .timeline_content_b .doc_c{
  padding-left: 10px
  }
  .timeline_content_b .doc_c h5{
  font-size: 12px;
  
  }
  .timeline_content_b .doc_c p{
    font-size: 10px;
  }
  .timeline_content_b ul li .doc_file_box{
  display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 10px;
      width: 100%;
  }
  .timeline_content_b .first_b{
  display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
  }
  .timeline_content_b .d_img{
  margin-left: 8px;
  }
  .timeline_content_b .date_t{
  font-size: 12px;
  text-align: left;
  width: 100%;
  }
  .timeline_content_b .date_t p{
    font-size: 13px;
  }
  
  
  /*===============message_box=====================*/
  
  .message_box {
/*
    background: #fff;
    padding: 20px 0 0 0;
    border-radius: 10px;
    transition: 0.5s;
*/
  }
  .message_box.active{
      opacity: 1;
      right: 0;
  }
  .divider-full{
  width: 100%;
  height: 1px;
  background: #f1f1f1;
  margin: 0;
  }
  .divider-tow{
      background: #fff;
  }
  .message_header{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
  }
  .message_header a{
      width: 27px;
      height: 27px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000 !important;
      border-radius: 50%;
      padding: 0 !important;
      transition: 0.5s;
  }
  .message_header a:hover{
      background: #f1f1f1;
  }
  .Notification-tab{
      padding: 15px 0 15px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .Notification-tab button{
      width: 50%;
      background: transparent;
      border: none;
      outline: none;
      color: #000;
      font-size: 15px;
      cursor: pointer;
  }
  
  .Notification-tab button.active{
      width: 50%;
      background: transparent;
      border: none;
      outline: none;
      color: blue;
      font-weight: 500;
      font-size: 15px;
      position: relative;
  }
  .Notification-tab button:after{
      content: '';
      top: 30px;
      left: 0;
      width: 0;
      z-index: 1111;
      position: absolute;
      transition: 0.5s;
      transform-origin: left;
  
  }
  .Notification-tab button.active:after{
      width: 100%;
      position: absolute;
      left: 0;
      top: 30px;
       content: '';
       width: 100%;
      height: 2px;
        background: blue;
         transition: 0.5s;
      transform-origin: left;
  
  }
  ._tab_box{
      width: auto;
      height: 300px;
      padding: 0 0 0;
      background: #F0F6FD;
      background: #fafafa;
      
      margin: 10px 0;
      overflow-y: scroll;
  }
  .tabcontent {
      display: none;
  }
  .tabcontent.active {
      display: block;
  }
  .tablinks.active{
  
  }
  /* width */
  ._tab_box::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ._tab_box::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ._tab_box::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ._tab_box::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  ._tab_box .profile_name_i{
     padding: 10px 15px 10px;
    
  
  }
  ._tab_box .time_b{
  display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px;
      margin-left: 13px;
      width: 60px;
      height: auto;
  }
  
  ._tab_box .time_b p{
      font-size: 12px;
      display: flex;
      font-weight: 700;
      align-items: center;
      justify-content: center;
      color: #3288e6;
  }
  
  .profile_name_i input[type='checkbox']{
      position: relative;
      z-index: 2;
      width: 12px;
      height: 12px;
      background-color: #e7eaf3;
      border-width: 0;
      border-radius: 50%;
      order: 1px solid rgba(231,234,243,.7);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin-top: 10px;
  }
  .profile_name_i input[type='checkbox']:checked {
      background-color: #377dff;
  }
  .tabcontent .profile_name_i .img_p{
      margin-left: 0;
      display: flex;
      align-items: flex-start;
  }
  .tabcontent .profile_name_i .name_p{
/*
  padding-left: 30px;
      padding-top: 10px;
      padding-bottom: 10px;
*/
      width: calc(100% - 70px);
  }
  .tabcontent .profile_name_i .img_p img{
      margin-left: 5px;
  }
  
  .footer_box{
  text-align: center;
  }
  .footer_box a{
      padding: 25px 0px 5px 0px !important;
      height: 100%;
      max-width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px !important;
  }
  .footer_box a i{
      margin-left: 5px;
      font-size: 14px;
  }
  .top_bar_search_box{
     background: #fff;
      border-radius: 10px;
      width: 330px;
      position: absolute;
      top: 80px;
      display: none;
      opacity: 0;
      z-index: -1;
      transition: 0.5s;
  }
  .top_bar_search_box.active{
   display: block;
      opacity: 1;
      z-index: 1;
      
  }
  .close_search_box{
      position: absolute;
      right: 40px;
      top: 27px;
      top: 35px;
      transform: translateY(-15px);
      border: none;
      outline: none;
  }
  .close_search_box:focus{
      border: none;
      outline: none;
  }
  .content_box{
  height: 300px;
  margin-top: 10px;
      overflow-y: scroll;
  }
  .recent_searchbar{
  padding: 15px 20px 0;
  }
  .content_box h1{
      font-size: 14px;
      text-align: left;
      font-weight: 500;
  
  }
  /* width */
  .content_box::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .content_box::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  .content_box::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  .content_box::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  .recent_searchbar ul{
  list-style: none;
      display: flex;
      padding: 15px 0;
      align-items: center;
  }
  .recent_searchbar ul li{
  background: #f1f1f1;
      width: fit-content;
      border-radius: 50px;
      color: #000;
      margin-right: 8px;
  }
  .recent_searchbar ul li a{
      padding: 10px;
      color: #000;
      display: flex;
      align-items: center;
      font-size: 12px;
      max-width: 100%;
      height: 100%;
      justify-content: center;
  }
  .recent_searchbar ul li a i{
  margin-left: 5px;
  }
  .recent-content-search{
      padding: 15px 20px 5px;
  }
  .recent-content-search ul{
  padding-top: 5px;
  }
  .recent-content-search ul li a{
  display: flex;
      align-items: center;
      max-width: 100%;
      padding: 10px 0;
      font-size: 13px;
  }
  .recent-content-search ul li a i{
  margin-right: 5px;
      width: 30px;
      height: 30px;
      background: #f1f1f1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #000;
      border-radius: 50%;
  }
  .recent-content-search ul li a img{
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 5px;
  }
  .close_search{
      position: absolute;
      top: 25px;
      right: 30px;
      z-index: 1;
  }
  .mo_search_btm{
      display: none;
  }
  .mobile_s{
      display: none;
  }
  @media(max-width: 769px){
      .sidebar-menu.active .dropdown ul:not(:hover){
      position: relative;
      }
     
      .dropdown ul {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.25s ease;
  }
  .sidebar-menu.active .cat_heading i{
      display: none;
  }
  #nav-toggle:checked+.sidebar .sidebar-menu h4 {
      display: block;
      text-align: left;
  }
  .sidebar-menu.active .dropdown label{
      justify-content: flex-start;
  }
  .sidebar-brand {
      /* height: 90px; */
      padding: 20px 0 0 0;
      color: #fff;
  }
  .sidebar-menu {
      margin-top: 0;
      padding: 0px 20px;
  }
  .sidebar-menu.active .main-navbar {
  padding: 0 20px;
  }
  .dropdown .singl_menu{
      margin-left: 10px;
  }
  .sidebar-menu.active .dropdown .singl_menu label i {
      margin-right: 8px;
  }
  .message_box{
      width: auto;
  }
  .message_box.active {
      opacity: 1;
      right: -100px;
  }
  .sidebar-menu-pr.active {
      transition: 0.5s;
      opacity: 1;
      right: 2%;
      z-index: 1;
  }
  .message_box {
      width: auto;
      right: -1200px;
      top: 90px;
  }
  .right{
      width: 100%;
      justify-content: center;
      align-items: center;
      display: flex;
  }
  .profile_section_btn img {
      width: 100%;
      border-radius: 50%;
  }
  .profile_section_btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 5px;
      position: relative;
  }
  .topbar-barnd-logo img{
      width: 50px;
  }
  .mo_search_btm{
      display: block;
  }
  .mobile_s{
      display: block;
      padding: 10px 15px 10px 15px;
      position: relative;
      margin-top: 15px;
  }
  .close_search {
      position: absolute;
      top: 10px;
      right: 30px;
      z-index: 1;
  }
  .pure-form i {
      position: absolute;
      top: 51%;
      left: 30px;
      transform: translateY(-50%);
      color: #222;
  }
  .s-bar-header .topbar .left .search-bar input{
      width: 100%;
  }
  .top_bar_search_box{
      top: 105px;
      left: 140px;
  }
  }
  
  @media(max-width: 600px){
      .message_box {
      right: -1200px;
      top: 60px;
      width: 100%;
  }
  .profile_name_i .img_p img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
  }
  .profile_section{
      width: 250px;
  }
  .profile_section.active {
      right: -30px;
      opacity: 1;
  }
  .dropdown_profile ul{
      width: 220px;
  }
  .dots_b{
      display: none !important;
  }
  .dropdown .singl_menu {
      margin-left: 0;
  }
  .sidebar-menu h4{
      padding-left: 0;
  }
  .topbar ul.topbar-option {
      margin-top: 5px;
      margin-bottom: 10px;
  }
  .s-bar-header .topbar{
      box-shadow: none;
  }
  .tabcontent .profile_name_i .name_p {
/*
      padding-left: 30px;
      padding-top: 5px;
      padding-bottom: 5px;
*/
  }
  ._tab_box .profile_name_i {
      padding: 10px 10px 10px;
  }
  .main_section{
      padding-top: 30px;
  }
  .top_bar_search_box {
      top: 105px;
      left: 50px;
  }
  .s-bar-header ul.topbar-option li {
      margin-right: 0;
  }
  }
  @media(max-width: 425px){
      .top_bar_search_box {
      top: 105px;
      left: 15px;
      transform: translateX(-2px);
      width: 85%;
  }
  }
  
  
/* Dashboard CSS */


.light-mode .mat-drawer-container {
    background-color: #fff;
}
.light-mode .homepage .mat-toolbar {
    background: #fff;
    min-height: unset;
    padding: 12px 0 6px 0;
}
.mat-toolbar-row {
    height: unset;
}
.logo .mat-icon-button {
    width: auto;
    height: unset;
}
.logo img {
    width: 119px;
    max-width: 80px;
}
.app-toolbar .search-bar {
    margin-right: 20px;
}
.search-bar .search-data {
    width: 212px;
    padding: 0 14px;
    height: 40px;
    border: 1px solid #121a4d;
    border-radius: 50px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    font-size: 14px;
    outline: none;
}
.search-bar button.mat-icon-button {
    position: relative;
    background: #121a4d;
    height: 40px;
    color: #fff;
    border-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    line-height: 0;
    top: -2px;
    width: 50px;
}
.app-toolbar[_ngcontent-serverApp-c92] a[_ngcontent-serverApp-c92] {
    color: #000;
    font-size: 16px;
    padding: 0 9px;
}
.app-toolbar[_ngcontent-serverApp-c92] a[_ngcontent-serverApp-c92]:hover {
    background: transparent;
    color: #121a4d;
}
.banner-sec {
    display: block;
   /* height: 470px;
   */
    padding: 180px 0;
}
.banner-sec .btn {
    cursor: pointer;
}
/* popup */

.popup h2 {
    text-align: center;
    font-size: 25px!important;
    color: #000;
}
.login-form .btn-group a.btn {
/*
    border: 2px solid #121a4d;
    font-weight: 600;
    color: #121a4d;
*/
}
.login-form .btn-group a.btn:hover {
/*    color: #fff;*/
}
.forgot-pass-link {
    text-decoration: underline;
    color: #121a4d;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.homepage[_ngcontent-serverApp-c92] {
    height: unset;
}
.user-strip {
    margin: auto;
    background: #fff;
    max-width: 430px;
    padding: 30px 15px;
    border-radius: 20px;
    text-align: center;
}
.banner-sec .user-strip h1 {
    color: #121a4d;
    margin: 0;
}
.user-strip h1 {
    color: #6A6A6A;
    margin: 0;
}
.user-strip p{
    margin: 0;
}
.welcome-option {
    background-color: #121a4d;
    padding: 30px 20px;
    border-radius: 20px 20px;
}
.event-card .btn-div a.btn {
    background-color: #121a4d;
    color: #fff;
    padding-top: 11px;
    padding-bottom: 11px;
    box-shadow: none;
}
.recent-course-col h3, .upcoming-event-col h3 {
    font-weight: 500;
    font-size: 25px;
    color: #000;
}
.course-card .course-detail h3 {
    margin: 0;
}
.event-card h4 {
    font-size: 19px;
    font-weight: 500;
    color: #000;
}
.course-card .course-detail h3 {
    font-size: 19px;
    margin: 0;
    color: #000;
    font-weight: 500;
    text-transform: capitalize;
}
.recent-course-col,.upcoming-event-col {
/*    background-color: #EBF2FF;*/
    background-color: #fff;
    margin-bottom: 30px;
}
.course-sec {
    padding-bottom: 50px;
}
.light-mode .mat-raised-button.mat-accent {
    background: #121a4d;
    color: #fff;
/*    margin-right: 20px;*/
}
.menu-card,.course-card a.btn,.view-option a{
    cursor: pointer;
}
/* ---- 6 ---- */
.light-mode .mat-raised-button.mat-accent{
/*
    margin-right: 12px;
    cursor: pointer;
*/
}
.user-strip{
    box-sizing: border-box;
}
.banner-sec{
    padding-left: 15px;
    padding-right: 15px;
}
.course-card a.btn,.event-card .btn-div a.btn{
    border: 2px solid #121a4d;
}
.course-card a.btn:hover,.event-card .btn-div a.btn:hover{
    color: #121a4d;
    background: transparent;
    font-weight: 500;
}
/* enroll */
.course-count-card p{
    margin-bottom: 0;
    font-weight: 600;
    color: #000;
    text-align: center;
    font-size: 20px;
}
.course-count-card h4{
    margin-bottom: 0;
    padding-top: 14px;
}
.time-or-progress .chapter-time p {
    margin-top: 10px;
}
.time-or-progress .chapter-time h5{
    margin: 0;
}
.chapter-card .chapter-name h3{
    text-transform: capitalize;
}
/* calender */
.cdk-overlay-container .cdk-global-overlay-wrapper>.cdk-overlay-pane{
 position: static!important; 
    width: auto!important;

}
.meeting-container .mat-form-field{
    display: block;
}
.meeting-container{
    box-shadow: none!important;
}
.meeting-container{
    overflow-y: auto;
    height: 460px;
}
.meeting-container .mat-card-header {
    text-align: center;
    display: block;
}
.meeting-container .mat-card-actions {
    margin-left: 0px;
    margin-right: 0;
    margin-bottom: 0;
}
.meeting-container .mat-dialog-actions{
    display: block;
}
.meeting-container .mat-card-actions .mat-button, .meeting-container .mat-card-actions .mat-raised-button, .meeting-container .mat-card-actions .mat-stroked-button{
/*
    text-transform: uppercase;
    padding: 10px 45px!important;
    background: transparent;
    margin-left: 0!important;
    border: 2px solid #121a4d;
    font-weight: 600;
    color: #121a4d;
    line-height: normal;
    border-radius: 40px;
    box-sizing: border-box;
  
    box-shadow: 0 0 10px 0px #d4d4d4;
*/
}
.meeting-container .mat-card-actions .mat-button:hover, .meeting-container .mat-card-actions .mat-raised-button:hover, .meeting-container .mat-card-actions .mat-stroked-button:hover{
/*
    color: #fff;
    background: #121a4d;
*/
}
.fc .fc-button {
    text-transform: capitalize;
}
/* faq */
.course-sec .faq-query-from a.btn{
    background-color: #121a4d;
    color: #fff;
    border: 2px solid #121a4d;
    padding: 11px 38px;
    display: inline-block;
    max-width: unset;
    width: auto;
}
.course-sec .faq-query-from a.btn:hover{
    color: #121a4d;
    background: transparent;
    font-weight: 500;
}
/* notification */
.mat-dialog-container {
    padding: 30px 24px!important;
/*    border-radius: 10px!important;*/
    /* width: 550px!important; */

}
.popup .content {
    overflow: unset;
}
.mat-dialog-container{
    border-radius: 10px;
}
#notification-pop .popup{
    margin: 0;
    height: unset;
    overflow:unset;
    width: auto;
    max-width: 100%;
}
#notification-pop .pop-title a.close{
    top:-20px;
    right: 0;
    cursor: pointer;
}
#notification-pop .popup .content {
    height: 350px;
    max-height: 100%;
    overflow-y: auto;
    margin-top: 20px;
}
.pop-notification-card {
    box-shadow: 0 0 5px rgb(0 0 0 / 8%);
}
/* profile */
.profile-sec>.container>.pure-g>.pure-u-1:nth-child(1) .border-right{
    padding-right: 20px;
    box-sizing: border-box;
}
.profile-general-form .border-right>label{
    font-weight: 500;
    font-size: 22px;
    display: block;
    margin-bottom: 20px;
}
.profile-sec button.mat-raised-button{
    background-color: #121a4d;
    color: #fff;
    border: 2px solid #121a4d;
    padding: 10px 38px;
    display: inline-block;
    max-width: unset;
    width: auto;
    font-weight: 500;
    border-radius: 40px;
    line-height: normal;
    box-shadow: 0 0 10px 0px #d4d4d4!important;
}
.profile-sec button.mat-raised-button:hover{
    color:#121a4d;
    background-color: transparent;
}

/* dashboard */

.light-mode .container-content .mat-card:not([class*=mat-elevation-z]), .container-content .lesson-container[_ngcontent-serverApp-c152] {
/*    box-shadow: 0 2px 13px 0 rgb(18 20 113 / 6%);*/
   
/*    box-shadow: 0 0 5px rgb(0 0 0 / 8%)!important;*/
/*    margin-bottom: 20px;*/
   
}
.light-mode .mat-raised-button:not([class*=mat-elevation-z]){
    box-shadow: 0 0 5px rgb(0 0 0 / 8%);
}
/*
.light-mode .mat-card:not([class*=mat-elevation-z]){
    margin-top: 20px;
}
*/
.lesson-container .mat-radio-button{
    margin-left: 13px;
}
.mat-card-title,.lesson-container h4{
    font-size: 22px;
    margin-bottom: 25px;
    font-weight: 500;
}
.lesson-container .lesson-list[_ngcontent-serverApp-c152]{
    margin-top: 20px;
    border-bottom: 0;
}
.rule{
    margin-top: 15px!important;
}
.rule .title{
    margin-top: 0;
    margin-bottom: 10px;
}
.rule .radio {
    padding: 5px 0px;
    margin-right: 24px;
}
.module-list .module-box[_ngcontent-serverApp-c150], .lesson-list .module-box[_ngcontent-serverApp-c152]{
    border-bottom: 0;
}
.course-module.select{
    cursor: pointer;
}
.actions .mat-stroked-button.mat-accent{
    color:red;
    border-color:red;
}
.actions .mat-stroked-button.mat-accent:focus,.actions .mat-stroked-button.mat-accent:hover{
    background: red;
    color:#fff;
}
.container-content {
    padding-top: 0px;
}

.container-menu .menus ,.container-menu .menus[_ngcontent-serverApp-c218]{
/*
    margin: 0 0 17px 0;
    padding: 10px 25px;
    color:#fff;
    background: #121a4d;
    box-shadow:0 0 5px rgb(0 0 0 / 8%);
    cursor: pointer;
    border:2px solid #121a4d;
    font-weight: 600;
*/
}
.container-menu .menus:hover, .container-menu .menus[_ngcontent-serverApp-c218]:hover{
/*
    background:transparent;
    color:#121a4d;
*/
}
.course-module[_ngcontent-serverApp-c152]{
    cursor: pointer;
}
.mat-form-field-wrapper{
    margin-bottom: 16px;
}
.topbar-option li a{
    cursor: pointer;
}
.s-bar-header .left h2{
    margin: 0;
}
.s-bar-header label i{
    cursor: pointer;
}
.select[_ngcontent-serverApp-c152]{
    border-color:#121a4d;
}
.sidebar-menu li{
    padding-left: 0;
}
.dashboard-body[_ngcontent-serverApp-c98]{
    background-color: transparent;
}
.sidebar-brand h2{
    margin: 0;
}
.container-header,.table-header{
    flex-wrap: wrap;
}
.container-header{
    align-items: center;
}
.container-content form{
   /* max-width: 100%;
   */
}
.mat-form-field,.mat-column-name,.mat-column-description{
    text-transform: capitalize;
}
.mat-expansion-panel .mat-expansion-panel-header{
    padding-left: 0;
}
.mat-expansion-panel-header .mat-content{
    flex: none;
}
.mat-error{
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: normal!important;
}
.pure-g {
    word-spacing: normal;
}
.border[_ngcontent-serverApp-c145]{
    margin-bottom: 20px;
}
.popup .content {
    width:100%;
}

#sidebar.sidebar{
    overflow: auto;
}
@media (min-width:770px){
    .sidebar-brand {
        padding: 25px 0 0 0;
   }
}



 
/* 13 jan (nav css) */
 p, a, button, h1, h2, h3, h4, h5, h6, li, span, div{
     font-family: 'Open Sans', sans-serif!important;
}
 body{
     background-color: #fafafa!important;
     overflow-x: hidden;
}
 .main_button,.close_btn {
     padding: 10px 23px!important;
     height: unset!important;
     color: #fff!important;
     background-color: #1377c9!important;
     margin: 10px 0px 10px 0;
     font-size: 16px!important;
     border-radius: 5px!important;
     line-height: 23px!important;
     cursor: pointer;
     display: inline-block;
     border:none!important;
     box-shadow: none!important;
    /* box-shadow: 0 0 10px 0px #d4d4d4!important;
    */
}
 .close_btn {
     padding: 9px 23px!important;
     background-color: red!important;
}
 .popup .close_btn {
     padding: 10px 23px!important;
}
 .popup .btn-group{
     display: block!important;
}
 .popup .btn-group a,.popup .btn-group button{
     margin: 8px 8px 8px 0!important ;
}
 .filter_btn_group button{
     margin: 0px 8px 5px 0!important;
     padding: 8px 18px!important;
}
 .main_button:hover{
     background-color:#121a4d!important;
}
 .container-menu button.main_button{
     margin: 5px 0px 17px 0;
}
 .container-header .main_button:last-child{
     margin:0;
}
 .space_class {
     padding: 50px 0;
}
 app-root{
     display: flex;
     flex-direction: column;
}
 app-nav{
     flex:1;
}
 .two_col_row {
     margin: 0 -10px;
}
 .two_col_row>.form_row {
     padding: 0 10px;
}
 .header_titles{
     margin-bottom: 0;
}
 .main-header{
    color: #000;
     font-weight: 500;
     margin: 0 0 0px 0!important;
     font-size: 24px!important;
     line-height: 32px!important;
}
 .container-header:empty{
     display: none!important;
}
 .profile_tdata .container-body{
     padding: 0;
}
/* tables */
 .common_tables{
     margin-top: 24px;
}
 .table-content table {
     border: 1px solid rgba(0, 0, 0, 0.12);
}
 .common_tables thead{
     background: #fafafa!important;
}
 .common_tables th {
     text-transform: capitalize;
     font-weight: 500;
}
 tr.mat-row, tr.mat-footer-row{
     height: unset;
}
 .common_tables td,.common_tables th{
     border: none!important;
     vertical-align: middle!important;
     color: #000!important;
     font-size: 15px;
     padding-top: 10px!important;
     padding-bottom: 10px!important;
}
 .common_tables tr{
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
 .icons_row {
     margin: 0;
     padding: 0px 2px 10px 2px;
}
 .icons_row button{
     margin: 10px 10px 0 0;
}
 .icons_row button.export_btn{
     margin:10px 0 0 0;
}
 .mat-column-action button{
     margin-right: 8px;
}
 .add_actions button{
     margin:0 7px 8px 0 ;
}
 .add_actions button:last-child{
     margin: 0;
}
 main{
     background: transparent;
     padding: 30px;
     margin: 30px 0;
}
 .export_menu {
     padding: 12px;
}
 .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{
     background-color:rgba(19, 119 ,201,0.5)!important;
}
 .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb,.mat-radio-inner-circle{
     background-color: #2979ff !important;
}
 .mat-radio-outer-circle{
     border-color: #2979ff !important;
}
 .dashboard_index .main_button{
     margin: 0!important;
}
 .mat-radio-label{
     display: flex!important;
}
 .container-content.box_div{
     padding: 0!important;
}
 .box_s{
     box-shadow: 0 0 4px rgba(0,0,0,0.2)!important;
     padding: 30px 20px!important;
     margin: 20px 0 30px 0;
}
 .box_title{
     font-size: 21px!important;
     line-height: 31px!important;
     margin-bottom: 20px!important;
     font-weight: 500!important;
     color: #000!important;
}
 .header_right{
     display: flex;
     align-items: center;
}
 .top-nav a span.mat-button-wrapper{
     display: flex;
     align-items: center;
}
 .header_right a,.header_menu_btn{
     color:#fff!important;
     font-size: 15px!important;
}
 .top-nav a span.mat-button-wrapper .mat-icon {
     margin-right: 4px;
}
 .login_footer p{
     margin-bottom: 0!important;
}
 .event-card{
     box-shadow: 0 0 4px rgba(0,0,0,0.2)!important;
     padding: 30px 20px!important;
}
 .small-title {
     font-size: 24px!important;
     font-weight: 500!important;
     margin-bottom: 0!important;
}
 .space_tb{
     padding: 60px 0 30px 0;
}
 .section_div{
     margin-bottom: 15px;
}
 .popup-mt{
     margin-top: 20px;
}
 .dashboard_Options .main_button{
     margin-top: 24px!important;
}
 .option_title{
     font-weight: 700!important;
}
 .options_header.container-header{
     align-items: center;
     padding-right: 0;
     padding-left: 0;
}
 .options_header h2{
     margin-bottom: 0!important;
     font-weight: 500!important;
}
 .dashboard_Options .prior{
     text-align: center;
}
 #sidebar.sidebar{
     z-index: 9999;
}
 .lesson_rd{
     display: flex;
     flex-wrap: wrap;
}
 .inner_title{
     margin-top: 16px!important;
}
 .radio{
     margin-bottom: 0!important;
}
 .rule .mat-form-field >.mat-form-field-wrapper{
     margin-bottom: 0!important;
}
 .rule .mat-form-field-flex {
     background-color: transparent!important;
}
 .completion_rules .lesson_rd{
     align-items: center;
}
 .completion_rules .lesson_t{
     margin-right: 8px;
}
 .margin_top{
     margin-top:16px;
}
 .padding_bottom{
     padding-bottom: 30px!important;
}
 .resource_Group .border ,.resource_Group .rule-btn{
     margin-top: 20px;
}
 .resource_Group .mat-form-field-wrapper {
     margin-bottom: 0!important;
}
 .resource_Group .rule-btn .add-btn{
     color:#fff!Important;
}
 .dashboard-content .container-body {
     padding-left: 20px!important;
     padding-right: 20px!important;
}
 .dashboard-content .container-header,.dashboard-content .container-menu{
     padding-left: 0px!important;
     padding-right: 0px!important;
}
 .add_Coupon .mat-radio-button {
     margin: 8px 12px 0 0;
}
 .dashboard-content .cal{
     margin: 0!important;
     padding: 30px 20px!important;
}
 .export_title{
     font-weight: 600;
     text-align: center;
     color:#000;
     padding-bottom: 14px;
}
 .top_s{
     padding-top: 13px;
}
 .mat-menu-item .mat-icon {
     margin-right: 3px!important;
}
 .header_row{
     padding-left: 0!important;
     padding-right: 0!important;
}
 .mat-menu-item{
     height: unset!important;
     line-height: 28px!important;
     padding: 8px!important;
     color: #000!important;
}
 .mat-menu-item .mat-divider {
     display: none!important;
}
 .container{
     width: 100%!important;
}
 .faq_left{
     padding: 0 30px 0 0 ;
}
 .dashboard-content .meeting-container{
     width: 100%!important;
     padding: 30px 20px!important;
     height: unset;
     overflow: visible;
     max-width: 600px;
     margin-left: 0!important;
}
 .meeting-container .mat-card-actions{
     padding: 0!important;
}
 .dashboard-content .meeting-container .mat-card-content{
     padding: 0!important;
}
 .dashboard-content .meeting-container .mat-card-header-text{
     text-align: left;
     margin-left: 0;
}
 h1,h2,h3,h4,h5,h6{
     color:#000!important;
}
 .message_header h2{
     font-size: 22px!important;
     line-height: 30px!important;
}
 .message_header .close_b{
     background: red!important;
     color:#fff!important;
     font-size: 16px;
}
 .ticket_message_inner{
     text-align: left;
}
 .ticket_message a{
     font-size: 16px;
     text-transform: capitalize;
}
 .chat-panel{
     height: unset!important;
     margin: 44px 0!important;
}
 .chat-detail{
     margin: 0!important;
}
 .msg-conversation:empty{
     display: none!important;
}
 .chat-user-message-panel{
     width: 100%!important;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     display: block!important;
}
 a:focus{
     outline: none!important;
}
 .chat_entry .mat-form-field-infix {
     padding: 10px 0 important;
}
 .chat_entry input.mat-input-element {
     min-height: 30px;
     margin: 0!important;
}
 .meeting-container button{
     margin: 8px 8px 0 0!important;
}
 .tag-list{
     padding-left: 0!important;
     padding-right: 0!important;
}
 .meeting-container .mat-form-field-wrapper{
     margin-bottom: 10px;
}
 .user_sideBar .mat-drawer{
     z-index: 99999;
     position: fixed;
     top:72px;
     min-height: 100%;
}
 .user_sideBar .mat-drawer-backdrop {
     position: fixed;
}
 .dashboard_Options .mat-drawer{
     position: fixed;
     z-index: 999;
     padding-top: 10px!important;
}
 .mat-dialog-container{
     max-height: 90vh!important;
     overflow-x: hidden!important;
}
 .popup .mat-select{
     padding-top: 5px;
     padding-bottom: 5px;
}
 .mat-form-field-subscript-wrapper{
     overflow: visible!important;
}
 .light-mode .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover {
     background: none!important;
}
 .drag-handle-plus{
     margin-left: 8px;
}
 .ADd_template .menus{
    margin: 3px!important;
}
 .customReports {
    margin: 10px 0;
}
 .customReports .main_button{
     margin: 0 0px 0 8px!important;
}

.homepage .dashboard-body{
    height: unset;
    overflow: visible;
}
.paymentTitle .mat-icon{
    cursor: pointer;
}
.paymentTitle{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total,.subtotal{
    font-size: 16px;
    font-weight: 500!important;
}
 @media (min-width:768px){
     .footer_row p,.footer_row ul{
         margin-bottom: 0!important;
    }
     .mat-form-field.country_Select{
         margin-top: -12px!important;
    }
}
 @media (max-width:1023px){
     .lesson_rd{
         display: block;
    }
     .lesson-container .mat-radio-button:first-child{
         margin-left: 0;
    }
     .lesson_t{
         margin-bottom: 10px;
    }
     .recent-course-col, .upcoming-event-col {
         padding: 0;
         background-color: transparent;
    }
     .space_tb {
         padding: 35px 0 10px 0;
    }
     .recent-course-col>h3, .upcoming-event-col>h3{
         text-align: center;
    }
       .cdk-overlay-container .cdk-global-overlay-wrapper>.cdk-overlay-pane.filters-dialog-container{
         width:100%!important;
    justify-content: center;
    width: 100%!important;
         margin: auto!important;
     }
}
 @media (max-width:768px){
     main{
         padding: 10px 0;
         margin: 65px 0 30px 0;
    }
     .icons_row .spacer{
         display: none;
    }
     .container-header{
         display: block!important;
    }
     .container-header .action{
         margin-top: 16px;
    }
     .dashboard-content .container-body {
         padding-left: 14px!important;
         padding-right: 14px!important;
    }
     .lesson-container .mat-radio-button{
         margin: 0 0 16px 0 ;
         display: block;
    }
     .rule .radio {
         display: block;
         padding: 9px 0px;
         margin-right: 5px;
    }
     .completion_rules .lesson_t {
         margin-right: 0px;
         display: block;
    }
     .container-header.options_header{
         display: flex!important;
    }
      .s-bar-header .topbar .left .search-bar .web_s {
    display: none;
  }
     .container-header.dashboard_index .main-header{
         margin-bottom: 15px!important;
     }
}
 .cal{
     margin: 40px!important;
}
 .light-mode .mat-drawer-container{
     background-color: transparent!important;
}
 @media (max-width:767px){
     .faq_left{
         padding: 0 0px 30px 0 ;
    }
     .faq_block .small-title{
         text-align: center;
         width: 100%;
    }
     .cal{
         margin: 40px 20px!important;
    }
     .meeting-container{
         height: 400px;
    }
     .dashboard_index .main-header{
         margin-bottom: 20px!important;
    }
     .filter_div{
         flex-wrap: wrap;
     }
   
}
 @media (max-width:600px){
     .mat-dialog-container{
         width: 100%!important;
    }
     .fc .fc-toolbar.fc-header-toolbar{
         flex-wrap: wrap;
                  margin-bottom: 14px;
         text-align: center;
    }

    
     .dashboard-content .meeting-container{
         margin-top:0!important;
    }
     .quiz_r .mat-radio-button{
         display: block;
         margin: 5px 0 5px 0;
     }
  
     .course-player .course-title{
         padding-left: 0px!important;}
}

.filter-menu{
    height: unset!important;
}
.filter-value{
    width: 180px;
/*    word-break: break-all;*/
        text-overflow: ellipsis;
    overflow: hidden;
/*    white-space: normal!important;*/
}
.filter_div,.table-header{
    align-items: flex-start;
}
.module-add{
    height: unset!important;
}
.chapter-card,.course-count-card{
    background-color: #fff;
}
.grid_div{
    border:1px solid #ccc;
    margin: 20px 0;
    border-radius: 8px;
}
.course-player-content{
    padding: 0 15px;
    background: #fff;
}
.course-player-content .popup .btn-group{
    text-align: left!important;
}
.quiz_r{
    display: block;
    width:100%;
}
.quiz_r  .mat-radio-button {
    margin-right: 10px;
}
.course-player .course-title{
 padding-left: 10px;
    color: #000!important;
    text-transform: capitalize;
}
.light-mode .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .light-mode .mat-checkbox-checked.mat-accent .mat-checkbox-background{
    background-color: #2979ff!important;
}
.light-mode .mat-radio-button.mat-accent .mat-radio-inner-circle, .light-mode .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .light-mode .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .light-mode .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
    background-color: #1377c9!important;
}