.sidebar {
      background-color: #232740;
      color: #fff;
      position: relative;
      width: 100%;
      display: none;
}

@media (min-width: 769px) {
      .sidebar {
            display: table-cell;
            vertical-align: top;
            width: 260px
      }
}

body#auth-page {
      margin-top: 100px
}

.sidebar-main {
      z-index: 600
}

.sidebar-content {
      position: relative
}

.category-content {
      position: relative;
      padding: 20px
}

.navigation {
      margin: 0;
      padding: 10px 0;
      list-style: none;
      position: relative
}

.navigation .hidden-ul {
      display: none
}

.navigation li {
      position: relative
}

.navigation li+li {
      margin-top: 1px;
}

.navigation li+.navigation-header {
      margin-top: 10px
}

.navigation li a {
      color: #aebec5;
 }

.navigation li a:hover,
.navigation li a:focus,
.navigation li a.orders-nav:hover,
.navigation li a.orders-nav:focus {
      background-color: #0000001a;
      color: #fff
}

.navigation li a>i {
      margin: 3px 5px;
      -webkit-transition: opacity .2s ease-in-out;
      -o-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
}

.navigation li>.has-ul {
      position: relative;
      padding-right: 36px
}

.navigation li>.has-ul:after {
      content: "\e9c7";
      font-family: "icomoon";
      font-size: 16px;
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -8px;
      right: 20px;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform .2s ease-in-out;
      -o-transition: -webkit-transform .2s ease-in-out;
      transition: -webkit-transform .2s ease-in-out
}

.navigation li.active>.has-ul:after {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg)
}


.navigation>li.active>a,
.navigation>li.active>a:hover,
.navigation>li.active>a:focus {
      background-color: #E91E63;
      color: #ffffff;
}

.navigation>li ul {
      list-style: none;
      margin: 0;
      padding: 0
}

.navigation>li ul li a {
      padding: 10px 20px;
      padding-left: 35px;
      min-height: 40px
}

.navigation>li>ul>li>ul>li>a {
      padding-left: 60px
}

.navigation>li>ul>li>ul>li>ul>li>a {
      padding-left: 80px
}

.navigation>li>ul>li>ul {
      background: #191b29;
}

.navigation .active>a:focus {
      background: #73ceb9;
      color: #fff;
}

.navigation .navigation-header {
      min-height: 30px;
      padding: 10px 20px;
      border-bottom: 0;
      text-transform: uppercase;
      font-size: 11px;
      line-height: 1.82
}

.navigation .navigation-header>span {
      display: block;
      margin-top: 2px
}

.navigation .navigation-header>i {
      display: none
}

.navigation .navigation-header {
      color: #ffffff3d;
      font-weight: 400
}

.navigation .badge {
      float: right;
      background: #00000050;
      font-style: normal;
      line-height: inherit;
      font-weight: lighter;
      color: #fff
}

@media (min-width: 769px) {
     
      .sidebar-xs .sidebar-main .sidebar-category {
            display: none
      }

      .sidebar-xs .sidebar-main .sidebar-category-visible {
            display: block
      }

      .sidebar-xs .sidebar-main .navigation-main>li>a {
            display: block;
            text-align: center;
            padding-left: 0;
            padding-right: 0
      }

      .sidebar-xs .sidebar-main .navigation-main>li>a>span {
            display: none;
            position: absolute;
            top: 0;
            right: -260px;
            background-color: #26a69a;
            border-color: #26a69a;
            padding: inherit;
            padding-left: 20px;
            padding-right: 20px;
            width: 260px;
            text-align: left;
            color: #fff;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px
      }


      .sidebar-xs .sidebar-main .navigation-main>li>.has-ul:after,
      .sidebar-xs .sidebar-main .navigation-main>li.active>.has-ul:after {
            content: none
      }

      .sidebar-xs .sidebar-main .navigation-main>li .has-ul>span {
            border-radius: 0 3px 0 0
      }

      .sidebar-xs .sidebar-main .navigation-main>li.active>ul {
            display: none !important
      }

      .sidebar-xs .sidebar-main .navigation-main>li:hover>ul {
            display: block !important
      }

      .sidebar-xs .sidebar-main .navigation-main>li:hover>a>span {
            display: block;
            cursor: default
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul {
            position: absolute;
            right: -260px;
            top: 44px;
            width: 260px;
            display: none;
            background-color: #263238;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0 0 3px 0
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul>li>a {
            padding-left: 20px;
            padding-right: 35px
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul>li>ul>li>a {
            padding-left: 30px
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul>li>ul>li>ul>li>a {
            padding-left: 60px
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header {
            padding: 0;
            text-align: center
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header>i {
            display: block;
            top: 0;
            padding: 13px 0
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header>span {
            display: none
      }
}

.page-container {
      position: relative
}

@media (min-width: 769px) {
      .page-container {
            width: 100%;
            display: table;
            table-layout: fixed
      }
}

@-moz-document url-prefix() {
      .page-container {
            height: 1px
      }
}

@media (min-width: 769px) {
      .page-content {
            display: table-row
      }
}

@media (min-width: 769px) {
      .content-wrapper {
            display: table-cell;
            vertical-align: top
      }

}

.content:after {
      content: '';
      display: table;
      clear: both
}

.footer {
      position: absolute;
      bottom: 0;
      padding: 10px;
      right: 0;
      left: 0;
      background: #f8f5ed;
      color: #4c4953;
      text-align: center
}

.no-padding {
      padding: 0
}

.heading-elements-toggle,
.breadcrumb-elements-toggle {
      cursor: pointer;
      display: block;
      line-height: 1;
      position: absolute;
      top: 50%;
      margin-top: -8px
}

.heading-elements-toggle,
.breadcrumb-elements-toggle,
.heading-elements-toggle:hover,
.breadcrumb-elements-toggle:hover,
.heading-elements-toggle:focus,
.breadcrumb-elements-toggle:focus {
      color: inherit
}

.heading-elements-toggle>i,
.breadcrumb-elements-toggle>i {
      top: 0
}

@media (min-width: 769px) {

      .heading-elements-toggle,
      .breadcrumb-elements-toggle {
            display: none
      }
}

.heading-elements-toggle {
      right: 20px
}

.breadcrumb-elements-toggle {
      right: 20px
}

@media (min-width: 769px) {

      .sidebar-xs .sidebar-main {
            width: 42px;
      }

      .sidebar-xs .sidebar-main .sidebar-category {
            display: none
      }

      .sidebar-xs .sidebar-main .sidebar-category-visible {
            display: block
      }

      .sidebar-xs .sidebar-main .navigation>li>a {
            display: block;
            text-align: center;
            padding-left: 0;
            padding-right: 0
      }

      .sidebar-xs .sidebar-main .navigation>li>a>span {
            /* display: none; */
            position: absolute;
            top: 0;
            right: -260px;
            background-color: #566e79;
            border: 1px solid #566e79;
            padding: 11px 20px;
            width: 260px;
            text-align: left;
            color: #fff;
            cursor: pointer;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px
      }

      .sidebar-xs .sidebar-main .navigation>li>a>span .badge {
            background-color: rgba(0, 0, 0, .35);
            border-color: transparent
      }


      .sidebar-xs .sidebar-main .navigation>li.active>.has-ul:after,
      .sidebar-xs .sidebar-main .navigation>li>.has-ul:after {
            content: none
      }

      .sidebar-xs .sidebar-main .navigation>li .has-ul>span {
            border-radius: 0 3px 0 0;
            cursor: default
      }

      .sidebar-xs .sidebar-main .navigation>li.active>ul {
            display: none !important
      }

      .sidebar-xs .sidebar-main .navigation>li:hover>ul {
            display: block !important
      }

      .sidebar-xs .sidebar-main .navigation>li:hover>a>span {
            display: block
      }



      .sidebar-xs .sidebar-main .navigation>li>ul {
            position: absolute;
            right: -260px;
            top: 44px;
            width: 260px;
            display: none;
            background-color: #263238;
            border-left: 1px solid rgb(39, 43, 49);
            border-radius: 0 0 3px 0
      }

      .sidebar-xs .sidebar-main .navigation>li>ul>li>a {
            padding-left: 20px
      }

      .sidebar-xs .sidebar-main .navigation>li>ul>li>a:not(.has-ul) {
            padding-right: 20px
      }
      .sidebar-main .navigation>li>ul>li>a.pending {
            background: #1f2329;
            color: #e8df90;
        }
      .sidebar-xs .sidebar-main .navigation>li>ul>li>ul>li>a {
            padding-left: 30px
      }

      .sidebar-xs .sidebar-main .navigation>li>ul>li>ul>li>ul>li>a {
            padding-left: 60px
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header {
            padding: 0;
            text-align: center
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header>i {
            display: block;
            top: 0;
            padding: 13px 0
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header>span {
            display: none
      }

      .login-form {
            margin: auto;
            width: 350px
      }
}

.login-form {
      padding: 30px;
      background: #e2e7ea;
      border-radius: 1rem;
      margin-bottom: 100px;
      box-shadow: 0 1px 2px #071d2f59;
}

.navigation .has-ul {
      text-transform: capitalize
}

.navigation>li>ul>li>ul>li>ul {
      background: #232535;
}

.sidebar {
      color: #fff;
      position: relative;
      width: 100%;
      display: none
}

@media(min-width:769px) {
      .sidebar {
            display: table-cell;
            vertical-align: top;
            width: 300px
      }
}

.sidebar-main {
      z-index: 99
}

.sidebar-content {
      position: relative
}

 

.category-content {
      position: relative;
      padding: 20px
}

.navigation {
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative
}

.navigation .hidden-ul {
      display: none
}

.navigation li {
      position: relative;
}

.navigation li+li {
      margin-top: 1px;
}

.navigation li+.navigation-header {
      margin-top: 10px
}

.navigation li a {
      display: block;
      text-decoration: none;
      cursor: pointer;
      -webkit-transition: background .15s linear, color .15s linear;
      -o-transition: background .15s linear, color .15s linear;
      transition: background .15s linear, color .15s linear;
}

.navigation li a>i {
      top: 0;
      -webkit-transition: opacity .2s ease-in-out;
      -o-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
}

.sidebar-xs .navigation>li.active a {
      padding: 8px;
}

.sidebar-xs .navigation>li.active>a>i {
      color: #ffc3d7;
      font-weight: bold;
      font-size: 24px !important;
      padding: 0;
}

.navigation li>.has-ul {
      position: relative;
      padding-right: 36px
}

.navigation li>.has-ul:after {
      content: "\e9c7";
      font-family: "icomoon";
      font-size: 16px;
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -8px;
      right: 20px;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: -webkit-transform .2s ease-in-out;
      -o-transition: -webkit-transform .2s ease-in-out;
      transition: -webkit-transform .2s ease-in-out
}

.navigation>li>a {
      padding: 10px;
      height: 44px;
      font-weight: 500;
}

.navigation>li ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #00000042;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.navigation>li ul li a {
      padding: 10px 10px 10px 40px;
      min-height: 40px
}

.navigation>li>ul li:last-child {
      padding: 0
}

.navigation .navigation-header {
      min-height: 30px;
      padding: 10px 20px;
      border-bottom: 0;
      text-transform: uppercase;
      font-size: 11px;
      line-height: 1.82
}

.navigation .navigation-header>span {
      display: block;
      margin-top: 2px
}

.navigation .navigation-header>i {
      display: none
}

.navigation .navigation-header {
      color: #ffffff3d;
      font-weight: 400
}

.navigation .badge {
      float: right;
      background: #00000050;
      font-style: normal;
      line-height: inherit;
      font-weight: lighter;
      color: #fff
}

@media(min-width:769px) {

      .sidebar-xs .sidebar-main .sidebar-category {
            display: none
      }

      .sidebar-xs .sidebar-main .sidebar-category-visible {
            display: block
      }

      .sidebar-xs .sidebar-main .navigation-main>li>a {
            display: block;
            text-align: center;
            padding-left: 0;
            padding-right: 0
      }


      .sidebar-xs .sidebar-main .navigation-main>li>a>i {
            margin: 2px 0;
            display: block;
            float: none;
      }

      .sidebar-xs .sidebar-main .navigation-main>li>.has-ul:after {
            content: none
      }

      .sidebar-xs .sidebar-main .navigation-main>li .has-ul>span {
            border-radius: 0 3px 0 0
      }

      .sidebar-xs .sidebar-main .navigation-main>li:hover>ul {
            display: block !important
      }

      .sidebar-xs .sidebar-main .navigation-main>li:hover>a>span {
            display: block;
            cursor: default
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul {
            position: absolute;
            right: -260px;
            top: 44px;
            width: 260px;
            display: none;
            background-color: #1b1f25;
            border-radius: 0 0 3px 0
      }

      .sidebar-xs .sidebar-main .navigation-main>li>ul>li>a {
            padding-left: 20px;
            padding-right: 30px
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header {
            padding: 0;
            text-align: center
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header>i {
            display: block;
            top: 0;
            padding: 13px 0
      }

      .sidebar-xs .sidebar-main .navigation-main>.navigation-header>span {
            display: none
      }
}

.page-container {
      position: relative
}

@media(min-width:769px) {
      .page-container {
            width: 100%;
            display: table;
            table-layout: fixed;
      }
}

@-moz-document url-prefix() {
      .page-container {
            height: 1px
      }
}

@media(min-width:769px) {
      .page-content {
            display: table-row
      }
}

@media(min-width:769px) {
      .content-wrapper {
            display: table-cell;
            vertical-align: top
      }
}

.no-padding {
      padding: 0
}

@media(min-width:769px) {
      .sidebar-xs .sidebar-main .sidebar-category {
            display: none
      }

      .sidebar-xs .sidebar-main .sidebar-category-visible {
            display: block
      }

      .sidebar-xs .sidebar-main .navigation>li>a {
            display: block;
            text-align: center;
            padding-left: 0;
            padding-right: 0
      }

      .navigation>li:first-child i:before {
            font-size: 24px;
      }

      .navigation>li>ul>li.active>a>i:before {
            color: #8a80ab;
            font-size: 22px;
            line-height: 12px;
      }

      .sidebar-xs .sidebar-main .navigation>li>a>span {
            position: absolute;
            top: 0;
            right: -260px;
            background-color: #21272f;
            border: 1px solid #21272f;
            padding: 15px 20px;
            width: 260px;
            text-align: left;
            color: #fff;
            cursor: pointer;
            border-bottom-right-radius: 0 !important;
            border-top-right-radius: 3px
      }

      .sidebar-xs .sidebar-main .navigation>li>a>span .badge {
            background-color: rgba(0, 0, 0, .35);
            border-color: transparent
      }

      .sidebar-xs .sidebar-main .navigation>li>.has-ul:after {
            content: none
      }

      .sidebar-xs .sidebar-main .navigation>li .has-ul>span {
            border-radius: 0 3px 0 0;
            cursor: default
      }


      .sidebar-xs .sidebar-main .navigation>li:hover>a>span {
            background: #252948;
            border: none;
      }

      .sidebar-xs .sidebar-main .navigation>li:hover {
            background: #353b65;
      }

      .sidebar-xs .sidebar-main .navigation>li.navigation-header:hover {
            background: none
      }

      .sidebar-xs .sidebar-main .navigation>li.active:hover>a>span {
            background: #de1d5e;
            border: none;
      }



      .sidebar-xs .sidebar-main .navigation>li>ul {
            position: absolute;
            right: -260px;
            top: 44px;
            width: 260px;
            display: none;
            border-left: 1px solid rgba(255, 255, 255, .1);
            border-radius: 0 0 3px 0
      }

      .sidebar-xs .sidebar-main .navigation>li>ul>li>a {
            padding-left: 20px
      }

      .sidebar-xs .sidebar-main .navigation>li>ul>li>a:not(.has-ul) {
            padding-right: 20px
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header {
            padding: 0;
            text-align: center
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header>i {
            display: block;
            top: 0;
            padding: 13px 0
      }

      .sidebar-xs .sidebar-main .navigation>.navigation-header>span {
            display: none
      }
}

.footer {
      position: absolute;
      bottom: 0;
      padding: 10px;
      right: 0;
      left: 0;
      background: #eee;
      color: #666;
      text-align: center
}

.navigation>li>ul>li.active>a,
.navigation>li>ul>li.active>a:hover,
.navigation>li>ul>li.active>a:focus {
      background: #4a3f71;
      border: 1px solid #101533;
      border-right: none;
      border-left: none;
}

.navigation>li>ul>li>ul>li.active>a,
.navigation>li>ul>li>ul>li.active>a:hover,
.navigation>li>ul>li>ul>li.active>a:focus {
      background: #26283c;
      border-bottom: 2px solid #000;
      font-weight: bold;
      color: #dad0ff;
}

.navigation>li>ul>li>ul>li>ul>li.active>a,
.navigation>li>ul>li>ul>li>ul>li.active>a:hover,
.navigation>li>ul>li>ul>li>ul>li.active>a:focus {
      background: #599487;
}

.navigation>li>ul>li>ul>li.active>a.has-ul,
.navigation>li>ul>li>ul>li.active>a.has-ul:hover,
.navigation>li>ul>li>ul>li.active>a.has-ul:focus {
      background: #67283d;
}

.login-form .icon-user-lock {
      font-size: 30px
}



body.admin .sidebar{
    background: #233940;
}


body.admin  .sidebar-main .navigation>li:hover>a>span {
            background: #2b393e;
      }

body.admin .sidebar-main .navigation>li:hover {
            background: #6a8c76;
      }


body.admin .navigation>li>ul>li.active>a,
body.admin .navigation>li>ul>li.active>a:hover,
body.admin .navigation>li>ul>li.active>a:focus {
      background: #233940;
      border: 1px solid #233940; 
}

body.admin .navigation>li>ul>li.active>a,
body.admin .navigation>li>ul>li.active>a:hover,
body.admin .navigation>li>ul>li.active>a:focus {
      background: #0d0e13;
      border: 1px solid #000000;
      color: yellow;
}