.fadeout{
    opacity:0;
    transform: translateX(40px) ;
    transition-property: opacity,transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.QueueOverview-AnimOverlay{
    height:100vh;
    width:100vw;
    left:-100vw;
    background-image: linear-gradient(to right,#8E80ECCC,#5F8CBACC);
}

.QueueOverview-Container{
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content: space-between;
    align-items: stretch;
    border-radius:5px;
    box-shadow: 0px 0px 5px -3px #666666;
    margin: 5px 0px 0px 0px;
    background-color:#3C485C;
    color: #f0f0f0;
}

.QueueOverview-left {
    display:flex;
    flex: 1;
    align-items:center;
    justify-content: flex-start;
    margin:0;
    text-transform: capitalize;
}

.QueueOverview-right {
    display:flex;
    flex: 3;
    margin:0;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.QueueOverview-open-button{
    display:flex;
    align-self:stretch;
    align-items: center;
    justify-content: center;
    width:42px;
    padding:20px 0%;
    /* background-color:#2f1163; */
    color: white;
    margin: 0 12px 0 0;
    font-size: 135%;
    border-radius:5%;
    cursor: pointer;
    /* background-color: #7974C8 */
    background-image: linear-gradient(to right,#8E80ECCC,#5F8CBACC);
}

.QueueOverview-btn-icon{
    width: 50%;
    height: 50%
}

.QueueOverview-stat {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    height: 40px;
}

.QueueOverview-chart {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 30%;
}

