/************ Background Image ***********/

.flex-horizontal.flex-spacer {
    background-color: rgba(25, 25, 25, 0.75);
}
.app {
    background-image: url(https://i.imgur.com/CXuLJuM.jpg);
    background-size: cover;
    background-position: right;
}

/************ Members List ***********/

.channel-members {
    /*idk why i need this extra one here to make it work */
}
.channel-members {
    background: rgba(255, 255, 255, 0.05)!important;
}
/* Role Headers */

.scroller-wrap .channel-members h2 {
    color: #E38BB2;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    background: rgba(0, 0, 0, .2);
    border: 1px solid transparent;
    border-radius: 3px;
    text-align: center;
    padding: 4px 0;
    width: 125px;
    margin-left: 50px;
}
/* Member List Avatar */

.avatar-small {
    border-radius: 5px;
}
/* User Colors */
/*.channel-members .member-username {
    color:#A6CBF0!important;
}*/
/* "Playing" Text */

.channel-members .member .member-activity {
    color: transparent;
    margin-left: -35px;
}
/* Game Text */

.channel-members .member-activity strong {
    color: #fff;
}
/* Hovering Over Member List Uesrnames */

.scroller.channel-members .member.popout-open,
.scroller.channel-members .member:hover {
    background: rgba(255, 255, 255, 0.07);
}
/* User Popout when you click on User */

.user-popout .header {
    background-image: none;
    background: #CF669C;
    font: #F1C7CF;
}
.user-popout .avatar-wrapper .avatar-popout {
    border: 4px solid #fff;
}
.avatar-popout {
    border-radius: 15px;
}
.user-popout .avatar-wrapper .avatar-hint {
    border-radius: 15px;
}
/* User Profile Header Color */

#user-profile-modal .header {
    background-image: none;
    background: #cf669c;
}
#user-profile-modal .sub-header {
    background: #cf669c;
}
#user-profile-modal .avatar-profile .status {
    bottom: -10px;
    right: -10px;
}
.avatar-profile {
    border-radius: 15px;
}
/* User Profile Message Button */

#user-profile-modal .btn {
    background: #EC9ECB;
}
#user-profile-modal .btn:hover {
    background-color: #F4CAE2;
}
/* User Profile Add Friend Button */

#user-profile-modal footer .btn.add-friend {
    background: #697ec4;
}
#user-profile-modal footer .btn.add-friend:hover {
    background: #a6cbf0;
}
/************ Chat Area *************/
/* Date and New Messages Divider */

.chat .divider > span {
    background: #5A98CD!important;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    border-radius: 5px;
    padding: 5px 15px;
    width: 100%;
    text-align: center;
    opacity: 1!important;
}
.chat .divider.divider-red>span {
    color: #fff!important;
}
/* Chat Avatar */

.avatar-large {
    border-radius: 5px;
}
/* Chat Username */
/*hat .user-name {
    color:#5A98CD!important;
}*/
/* Background of Chat Area */

.content,
.messages-wrapper,
.chat.flex-vertical.flex-spacer {
    background: transparent!important;
}
/* Message Background */
/*.message-group .comment {
    background:rgba(255,255,255,.05);
    border-radius:7px;
    border:5px solid transparent;
}*/
/* Message Text */

.message-group .comment .message .body .message-text .markup {
    color: #D2E4EE;
}
.highlight {
    color: #EF17F1;
}
/* Message Timestamps */

.message-group h2 .timestamp {
    color: #fff!important;
    text-transform: lowercase;
    font-size: 10px;
    font-style: italic;
}
/* Border in between Messages */

.message-group {
    border-bottom: none;
}
/* Chat Box */

.channel-textarea > div.channel-textarea-inner {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 7px;
    border: 2px solid transparent;
}
.typing {
    background: transparent!important;
}
/* Upload Button */

.channel-textarea-inner > div.channel-textarea-upload {
    background-size: 15px 20px;
    border-right: none;
    width: 40px;
    margin: -5px 10px -5px -5px;
}
.channel-textarea-inner > div.channel-textarea-upload:hover {
    background-size: 15px 20px;
    border: 5px solid transparent;
    margin: -10px 5px -10px -10px;
    border-radius: 10px;
}
/* Upload Popup */

.modal > .modal-inner > .upload-modal {
    background: #C7799C;
}
.modal > .modal-inner > .upload-modal > .footer {
    background: #00B0F4;
}
/* Chat Scroll Bar */

.scroller-wrap .scroller::-webkit-scrollbar-thumb {
    border: 3px solid rgba(0, 0, 0, 0.2)!important;
    background: rgba(255, 255, 255, 0.1)!important;
}
.scroller-wrap .scroller::-webkit-scrollbar-track-piece {
    border: solid transparent !important;
    background-color: transparent !important;
}
/* Spoiler Tags */

.spoiler:hover {
    color: #fff!important;
}
/********* Channel List and Title Bar*********/
/* Server Title */

.guild-header > header {
    box-shadow: none;
    color: #e38bb2;
    padding: 0px 10px;
    font-size: 25px;
    background: rgba(0, 0, 0, .3);
}
.btn.btn-hamburger span {
    background: #A6CBF0;
}
.guild-header ul {
    opacity: 0;
}
.guild-header-open ul {
    opacity: 1;
}
/* New Messages Indicator next to Channel */

.guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
    background-color: #5A98CD;
}
/* Channel Titlebar */

.chat.flex-vertical.flex-spacer > .title-wrap {
    border: none;
    background: rgba(0, 0, 0, .3);
    box-shadow: none;
}
/* Channel Topic/Description */

.chat.flex-vertical.flex-spacer > .title-wrap > .topic.topic-expandable {
    font-size: 12px;
    margin-top: 5px;
    color: #656565;
}
/* Text/Voice Channel Header */

.guild-channels header {
    opacity: 1;
    color: #8bdae3;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    border-color: transparent;
    border-radius: 3px;
    text-align: center;
    padding: 0;
    width: 365px;
    margin-right: 2px;
    margin-bottom: 13px;
    /* margin-left: 60px; */
}
/* Channel List Area */

.guild-channels {
    padding: 7px 0;
    background: rgba(255, 255, 255, 0.05);
}
.channels-wrap {
    background: transparent;
}
/* Channel Selected */

.guild-channels .channel-text.selected {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 5px 5px 0;
}
/* Channel Hover */

.guild-channels .channel-text:hover {
    background: rgba(255, 255, 255, .07);
}
/* Active Voice Chat Usernames */

.guild-channels .channel-voice.audio li {
    color: #a8cbf2;
}
/* Account Area */

.flex-vertical.channels-wrap > .account {
    padding: 0 15px;
    background: rgba(255, 255, 255, .05);
    border: solid transparent;
    height: 50px;
    color: #a6cbf0;
}
/* Buttons */

.flex-vertical.channels-wrap > .account > .btn-group {
    border: solid transparent;
}
/* Mute Button */

.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-mute {
    background: #e38bb2;
    border: solid transparent;
    border-radius: 15px;
    box-shadow: none;
}
.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-mute:active {
    background: #5A98CD;
}
/* Deafen Button */

.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-deafen {
    background: #e38bb2;
    border: solid transparent;
    border-radius: 15px;
    box-shadow: none;
}
.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-deafen:active {
    background: #5A98CD;
}
/* Settings Button */

.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-settings {
    background: #e38bb2;
    border: solid transparent;
    border-radius: 15px;
    box-shadow: none;
}
.flex-vertical.channels-wrap > .account > .btn-group > button.btn.btn-settings:active {
    background: #5A98CD;
}
.account .btn-settings:after {
    opacity: 1;
}
/* Voice Connection Area */

#voice-connection {
    border: none;
    background: rgba(255, 255, 255, .05);
}
/* Voice Connected Text */

#voice-connection .voice-connection-status-connected {
    color: #e38bb2;
}
/* Voice Buttons */

#voice-connection .btn-group {
    border: solid transparent;
}
#voice-connection .btn {
    border-radius: 15px;
    box-shadow: none;
}
#voice-connection .btn:after {
    opacity: 1;
}
/* Connection Info Button */

#voice-connection .btn-info {
    background: #e38bb2;
    border-right: none;
}
#voice-connection .btn-info:active {
    background: #5A98CD;
}
/* Disconnect Button */

#voice-connection .btn-disconnect {
    background: #e38bb2;
    border-right: none;
}
#voice-connection .btn-disconnect:active {
    background: #5A98CD;
}
/* Mute/Deafen Icon Indicators */

.guild-channels .icon {
    background-color: #5a98cd;
    background-size: 16px 15px;
    background-position: center;
    border-radius: 3px;
}
/* Links under Account */

.links {
    font-size: 9px;
    border: none;
    background: rgba(255, 255, 255, .05);
}
.links li a {
    color: #A6CBF0;
}
.links li a:hover {
    color: #e38bb2;
}
/********** Server List **************/

.guilds-wrapper {
    background: rgba(0, 0, 0, .3);
    width: 70px;
}
.guilds-wrapper .guilds {
    padding: 10px 15px;
}
/* Add Server Button */

.guilds-wrapper .guilds-add {
    font-size: 30px;
    color: #A6CBF0;
    background: #e38bb2;
    border: 3px solid #A6CBF0;
}
.guilds-wrapper .guilds-add:hover {
    font-size: 30px;
    color: #e38bb2;
    background: #A6CBF0;
    border: 5px solid #e38bb2;
}
/* Friends and Public Server Buttons */

.guilds-wrapper > .guilds > .guild > .guild-inner {
    background: #e38bb2!important;
    text-transform: uppercase;
    font-weight: 600;
}
.guilds-wrapper > .guilds > .guild > .guild-inner:hover {
    background: #A6CBF0!important;
}
/* Friends Online */

.guilds-wrapper .guilds .friends-online {
    background: #e38bb2;
    color: #fff;
    line-height: 20px;
    border-radius: 4px;
}
/* New Message Indicators */

.guilds-wrapper .guilds .guild.selected:before {
    background: #e38bb2;
}
.guilds-wrapper .guilds .guild.unread:before {
    background: #A6CBF0;
}
/******** Friends List *********/
/* Buttons */

.friends-header {
    background: rgba(0, 0, 0, .3)!important;
    border: none!important;
}
#friends .btn,
.add-friend-popout .btn,
.private-channels .channel.selected .icon-friends,
#friends .friends-header .tab-bar .tab-bar-item.selected {
    background-color: #CA418A!important;
}
#friends .friends-header .tab-bar .tab-bar-item.selected {
    color: #fff!important;
}
/* Search Bar */

.search-bar {
    background: rgba(0, 0, 0, .35)!important;
}
.search-bar input {
    border-radius: 10px!important;
    background: rgba(255, 255, 255, .2);
}
/* Direct Messages List */

.private-channels {
    background: rgba(255, 255, 255, .05);
}
/* Friends */

#friends,
.friends-table {
    background: transparent!important;
}

.channel.btn-friends.selected, .channel.private:hover {
    background:rgba(255,255,255,.07);
}

.friends-row {
    border: none!important;
}
.friends-row:hover {
    background: rgba(255, 255, 255, .1)!important;
}
.username {
    color: #a6cbf0;
}
.status-text {
    color: #fff!important;
}
.private-channels .channel:hover .channel-activity,
.private-channels .channel:hover a {
    color: #a6cbf0;
}

/***** Pins & Mentions Popout *******/

.messages-popout-wrap.recent-mentions-popout,
.messages-popout-wrap.themed-popout.undefined {
    background:rgba(90, 152, 205,.8);
}
.messages-popout-wrap.recent-mentions-popout .header,
.messages-popout-wrap.themed-popout.undefined .header {
    background:#E38BB2;
}

.messages-popout-wrap.recent-mentions-popout .message-group.hide-overflow,
.messages-popout-wrap.themed-popout.undefined .message-group.hide-overflow {

    background:#E38BB2;
    border-color:#fff;
}

.messages-popout-wrap.recent-mentions-popout .message-group.hide-overflow:hover,
.messages-popout-wrap.themed-popout.undefined .message-group.hide-overflow:hover {

    border-color:#C220CC;
}

.messages-popout .message-group:hover .action-buttons {
	box-shadow:none;
	background:transparent;
}

.messages-popout-wrap .messages-popout .message-group:hover .action-buttons .jump-button {
	background:#5A98CD;
}
.messages-popout-wrap .messages-popout .message-group:hover .action-buttons .jump-button:hover {
	background:#C220CC;
}

.messages-popout-wrap .messages-popout .message-group:hover .action-buttons .jump-button .text {
	color:#fff;
}


/******** Settings **********/

.settings .settings-header {
    background: url(https://i.imgur.com/KIMuDXP.jpg) !important;
    background-size: cover!important;
    background-color: rgba(25, 25, 25, 0.75)!important;
    background-position: center!important;
}
.tab-bar.SIDE {
    background: rgba(25, 25, 25, 0.75)!important;
}
.message-group .comment .message .body .message-text .markup {
    color: #ffffff;
}
.message-group {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.theme-dark .message-group:not(.has-divider) {
    border-bottom-color: hsla(194, 71%, 72%, 0.15);
}
.chat .avatar-large {
    cursor: pointer;
    opacity: 1;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    border: 1px solid #43d7ef;
    -ms-filter: none;
    filter: none;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}