.dimming.open,
.panels {
    display: block;
    position: fixed
}

.dimming {
    display: none
}

.dimming.open {
    background: #000;
    bottom: 0;
    left: 0;
    opacity: .8;
    right: 0;
    top: 0;
    z-index: 1031
}

.overflow-hidden {
    overflow: hidden
}

.panels {
    -ms-scrollbar-face-color: #EEE;
    -ms-scrollbar-highlight-color: #555;
    -ms-scrollbar-shadow-color: #EEE;
    -ms-scrollbar-3dlight-color: #EEE;
    -ms-scrollbar-arrow-color: #EEE;
    -ms-scrollbar-track-color: #FFF;
    -ms-scrollbar-darkshadow-color: #EEE;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #FFF;
    overflow-x: auto;
    overflow-y: auto;
    pointer-events: all;
    transition: .2s ease-in-out;
    z-index: 1032
}

.panels::-webkit-scrollbar {
    width: 5px
}

.panels::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3)
}

.panels::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .5)
}

.panels::-webkit-scrollbar-track {
    background-color: transparent
}

.panels.panel-bottom,
.panels.panel-top {
    width: 100%
}

.panels.panel-top.open {
    -moz-box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .7);
    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, .7)
}

.panels.panel-bottom.open {
    -moz-box-shadow: 0 -20px 80px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 -20px 80px 0 rgba(0, 0, 0, .7);
    box-shadow: 0 -20px 80px 0 rgba(0, 0, 0, .7)
}

.panels.panel-left,
.panels.panel-right {
    height: 100%;
    top: 0
}

.panels.panel-left.open {
    -moz-box-shadow: 20px 0 80px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: 20px 0 80px 0 rgba(0, 0, 0, .7);
    box-shadow: 20px 0 80px 0 rgba(0, 0, 0, .7)
}

.panels.panel-right.open {
    -moz-box-shadow: -20px 0 80px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: -20px 0 80px 0 rgba(0, 0, 0, .7);
    box-shadow: -20px 0 80px 0 rgba(0, 0, 0, .7)
}