.slideoutWrapper{
color:#555;
background:whitesmoke;
border:1px solid rgb(222,222,222);
border-radius:0 5px 5px 0;
height:calc(100% - 1px);
overflow-x:auto;
overflow-y:hidden;
position:absolute;
top:0;
display:none;
width:calc(100% - 2px);
z-index:100;
}
html[dir="rtl"] .slideoutWrapper{
transform:translateX(100%);
}
.slideoutWrapperVisible{
-webkit-animation:slide-in .2s ease;
-moz-animation:slide-in .2s ease;
-ms-animation:slide-in .2s ease;
animation:slide-in .2s ease;
display:block;
}
.slideoutWrapperHiding{
-webkit-animation:slide-out .2s ease;
-moz-animation:slide-out .2s ease;
-ms-animation:slide-out .2s ease;
animation:slide-out .2s ease;
display:block;
}
@-webkit-keyframes slide-in{
from{-webkit-transform:translateX(-100%);}
to{-webkit-transform:translateX(0);}
}
@-moz-keyframes slide-in{
from{-moz-transform:translateX(-100%);}
to{-moz-transform:translateX(0);}
}
@keyframes slide-in{
from{transform:translateX(-100%);}
to{transform:translateX(0);}
}
@-webkit-keyframes slide-out{
from{-webkit-transform:translateX(0);}
to{-webkit-transform:translateX(-100%);}
}
@-moz-keyframes slide-out{
from{-moz-transform:translateX(0);}
to{-moz-transform:translateX(-100%);}
}
@keyframes slide-out{
from{transform:translateX(0);}
to{transform:translateX(-100%);}
}
.slideoutWrapper > .slideoutDismissButton{
background-color:rgb(245,245,245);
border-radius:0 3px 0 3px;
display:none;
margin:3px;
margin-top:5px;
opacity:0.7;
padding:1px;
padding-top:0;
position:absolute;
right:0;
z-index:1;
}
.slideoutWrapper.slideoutWrapperVisible > .slideoutDismissButton{
display:inline-block;
}
.slideoutWrapper.slideoutWrapperVisible > .slideoutDismissButton:hover{
color:#00AED1;
opacity:1;
}
.slideoutContent{
height:100%;
margin:0;
padding:0;
width:100%;
}