#qal-container {position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 1000;}

#qal-container .qal-link {height: auto; flex-direction: row; flex-wrap: nowrap; display: flex; margin: 15px 0; box-shadow: 2px 2px 0.25rem -2px rgba(0,0,0,0.25); overflow: hidden; width: 40px; border-radius: 0 5px 5px 0; transition: all 0.3s ease-in-out;}
#qal-container .qal-link.expanded {display: flex; width: 200px; box-shadow: 2px 2px 0.35rem -2px rgba(0,0,0,0.35)}

#qal-container .qal-link .qal-content {width: 0px; transition: all 0.3s ease-in-out; overflow: hidden; height: 40px; font-size: 0.75rem; font-weight: bold; text-transform: capitalize; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; background-color: var(--clc-primary-hover); position: relative;}
#qal-container .qal-link .qal-content:hover {background-color: var(--clc-primary-light);}
#qal-container .qal-link .qal-content p {position: absolute; width: 150px; padding: 0px 5px; opacity: 0; transition: all 0.3s ease-in-out; color: #000;}
#qal-container .qal-link.expanded .qal-content {width: 160px;}
#qal-container .qal-link.expanded .qal-content p {opacity: 1;}

#qal-container .qal-icon {width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 0 5px 5px 0; background-color: var(--clc-primary-dark); color: #fff; transition: all 0.3s ease-in-out; text-shadow: 1px 1px rgba(0,0,0,0.5)}
#qal-container .qal-link.expanded .qal-icon {color: var(--clc-accent-yellow);}

@media screen and (max-width: 1024px) {
    #qal-container {display: none;}
}