:root {
    --main-bg-color: #5b2155;
    --main-bg-color2: rgba(91, 33, 91, 0.3);
    --main-btn-color: #82057e;

}
#header {
    border-bottom: 0px solid #ebebeb !important;
    background-color: var(--main-bg-color) !important;
    color:white;
}
.punchtop, .punchfooter { background-color: var(--main-bg-color) !important; }
#roomsBtn {
    background-color: var(--main-bg-color) !important;
}
.hamburger-header {
    background-color: transparent;
}
.hamburger-header div {
    background-color: white;
}
#send-msg-btn, #loginGuestBtn {
    border-radius: 150px !important;
    background-color: var(--main-btn-color);
    color: white;
    border: none;
}

#header button img, #header div.header-btn-wrap.flex-property img{
    filter: invert(100%);
}

#chatContainer {
    background-color: var(--main-bg-color2);
}
#footer {
    background-color: transparent !important;
}

#tabs .tab-pane {
    background-color: white;
}

#usersContainer .nav-pills>li.active>a, #usersContainer .nav-pills>li.active>a:focus {
    background-color: var(--main-bg-color);
    color: white !important;
    padding: 10px 0;
}
td button.btn-success {
    background: var(--main-bg-color) !important;
    border: none !important;
}
.emojionearea .emojionearea-button>div, .emojionearea .emojionearea-picker .emojionearea-wrapper:after {
    background-image: url(../img/happy.svg) !important;
}

#tabs .nav-tabs>li.active a {
    background-color: var(--main-bg-color) !important;
    color: #FFF !important;
    border: 1px solid #ededed !important;
    border-bottom: 0px !important;
}

#userMenu {
    background-color: white !important;
}
#myUserMenu, #userMenu {
    background-color: #f4f4f4 !important;
    border: 1px solid #e9e9e9;
    box-shadow: 2px 2px 6px -2px #00000063;
}
.menuUserItem {
    color: var(--main-bg-color) !important;
}

#tabs .tab-pane {
    height: 100% !important;
    bottom: 0px !important;
    padding: 10px !important;
    background-color: white;
}

#webcamsContainer.ui-sortable + #tabs div.tab-content {
    height: calc(100% - 45px) !important;
}


.btn-group>.btn.active:first-child:not(:last-child):not(.dropdown-toggle), .btn-group>.btn.active:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    background-color: var(--main-bg-color);
    color: white;
    border: 0px;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle), .btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
    border: 1px solid #d2d2d2;
    background: white;
    color: var(--main-bg-color);
}

@media only screen and (max-width: 480px) {
    #webcamsContainer.ui-sortable.haswebcams + #tabs {
        height: calc(100% - 310px) !important;
    }
}