.xlfloatab {
    width: 300px;
    position: fixed;
    top: 0px;
    height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.xlfloatab .tabs {
  position: absolute;
  width: 4em;
    top: 50%;
    transform: translateY(-50%);  
}
.xlfloatab .tabs .tab {
  background-color: #303c48;
  color: white;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.xlfloatab .tabs .tab:hover {
  background-color: #445667;
}

.xlfloatab .tabs .tab .tab-name {
  text-align: center;
}
.xlfloatab .tabs .tab .tab-name span {
  writing-mode: vertical-lr;
  text-orientation: sideways;
  white-space: nowrap;
}
.xlfloatab .tabs .tab.active {
  background-color: #596f85;
}
.xlfloatab .contents {
    background-color: #303c48;
    padding: 15px;
    height: 466px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.xlfloatab .contents .content {
  max-height: 100%;
  display: none;
  overflow: auto;
}
.xlfloatab .contents .content.active {
  display: block;
}

.xlfloatab.right {
  right: -300px;
}
.xlfloatab.right .tabs {
  left: -4em;
}

.xlfloatab.left {
  left: -300px;
}
.xlfloatab.left .tabs {
  right: -4em;
}

.xlfloatab.right.showing {
  right: 0;
}

.xlfloatab.left.showing {
  left: 0;
}

.content.active{
    animation: xldflofadeIn .5s;
    animation-fill-mode: both 
}
@keyframes xldflofadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    } 
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.flotingovrlyxld{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 100vh;
    z-index: 1;
    display: none;
}
.xldfloatoverlay .flotingovrlyxld{
    display:block;
}
.flotingovrlyxld  {
    animation: xldfltabfade .5s;
    animation-fill-mode: both
}
@keyframes xldfltabfade {
    from {

        opacity:0
    }
    to {
        opacity:1
    }
}