@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

#sortBtn, #sortWebcamtBtn, #sortWatchersBtn, #sortRoleBtn {
    visibility: hidden;
    width: 0px !important;
}

/* OBS TAR BORT CHAT ROULETTE KNAPPEN */
#chatrouletteContainer {
    visibility: hidden;
    height: 0px;
    padding: 0px!important;
}
/* OBS TAR BORT CHAT ROULETTE KNAPPEN */

/*Gör admin namn röd */
div[data-role=admin] {
    color: red!important;
}

/*Gör admin namn röd */
div[data-role=guest] {
    color: white!important;
}

/* Statuslampa users */
#userList .status, #friendsList .status {
    width: 7px!important;
    height: 7px!important;
    border: none!important;
}
/* bg-profil */
#profileModal div.modal-content{
    background-color: #202020!important;
}
/* bg - report to admin */
#reportModal.light-modal .modal-content{
    background-color: #202020!important;
}

/* ikon som visar vem som tittar cam */
.eye-icon .fa-eye.isWatching {
    color: #00a300!important;
}
/* Emojiidelen */
.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category {
    color: white;
    background-color: #505050;
}
.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active {
    background: #8b8b8b;
}
.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters {
    background-color: #383838!important;
    border-bottom: 2px solid #484848!important;
}
.hamburger-header div {
    background-color: white;
}
div.news {
    border: 0 solid #1a2736;
    background-color: #2196F3;
        margin: 25px 10px 25px 10px !important;
    color: white;
}

.message .timeStamp {
    color: #549ee3;
    font-size: 0.9em;
    font-weight: 600;
}
.addPrivateMessage::after {
    background-color: #EB534F;
    color: #fff;
    font-weight: 700;
    border-top: 1px solid #111b24;
}
.whisper::after {
    background:#2196F3;
    content: "Viskning";
}
.header-custom-btns span {
    padding-right: 10px;
    font-family: 'PT Sans', sans-serif;
}
.alert-success {
    color: white;
    background-color: #EB534F;
    border-color: none;
    border-radius: 13px;
}
.menuUserItem[data-action="online"], .menuUserItem[data-action="offline"], .menuUserItem[data-action="busy"], .menuUserItem[data-action="invisible"], .menuUserItem[data-action="avatar"], .menuUserItem[data-action="parameters"], .menuUserItem[data-action="redirect"], .menuUserItem[data-action="quit"] {
    color: white !important;
}
.link-icons .fa {
    color: white;
}
#send-msg-btn {
    background: #EB534F !important;
    font-size: 1em;
    color: white !important;
    border-radius: 15px;
}

/* setting background */
#configModal .modal-content {
    background-color: #212121!important;
}
/* Dropdown meny settings */
#header .ham-dropdown-list {
    background: linear-gradient(0deg, rgba(51,51,51,1) 0%, rgba(235,83,79,1) 86%);
    /* min-width: 270px; */
    /* font-size: 1.4em; */
    border-radius: 0 0px 15px 15px;
    background-color: #EB534F;
    border: none;
    box-shadow: 0 6px 4px -3px black;
}
.menuUserItem:hover {
    background-color: #505050;
}
/* Gif-rutan */
#smileysHeader {
    background: #363636;
    color: white;
}
#searchGifInput {
    background-color: #444444;
}
#smileyContainer {
    background-color: #363636;
}

/* Andrar color-picker och palett */
div.colorPicker-picker {
    border: 2px solid #c7c7c7!important;
    border-radius: 3px;
}
div.colorPicker-palette {
    border: none;
    background-color: #303030!important;
    box-shadow: 1px 3px 12px 3px #0c1318;
}
/* Andrar flärpen för vänstermenyn */
.slide_block {
    border-radius: 0px 15px 15px 0px!important;
    border:none;
    background-color: #666666!important;
    opacity: 0.7!important;
}

#usersContainer.leftLayout #slide_block.opened {
    transform: rotate(0deg)!important;
}



@media (max-width: 850px){
#usersContainer.leftLayout #slide_block {
    transform: rotate(180deg)!important;
}
#usersContainer.leftLayout #slide_block.opened {
    transform: rotate(180deg)!important;
}

.slide_block:before {
    transform: rotate(180deg)!important;
    
}

#slide_block.opened {
    transform: rotate(180deg)!important;
    opacity: 0.7!important;
    border-radius: 0px 15px 15px 0px!important;
}
    #usersContainer.leftLayout #slide_block.opened {
    border-radius: 0px 15px 15px 0px!important;
}
}
.slide_block:before {
    transform: rotate(180deg)!important;
}


.slide_block:before {
    border-color: transparent #ffffff transparent transparent;
}
div.userItem .mention {
    color: #EB534F!IMPORTANT;
}

/* Färg Header */
#header {
    background-color: #EB534F!important;
    border-bottom: 4px solid #484848;
}

/* Bg-färg chat */
#container {
    background-color: #333333!important;
        padding-top: 5px;
}

/* Padding för ikonerna till höger */
#header .fa-list {
    padding-right: 5px;
}
#header .fa-comment {
    padding-right: 5px;
}
#header .fa-video {
    padding-right: 5px;
}
#header .fa-check {
    padding-right: 5px;
}
/* centrerar runda användarbilderna i listningen */
#userList .userAvatarContainer, #friendsList .userAvatarContainer {
    top: 0px;
}

/* Färg könfilter ta bort linje */
#usersContainer .filtergender {
    background-color: #484848!important;
    border-bottom: none!important;
}

/* Tar bort border från könsfilter och gör text ovan vit */
#userHeader .users-info
{
border-bottom: none!important;
border-top: none!important;
color: #ffffff;

}

/* Färg chatroulette bakgrund */
#chatrouletteContainer {
    background-color: #484848;
}


/* Färg tabbarna  text användare o rum */
#usersContainer li.active a .badge {
    color: #000000;
    background-color: #ffffff!important;
}

#usersContainer .nav-pills>li+li {
    background-color: #303030!important;
}

#usersContainer li a {
    color: #ffffff;
        background: #333333;
    font-size: 14px;
}

#usersContainer .nav-pills>li.active>a, #usersContainer .nav-pills>li.active>a:focus, #usersContainer .nav-pills>li.active>a:hover {
    background-color: #666666;
    color: #ffffff;
}

#usersContainer > ul > li:nth-child(2) > a {
    background-color: #303030;
    border: none!important;
}
#usersContainer > ul > li:nth-child(1) > a {
    background-color: #303030;
    border: none!important;
}

#usersContainer .nav-pills>li.active>a:hover, #usersContainer .nav-pills>li>a:hover {
    background-color: #666666;
}
#usersContainer2 button.selected {
    background-color: #EB534F;
}

#sortBtn:hover, #sortWebcamtBtn:hover, #sortWatchersBtn:hover, #sortRoleBtn:hover {
    background-color:  #EB534F;

}
/* Kön chekcbox */
.checkbox label::before {
    border: none!important;
    background-color: black!important;
    border-radius: 50px;
}

.checkbox label::after {
    color: white!important;
    border-radius: 50px;
}

/* Storlek på Kön vid chekcbox */
.gender-select-name {
    font-size: 13px;
}

/* Gör search ikonen vit */
#usersContainer2 .fa.fa-search {
    color: white!important;
}

/* Runda avatrer i chatten */
#chatContainer .userItem {
    border-radius: 10px;
}

/* Chatbubblor */
div.message div.content {
    padding: 6px 15px;
    border-radius: 20px;
    font-family: 'PT Sans', sans-serif;
}


/* Font storlekar och färg*/
#usersContainer li a {
    font-size: 14px;
}
.gender-select-name {
    font-size: 13px;
}
#header .myUsername {
    color: white !important;
    font-family: 'Bebas Neue', sans-serif;
    padding-top: 7px;
    padding-left: 4px;
    font-size: 1.6em;
}
div.message div.content {
    font-size: 1em;
}
.userLabel {
    cursor: pointer;
    font-family: 'PT Sans', sans-serif;
}
button.roomJoinBtn {
    background:  #EB534F;
   
}
#send-msg-btn span {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.8px;

}
/* rader användare och rum */

#roomsContainer2, #usersContainer2, #friendsContainer2 {
    background-color: #303030;
}
.online-user-item:nth-child(odd) {
    background-color: #4c4c4c!important;
    border-left: none;
}

.userItem:hover, #myUserMenu, #userMenu {
    background-color: #767676!important;
}

/*Byter färg på scrollern i listan */
#userList::-webkit-scrollbar-thumb {
    background-color: #787878;
}

/* Border remover avatar and padding */
#userList .userItem img.avatarUser {
    border: none!important;
    margin-left: 3px;
}

/* Border removers */
#usersContainer ul li {
    background-color: #666666;
}
#usersContainer .nav-pills > li + li {
    background-color: #666666!important;
}
.search-bar {
    border-top: none;
}

#usersContainer2, #roomsContainer2 {
    border-left: none!important;
}
#header .status {
    border: none!important;
}

/* Byter färg på baren med chattrum-tabbar */
#tabs .nav-tabs {
    background-color: #484848!important;
    padding-left: none!important;
    border-top: none!important;
} 
#tabs .nav-tabs>li {
    padding-left: 5px;
    padding-right: 5px;    
    background-color: #474747!important;
    border: none;
}

#tabs .nav-tabs>li.active a {
        background: linear-gradient(0deg, rgba(51, 51, 51, 1) 21%, rgba(227, 87, 84, 1) 80%);
    font-weight: bold;
    color: #ffffff!important;
    border: none;
    font-family: 'PT Sans', sans-serif;
}

#tabs .nav-tabs>li.active{
    background-color: #484848!important;
}
/* sändknapp */

#send-msg-btn:hover {
    border: none;
    background-color: #ff2b60!important;
}
/* Byter färg på whisper etc */
div.addPrivateMessage  {
    background-color: #393939!important;
}
.whisper {
    background-color: #424242!important;
    margin-top: 10px;
}


/* Inloggningsrutan */

#usernameGuestLogin {
    padding: 5px 0px 5px 8px;
    color: white;
}

.dark-modal .form-group input {
    background-color: #00000080 !important;
    border-bottom: none!important;
    border-radius: 5px;
}

#loginGuestModal.light-modal .modal-content {
    background-color: #4c4c4c !important;
}

/*byter farg på Inlogg ruta (users)*/

#loginModal.light-modal .modal-content {
    background-color: #4c4c4c!important;
}

.dark-modal .modal-title {
    color: #ffffff;
    font-size: 22px;
}
/* Inloggningsrutan - radiobuttons*/

#loginGuestModal .radio label::before {
    border: none;
    /* background-color: transparent; */
    border-radius: 10px;
    background: black;
}
.radio-primary input[type=radio]:checked+label::after {
    background-color: #a5a5a5;
    border-radius: 10px;
}
#loginGuestModal .modal-footer {
    padding: 0px 0px 24px 0px;
    text-align: center;
}
#loginGuestBtn {
    font-size: 1.3em;
}
/* Ändringar för chattrutan */
.emojionearea, .emojionearea.form-control {
    background-color: #303030;
}

/* Fix rumtabellen */
.table>thead:first-child>tr:first-child>th {
    background-color: #4C4C4C;
}    
    .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #333333;
}
.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #4c4c4c;
}

.webcamRequest, .privateRequest, .privateClosed {
    background-color: #404040;
    border-radius: 30px;
    width: 80%;
    margin: auto;
    margin-top: 10px;
}
.webcamRequested, .privateRequested {
    background-color: #EB534F;
    color: white;
    border-radius: 30px;
    width: 80%;
    margin: auto;
    margin-top: 10px;
}
/* Padding webcam knapp */
.webcamBtn {
padding-bottom: 9px;
border-color: #03ff00;
}

.fa-lock:before {
    color: red;
}
.fa-unlock:before {
    color: #03ff00;
}
.eye-icon .fa-eye, .fa-eye-slash, .webcamBtn .fa {
    opacity: 0.8;
}
#webradioPlayerContainer {
    visibility: hidden;
    height:0px;
}
#onlineCounterContainer {
    padding: 10px;
    font-size: 1.2em;
}

.jsPanel-theme-default > .jsPanel-hdr * {
    background-color: #EB534F;
    border-radius: 10px 10px 0px 0px;
    color: white !important;
    border: none !important;
        font-size: 1em;
}
ul.nav.nav-pills {
    min-height: 75px;
}
#searchInput::placeholder {
    color: white !important;
}
#header .myUsername {
    color: white !important;
}
button#roomsBtn {
    color: white !important;
}
span.buttons-subnames.flex-property {
    color: white !important;
}
/*Varningruta inlogg */
.bootbox .modal-content {
    background-color: #444444 !important;
}
.bootbox .modal-footer {
    border-top: none;
}
#roomsModal div.modal-content{
    background-color: #303030;
}
/*byter farg på användarnamn i chattwindow*/
.userLink {
    color: #9f9f9f!important;
}
/*Gör loginknappar röda (users)*/
.modal-footer .btn-primary{
    background-color: #EB534F!important;
    /* border-color: #3389d3; */
    box-shadow: 1px 1px 15px 1px #00000030;
    border: none!important;
    }
   /*Font size button (users)*/ 
    #loginModal .modal-footer .btn {
    font-size: 1.1em;
}
.modal-footer .btn-default {
    background-color: #262626!important;}
    
/*Admin red border*/
div[data-role=admin] {
    color: #EB534F!important;
    border: 1px solid #EB534F;
}
/*sort by roll button fix*/
.fa-user:before {
    content: "\f007";
    color: white;
}

 #sortRoleBtn{
     border: none;
    background-color: black;}
    
 /*nr of cam Viewers bubble*/   
    .numberWatchers {
        font-size: 1em;
        border-radius: 40%;
    }
   /*fix open webcam*/     
#myWebcamContainer {
    background: #484848;
}

.dark-blue-btn {
    background-color: #710000;
        color: #ffffff!important;

}
    .dark-blue-btn.active {
    background-color: #35a162;
    color: #ffffff!important;
}

.verified {
    padding-right: 10px;
}
   /*green chat lock*/ 
i.fa.fa-unlock-alt {
    color: #3fce3f;
}

div.bootbox-body img {
    max-width: 10% !important;
    max-height: 10% !important;
    visibility: hidden !important;
}
.bootbox .bootbox-body a {
    color: white !important;
    font-size: 2em !important;
}

.speech-bubble {
    background-color: #EB534F !important;
    font-size: 0.9em;
}

.speech-bubble:after {
    background-color: #EB534F !important;
}

.userMessagesHistory {
    color: white;
    font-size: 1.1em;
}