.ui-slideouttab-panel, .ui-slideouttab-handle
{
    background-color: #fff;
    padding: .4em;
    box-sizing: border-box;
}
.ui-slideouttab-panel
{
    display: block;
    position: fixed;
    border: 1px solid #f9f9f9;
}
.ui-slideouttab-ready
{
    transition: transform .5s ease 0s;
}
@media print
{
    .ui-slideouttab-panel
    {
        display: none;
    }
}
.ui-slideouttab-handle
{
    display: block;
    position: absolute;
    cursor: pointer;
    color: #fff;
    background-color: #808080;
}
.ui-slideouttab-handle-image
{
    transform: rotate(0);
}
.ui-slideouttab-right
{
    right: 0;
    transform: translateX(100%);
    border-right: none;
}
.ui-slideouttab-right.ui-slideouttab-open
{
    transform: translateX(0%);
}
.ui-slideouttab-right .ui-slideouttab-handle
{
    transform-origin: 0% 0%;
    transform: rotate(-90deg) translate(-100%,-100%);
}
.ui-slideouttab-right .ui-slideouttab-handle-reverse
{
    transform-origin: 0% 100%;
    transform: rotate(-90deg);
}
.ui-slideouttab-left
{
    left: 0;
    transform: translateX(-100%);
    border-left: none;
}
.ui-slideouttab-left.ui-slideouttab-open
{
    transform: translateX(0%);
}
.ui-slideouttab-left .ui-slideouttab-handle
{
    transform-origin: 100% 0%;
    transform: rotate(-90deg);
}
.ui-slideouttab-left .ui-slideouttab-handle-reverse
{
    transform-origin: 100% 100%;
    transform: rotate(-90deg) translate(100%,100%);
}
.ui-slideouttab-top
{
    top: 0;
    transform: translateY(-100%);
    border-top: none;
}
.ui-slideouttab-top.ui-slideouttab-open
{
    transform: translateY(0%);
}
.ui-slideouttab-bottom
{
    bottom: 0;
    transform: translateY(100%);
    border-bottom: none;
}
.ui-slideouttab-bottom.ui-slideouttab-open
{
    transform: translateY(0%);
}
.ui-slideouttab-left .ui-slideouttab-handle>.fa-icon, .ui-slideouttab-right .ui-slideouttab-handle>.fa-icon
{
    transform: rotate(90deg);
}
.ui-slideouttab-handle>.fa-icon
{
    margin-left: .5em;
}
.ui-slideouttab-top .ui-slideouttab-handle-rounded, .ui-slideouttab-left .ui-slideouttab-handle-rounded
{
    border-radius: 0 0 4px 4px;
}
.ui-slideouttab-right .ui-slideouttab-handle-rounded, .ui-slideouttab-bottom .ui-slideouttab-handle-rounded
{
    border-radius: 4px 4px 0 0;
}