.musicTab{
    width: 310px;
    display: flex;
    flex-direction: column;
}

.group{
    margin: -8px;
    display: flex;
    flex-direction: row;
    transition-timing-function: ease-out;
    transition-duration: .5s;
}

.hideGroup{
    width: 61px;
    height: 61px;
    float: left;
}

.hideToggle {
    opacity: 0%;
    float: left;
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

body:has(.hideToggle:checked) .group{
    translate: 310px;
}

body:has(.hideToggle:checked) .hideToggleImageR{
    opacity: 0%;
}

body:has(.hideToggle:checked) .hideToggleImageL{
    opacity: 100%;
}
  
.hideToggleImageR{
    opacity: 100%;
    z-index: -1;
    float: left;
    position: absolute;
    display: block;
    transition-timing-function: ease-out;
    transition-duration: .3s;
}

.hideToggleImageL{
    opacity: 0%;
    z-index: -1;
    float: left;
    position: absolute;
    display: block;
    transition-timing-function: ease-out;
    transition-duration: .3s;
}