.callsidebar {
    position: absolute;
    bottom: 0px;
    top: 69px;
    right: 0px;
    width: 0;
    transition: width 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-left: 1px solid #f0f0f0;
}

.callsidebar .block-title {
    font-family: "Metropolis Bold";
}

.callsidebar .block-title-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.callsidebar .close {
    width: 18px;
    height: 18px;
    float: none;
    position: relative;
    opacity: 1;
}

.callsidebar .close:before,
.callsidebar .close:after {
    position: absolute;
    content: " ";
    height: 18px;
    width: 2px;
    background-color: #333;
}

.callsidebar .close:before {
    transform: rotate(45deg);
}

.callsidebar .close:after {
    transform: rotate(-45deg);
}

.callsidebar.showParticipants,
.callsidebar.showFeeds {
    width: 350px;
}
.callsidebar.showParticipants.showFeeds .participantsContainer,
.callsidebar.showParticipants.showFeeds .feedsContainer {
    height: 50%;
}

.callsidebar.showParticipants .participantsContainer,
.callsidebar.showFeeds .feedsContainer {
    display: block;
}

.callsidebar .participantsContainer,
.callsidebar .feedsContainer {
    flex-grow: 1;
    display: none;
    width: 100%;
    overflow: hidden;
}

.callsidebar.showFeeds.showParticipants .feedsContainer {
    border-top: 1px solid #f0f0f0;
}

.callsidebar .gojiwiseposts,
.callsidebar .privatemessages.mobile {
    height: calc(100vh - 120px);
}

.callsidebar.halfHeight .gojiwiseposts,
.callsidebar.halfHeight .privatemessages.mobile,
.callsidebar.halfHeight .privatemessages.mobile {
    height: calc(50vh - 86px);
}

.callsidebar .gojiwiseposts .bodyContainer,
.callsidebar .gojiwiseposts .bodyContainer .postView,
.callsidebar .gojiwiseposts .bodyContainer.comments .commentsView {
    height: 100%;
}

.dark .callsidebar,
.dark .callsidebar .participantsContainer,
.dark .callsidebar .feedsContainer,
.dark .callsidebar .block-title,
.dark .callsidebar .close {
	color: rgba(255,255,255,0.87);
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .callsidebar .close:before,
.dark .callsidebar .close:after  {
	background-color: rgba(255,255,255,0.87);
}

.dark .callsidebar.showFeeds.showParticipants .feedsContainer {
    border-color: rgba(255, 255, 255, 0.14);
}