.dashboard-header {

  max-height:                                               $dashboard-header-height;
  background-color:                                         $dashboard-header-bg-color;
  padding-left:                                             0px;
  box-shadow:                                               0px 2px 8px 2px rgba(0,0,0,0.2);
  position:                                                 fixed;
  width:                                                    calc(100% - #{percentage(2 / $grid-columns)});
  z-index:                                                  2000;
  top:                                                      0px;

  .toggler {
    background-color:                                       $dashboard-header-toggler-bg-color;
    border:                                                 solid 2px $dashboard-header-toggler-bg-color;
    border-radius:                                          0px;
    padding:                                                0px;
    height:                                                 98%;
    min-width:                                              44px;

      .fa-icon {
        width:                                              auto;
        height:                                             $dashbaord-header-toggler-icon-size;
        max-width:                                          100%;
        max-height:                                         100%;
        fill:                                               $dashbaord-header-toggler-icon-color;
      }

      &-link {
        a {
          display:                                          inline-block;
          height:                                           88%;
          min-height:                                       $sidebar-branding-height !important;
          padding-left:                                     0px;
          padding-right:                                    0px;
        }
      }
  }
  .navbar-nav {
    .dropdown-menu {
      position:                                             absolute;
    }
    .nav-link {
      @extend                                               .pr-2;
      padding:                                              0px;
    }
    .dropdown {
      .nav-link {
        color:                                              $primary;
        padding-top:                                        0px;
        padding-bottom:                                     0px;
        span: {
          color:                                            $primary;
        }
        &::after {
          position:                                         relative;
          top:                                              1px;
          left:                                             3px;
        }
      }
    }
  }

  .cv-info {
    @include media-breakpoint-down(sm) {
      position:                                             fixed;
      max-width:                                            100%;
      top:                                                  calc(100% - 29px);
      background:                                           rgba(197, 197, 197, 0.8);
      width:                                                100%;
      padding:                                              2px 9px !important;
      text-align:                                           left;
      font-size:                                            0.7rem;
      z-index:                                              1;
      height:                                               30px;
      left:                                                 0px;
      color:                                                white;
      }
  }
}

@at-root .app-sidebar-open .dashboard-header {
  .ml-auto {
    @include media-breakpoint-down(sm) {
      display: none;
    }
  }
  .cv-info {
    @include media-breakpoint-down(sm) {
      display: none;
    }
  }
}
