/*Background*/

.app {
    background-image: url("https://i.imgur.com/r1Ql5oT.jpg");
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: cover;
}

.connecting {
    background-image: url("https://i.imgur.com/r1Ql5oT.jpg");
    background-blend-mode: soft-light;
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: cover;
}

.connecting video.ready {
    display: none;
}


/*Transparency*/

#voice-connection,
#friends,
#friends .btn,
.friends-header,
.friends-table,
.channels-wrap,
.guild-channels,
.links,
.chat,
.messages-wrapper,
.content,
.chat-empty,
.message-group-blocked,
.private-channels,
.guild-header header,
.chat,
.chat form,
.theme-dark .channel-members {
    background: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark #friends .friends-table .friends-row .friends-column-actions .friends-action {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .channel-members .member.popout-open,
.theme-dark .channel-members .member:hover {
    background: linear-gradient(to right, rgba(256, 256, 256, 0.05) 45%, transparent);
}

.connecting video.ready {
    display: none;
}

.guilds-wrapper,
.theme-dark .chat .has-more button {
    background: rgba(0, 0, 0, 0.8) !important;
}

.guild-header header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(0, 0, 0, .1)
}

.search-bar {
    background: rgba(0, 0, 0, 0.1) !important;
}

#friends .friends-table {
    margin-top: 0px !important;
    background: rgba(0, 0, 0, 0.745) !important;
}

.theme-dark #friends .friends-table .friends-row:hover {
    background: rgba(100, 100, 100, 0.3) !important;
}

#voice-connection {
    background: rgba(0, 0, 0, 0.7) !important;
    border-top: 0px;
}

.account {
    background: rgba(0, 0, 0, 0.7) !important;
    border-top: 0px;
}

.guild-channels .channel.selected {
    background-color: transparent !important;
}

.private-channels .channel.selected,
.private-channels .channel:hover,
.private-channels .search-result.selected,
.private-channels .search-result:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.guild-channels .channel:hover {
    background-color: transparent !important;
}

.guild-channels .channel-text:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.guild-channels .channel-text.selected,
.private-channels .channel-text.selected {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 15%, transparent);
}

.account .btn,
#voice-connection .btn {
    background-color: rgba(0, 0, 0, 0.8);
}

.account .btn-group,
#voice-connection .btn-group {
    border: none !important;
}

.account .btn-mute,
.account .btn-deafen,
.account .btn-settings,
#voice-connection .btn-info,
#voice-connection .btn-disconnect {
    border: none;
    box-shadow: none;
    transition: background-color 0.2s;
}

.title-wrap,
.theme-dark .invite-button,
.theme-dark #friends .friends-header {
    background: rgba(0, 0, 0, 0.745) !important;
    border-color: transparent;
}

.guilds-wrapper .guilds-add {
  background: rgba(0, 0, 0, 0.745) !important;
}

.theme-dark .message-group .embed {
    border-color: transparent;
}


/*Redefault the emoji search*/

.emoji-picker .header .search-bar {
    background: inherit !important;
}


/*Scrollbar*/

.theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-thumb,
.theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-thumb {
    background-color: #000!important;
    border-color: #111!important;
}

.theme-dark .friends-table .scroller-wrap ::-webkit-scrollbar-track-piece,
.theme-dark .messages-wrapper .scroller-wrap ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}


/* Codeblocks*/

.code,
.theme-dark .message-group .comment .markup pre,
.theme-dark .message-group .comment .markup code.inline,
.theme-dark .message-group .comment .markup pre code {
    background: rgba(0, 0, 0, 0.5) !important;
}

.guilds-wrapper .guilds .guild .guild-inner,
.guilds-wrapper .guild-separator:after {
    background: rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .chat .title-wrap {
    border-bottom: 0px;
}

.theme-dark .friends-table .messages .divider.divider-red>span,
.theme-dark .messages-wrapper .messages .divider.divider-red>span,
.chat .divider>span {
    background: #000!important;
}

.chat form {
    margin: 0px;
}

.channel-textarea {
    margin: 20px 20px 30px;
}

.theme-dark .chat .content form .channel-textarea-inner {
  border-color: transparent;
}

.theme-dark .message-group.is-local-bot-message {
  background-image: none !important;
  box-shadow: -20px 0 rgba(0,0,0,0.8), 20px 0 rgba(0,0,0,0.8),-20px -1px 0 0 rgba(0,0,0,0.8),-20px 1px 0 rgba(0,0,0,0.8),20px 1px 0 rgba(0,0,0,0.8),20px -1px 0 rgba(0,0,0,0.8);
  background-color: rgba(0,0,0,0.8) !important;
}

.theme-dark .chat form {
    border-top: 0px;
}

.typing {
    background-color: transparent !important;
    margin: 0 20px;
}






/*
	Authored by kanadeko.
	This css will hide the servers leaving a 20px gap where notifications
	and badges appear. Just hover on the server list for some magic.
  	And a few more things. Probably.
*/

/* ============================
	GUILD LIST
============================ */

.platform-osx .guilds-wrapper {
	padding-top: 10px;
}

.osx-buttons {
	display: none;
}

.guilds-wrapper {
	-webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    -ms-transition: 200ms;
    transition: 200ms;
	width: 20px;
}

.guilds-wrapper:hover {
	-webkit-transition: 200ms;
    -moz-transition: 200ms;
    -o-transition: 200ms;
    -ms-transition: 200ms;
    transition: 200ms;
	width: 80px;
}

.guilds-wrapper .guild-separator:after {
	left: 30%;
}

.guilds-wrapper .guilds .friends-online, .guilds-wrapper .guilds .friends-icon {
	display: none;
}

.guilds-wrapper .guilds > .guild:first-child {
	height: 25px;
}

.guilds-wrapper .guilds > .guild:first-child:after {
	content: "DM's";
	font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,.3);
    margin-top: 5px;
    word-wrap: normal;
    white-space: normal;
    width: 100%;
    line-height: 130%;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
}

.guilds-wrapper .guilds > .guild:first-child .guild-inner {
	height: 20px !important;
	background-color: transparent !important;
}

.guilds-wrapper .guilds > .guild:first-child .guild-inner a {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999999;
	height: 20px;
}

.guilds-wrapper .guilds .guild {
    width: 55px;
}

.guilds-wrapper .guilds .guild.selected:before {
	height: 20px !important;
   	margin: 0px;
    	top: 16px !important;
    	background: white;
    	left: -7px;
    	width: 5px;
}

.guilds-wrapper .guilds .guild.selected.unread:before {
  height: 20px !important;
  top: 16px !important;
}

.guilds-wrapper .guilds .guild.selected .guild-inner {
	-webkit-border-radius: 25px !important;
    border-radius: 25px !important;
    /*border: 1px solid #333 !important;*/
}

.guilds-wrapper .guilds .guild > div:first-child {
	margin-left: 5px;
}

.guilds-wrapper .guilds button.guild {
	width: 50px !important;
	margin-left: 5px !important;
}

.guilds-wrapper .guilds .guild .badge {
	left: -13px;
	width: 5px;
	background: none;
	color: #f04747;
  	font-weight: 900;
 	font-style: italic;
    	border: 0px;
    	box-shadow: none;
}

.guilds-wrapper .guilds span.dms .guild {
	height: 50px;
}

.guilds-wrapper .guilds .guild.unread:before {
	margin: 0px;
    	background: white;
    	left: -7px;
    	height: 5px;
    	width: 5px;
    	top: 21px;
}

.new-messages-indicator.new-messages-indicator-mention {
	color: #f04747;
    	overflow: hidden;
    	width: 25px;
    	height: 10px;
    	border-radius: 25px;
    	left: -1px;
    	top: 5px;

    	-webkit-transition: 200ms;
    	-moz-transition: 200ms;
    	-o-transition: 200ms;
    	-ms-transition: 200ms;
    	transition: 200ms;
}

.new-messages-indicator.new-messages-indicator-mention.bottom {
	bottom: 5px;
	top: initial;
}

.guilds-wrapper:hover .new-messages-indicator.new-messages-indicator-mention {
	top: 0;
    bottom: initial;
    width: 90%;
    left: 5%;
    color: #fff;
    height: 20px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.guilds-wrapper:hover .new-messages-indicator.new-messages-indicator-mention.bottom {
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    top: initial;
    bottom: 0;
}


/* ============================
	CHANNEL LIST
============================ */

.guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
    height: 9px !important;
    margin: 0px;
    width: 5px;
    top: 13px !important;
    background: white;
    left: 7px;
}

.guild-header header {
	height: 45px;
    padding: 10px;
    padding-left: 20px;
    -webkit-box-shadow: 0 1px 0 #2d3135,inset 0 -1px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 0 #2d3135,inset 0 -1px 0 rgba(0,0,0,.1);
}

#voice-connection {
	padding-top: 5px;
    padding-bottom: 5px;
}

.account {
	height: 45px;
}

/* ============================
	CHAT
============================ */

.chat>.title-wrap {
	min-height: 45px;
}

.message-group {
	padding: 15px 0px;
}