@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
/*scrollbar */
/* The emerging W3C standard
   that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: #000 #ffcd11;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: #ffcd11;
}
*::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 20px;
  border: 3px solid #ffcd11;
}



/*Main content*/
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  max-width: 100%;
    

}

.wrapper{
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.top_navbar{
  background: #ddd;
  height: 60px;
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
       max-width: 100%;
 
    
}

.top_navbar .hamburger{
  width: 80px;
  background: #000;
  position: relative;
  font-size: 28px;

}

.top_navbar .hamburger:hover{
  width: 80px;
  background: #000;
  position: relative;
  font-size: 28px;
    border-left: solid 8px #ffcd11;

}


.top_navbar .hamburger .hamburger__inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  cursor: pointer;
  width: 40px;
  height: 20px;
}

.top_navbar .hamburger__inner > div{
  width: 30px;
  height: 2px;
  background: #ffcd11;
  position: absolute;
  top: 0;
  left: 0;
}

.top_navbar .hamburger div.two{
  top: 10px;
  width: 40px;
}

.top_navbar .hamburger div.three{
  top: 20px;
}

.top_navbar .menu{
  width: calc(100% - 80px);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px;
    padding-left:  9px;
    
}

.top_navbar .menu:hover{

 background:#ffcd11;
      padding-left:15px;
    
}






.top_navbar .menu .logo{
  color: #000;
    font-weight: 600;
/*  text-transform: uppercase;*/
  letter-spacing: 2px;
    margin-left:0px;
}

.top_navbar .menu .right_menu ul{
  display: flex;
}

.top_navbar .menu .right_menu ul li{
  position: relative;
}

.top_navbar .menu .right_menu ul li .fas{
  font-size: 33px;
  cursor: pointer;
  color: #000;
}

.top_navbar .menu .right_menu ul li .profile_dd{
  position: absolute;
  top: 35px;
  right: -10px;
  background: #eee;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 10px 0;
  width: 180px;
  border-radius: 15px;
  display: none;
  user-select: none;
    
}




.top_navbar .menu .right_menu ul li .profile_dd.active
{
display:inline-table;
/*pin user menu on click*/
    border: solid 5px red;
}


.top_navbar .menu .right_menu:hover ul li .profile_dd{
      display:inline-table;
    
}




.top_navbar .menu .right_menu ul li .profile_dd .dd_item{
  padding: 10px;
  cursor: pointer;
  color: #000;
}

.top_navbar .menu .right_menu ul li .profile_dd .dd_item:hover{
  background: #ffcd11;
      border-radius: 7px;


}

.top_navbar .menu .right_menu ul li .profile_dd:before{
  content: "";
  position: absolute;
  top: -20px;
  right: 10px;
  border: 10px solid;
  border-color: transparent transparent #ffcd11 transparent;
}


/* leftside menu */
/* leftside menu */


.main_container .sidebar{
  position: fixed;
  top: 60px;
  left: 0;
  width: 80px;
  height: 100%;
  background: #000;
  transition: all 0.3s ease;
}

.main_container .sidebar .sidebar__inner{
  position: relative;
}

.main_container .sidebar .profile{
  display: flex;
  align-items: center;
  color: #ffcd11;
  padding: 20px 0;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.main_container .sidebar .profile .img{
padding: 0 18px;
display: none;

}
 .sitelogophoto
{
    display: flex;
padding:1px;  margin:0px; border-radius:50%; 
border:solid 2px;
align-content: center;
vertical-align: middle;
margin-left: 15px;
margin-right: 7px;
background: #fff;
    
}

.sitelogophoto :hover
{
padding:1px;
transform: rotate(270deg); transition: all 1s ease;
/*background: #ffcd11;*/

    
}



.logophoto{
    
border-radius:50%; 
vertical-align: middle;
    display: flex;
}


.main_container .sidebar .profile img{
   width: 45px;
}

.wrapper.active .main_container .sidebar .profile p:first-child{
  font-size: 14px;
  color: #fff;
 font-weight: 600;
    padding-right: 5px;
}


/*main site content*/
.main_container .container{
  margin-top: 60px;
  width: calc(100% - 80px);
  margin-left: 80px;
  padding: 10px;
  transition: all 1s ease;
 background: #eee;
  max-width: 100%;
  overflow: auto;

}
.main_container{
max-width: 100%;

}


.main_container .sidebar ul li a{
  color: #fff;
  font-size: 18px;
/*  padding: 0px 0px;*/
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  transition: all 0.3s ease;
}



.menuheader  {
    
   margin-left:1px ;
/*    background:red;*/
     padding: 11px 25px;

    
}

.submenuspan{
    padding:5px 30px;
}

.main_container .sidebar ul li:last-of-type  {
border-bottom: 5px solid #ffcd11;
    margin-bottom: 80px;
}



.main_container .sidebar ul li a .icon{
    
  margin-right: 15px;
  font-size: 28px;
}

.main_container .sidebar ul li a span{
  display: flex;
}

.main_container .sidebar ul li a:hover,
.main_container .sidebar ul li a.active

{
  background: #fff;
  color: #000;
}

.main_container .container .item{
  background: #fff;
  border: 1px solid #fff;
  margin-bottom: 30px;
  padding: 20px;
  font-size: 14px;
  line-height: 22px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;

}



.sidebar ul li a span.title,
.profile_info
{display:none;}

/* after adding active class */
.wrapper.active .sidebar{
  width: 225px;
}

.wrapper.active .sidebar ul li a span.title,
.wrapper.active .profile_info,
.wrapper.active .main_container .sidebar ul li a,
.wrapper.active .main_container .sidebar .profile .img,
.wrapper.active .main_container .sidebar .profile
{
  display: flex;
}

.wrapper.active .main_container .container{
  width: calc(100% - 225px);
  margin-left: 225px;
}
    

 .wrapper .sidebar,
 .wrapper.active .sidebar
{
 
    overflow: auto;
  
    
}


@media screen and (max-width: 500px) {
   

.wrapper.active .sidebar
{
display: flex;
z-index: 9999;

    
    
}
.wrapper.active .main_container .container{
  width: 100%;
  margin-left: 0px;

}
   
    .wrapper .sidebar
{
  display: none;

    
}
    
.wrapper .main_container .container{
  width: 100%;
  margin-left: 0px;
}

 .wrapper.active   .item { 
    max-width: 100%;
       overflow: auto;

    }
  
    
     .wrapper .item { background:red;
    max-width: 100%;
    }
  
    
}

/*hiding sub menu by default*/
/*hiding sub menu by default*/
/*hiding sub menu by default*/
ul .submenulistone,
ul .submenulisttwo,
ul .submenulistthree,
ul .submenulistfour,
ul .submenulistfive,
ul .submenulistsix,
ul .submenulistseven,
ul .submenulisteight,
ul .submenulistnine
{
    display:none;
}

/*To display Sub menu on mouse hover*/
/*To display Sub menu on mouse hover*/
/*To display Sub menu on mouse hover*/
.wrapper.active .menu-one:hover .submenulistone, 
.wrapper.active .menu-two:hover .submenulisttwo, 
.wrapper.active .menu-three:hover .submenulistthree, 
.wrapper.active .menu-four:hover .submenulistfour, 
.wrapper.active .menu-five:hover .submenulistfive, 
.wrapper.active .menu-six:hover .submenulistsix, 
.wrapper.active .menu-seven:hover .submenulistseven, 
.wrapper.active .menu-eight:hover .submenulisteight
{
    display:flex; 
}

.wrapper.active .menu-one.open  .submenulistone,
.wrapper.active .menu-two.open  .submenulisttwo,
.wrapper.active .menu-three.open  .submenulistthree,
.wrapper.active .menu-four.open  .submenulistfour,
.wrapper.active .menu-five.open  .submenulistfive,
.wrapper.active .menu-six.open  .submenulistsix,
.wrapper.active .menu-seven.open  .submenulistseven,
.wrapper.active .menu-eight.open  .submenulisteight,
.wrapper.active .menu-nine.open  .submenulistnine

{

    display:flex; 

}


/*right border for opened submenu header */
.menu-one.open  .menuheader, 
.menu-two.open  .menuheader, 
.menu-three.open  .menuheader, 
.menu-four.open  .menuheader, 
.menu-five.open  .menuheader, 
.menu-six.open  .menuheader, 
.menu-seven.open  .menuheader, 
.menu-eight.open  .menuheader, 
.menu-nine.open  .menuheader

{
    
border-right: solid 6px #ffcd11;
    color:#ffcd11;
    border-bottom:solid 0px ;

}


/*stop underline last item of submenu */
/*stop underline last item of submenu */
/*stop underline last item of submenu */

.main_container .sidebar ul li li:last-of-type  {
border-bottom: none;
margin-bottom: 2px;
padding-left:2px;
}


/*color of sub menu items on hover the main menu*/
/*color of sub menu items on hover the main menu*/
/*color of sub menu items on hover the main menu*/

.main_container .sidebar ul li:hover li a 
{
color:#fff;

}

/*color of sub menu items on hover of the sub menu item itself*/
/*color of sub menu items on hover of the sub menu item itself*/
/*color of sub menu items on hover of the sub menu item itself*/

.main_container .sidebar ul li li a:hover
{
color:#000;
font-weight: 500;
background: #fff; 
    width:100%;
    display:flex;
  
    
}

/*
.main_container .sidebar ul li li a
{
    width:100%;
    display:flex;

}
*/
/*submenuitems*/
.submenulistitem{
    background:#000;
   width:100%;
    color:#fff;

}