/*  Plugin: jSide Menu (Responsive Side Menu)
 *   Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */
/* File: jquery.jside-menu.css */
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 300;
  font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  src: local('Helvetica Neue'), local('HelveticaNeue'), url(http://themes.googleusercontent.com/licensed/font?kit=Lx1xfUTR4qFjwg0Z_pb900DGSpWewu0sZH-jqLz8Q00) format('truetype');
}

:root {
    --skin-hover: rgba(0, 0, 0, 0.1);
    --skin-color: rgba(255, 255, 255, 0.9);
    --text-color-skin-menu: #444;
    --skin-border-subitems : #e1e1e1;
}
.default-skin{
  font-family: 'Helvetica Neue';
  font-weight: 300;
  font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
   --skin: #2a2a2e;
   --skin-hover: #2098D1; 
   --skin-color: rgba(255, 255, 255, 0.8); 
}
.light-skin{
   --skin: #f0f0f0;
   --skin-hover: #ddd; 
   --skin-color:  #232323;
}

.menubar{
   width: 100%;
   height: 48px;
   display: block;
   background: #2a2a2e;
   color: rgba(255, 255, 255, 0.8);
   line-height: 48px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
   z-index:999;
}
.menu-trigger{
   -webkit-appearance: none;
   border: 0;
   outline: 0;
   background: transparent;
   top: 6px;
   padding: 0 5px;
   color: rgba(255, 255, 255, 0.8);
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
   

}
.menu-trigger:hover{
  opacity: 0.8;
-webkit-opacity: 0.8;
}

.menu-trigger:before{
   font-family: 'Material-Design-Iconic-Font';

  content: '\f197';
 
   font-size: 22pt;
   
}

.menu-trigger.left{
   left: 20px;

}

.menu-trigger.right{
   right: 20px;
}
.sticky{
   position: fixed;
   top: 0;
   left: 0;
}

.menu-container{
   overflow: auto;
   display: block;
   top: 120px;
   
}
.position-left{
   left: -270px;
}
.position-right{
   right: -270px;
}

.position-left.open{
    left: 0;
}

.position-right.open{
    right: 0;
}

.menu-container,
.menu-head,
.menu-left,
.menu-left.open
.menu-right,
.menu-right.open{
    transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -ms-transition: .4s;
   
}

.menu-container,
.menu-head{
    background: #2a2a2e;
    position: fixed;
    z-index: 99999;
    width: 270px;
    
}
    .menu-head .layer {
        background: var(--color-primary-dark);
        height: 100%;
        display: block;
        padding: 15px;
        padding-top: 33px;
        padding-left: 0px;
    }


    .menu-head .layer .col{
        
        padding-left: 0px;
    }


.menu-head{
   height: 120px;
   box-sizing: border-box; 
   margin: 0px;
   top: 0;
   padding-left:0px;
   
}

.menu-items, .menu-items-2 {
  list-style: none;
  font-size: 14px;
  padding-left:4px;
}

.menu-items ul, .menu-items-2 ul {
    padding-left: 4px;
}

    .dropdown-heading, .dropdown-heading-sub,
    .menu-items li a {
        text-decoration: none;
        padding: 12px 12px 12px 18px;
        display: block;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
        margin: 0;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }


.menu-items-2 li a {
    text-decoration: none;
    padding: 12px 12px 12px 48px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
    margin: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}


.dropdown-heading, .dropdown-heading-sub {
    -webkit-tap-highlight-color: transparent;
}

    .dropdown-heading:hover,
    .dropdown-heading-sub:hover,
    .menu-items li a:hover {
        background: rgba(0, 0, 0, 0.1);
    }



@keyframes fadeIn{
   from{
     opacity: 0;
    -webkit-opacity: 0;
    }
    to{
     opacity: 1;
    -webkit-opacity: 1;
   }
}
-webkit-@keyframes fadeIn{
   from{
     opacity: 0;
    -webkit-opacity: 0;
    }
    to{
     opacity: 1;
    -webkit-opacity: 1;
   }
}

.item-icon{
   margin: 0 25px 0 0;
   display: inline;
   width: 32px;
   height: 32px;
   line-height: 32px;
   position: absolute;
   font-size: 15pt;
  margin: 5px;
   text-align: center;
   color: rgba(255, 255, 255, 0.8);
  
}

/* Dropdowns */
.has-sub ul {
    list-style: none;
    overflow: hidden;
    height: 0px;
    transition: .360s;
    background: linear-gradient(to left, #00A3E0 /*var(--color-primary)*/, #0077C8 /*var(--color-primary-dark)*/);
}



    .has-sub ul li a {
        display: block;
        padding: 12px 33px;
        border-bottom: 0;
        font-size: 13px;
        color: rgba(255,255,255, 0.9);
        transition: .1s;
        -webkit-transition: .1s;
        border-bottom: 1px dotted rgba(255,255,255, 0.1);
    }

        .has-sub ul li a:hover, .menu-items-2 li a:hover {
            background: #005EB8 /*var(--color-primary-extra-dark)*/;
            transition: .1s;
            -webkit-transition: .1s;
        }

.has-sub span{

  display: block;

  box-sizing: border-box;

  

}



.has-sub i.arrow{

   float: right;

   margin-right: 10px;  

   transition: 0.360s;

   font-size: 16px;
}



.has-sub .arrowdown{

   transform: rotateZ(180deg);

-webkit-transform: rotateZ(180deg);

-moz-transform: rotateZ(180deg);

   transition: 0.360s;

 -webkit-transition: 0.360s;

 -moz-transition: 0.360s;

}

.menu-head .col {
    display: table;
}
.menu-head .row {
    display: table-cell;
}
.for-name {
   max-width: 140px;
   padding: 10px;
   color: rgba(255, 255, 255, 0.8);
}
.for-pic {
    max-width: 70px;
}

.profile-pic img{
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.01);
   object-fit: cover;
  
}
.menu-head h3 {
   top: -35px;
   font-size: 13pt;
   font-weight: 400;
  
}

.tagline,
.menu-head h3{
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.tagline{
   font-size: 11px;
   bottom: 32px;
   display: block;
   
}

/* Dim background effect */
.dim-overlay{
   display: none;
}

.dim-overlay:before {
	content: "";
	background-color: rgba(0, 0, 10, .4);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	z-index: 2;
}
.menubar .logo{
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
   font-size: 22px;
}
.menubar .logo img {
    width: 130px;
    margin-top: 10px;
    height: auto;
}
.menubar .logo a {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
}
.menubar .logo a:hover {
    color: rgba(0, 0, 0, 0.1);
}