div.mat_navigation{
  position:fixed;
  top:0px;
  left:0px;
  width:250px;
  z-index:100;
  transition:transform .2s;
  transform:translateX(-250px);
}
div.mat_navigation.is-active{
  transform:translateX(0px);
}
div.mat_navigation_margin{
  height:60px;
  position:relative;
  width:100%;
}
div.mat_navigation_back{
  z-index:99;
  position:fixed;
  width:100%;
  height:100%;
  margin:0px;
  display:none;
  top:0px;
  left:0px;
  right:0px;
  left:0px;
  background-color: rgba(0,0,0,.3);
}
div.mat_navigation_back.is-active{
  display:block;
}
div.mat_navigation_information{
  position:relative;
  width:100%;
  text-align:center;
}
div.mat_navigation_picture{
  position:relative;
  width:100%;
  text-align:center;
  padding:16px 0px;
}
div.mat_user_picture{
  width:150px;
  height:150px;
  border-radius:50%;
  position:relative;
  margin:auto;
}
div.mat_user_picture.default{
  background-color:#ddd;
}
div.mat_navigation_email{
  padding:0px;
  text-align:center;
}
div.mat_navigation_email > p{
  text-align:center;
  margin:0px;
  font-size:16px;
  color:#fff;
  font-family:Raleway;
}
div.mat_navigation_group{
  padding:0px;
  text-align:center;
}
div.mat_navigation_group > p{
  text-align:Center;
  margin-bottom:10px;
  font-size:16px;
  color:#fff;
  font-familt:Raleway;
}
div.mat_navigation_history{
  position:relative;
  display:flex;
  width:100%;
}
div.mat_navigation_history > div{
  flex:1;
  position:relative;
  text-align:center;
}
div.mat_navigation_history > div.left{
  border-right : 1px solid #eee;
}
span.mat_navigation_history_detail{
  color:#ddd;
  font-size:14px;
  font-family:Raleway;
}
span.mat_navigtion_history_number{
  color:#fff;
  font-size:18px;
  font-family:Raleway;
}