*{
box-sizing: border-box;
}
.box-parent .messages {
overflow: hidden;
}
.popup-box {
position: fixed;
transition: all 1s;
box-sizing: border-box;
z-index: 999999;
}
.bar {
width: 100% !important;
}
.aside {
height: 100vh !important;
}
.aside .messages {
overflow-y: scroll !important;
}
.popup-box.bar.bar--top {
top: 0;
}
.popup-box.bar.bar--bottom {
bottom: 0;
}
.popup-box.top {
top: 0;
}
.popup-box.bottom {
bottom: 0;
}
.popup-box.right{
right: 0;
}
.popup-box.left{
left: 0;
}
.popup-box.from-left {
transform: translateX(-100%);
}
.popup-box.from-right {
transform: translateX(100%);
}
.popup-box.onview{
transform:  scale(1) translate(0) !important;
opacity: 1!important;
visibility: visible!important;
}
.popup-box-alt {
top: 50%;
position: fixed;
transition: all 1s;
box-sizing: border-box;
transform: translateY(-50%);
z-index: 999999;
}
.popup-box-alt.left{
left: -300px;
}
.popup-box-alt.left.onview{
left: 0;
}
.popup-box-alt.right{
right: -300px;
}
.popup-box-alt.right.onview{
right: 0;
}
.box-close {
position: absolute;
top: 5px;
height: 24px;
width: 24px;
border-radius: 50%;
text-align: center;
cursor: pointer;
line-height: 24px;
z-index: 999999;
}
.def.left .box-close,
.popup-box-alt.left .box-close,
.aside.left .box-close {
left: 5px;
}
.def.right .box-close,
.popup-box-alt.right .box-close, 
.aside.right .box-close {
right: 5px;
}
.btn-onview {
position: fixed;
display: flex;
overflow: hidden;
cursor: pointer;
justify-content: center;
align-items: center;
border: 0;
}
.btn-onview:focus {
border: 0;
outline: 0;
}
.right .btn-onview {
left: 0;
transform: translate(-100%, -100%) rotate(-90deg);
transform-origin: right bottom 0px;
}
.left .btn-onview {
top: 0px;
transform: translate(100%, -100%) rotate(90deg);
transform-origin: left bottom 0px;
right: 0;
}
.bar.bar--top .btn-onview,
.bar.bar--bottom .btn-onview {
transform: translate(0%, 100%) rotate(0deg);
}
.popup-box.from-top {
transform: translateY(-100%);
}
.popup-box.from-bottom {
transform: translateY(100%);
}
.bar.bar--top .box-close,
.bar.bar--bottom .box-close {
right: 5px;
top: 5px;
} @media (min-width: 981px) {
.hidden-md {
display: none;
}
}
@media (min-width: 480px) and (max-width: 980px){ 
.hidden-sm {
display: none;
}
.onview .scroll-bar {
overflow-y: scroll !important;
}
}
@media (max-width: 479px) {
.hidden-xs {
display: none;
}
.onview .scroll-bar {
overflow-y: scroll !important;
}
}