/*  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-style: normal;font-weight: 300;font-smoothing: antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body{font-weight: 300;font-smoothing: antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
:root{--skin-hover: rgba(0, 0, 0, 0); --skin-color:  rgba(0, 147, 221, 0.9);}
.default-skin{font-weight:400;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: var(--skin);color: var(--skin-color);line-height: 48px;box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);}
.menu-trigger{border:0;-webkit-appearance:none;outline:0;background:transparent;padding: 0 1vw;color: var(--skin-color);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:10vw;}
.menu-trigger.left{left: 20px;}
.menu-trigger.right{right: 20px;}
.sticky{position: fixed;top: 0;left: 0;}
.menu-container{overflow: auto;display: block;top:0;}
.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:rgba(0, 0, 0, 0.9); position: fixed; z-index: 100; width: 270px;}
.menu-head .layer{background: rgba(0, 0, 0, 0.2);display: block;padding: 15px;}
.menu-head{height:0;box-sizing: border-box;margin: 0px;top: 0;}
.menu-items {list-style: none;font-size: 14px;}
.dropdown-heading,.menu-items li a{text-decoration: none;padding: 12px 12px 12px 45px;display: block;color: var(--skin-color);border-bottom: 1px dotted rgba(255, 255, 255, 0.050);margin: 0;cursor: pointer;user-select: none;}
.dropdown-heading:hover,.menu-items li a:hover{background:rgba(0, 147, 221);}
@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: var(--skin-color);}
/* Dropdowns */
.has-sub ul{list-style: none;overflow: hidden;height: 0;transition: .360s;background: #f2f9f9;}
.has-sub ul li a{display: block;padding: 12px 33px;border-bottom: 0;font-size: 13px;color: #444;transition: .1s;-webkit-transition: .1s;border-bottom: 1px dotted #e1e1e1;}
.has-sub ul li a:hover{background: #dedede;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;}
 .col{display: table;}
.row{display: table-cell;}
.for-name {max-width: 140px;padding: 10px;color: var(--skin-color);}
.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;position: relative;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;}
.logo{display: block;text-align: center;margin-left: auto;margin-right: auto;font-size: 22px;}
.logo img{width: 130px;margin-top: 10px;height: auto;}
.logo a{text-decoration: none;color: var(--skin-color);}
.logo a:hover{color: var(--skin-hover);}