/* 
   Styles for Control bars
*/

:root {
    --hl-color:#FADB3D;
    --color2:  #D1CE6D;
    --color3:  #3796C7;
    --color4:  #C7C22C;
    --color5:  #DB7A00;
    --color6:  #E33F3D; 
}


.side-bar {
    z-index: 11;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 4px;
}
.bar-item {
    background-color: transparent;
    font-size: 32px;
    height: 60px;
    width: 60px;
    border: 4px solid white;
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: center;
    vertical-align: middle;
    line-height: 60px;
    cursor: pointer;
}

.bar-item:hover {
    border-color: var(--hl-color);
    color: var(--hl-color);
}

.bar-item.input:hover {
    border-color: var(--color5);
    color: var(--color5);
}

.bar-item.transform:hover {
    border-color: var(--color4);
    color: var(--color4);
}

.bar-item.output:hover {
    border-color: var(--color6);
    color: var(--color6);
}

.popup-name {
    opacity: 0;
    display: none;
}

.hover-hint {
    z-index: 100;
    padding: 4px;
    border: 2px solid white;
    background-color: black;
    pointer-events: none;
}

#collapse-menu.menu-hidden {
    opacity: 0;
    transition: 0.5s;
}

#collapse-menu.menu-hidden:hover {
    border-color: var(--color3);
    color: var(--color3);
    opacity: 1; 
    transition: 0.5s;
}

#collapse-menu.menu-open:hover {
    border-color: var(--color3);
    color: var(--color3);
}

.top-bar {
    z-index: 11;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    left: 76px;
}

.right-top-bar {
    z-index: 11;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    right: 4px;
}

.top-bar-item {
    display: inline-block;
}

.bar-item#y {
    transform: rotate(-90deg);
}
.bar-item#kal{
    font-size: 55px;
    line-height: 65px;
}

/*
.bar-item#sin {
    background: url('assets/sin2.svg') no-repeat top left;
    background-size: contain;
}
*/
#mult-op {
    transform: rotate(30deg) scale(3);
    position: relative;
    top: 15px;
    left: -6px;
}