.clnm-queue-video-chat {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: solid 2px black;
}

.clnm-queue-video-chat-videos {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: black;
}

.clnm-queue-video-chat-subscriber {
    height: 100%;
    width: 100%;
}

.clnm-queue-video-chat-publisher {
    position: absolute;
    height: 20%;
    width: 20%;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.clnm-queue-video-chat-controls {
    height: 18%;
    width: 100%;
    background-color: #eae6e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clnm-queue-video-chat-controls-hang-up {
    background-color: red;
    color: white;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2em;
    transform: rotate(225deg);
}

.clnm-queue-video-chat-videos-controls-shown {
    animation: clnm-queue-video-chat-show-controls 500ms;
    animation-fill-mode: forwards;
}

.clnm-queue-video-chat-videos-controls-hidden {
    animation: clnm-queue-video-chat-hide-controls 500ms;
    animation-fill-mode: forwards;
}

@keyframes clnm-queue-video-chat-hide-controls {
    from {
        height: 82%;
    }

    to {
        height: 100%;
    }
}

@keyframes clnm-queue-video-chat-show-controls {
    from {
        height: 100%;
    }

    to {
        height: 82%;
    }
}