#left { border-color: red; }
#left .handle { background-color: red; }

#right { z-index: 100; border-color: #F1BE06; border-width: 5px; width: 200px; padding: 10px 20px;color: #000; }
#right p { margin: 10px 0;}
#right p a{text-decoration: none;  color: #000;}
#right p a i{  color: #F1BE06;}
.icon-outer{transform: rotate(443deg);}
#right .handle { background-color: #F1BE06;color: #000; }

#bottom { border-color: blue; }
#bottom .handle { background-color: blue; }
.ui-slideouttab-panel, .ui-slideouttab-handle { background-color: white; padding: 0.4em; box-sizing: border-box; }
.ui-slideouttab-panel { display: block; position: fixed; border: 2px solid grey; }

/* This class is added after the tabs are initialised, otherwise the user sees the 
   tabs slide out of the way when the page is initialised. */
.ui-slideouttab-ready { transition: transform 0.5s ease 0s; }

/* Hide tabs and panels when printed. */
@media print {
    .ui-slideouttab-panel { display: none; }
}

/* Tab handles */
.ui-slideouttab-handle { display: block; position: absolute; cursor: pointer; color: white; background-color: grey; }
.ui-slideouttab-handle-image { transform: rotate(0); }

/* Right */
.ui-slideouttab-right { right: 0px; 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); }

/* Left */
.ui-slideouttab-left { left: 0px; 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%); }

/* Top */
.ui-slideouttab-top { top: 0px; transform: translateY(-100%); border-top: none; }
.ui-slideouttab-top.ui-slideouttab-open { transform: translateY(0%); }

/* Bottom */
.ui-slideouttab-bottom { bottom: 0px; transform: translateY(100%); border-bottom: none; }
.ui-slideouttab-bottom.ui-slideouttab-open { transform: translateY(0%); }

/* turn font awesome icon in a tab upright */
.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: 0.5em; }

/* apply rounded corners if handle has the -rounded class */
.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: 12px 12px 0 0;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 15px;}