/*
Template Name: Moltran Dashboard
Author: CoderThemes
Email: coderthemes$gmail.com
File: Topbar,Left-sidebar,Right-sidebar
*/
.topbar {
  -webkit-box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2);
  left: 0px;
  position: fixed;
  right: 0;
  top: 0px;
  z-index: 999;
  padding: inherit; }
  .topbar .topbar-left {
    background-color: #33363b;
    float: left;
    height: 70px;
    position: relative;
    max-width: 240px;
    width: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; }
    .topbar .topbar-left.light .button-menu-mobile {
      background: transparent;
      border: none;
      line-height: 70px;
      padding-left: 20px;
      cursor: pointer;
      color: #ffffff;
      opacity: 0.5; }
      .topbar .topbar-left.light .button-menu-mobile:hover {
        opacity: 1; }
    .topbar .topbar-left span {
      display: inline; }
  .topbar .logo {
    line-height: 70px;
    padding: 0 12px; }
    .topbar .logo img {
      max-height: 50px;
      max-width: 220px; }
    .topbar .logo > img {
      display: none; }

.navbar {
  border-radius: 0px;
  border: none;
  margin-bottom: 0px;
  height: 70px; }
  .navbar .button-menu-mobile {
    margin-left: 10px; }
    .navbar .button-menu-mobile:hover {
      color: #1e252d; }
  .navbar.navbar-default {
    background-color: #ffffff; }
    .navbar.navbar-default i {
      font-size: 20px; }
    .navbar.navbar-default #topicons.nav > li {
      display: inline-block; }
      .navbar.navbar-default #topicons.nav > li .btn {
        margin: 0;
        border-radius: .7rem; }
        .navbar.navbar-default #topicons.nav > li .btn img {
          vertical-align: sub; }
      .navbar.navbar-default #topicons.nav > li .btn-outline-warning:hover img {
        filter: brightness(3); }
      .navbar.navbar-default #topicons.nav > li > a {
        line-height: 70px;
        padding: 0px 5px;
        position: relative; }
        .navbar.navbar-default #topicons.nav > li > a i {
          font-size: 20px; }
        .navbar.navbar-default #topicons.nav > li > a .badge {
          position: absolute;
          right: 0px;
          top: 8px;
          z-index: 2;
          border-radius: 4px;
          padding: 6px; }
    .navbar.navbar-default .container {
      padding-left: 0; }
  .navbar.navbar-light {
    background-color: #f4f0eb; }
    .navbar.navbar-light i {
      font-size: 20px; }
    .navbar.navbar-light #topicons.nav > li {
      display: inline-block; }
      .navbar.navbar-light #topicons.nav > li .btn {
        margin: 0;
        border-radius: 100%; }
        .navbar.navbar-light #topicons.nav > li .btn img {
          vertical-align: sub; }
      .navbar.navbar-light #topicons.nav > li .profile img {
        border: 3px solid #fff;
        background: #e5e9f0;
        border-radius: 100%; }
      .navbar.navbar-light #topicons.nav > li .btn-outline-warning:hover img {
        filter: brightness(3); }
      .navbar.navbar-light #topicons.nav > li > a {
        line-height: 70px;
        padding: 0px 5px;
        position: relative; }
        .navbar.navbar-light #topicons.nav > li > a i {
          font-size: 20px; }
        .navbar.navbar-light #topicons.nav > li > a .badge {
          position: absolute;
          right: 0px;
          top: 8px;
          z-index: 2;
          border-radius: 4px;
          padding: 6px; }
    .navbar.navbar-light .navbar-nav > li > a:focus, .navbar.navbar-light .navbar-nav > li > a:hover {
      background: transparent; }
    .navbar.navbar-light .container {
      padding-left: 0; }
  .navbar.navbar-primary {
    background-color: #3e444b; }
    .navbar.navbar-primary i {
      font-size: 20px; }
    .navbar.navbar-primary .button-menu-mobile {
      color: #ffffff; }
      .navbar.navbar-primary .button-menu-mobile:hover {
        color: #ffffff; }
    .navbar.navbar-primary #topicons.nav > li {
      display: inline-block; }
      .navbar.navbar-primary #topicons.nav > li > a {
        line-height: 70px;
        padding: 0px 5px;
        position: relative; }
        .navbar.navbar-primary #topicons.nav > li > a i {
          font-size: 20px; }
        .navbar.navbar-primary #topicons.nav > li > a .badge {
          position: absolute;
          right: 0px;
          top: 8px;
          z-index: 2;
          border-radius: 4px;
          padding: 6px; }
        .navbar.navbar-primary #topicons.nav > li > a:hover, .navbar.navbar-primary #topicons.nav > li > a:focus {
          background: none; }
          .navbar.navbar-primary #topicons.nav > li > a:hover .btn-circle, .navbar.navbar-primary #topicons.nav > li > a:focus .btn-circle {
            background: rgba(255, 255, 255, 0.2) !important; }
        .navbar.navbar-primary #topicons.nav > li > a .btn-circle {
          padding: 6px 8px;
          line-height: 42px;
          margin: 0; }
          .navbar.navbar-primary #topicons.nav > li > a .btn-circle img {
            vertical-align: sub; }
        .navbar.navbar-primary #topicons.nav > li > a .btn-outline-default {
          background: transparent !important;
          border-color: transparent !important;
          color: #ffffff !important; }
  .navbar.navbar-secondary {
    background-color: #9a8b78; }
    .navbar.navbar-secondary i {
      font-size: 20px; }
    .navbar.navbar-secondary .button-menu-mobile {
      color: #ffffff; }
      .navbar.navbar-secondary .button-menu-mobile:hover {
        color: #ffffff; }
    .navbar.navbar-secondary #topicons.nav > li {
      display: inline-block; }
      .navbar.navbar-secondary #topicons.nav > li > a {
        line-height: 70px;
        padding: 0px 5px;
        position: relative; }
        .navbar.navbar-secondary #topicons.nav > li > a i {
          font-size: 20px;
          vertical-align: initial; }
        .navbar.navbar-secondary #topicons.nav > li > a .badge {
          position: absolute;
          right: 0px;
          top: 8px;
          z-index: 2;
          border-radius: 4px;
          padding: 6px; }
        .navbar.navbar-secondary #topicons.nav > li > a:hover, .navbar.navbar-secondary #topicons.nav > li > a:focus {
          background: none; }
          .navbar.navbar-secondary #topicons.nav > li > a:hover .btn-circle, .navbar.navbar-secondary #topicons.nav > li > a:focus .btn-circle {
            background: rgba(255, 255, 255, 0.2) !important; }
        .navbar.navbar-secondary #topicons.nav > li > a .btn-circle {
          padding: 6px 8px;
          line-height: 42px;
          margin: 0; }
          .navbar.navbar-secondary #topicons.nav > li > a .btn-circle img {
            vertical-align: sub; }
        .navbar.navbar-secondary #topicons.nav > li > a .btn-outline-default {
          background: transparent !important;
          border-color: transparent !important;
          color: #ffffff !important; }
  .navbar.navbar-dark {
    background-color: #1e252d; }
    .navbar.navbar-dark i {
      font-size: 20px; }
    .navbar.navbar-dark .button-menu-mobile {
      color: #1e252d; }
      .navbar.navbar-dark .button-menu-mobile:hover {
        color: #1e252d; }
    .navbar.navbar-dark #topicons.nav > li {
      display: inline-block; }
      .navbar.navbar-dark #topicons.nav > li > a {
        line-height: 70px;
        padding: 0px 5px;
        position: relative; }
        .navbar.navbar-dark #topicons.nav > li > a i {
          font-size: 20px;
          vertical-align: initial; }
        .navbar.navbar-dark #topicons.nav > li > a .badge {
          position: absolute;
          right: 0px;
          top: 8px;
          z-index: 2;
          border-radius: 4px;
          padding: 6px; }
        .navbar.navbar-dark #topicons.nav > li > a:hover, .navbar.navbar-dark #topicons.nav > li > a:focus {
          background: none; }
          .navbar.navbar-dark #topicons.nav > li > a:hover .btn-circle, .navbar.navbar-dark #topicons.nav > li > a:focus .btn-circle {
            background: rgba(255, 255, 255, 0.2) !important; }
        .navbar.navbar-dark #topicons.nav > li > a .btn-circle {
          padding: 6px 8px;
          line-height: 42px;
          margin: 0; }
          .navbar.navbar-dark #topicons.nav > li > a .btn-circle img {
            vertical-align: sub; }
        .navbar.navbar-dark #topicons.nav > li > a .btn-outline-default {
          background: transparent !important;
          border-color: transparent !important;
          color: #ffffff !important; }
  .navbar .navbar-nav > .open > a {
    background-color: transparent; }
    .navbar .navbar-nav > .open > a:focus {
      background-color: transparent; }
    .navbar .navbar-nav > .open > a:hover {
      background-color: transparent; }
  .navbar ~ .content-page {
    margin-top: 70px; }

.dropdown-toggle.profile::after {
  display: none; }

.dropdown-menu-lg {
  width: 300px; }
  .dropdown-menu-lg .list-group {
    margin-bottom: 0px; }
  .dropdown-menu-lg .list-group-item {
    border: none;
    padding: 10px 20px; }
  .dropdown-menu-lg .media-heading {
    margin-bottom: 0px; }

.notifi-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #1e252d;
  font-size: 16px;
  font-weight: 400;
  padding: 5px 0px 10px; }

.navbar-form {
  border: none;
  box-shadow: none;
  padding: 0px; }

input.search-bar::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6); }
input.search-bar:-moz-placeholder {
  color: rgba(255, 255, 255, 0.6); }
input.search-bar::-moz-placeholder {
  color: rgba(255, 255, 255, 0.6); }
input.search-bar:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6); }

ul.navbar-nav {
  flex-direction: inherit; }

.navbar-nav {
  margin: 0px; }

.side-menu {
  bottom: 0;
  top: 0;
  width: 240px;
  z-index: 2; }
  .side-menu .menu-bottom {
    bottom: 0;
    position: absolute;
    right: 0; }
    .side-menu .menu-bottom .button-menu-mobile {
      background: #ffffff;
      border: 0;
      padding: 10px;
      font-size: 2.5rem; }

.side-menu.left {
  background: #ffffff;
  position: absolute;
  top: 70px; }

body.fixed-left .side-menu.left {
  bottom: 50px;
  height: 100%;
  margin-bottom: -70px;
  margin-top: 0px;
  padding-bottom: 70px;
  position: fixed; }

.content-page {
  margin-left: 240px;
  overflow: hidden;
  position: relative; }
  .content-page .subheader {
    width: 100%;
    background: #ffffff;
    min-height: 70px; }
    .content-page .subheader .subheader-inner {
      max-width: 1650px;
      padding: 0 20px;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box; }
    .content-page .subheader .submenu {
      border-top: 1px solid #dddddd; }

.right-sidebar .content-page {
  margin-right: 240px; }

.content-page > .content {
  margin-bottom: 60px;
  margin: 70px auto; }
  .content-page > .content .container {
    padding: 20px;
    max-width: 1650px; }

.sidebar-inner {
  height: 100%; }

#sidebar-menu, #sidebar-menu ul, #sidebar-menu li, #sidebar-menu a {
  border: 0;
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
  font-size: 1.3rem; }

#sidebar-menu {
  padding-bottom: 50px;
  width: 100%; }
  #sidebar-menu a {
    line-height: 1.3; }
  #sidebar-menu ul ul {
    display: none;
    background: #f4f0eb;
    margin: 0 10px;
    border-radius: .7rem; }
    #sidebar-menu ul ul li {
      border-top: 0; }
    #sidebar-menu ul ul li.active a {
      color: #3e444b; }
    #sidebar-menu ul ul a {
      color: #555555;
      display: block;
      padding: 10px 40px; }
      #sidebar-menu ul ul a:hover {
        color: #3e444b; }
    #sidebar-menu ul ul ul a {
      padding-left: 80px; }

#sidebar-menu > ul > li:hover > a .menu-item {
  background: #e5e9f0;
  border-radius: .7rem; }
#sidebar-menu > ul > li:hover > a .btn {
  background: #e5e9f0; }
#sidebar-menu > ul > li > a {
  color: #555555;
  display: block;
  padding: 10px 12px 5px; }
  #sidebar-menu > ul > li > a .menu-item {
    display: flex;
    align-items: center; }
  #sidebar-menu > ul > li > a:hover {
    text-decoration: none; }
  #sidebar-menu > ul > li > a .btn {
    padding: 1.2rem 1.5rem;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    border-radius: inherit; }
  #sidebar-menu > ul > li > a.active .menu-item {
    color: #ffffff;
    background-color: #3e444b;
    border-radius: .7rem; }

#sidebar-menu > ul > li > a > span {
  vertical-align: middle; }

#sidebar-menu > ul > li > a > i {
  font-size: 13px;
  line-height: 17px;
  margin-left: 3px;
  margin-right: 15px;
  text-align: center;
  vertical-align: middle;
  width: 20px; }

#sidebar-menu > ul > li > a > i.i-right {
  float: right;
  margin: 3px 0 0 0; }

#sidebar-menu > ul > li > a.active i.icon {
  color: #ffffff; }
#sidebar-menu > ul > li > a.active .btn {
  background-color: #3e444b; }

#wrapper.enlarged .menu-bottom {
  width: 100%; }
  #wrapper.enlarged .menu-bottom .button-menu-mobile {
    padding: 10px;
    font-size: 2.5rem;
    width: 100%; }
    #wrapper.enlarged .menu-bottom .button-menu-mobile i::before {
      content: '\ea40'; }
#wrapper.enlarged .left.side-menu {
  width: 70px;
  z-index: 5; }
  #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i {
    margin-left: 0px;
    display: inline; }
  #wrapper.enlarged .left.side-menu span.pull-right {
    display: none !important; }
  #wrapper.enlarged .left.side-menu #sidebar-menu ul > li {
    position: relative;
    white-space: nowrap; }
    #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
      position: relative;
      width: fit-content; }
    #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul {
      display: block;
      background: #ffffff;
      left: 84px;
      position: absolute;
      width: 190px;
      border: 1px solid #cad4e3 !important;
      border-radius: .7rem;
      margin: 0; }
      #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a {
        padding-left: 15px;
        position: relative;
        z-index: 6; }
    #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover a span {
      display: inline;
      color: #1e252d; }
  #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul {
    display: none; }
  #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li:hover > ul {
    display: block;
    left: 190px;
    margin-top: -36px;
    position: absolute;
    width: 190px; }
  #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li > a span.pull-right {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    position: absolute;
    right: 20px;
    top: 12px;
    transform: rotate(270deg); }
  #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > a span {
    display: none;
    margin-left: 20px;
    background: #ffffff;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: .7rem;
    border: 1px solid #cad4e3; }
  #wrapper.enlarged .left.side-menu .user-details {
    min-height: 70px; }
    #wrapper.enlarged .left.side-menu .user-details img {
      width: 30px !important;
      height: 30px !important; }
    #wrapper.enlarged .left.side-menu .user-details .user-info {
      display: none; }
#wrapper.enlarged .content-page {
  margin-left: 70px; }
#wrapper.enlarged #sidebar-menu > ul > li:hover > a.open :after {
  display: none; }
#wrapper.enlarged #sidebar-menu > ul > li:hover > a.active :after {
  display: none; }
#wrapper.enlarged #sidebar-menu > ul > li > a .menu-item {
  background: transparent; }
#wrapper.enlarged.forced .topbar .topbar-left {
  width: 70px; }
#wrapper.enlarged .topbar .topbar-left span {
  display: none; }
#wrapper.enlarged .topbar .logo > img {
  display: inline;
  width: 45px; }

#wrapper.enlarged .footer {
  left: 70px; }

/*===========================================
 ================ BOTTOM BAR ================
===========================================*/
.bottombar .navbar {
  height: 60px;
  box-shadow: 0px -3px 5px #00000012; }
  .bottombar .navbar .nav-tabs > li {
    width: 25%; }
    .bottombar .navbar .nav-tabs > li a {
      vertical-align: middle;
      line-height: 60px !important;
      border: 0 !important;
      padding: 0 0px !important; }
      .bottombar .navbar .nav-tabs > li a span.text {
        display: block;
        margin-top: -45px; }

.user-menu {
  border-radius: 0.7rem;
  padding: 10px;
  margin-bottom: 10px; }
  .user-menu li {
    padding: 10px; }
    .user-menu li > a {
      width: 100%;
      font-size: 1.5rem; }

/*===========================================
 ================ COINS HOVER ================
===========================================*/
.side-menu .panel.level {
  background: transparent;
  box-shadow: none;
  position: absolute;
  bottom: 0;
  border-radius: 0; }

.level.grow {
  height: 130px;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  overflow: hidden;
  width: 100%;
  margin-bottom: 0; }

.level.grow:hover {
  height: 170px; }

.level .panel-footer {
  border-radius: 0;
  margin-top: 2px; }

#wrapper.enlarged .left.side-menu .level .panel-body {
  padding: 10px 7px; }

#wrapper.enlarged .left.side-menu .level .mini-stat-icon {
  width: 15px;
  height: 15px; }

#wrapper.enlarged .left.side-menu .level .desc_title {
  display: none; }

#wrapper.enlarged .left.side-menu .level .mini-stat-info span {
  font-size: 12px; }

#wrapper.enlarged .left.side-menu .level.grow {
  height: 70px; }

#wrapper.enlarged .left.side-menu .level.grow:hover {
  height: 110px; }

/*===========================================
 ========== COURSE-FOCUSED PAGES ===========
 (mylearning, gradebook, forum, storage, advice,
 coursereport, stats, statistic, htmlfront -
 body.course-fullscreen is set in
 templates/standard/layout/lms.php)
===========================================*/

/* These pages take over the whole page: hide the topbar/profile menu and
   left sidebar so the course content has the full viewport. */
body.course-fullscreen #topbar,
body.course-fullscreen .side-menu {
  display: none !important; }

body.course-fullscreen #wrapper.enlarged .content-page {
  margin-left: 0 !important; }

body.course-fullscreen #wrapper.enlarged .content {
  margin-top: 0 !important; }

/* Every course tab uses a narrower, centered reading column instead of the
   sitewide 1650px-wide container (that width suits wide admin tables
   elsewhere in the platform, not this single-column course layout). */
body.course-fullscreen #lms_main_container.container {
  max-width: 1040px !important; }

/* The breadcrumb/tab bar (.subheader) sits inside the page's own outer
   .container, so its "100% width" background was only ever 100% of that
   already-narrowed 1650px box, not the real browser viewport. Break it out
   to span the true full width while its own inner content
   (.subheader-inner, already max-width + centered) stays a centered column. */
body.course-fullscreen .subheader {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%); }

/* That outer .container also has its own 20px padding on every side
   (.content-page > .content .container), which left a beige gap between the
   real top of the viewport and the now-full-bleed white .subheader bar.
   Drop it so the white bar actually touches the top of the screen. */
body.course-fullscreen .content-page > .content > .container {
  padding: 0 !important; }

/* .subheader-inner's own 1650px cap then left a gap between the real screen
   edge and the logo/breadcrumb (left) and progress circle/certificate
   (right) on wider screens. Drop the cap here so the row's
   justify-content:space-between pushes those groups all the way to the
   actual corners, just inside the existing side padding. Also give it equal
   padding on every side (its default was 0 top/bottom, 20px left/right)
   so the progress circle/logo sit with even breathing room all round rather
   than touching the top or bottom edge of the bar. */
body.course-fullscreen .subheader-inner {
  max-width: none !important;
  padding: 10px 20px !important; }

/* The course sub-navigation tabs left-align, flush with the same 1040px
   centered column as the content below instead of floating as a centered
   group across the full-bleed bar. */
body.course-fullscreen #menu_lat .bd.container {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important; }

body.course-fullscreen #menu_lat .navbar-nav {
  display: flex;
  float: none;
  justify-content: flex-start; }

/* The tabs were inheriting Bootstrap's default 70px-tall navbar sizing and
   15px/15px link padding, making them look chunky. Shrink both down to a
   compact, button-sized tab. */
body.course-fullscreen #menu_lat .navbar {
  height: auto;
  min-height: 0; }

body.course-fullscreen #menu_lat .navbar-nav > li > a {
  padding: 13px 14px;
  line-height: 1.3;
  border-bottom: 2px solid transparent; }

/* Selected tab: underline + accent-colored text instead of Bootstrap's
   default filled-background active state, matching the brand's red accent
   used elsewhere (Continue button, etc.). */
body.course-fullscreen #menu_lat .navbar-nav > li.active > a,
body.course-fullscreen #menu_lat .navbar-nav > li.active > a:hover,
body.course-fullscreen #menu_lat .navbar-nav > li.active > a:focus {
  background-color: transparent !important;
  color: #EE3435 !important;
  border-bottom: 2px solid #EE3435; }

/* .footer is position:absolute pinned to .content-page's own content box
   (bottom:0, left:240px for the sidebar that no longer exists here), so on
   these pages it can land mid-page instead of the true bottom of the screen
   and overlap module content. Pin it to the actual viewport corner instead. */
body.course-fullscreen .footer {
  position: fixed;
  bottom: 8px;
  right: 20px;
  left: auto; }

/* Course overview page only: strip the white Bootstrap panel background that
   wraps the whole 'content' zone, so the htmlfront description block (which
   sets no background of its own) shows the page's own beige background
   straight through instead of an opaque white panel. */
body.course-page-mylearning #yui-main,
body.course-page-mylearning #yui-main .tab-pane,
body.course-page-mylearning #yui-main .panel.main,
body.course-page-mylearning #yui-main .panel-heading,
body.course-page-mylearning #yui-main .panel-body {
  background: transparent !important;
  box-shadow: none !important; }

/*# sourceMappingURL=menu.css.map */