/* Colors */
/* color abstractions */
/* custom colors */
/* Color Assignments */
.nav-side-menu {
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 200;
  background-color: #3e3e3e;
  position: fixed;
  top: 0px;
  width: 260px;
  height: 100%;
  color: #000;
  top: 64px; }
  .nav-side-menu .brand {
    background-color: #ffc107;
    padding: 20px 0px;
    display: block;
    text-align: center;
    font-size: 14px; }
  .nav-side-menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 45px;
    cursor: pointer; }
    .nav-side-menu ul:not(.collapsed) .arrow:before {
      transition: all 0.4s ease-in-out;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-size: 10px;
      color: #f8f9fa;
      content: "\f078";
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      float: right; }
    .nav-side-menu ul .active {
      border-left: 3px solid #f8f9fa;
      background-color: #000; }
    .nav-side-menu ul .sub-menu li.active {
      background-color: #00a313;
      color: #f8f9fa; }
      .nav-side-menu ul .sub-menu li.active a {
        color: #f8f9fa; }
    .nav-side-menu ul .sub-menu li {
      background-color: #f8f9fa;
      color: #000;
      border: none;
      line-height: 35px;
      margin-left: 0px; }
      .nav-side-menu ul .sub-menu li:hover {
        background-color: rgba(0, 0, 0, 0.99);
        color: #fff; }
      .nav-side-menu ul .sub-menu li a:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 10px;
        content: "\f105";
        display: inline-block;
        padding-left: 20px;
        padding-right: 10px;
        vertical-align: middle; }
  .nav-side-menu li {
    color: #f8f9fa;
    text-decoration: none;
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 45px;
    cursor: pointer;
    padding-left: 0px;
    border-left: 3px solid #3e3e3e; }
    .nav-side-menu li[aria-expanded="true"] .arrow::before {
      transform: rotate(-45deg); }
    .nav-side-menu li:hover {
      border-left: 3px solid #f8f9fa;
      background-color: rgba(0, 0, 0, 0.99);
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .nav-side-menu li:not(.collapsed) .arrow:before {
      transition: all 0.4s ease-in-out;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      color: #f8f9fa;
      font-size: 10px;
      content: "\f078";
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      float: right; }
    .nav-side-menu li .active {
      border-left: 3px solid #f8f9fa;
      background-color: #000; }
    .nav-side-menu li .sub-menu li.active {
      color: #f8f9fa; }
      .nav-side-menu li .sub-menu li.active a {
        color: #f8f9fa; }
    .nav-side-menu li .sub-menu li {
      background-color: #f8f9fa;
      border: none;
      line-height: 35px;
      margin-left: 0px; }
      .nav-side-menu li .sub-menu li:hover {
        background-color: rgba(0, 0, 0, 0.99);
        border-left: 3px solid #f8f9fa;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      .nav-side-menu li .sub-menu li a:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 10px;
        content: "\f105";
        display: inline-block;
        padding-left: 20px;
        padding-right: 10px;
        vertical-align: middle; }
    .nav-side-menu li a {
      text-decoration: none;
      color: #f8f9fa; }
      .nav-side-menu li a i {
        color: #f8f9fa;
        padding-left: 10px;
        width: 20px;
        padding-right: 25px; }
  .nav-side-menu .sub-menu li {
    padding-left: 20px;
    border-left: 3px solid #3e3e3e; }
    .nav-side-menu .sub-menu li a {
      text-decoration: none;
      color: #000; }
      .nav-side-menu .sub-menu li a:hover {
        color: #fff; }
      .nav-side-menu .sub-menu li a i {
        padding-left: 10px;
        width: 20px;
        padding-right: 20px; }

.image-back {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 265px;
  height: auto; }

.navbar .toggle-btn {
  display: none; }
  .navbar .toggle-btn .bar1,
  .navbar .toggle-btn .bar2,
  .navbar .toggle-btn .bar3 {
    width: 35px;
    height: 4px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s; }
    .navbar .toggle-btn .bar1:focus, .navbar .toggle-btn .bar1.focus,
    .navbar .toggle-btn .bar2:focus,
    .navbar .toggle-btn .bar2.focus,
    .navbar .toggle-btn .bar3:focus,
    .navbar .toggle-btn .bar3.focus {
      fill: #fff; }
  .navbar .toggle-btn:not(.collapsed) > .bar1 {
    transform: translate(0px, 9.9px) rotate(-45deg); }
  .navbar .toggle-btn:not(.collapsed) > .bar2 {
    opacity: 0; }
  .navbar .toggle-btn:not(.collapsed) > .bar3 {
    transform: translate(0px, -9.9px) rotate(45deg); }
  .navbar .toggle-btn:focus .bar1,
  .navbar .toggle-btn:focus .bar2,
  .navbar .toggle-btn:focus .bar3 {
    background-color: #fff; }

.sidebar-image {
  position: absolute;
  bottom: 0;
  z-index: -1000;
  opacity: 0.2; }

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%; }
    .nav-side-menu .sub-menu {
      position: relative;
      width: 100%; }
  .navbar .toggle-btn {
    display: block;
    cursor: pointer;
    z-index: 10 !important;
    padding: 3px;
    color: #fff;
    text-align: center; }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important; } }

@media (min-width: 767px) {
  .nav-side-menu {
    display: block; }
    .nav-side-menu .menu-list .menu-content {
      display: block; } }