.sidr {
background: #333;
color: #9a9da2;
display: block;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
width: 320px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidr::-webkit-scrollbar {
width: 0;
height: 0;
}
.sidr .sidr-inner {
padding: 0 0 15px;
}
.sidr.right {
left: auto;
right: -320px;
}
.sidr.left {
left: -320px;
right: auto;
}
.sidr {
padding-left: 15px;
padding-right: 15px;
}
.sidr .widget-title {
color: #fff;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch {
cursor: pointer;
display: inline-block;
font-size: 20px;
height: 1em;
width: 2em;
margin: auto;
background: #fff;
border-radius: 1em;
}
.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #E91E63;
border: 1px solid #fff;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
}
.sidr-open .switch input + div {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.sidr-close-holder {
text-align: right;
font-size: 16px;
text-transform: uppercase;
}
.sidr-close-holder i {
margin-left: 5px;
font-size: 40px;
vertical-align: middle;
}
@media only screen and (min-width: 992px) {
body.sidr-open:before {
content: "";
left: 0;
top: 0;
z-index: 102;
width: 100%;
height: 100%;
position: fixed;
cursor: pointer;
-webkit-transition: visibility 0s, opacity 0.4s linear;
transition: visibility 0s, opacity 0.4s linear;
visibility: visible;
opacity: 1;
background-color: rgba(51, 51, 51, 0.94);
}
}