/*Sidebar menu animation*/
@keyframes slideSidebar {
    from {
        width: 250px;
    } to {
        width: 53px;
    }
}
@keyframes slideOpen {
    from {
        width: 53px;
    } to {
        width: 250px;
    }
}
.main-sidebar {
    width: 53px;
}
.main-sidebar.open {
    width: 250px;
    animation: slideOpen 0.5s;
}
.main-sidebar.closed {
    width: 53px;
    animation: slideSidebar 0.5s;
}

/*Bar icons animation*/
@keyframes hideBtnClosed {
    from {
        left: 210px;
    } to {
        left: 65px;
    }
}
@keyframes hideBtnOpened {
    from {
        left: 65px;
    } to {
        left: 210px;
    }
}
.show-hide-btn.open {
/*    left: 210px;*/
    animation: hideBtnOpened 0.5s;
}
.show-hide-btn.closed {
/*    left: 65px;*/
    animation: hideBtnClosed 0.5s;
}

/*Bar icons animation*/
@keyframes mainContentClosed {
    from {
        padding-left: 270px;
    } to {
        padding-left: 90px;
    }
}
@keyframes mainContentOpened {
    from {
        padding-left: 90px;
    } to {
        padding-left: 270px;
    }
}
.main-content.open {
    padding-left: 270px;
    animation: mainContentOpened 0.5s;
}
.main-content.closed {
    padding-left: 90px;
    animation: mainContentClosed 0.5s;
}