.vjsPlayingHistory {
     display: block;
     position: relative;
     font-size: 14px;
     line-height: 28px;
     color: #383838;
     font-weight: 300;
}
 .history-day-picker, .history-time-picker {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .history-day-picker > span {
     padding-left: 15px;
     padding-right: 15px;
}
 #before-button {
     float: left;
     border: 1px solid red;
}
 #after-button {
     border: 1px solid green;
     overflow: hidden;
}
 // loader .vjsPlayingHistory__content.spinner {
     position: relative;
}
 .vjsPlayingHistory .spinner {
     -webkit-animation: slide-top 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s both;
     animation: slide-top 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 4s both;
     overflow: hidden;
}
 .vjsPlayingHistory .spinner:after {
     content: "";
     background: url(https://cdn.files.smcloud.net/t/loading.gif) rgba(255,255,255,0.8) no-repeat 50% 5%;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
 @-webkit-keyframes slide-top {
     0% {
         transform: translateY(0);
         height: 100px;
         background: none;
         padding-top: 0px;
    }
     to {
         transform: translateY(-100px);
         height: auto;
         background: #fff;
         padding-top: 0;
    }
}
 @keyframes slide-top {
     0% {
         transform: translateY(0);
         height: 100px;
         background: none;
         padding-top: 0px;
    }
     to {
         transform: translateY(-100px);
         height: auto;
         background: #fff;
         padding-top: 0;
    }
}
 .vjsPlayingHistory:not(.spinner) {
     -webkit-animation: showUp 0.5s linear;
     animation: showUp 0.5s linear;
     max-height: 10000px !important;
     transition: max-height 1s ease-in;
     overflow: hidden;
}