/*!
 * Copyright © ProgramCMS. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Developed by Mohamed EL QUCHIRI <elquchiri@gmail.com>
 */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 81px;
  height: 100%;
  background-color: #373330;
  color: white;
  z-index: 1022;
  overflow-y: hidden;

  ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      width: 100%;

      a {
        display: block;
        text-decoration: none;
        padding: 34px 0 9px 0;
        text-align: center;
        opacity: 0.8;
        transition: opacity, background-color 0.5s;
        background: url("../../../../../public/images/menu.png") no-repeat center 10px;

        span {
          display: block;
          padding: 3px 0 0 0;
          margin: 0;
          color: #f7f3eb;
          font-size: 10px;
          font-weight: 400;
          text-transform: uppercase;
          letter-spacing: 0.25px;
          line-height: 2;
        }

        &:hover {
          background-color: #474340;
          color: white;
          opacity: 1;
        }

        &.active {
          background-color: #4a4542;
          color: #ffffff;
          opacity: 1;
          transition: none;
        }

        &.sidebar-dashboard {
          background-image: url("../../../../../public/images/dashboard.png");
        }
        &.sidebar-system {
          background-image: url("../../../../../public/images/system.png");
        }

        &.sidebar-logo {
          padding-top: 59px;
          background-image: url("../../../../../public/images/logo.png");
          background-position: center 17px;
          opacity: 1;
          transition: background-image 0.4s;
          border-bottom: 1px solid #403a3a;
        }
      }
    }
  }
}

.menu-items {
  position: fixed;
  left: 81px;
  top: 0;
  width: 270px;
  min-height: 100%;
  background-color: #4a4542;
  color: white;
  padding: 19px;
  display: none;
  box-shadow: 0 0 3px #000;
  z-index: 1021;
}

.menu-items .menu-item {
  display: flex;
  margin-bottom: 39px;
  padding: 3px 11px 11px 8px;
}

.menu-items .menu-item .menu-item-title {
  font-size: 19px;
  font-weight: bolder;
  flex: 1;
}

.menu-items .menu-item .close-sign {
  text-align: right;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.menu-items .menu-item .close-sign:hover {
  opacity: 1;
}

.menu-items .menu-item-group-title {
  color: #a79d95;
  display: block;
  font-size: 15px;
  padding: 9px;
  font-weight: 600;
  margin-bottom: 9px;
  cursor: default;
}

.menu-items ul {
  list-style-type: none;
  margin: 0 0 31px 0;
  padding: 0;
}

.menu-items ul li {

}

.menu-items ul li a {
  display: block;
  text-decoration: none;
  padding: 11px;
  font-size: 14px;
  transition: none;
  color: #ffffff;
}

.menu-items ul li a:hover {
  background-color: #423d3a;
  color: #ffffff;
}