.dastra_sider_bar {
  z-index:999999;
  position:fixed;
  right:0;
  top:20%;
  width:50px;
  overflow:hidden;
  opacity:0;
  filter:alpha(opacity=0);
  transition:all .4s;
  transform: translateX(95px);
  -webkit-transform: translateX(95px);
  -moz-transform: translateX(95px);
}
.dastra_sider_bar.show{transform:none;opacity:1;filter:alpha(opacity=100);}
.dastra_sider_bar.active {width:260px;}
.dastra_sider_bar li {position:relative;height:50px;overflow:hidden;transition:all .4s;list-style: none;background:var(--color-primary); background-size: cover;  margin-bottom: 1px; }
.dastra_sider_bar.active li a {opacity: 1;}
.dastra_sider_bar li a {position:relative;z-index:1000;display:block;}
.dastra_sider_bar li p {color: #fff;}
.dastra_sider_bar li i {
z-index:1000;
position:absolute;
left:0;
display:block;
width:50px;
height:50px;
transition:all .4s;
color: #fff;
font-size: 26px;
text-align: center;
line-height: 50px;
}

.dastra_sider_bar.active li:last-child:after {display:none;}
.dastra_sider_bar li:hover i,.dastra_sider_bar li:hover a{ color: #fff;}

.dastra_sider_bar li a {
  position:absolute;
  top:0;
  right:-135px;
  display:block;
  width:210px;
line-height:110%;
  padding:18px 0 0 50px;
  color:#fff;
  white-space:nowrap;
  transition:all .4s;
font-size:14px;
text-align: left;
font-weight: normal;
opacity: 0; font-weight: 400;
}
.dastra_sider_bar.active li a {right:50px;}
.dastra_sider_bar .online_code a img{max-width:80px;}
.dastra_sider_bar.active .online_code{height:130px;}
.dastra_sider_bar.active .online_code a p{margin:0;margin-bottom:5px;}
.dastra_sider_bar li.online_code:hover a{opacity:1; right: auto;left: 0;}