/*  Plugin: jSide Menu (Responsive Side Menu)
 *   Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlogbg.png
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2019 - Asif Mughal
 */
/*  Google Font : <link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">*/
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(googleF1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(googleF2.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(googleF3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*  Material Design Iconic Font : <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(Material1.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 35px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* FIN Material Design Iconic Font*/
:root{
    --skin-hover: rgba(0, 0, 0, 0.1); 
    --skin-color:  black;
}
.default-skin{
  font-family: 'Questrial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  font-smooth: 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;
}
.menu-body.visibility{
  visibility: hidden;
}
.nav-content.visibility{
  visibility: hidden;
}
.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{
  
   -webkit-appearance: none;
   border: 0;
   outline: 0;
   background: transparent;
   top: 0px;
   padding: 0 0px;
   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.left{
   left: 20px;

}

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

.menu-container{
  font-family: FontAwesome;
   overflow: auto;
   display: block;
   top: 130px;
}

.menu-container::-webkit-scrollbar {
  width: 4px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2); 
}
 
.menu-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.11); 
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.position-left{
   left: -355px;
}
.position-right{
   right: -355px;
}

.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: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

.menu-container,
.menu-head{
    background: white;
    position: fixed;
    z-index: 1000;
    width: 355px;   
}
.menu-head .layer{
  background: #f7f7f7;
  display: block;
  height: 130px;

}


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

.menu-items {
  list-style: none;
  font-size: 17px;
}

.dropdown-heading,
.menu-items li a{
   text-decoration: none;
   padding: 10px;
   display: block;
   color: var(--skin-color);
   background:white;
   border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
   margin: 0;
   cursor: pointer;
   user-select: none;
  -webkit-user-select: none;
}
/* Icon Style */
.menu-items li i{
   font-size: 18px;
   margin-right: 10px;
 }
.dropdown-heading{
  -webkit-tap-highlight-color: transparent;
}
	
.dropdown-heading:hover,
.menu-items li a:hover{
   background: #00c1e3;
   color:white;
}

@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;
   }
}


/* Dropdowns */
.has-sub ul{
   list-style: none;
   overflow: hidden;
   display: none;
   background: white;
}



.has-sub ul li a{
   display: block;
   padding: 10px 33px;
   border-bottom: 0;
   font-size: 15px;
   font-weight:bold;
   color: black;
   transition: .1s;
   -webkit-transition: .1s;
   border-bottom: 1px dotted #e1e1e1;
}

.has-sub ul li a:hover{
   background: #dedede;
   transition: .1s;
 -webkit-transition: .1s;
 color:#4f869d;
}

.has-sub span{
  display: block;
  box-sizing: border-box;
}



.has-sub i.d-arrow{
   float: right;
   margin-right: 10px;  
   transition: 0.360s;
   font-size: 16px;
}



.has-sub .d-arrow.d-down{
   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;
}
.row2{
   display: table-cell;
    
}
.for-name {
   max-width: 150px;
   height:auto;
   padding: 0px 5px 5px 15px;
   color: var(--skin-color);
   border:0px solid red;
}
.for-pic {
	margin-top:-20px;
    max-width: 70px;
	border:0px solid red;
}
.row2{
	margin-top:-20px;
}
.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: -5px;
   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: 12px;
   display: block;
   
}

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

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

}
.loggo a{
   text-decoration: none;
   color: var(--skin-color);
}
.loggo a:hover{
   color: var(--skin-hover);
}