.buttonsComponent {
    position: fixed;
    display: grid;
    grid-gap: 10px;
    top: 120px;
    left: 0;
    z-index: 20;
}
body.sidePanelLocked .buttonsComponent {
    left: var(--side-menu-width);
    z-index: 999;
}

.btn-group-vertical {
    display: block;
    position: relative;
    justify-self: start;
    box-shadow: 2px 4px 4px 0px #0000006e;
    border-radius: 0 0 4px 4px;
}

.btn-group-vertical {
    transition-property: width;
    transition-duration: 0.1s;
    width: 25px;
}
.btn-group-vertical:hover {
    transition-property: width;
    transition-duration: 0.2s;
    width: 100%;
}

.btn-group-vertical button {
    text-align: left;
    padding: 7px 0px 7px 4px;
    border: 1px solid #00000061;
    overflow: hidden;
}
.btn-group-vertical:hover button {
    text-align: left;
    padding: 7px 4px 7px 4px;
    border: 1px solid #00000061;
}
.btn-group-vertical > .btn:hover {
    color: var(--main-text-color);
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
    border-bottom-left-radius: 0;
}

.buttonsComponent [class^="icon-"],
.buttonsComponent [class*=" icon-"],
.buttonsComponent [class^="fa-"],
.buttonsComponent [class*=" fa-"],
.buttonsComponent img {
    float: left;
    padding-right: 9px;
    padding-top: 3px;
    max-width: 28px;
}
.buttonsComponent img {
    width: 27px;
}

.btn-text {
    padding-left: 0;
    display: inline;
    overflow: hidden;
}