@media screen and (max-width: 768px) {
  #header.header {
    padding: 0 1rem;
    height:  3rem;
  }
  .body-outer{
    padding-left: 0;
    padding: calc( 4rem + 1rem) 0 0 0;
  }
  .body-outer.body-pd {
    padding-left: 0;
  }
  #header.header{
    padding: 0px 15px;
    height: calc( 4rem + 1rem);
  }
  #header.header .header_toggle img.img-fluid {
    width: 100px;
  }
  #header .dropdown.notification {
    margin: 0 15px;
  }
  #header.header .header_img img {
    width: 25px
  }
  #nav-bar.l-navbar {
    padding: .5rem 0rem 0 0;
    width: 0;
    background-color: #082936;
  }
  #nav-bar.l-navbar.show {
    left: 0;
  }
  #nav-bar::after {
    right: 0;
  }
}



@media (max-width: 991px){
  /* Dashboard page */
  section#dashboard .main-div.div-2 {
    margin-top: 30px;
  }
  section#dashboard .title-banner{
    min-height: 12vh;
  }

  /* ---------------------------------------------------
  Video Page CSS
  ----------------------------------------------------- */
  section#video-page #sidebar.active {
    margin-right: -515px;
  }
  section#video-page #sidebar {
    width: auto;
    min-width: 500px;
    max-width: 500px;
    transition: all 0.3s;
    z-index: 2!important;
    position: fixed;
    right: 0;
  }
  section#video-page #sidebar .module-section {
    background: #fff;
  }

  section#video-page #sidebar .sidebar-header {
    padding: 21px 16px 30px 16px;
  }
  section#video-page #sidebar .sidebar-header h4 {
    font-size: 28px;
  }
  div#content .flex-grow-1.right-content {
    padding: 15px 0px;
  }
  div#content .navbar button.toogle-btn.text-sidebar {
    position: absolute;
    z-index: 100;
    right: 0;
  }
  #content .bredcrumb {
    line-height: 24px !important;
  }
  div#content .bredcrumb-section {
    text-align: left !important;
  }
  #content .topic-section button.btn {
    margin-top: 5px;
  }
  #content .topic-section {
    padding-bottom: 0px;
  }
}

@media (max-width: 767px){
  /* Login page */
  section#entrance .form-div {
    padding: 25px 25px;
  }

  /* Dashboard page */
  section#dashboard .main-div {
    margin-left: 0;
  }
  section#dashboard .main-div {
    padding: 20px;
  }
  section#dashboard .main-div .text {
    padding-left: 0%;
  }
  section#dashboard .main-div .text::after {
    background: transparent;
    width: 85px;
    height: 85px;
    left: auto;
    top: auto;
    right: -7%;
    bottom: -25%;
  }
  section#dashboard .main-div.div-2,
  section#dashboard .main-div.div-3,
  section#dashboard .main-div.div-4,
  section#dashboard .main-div.div-5 {
    margin-top: 15px;
  }


  /* ---------------------------------------------------
  Video Page CSS
  ----------------------------------------------------- */
  section#video-page #sidebarCollapse span {
    display: none;
  }
  img.img-fluid.logo {
    width: 100px;
  }
  section#video-page #sidebar .sidebar-header {
    padding: 15px 16px 30px 16px;
  }
  section#video-page #sidebar {
    min-width: 300px;
    max-width: 376px;
  }
  section#video-page #sidebar.active {
    margin-left: -376px;
  }
  div#content .topic-section h4.topic-name {
    font-size: 20px;
  }
  div#content .bredcrumb-section {
    text-align: left !important;
  }
  div#content .topic-section .bredcrumb a,
  div#content .topic-section .bredcrumb span {
    font-size: 14px;
  }
  div#content .topic-section button.btn {
    display: none;
  }
  div#content iframe {
    height: 189px;
  }
  div#content .action-btn  {
    text-align: center !important;
  }
  div#content button.btn.Complete-sm{
    background: #77c9be;
    border-radius: 0;
    color: #fff;
    font-size: 14px;
    padding: 6px 25px;
    width: 100%;
    margin-top: 10px;
  }
  #content .topic-section {
    padding-bottom: 25px;
  }
}