/* 
    Created on : 22-Jan-2019, 17:05:25
    Author     : PGoncalves
*/
/* MENU LEFT */
.menu{
    list-style:none; 
    /* border:1px solid #c0c0c0; */
    float:left; 
    background-color: #0684d1;
}

.menu li{
    position:relative; float:left;
    /*border-right:1px solid #444;*/
    border-right:1px solid #0684d1; 
}

.menu li a{color:#fff; font-weight: bold; text-decoration:none; padding:5px 15px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 15px 0 #333; -webkit-box-shadow:0 3px 15px 0 #333; text-shadow:0px 0px 5px #333; }

.menu li   ul{position:absolute; top:25px; left:0; background-color:#444; display:none; }

.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{ display:block; width:150px;}

/* MENU RIGHT */

.menuRight{
    list-style:none; 
    /* border:1px solid #c0c0c0; */
    float:right; 
    background-color: #0684d1;
}

.menuRight li{
    position:relative; float:right;
    border-right:1px solid #0684d1; 
}

.menuRight li a{color:#fff; font-weight: bold; text-decoration:none; padding:5px 15px; display:block;}

.menuRight li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 15px 0 #333; -webkit-box-shadow:0 3px 15px 0 #333; text-shadow:0px 0px 5px #333; }

.menuRight li   ul{position:absolute; top:25px; left:0; background-color:#666; display:block; }

.menuRight li:hover ul, .menu li.over ul{display:block;}

.menuRight li ul li{ display:block; width:150px;}

/* MENU BAR */
.menuBar
{
    width: 100%; 
    height: 30px; 
    /*background-color: #444;*/
    background-color: #0684d1;
}



/** SIDE BAR */

.leftBarMenu {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #0684d1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  float:left;
}

.leftBarMenu a {
  padding: 12px 12px 12px 16px;
  text-decoration: none;
  font-size: 13px;
  color: #d1f1d1;
  font-weight: bolder;
  display: block;
  transition: 0.3s;
  margin-left: 7px;
  margin-right: 7px;
}

.leftBarMenu .level1 {
    margin-top: 15px;
}

.leftBarMenu .level2 {
  padding: 12px 12px 12px 16px;
  text-decoration: none;
  font-size: 11px;
  color: #d1d1d1;
  display: block;
  transition: 0.3s;
  margin-left: 13px;
  margin-right: 7px;
}

.leftBarMenu .default {
  font-size: 13px;
  font-weight: bold;
  color: #f1f1f1;
  margin-left: 20px;
  margin-right: 10px;
}

.leftBarMenu .level2.active {
  font-size: 13px;
  font-weight: bold;
  color: #f1f1f1;
  margin-left: 20px;
  margin-right: 10px;
}


.leftBarMenu a:hover {
  color: #f1f1f1;
}

.leftBarMenu .closebtn {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

.middleBarMenu
{
    float: left;
    width: 100%;
    height: 100vh;
    padding-left: 265px;
    padding-right: 10px;
}

.closed_LeftBarMenu
{
    left: -250px;
}

.open-menu
{
    position: absolute;
    left: 10px;
    top: 20px;
    width: 30px;
    height: 30px;
}

.middleBarMenuClosed
{
    padding-left: 60px;
}

.leftBarMenuOpen
{
    left: 0px;
}

@media screen and (max-width: 1070px){
    
    .middleBarMenu
    {
        padding-left: 9%;
        padding-right: 9%;
    }
    
    .middleBarMenuClosed
    {
        padding-left: 60px;
    }
    
    .leftBarMenu
    {
        left: -250px;
    }
    
    .leftBarMenuOpen
    {
        left: 0px;
    }
    
}

@media screen and (max-width: 950px){
    
    .middleBarMenu
    {
        padding-left: 60px;
        padding-right: 2%;
    }
    
    .middleBarMenuClosed
    {
        padding-left: 60px;
    }
    
    .leftBarMenuOpen
    {
        left: 0px;
    }
    
}