#side-menus-container {
    width: 140px;   
    position: fixed;
    z-index: 10;
    /* background: rgba(4, 11, 15, 0.71);    */
}
#side-menus-container.active {
    width: 30%;
    background-color: rgba(0,0,0,0.8);
}
#side-menus-wrapper {
    padding-top: 150px;
    padding-bottom: 50px;    
}
#menu-wrapper {
    font-size: 0;
    text-align: center;
    white-space: nowrap;
    overflow-y: scroll;
    position: relative;
    height: 100%;
}
.menu-item-container{    
    padding: 10px 10px;
    margin: 0px 20px;
    text-align: left;
    border-radius: 15px;
}
.menu-item-container > div {
    display: inline-block;   
    vertical-align: middle;
}
.menu-item-container .menu-item-txt {
    display: none;
    color:#989495;
}
#side-menus-container.active .menu-item-txt {
    display: inline-block;
}
.menu-item-container:nth-child(8) {
    /* margin-top: 130px; */
}
.menu-item{
    text-align: center;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
    width: 80px;
    height: 70px;
    padding: 10px 15px;
    border-radius: 20px;
    /* background: rgba(255,255,255,0.05); */
    border: 3px solid transparent;
    background: #111;
}
.menu-item-container.active {
    background: linear-gradient(
    180deg,
    #e6c84f 0%,   /* softer top */
    #d4af37 30%,  /* gold */
    #c49b1a 60%,  /* deeper gold */
    #8f6f00 100%  /* dark base */
  );
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.menu-item-container.active .menu-item {
    /* transform: scale(1.1); */
    /* font-weight: bold; */
    /* border-color: #2BA6DE; */
    /* background: 151F24; */
}
.menu-item-img {    
    height: 100%;
    width: 100%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.menu-item-container:nth-child(1) .menu-item-img {
    background-image: url('../images/search.png');
}
.menu-item-container:nth-child(2) .menu-item-img {
    background-image: url('../images/home.png');
}
.menu-item-container:nth-child(3) .menu-item-img {    
    background-image: url('../images/live.png');
}
.menu-item-container:nth-child(4) .menu-item-img {
    background-image: url('../images/catchup.png');    
}
.menu-item-container:nth-child(5) .menu-item-img {
    background-image: url('../images/movie.png');    
}
.menu-item-container:nth-child(6) .menu-item-img {
    background-image: url('../images/series.png');    
}
.menu-item-container:nth-child(7) .menu-item-img{
    background-image: url('../images/reload.png');
}
.menu-item-container:nth-child(8) .menu-item-img{
    background-image: url('../images/account.png');
}
.menu-item-container:nth-child(9) .menu-item-img{
    background-image: url('../images/settings.png');
}
.menu-item-container:nth-child(10) .menu-item-img{
    background-image: url('../images/exit.png');
}
.menu-item-container.active .menu-item-img{    
}
.menu-item-container:nth-child(1).active .menu-item-img {
    background-image: url('../images/search-focus.png');
}
.menu-item-container:nth-child(2).active .menu-item-img {
    background-image: url('../images/home-focus.png');
}
.menu-item-container:nth-child(3).active .menu-item-img {
    background-image: url('../images/live-focus.png');
}
.menu-item-container:nth-child(4).active .menu-item-img {
    background-image: url('../images/catchup-focus.png');    
}
.menu-item-container:nth-child(5).active .menu-item-img {
    background-image: url('../images/movie-focus.png');    
}
.menu-item-container:nth-child(6).active .menu-item-img {
    background-image: url('../images/series-focus.png');    
}
.menu-item-container:nth-child(7).active .menu-item-img{
    background-image: url('../images/reload-focus.png');
}
.menu-item-container:nth-child(8).active .menu-item-img{
    background-image: url('../images/account-focus.png');
}
.menu-item-container:nth-child(9).active .menu-item-img{
    background-image: url('../images/settings-focus.png');
}
.menu-item-container:nth-child(10).active .menu-item-img{
    background-image: url('../images/exit-focus.png');
}
.menu-item-container.active .menu-item-img {    
}

.menu-item-container.active .menu-item-txt {
    color: #fff
}

.menu-item-txt {
    color: #fff;
    font-size: 40px;
    position: relative;    
    font-weight: bold;
    padding: 0 10px;
    transition: all 0.2s;
    text-transform: uppercase;
    display: none;    
}