//META{"name":"Okita","description":"Okita-san dai shōri","author":"Omniscient","version":"2.00"}*//
/* IMPORT CSS FROM GITHUB */
@import url("https://rawgit.com/0mniscient/Discord-Themes/master/css/Discord%20Reborn%206.css");
/*
---------------------------------------------------------------------------------------------------------------------------------------------
IMPORTANT: CHANGE DISCORDS THEME TO DARK THEME IN APPEARANCE SETTINGS FOR THIS THEME TO WORK!
---------------------------------------------------------------------------------------------------------------------------------------------
*/
/*
---------------------------------------------------------------------------------------------------------------------------------------------
===== CUSTOMIZABLE COLORS =====
*/
:root { 
 --main-color: #d96a70;
 --hover-color: #d96a70;
 }
/*
--------------------------------------------------------------------------------------------------------------------------------------------
*/
 /*
---------------------------------------------------------------------------------------------------------------------------------------------
===== CUSTOMIZABLE IMAGES =====
IMPORTANT: EVERY URL MUST BE HTTPS:// IN ORDER TO WORK IN DISCORD
RECOMMENDATIONS: EVERY URL AT THE BOTTOM SHOULD BE THE SAME TO MAKE THE THEME MATCH. (YOUR CHOICE)
--------------------------------------------------------------------------------------------------------------------------------------------
*/
/*Change the url in .app to change the background behind chat */

.app { background-image: url("https://i.imgur.com/30LVrv0.jpg") !important; background-size: cover !important; }

/*Change the url in .callout-backdrop to change the background when modal pop outs happen */

.callout-backdrop { background-color: black !important; background-image: url("https://i.imgur.com/30LVrv0.jpg") !important; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; -moz-transition: 0.3s all ease; transition: 0.3s all ease; background-size: cover !important; -webkit-filter: brightness(75%); }

/*Change the urls below to change the background of a profile modal pop up */

.user-popout:before {
    background-image: url("https://i.imgur.com/ZupQusp.jpg") !important;
    content: "";position: absolute;left:0;top: 0;height: 100%;width: 100%;z-index: -1;background-position: 50% 50%;}
	/* paste "-webkit-filter: blur(3px);-webkit-transform: scale(1.05);transform: scale(1.05);" to enable blur*/

#user-profile-modal .header:before {
    /*background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://i.imgur.com/ZupQusp.jpg") !important;*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.5)), url("https://i.imgur.com/ZupQusp.jpg") !important;
    content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: -1;background-position: 50% 50%;background-size: cover !important;}
		/*-webkit-filter: blur(3px);-webkit-transform: scale(1.1);transform: scale(1.1);*/

 /*
---------------------------------------------------------------------------------------------------------------------------------------------
===== CREDITS =====
URI
BEARDDESIGN
ZERTHOX
THESE PEOPLE HAVE HELPED CREATE THIS THEME IN ONE WAY OR THE OTHER.
--------------------------------------------------------------------------------------------------------------------------------------------
*/ 	
/*
---------------------------------------------------------------------------------------------------------------------------------------------
TROUBLESHOOTING: IF YOU NEED ANY HELP GO TO HTTPS://BETTERDOCS.NET
---------------------------------------------------------------------------------------------------------------------------------------------
*/
/* hyak edits */
.scroller-wrap .scroller::-webkit-scrollbar-track-piece {
    background-color: rgba(60, 0, 0, 0.3) !important; }

.avatar-large { 
	width: 40px; height: 40px; background-size: 40px 40px !important; left: 8px; }

.guild-channels .channel-text .channel-name:before { 
	color: #d96a70 !important }

#friends .friends-table .friends-row .avatar-small {
	border-radius: 100px; }

.friends-action{ 
	border-radius: 100% !important;}

span.discriminator {
margin-left: 0px !important; }

.layers { background: transparent !important; }

/*Images and backgrounds*/
.theme-dark .chat .private-channel-call { 
	background-repeat: no-repeat; background-image: url(https://i.imgur.com/LbQck0N.png); -webkit-background-size: 1630px 243px; }

.theme-dark #friends .friends-empty.section-blocked .empty-state-image {
    background-image: url(https://i.imgur.com/BV2xtFU.png); }
	
.theme-dark #friends .friends-empty.section-pending .empty-state-image {
    background-image: url(https://i.imgur.com/BV2xtFU.png); }

#pubs-container { 
	background-image: url("https://i.imgur.com/uudawFD.jpg") !important; transition: 0.3s all ease; background-size: cover !important; }

.status-online {
   background-image: url("https://new.ppy.sh/images/backgrounds/button.svg") !important; }

.status-idle {
	background-image: url("https://new.ppy.sh/images/backgrounds/button.svg") !important; }

.status-dnd {
background-image: url("https://new.ppy.sh/images/backgrounds/button.svg") !important; }

.status-offline {
	background-image: url("https://new.ppy.sh/images/backgrounds/button.svg") !important; 
	background-color: grey !important; }

#friends .friends-table .friends-row {
	background-image: url("https://new.ppy.sh/images/backgrounds/button.svg") !important; 
	background-color: rgba(0,0,0,.3) !important; }

/*Transparency*/
.title-wrap {
    background: rgba(0,0,0,0.7) !important; }
	
.guilds {
    background: rgba(0, 0, 0, 0.6) !important; }
	
.flex-vertical.channels-wrap {
	background-color: rgba(0,0,0,0.4) !important;} /*old value was 0.34*/

.flex.vertical.private-channels {
	background-color: rgba(0,0,0,0.4) !important; }
	
.account  {
	background: rgba(0,0,0,0.0) !important;  }

.channel-members {
	background: rgba(0, 0, 0, 0.4) !important; }

theme-dark #friends .friends-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.37) !important; }
	
.friends-header {
    background: rgba(0, 0, 0, 0.7) !important; }

.friends-table {
	background: rgba(0, 0, 0, 0.6) !important; margin-top: 0 !important; }
	
.theme-dark .channel-pins-wrap .channel-pins .message-group { 
	background-color: rgba(0, 0, 0, 0.7) !important;}
	
.account:after {
	color: rgba(255, 255, 255, 0); }
	
.bda-dark #pubs-footer, .bda-dark #pubs-header { 
	background: rgba(0,0,0,0.7); }

.server-row { 
	background-color: rgba(0, 0, 0, 0.4) !important; }
	
.server-row:nth-child(odd) {
	background-color: rgba(0, 0, 0, 0.4) !important; }
	
.server-pinned {
border-bottom: 1px solid rgba(0, 0, 0, 0); }

.channel-textarea-inner {
background: rgba(0, 0, 0, 0.4) !important; }

#friends .friends-table .friends-row .friends-column-status .status {
opacity: 0.8; }

#friends .friends-table .friends-row .friends-column-name .avatar-small {
opacity: 0.8 }

.content .flex-spacer {
    background: rgba(0,0,0,0.6) !important;
}

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

/*welcome message overwrite*/
body:before {
    content: "Thanks for using Discord!";
    z-index: 1000000000000000000000000;
    color: #fff;
    background: var(--main-color);
    top: 0px;
    left: 50%;
    position: absolute;
    border-radius: 5px;
    padding: 5px 15px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    -webkit-animation: version 3s ease;
    animation: version 3s ease;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

/*Channel Info*/
.chat:not(.private)>.title-wrap .no-topic:after {
    content: "[empty topic]";
    font: inherit;
    font-size: 14px;
    align-text: left;
    vertical-align: baseline;
    color: rgb(205, 205, 205) !important;
    width: 600;
    min-height: 22px;
    max-height: 22px;
    position: absolute;
    top: 24px;
    left: 22px !important;
}
.chat:not(.private)>.title-wrap .topic,
.chat:not(.private)>.title-wrap .no-topic:after {
    opacity: 0;
    left: 20px;
    clip: rect(0px, 0px, 22px, 0px);
    color: #cdcdcd !important;
    max-width: 580px;
    margin-left: 0;
    padding-left: 10px;
    transition: clip 200ms ease-out, opacity 250ms linear;
    position: absolute;
}
.chat:not(.private)>.title-wrap:hover .topic,
.chat:not(.private)>.title-wrap:hover .no-topic:after {
    opacity: 1;
    width: 600px;
    left: 20px;
    padding-left: 10px;
    transition: clip 200ms ease-out 300ms, opacity 300ms ease-in 250ms;
    clip: rect(0px, 600px, 22px, -10px);
    position: absolute;
}
.chat .title-wrap .no-topic:before {
    top: 20px !important;
    left: 23px !important;
    opacity: 0;
    transition: opacity 300ms ease-in 200ms!important;
    content: ' ';
}
.chat .title-wrap:hover .no-topic:before {
    opacity: 1;
    transition: opacity 300ms ease-in 250ms !important;
}
.chat .title-wrap .topic:before,
.chat .title-wrap .no-topic:before {
    position: absolute;
    top: 2px;
    left: 3px;
    background-color: rgba(218, 222, 228, .5) !important;
    width: 1px;
    height: 18px;
    clip: rect(2px, 1px, 18px, 0px);
    transition: clip 400ms ease-out 100ms;
}
.chat:not(.private)>.title-wrap .title {
    position: absolute;
    padding-left: 10px;
    max-height: 42px;
    clip: rect(0px, 600px, 22px, 0px);
    transition: clip 150ms ease-out, opacity 400ms ease-in 100ms;
}
.chat:not(.private)>.title-wrap:hover .title {
    position: absolute;
    max-width: 600px;
    max-height: 42px;
    clip: rect(0px, 0px, 22px, 0px);
    opacity: 0;
    transition: clip 250ms ease-in 100ms, opacity 250ms ease-in 200ms;
}
.chat:not(.private)>.title-wrap .title .channel-name {
    max-width: 575px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.chat:not(.private)>.title-wrap .title .channel-name:before {
    padding-left: 10px;
    position: absolute;
    clip: rect(0px, 24px, 22px, 0px);
    left: 3px;
    transition: clip 200ms ease-out 250ms;
}
.chat:not(.private)>.title-wrap:hover .title .channel-name:before {
    clip: rect(0px, 24px, 22px, 24px);
    transition: clip 200ms ease-out;
}
.chat .title-wrap {
    border-bottom: none !important;
    text-shadow: 1px 1.35px 1.5px rgba(20, 20, 28, .3);
    width: 100%;
    max-height: 57px;
}
.header-toolbar {
    position: absolute;
    right: 18px;
}

/*Avatars that expand on hover*/
.message-group .avatar-large {
   width           : 50px !important;
   height          : 50px !important;
   border          : 3px solid rgba(0,0,0,0.2);
   border-radius   : 50 !important;
   background-size : cover !important;
   transition      : all .9s ease !important;
   opacity         : 1 !important;
}

.message-group .avatar-large:hover {
   width           : 100px !important;
   height          : 100px !important;
   background-size : cover !important;
   border-radius   : 0 !important;
}

.chat .avatar-large{margin-bottom:0px;}


/*Clickable Pinned Messages*/
.messages-popout .message-group .sink-interactions.clickable,
.messages-popout .message-group .avatar-large,
.messages-popout .message-group h2 {
	pointer-events: none;
}

/* Search Popout */
.popout.no-shadow.search-popout{
	background: #292b2b!important;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4)!important;
	width: 320px!important;
}

.popout.search-popout .option.search-query{
	background: rgba(225, 225, 225, 0.1)!important;
	border: none!important;
	border-radius: 5px;
	margin: 20px 20px 15px;
}

.popout.search-popout .option.search-query .keybind-shortcut span{
	box-shadow: none;
	padding: 3px 6px!important;
}

.popout.search-popout .option.selected + .results-group:before{display: none;}

.popout.search-popout .results-group .search-option .filter{
	color: rgba(225, 225, 225, 0.6);
	background-color: rgba(79, 84, 92, 0.8);
	border-radius: 3px;
	padding: 1px 3px;
}

.popout.search-popout .results-group .search-option .answer{color: rgba(225, 225, 225, 0.8);}
.popout.search-popout .results-group:before{border: none;}

.popout.search-popout .results-group .header{color: #fff;}

.popout.search-popout .results-group .search-learn-more{
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI4MS4yMzIgMjgxLjIzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjgxLjIzMiAyODEuMjMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPHBhdGggZD0iTTIzMS42MzQsNzkuOTc2di0wLjc1MUMyMzEuNjM0LDMwLjE4MSwxOTIuNzcyLDAsMTM3LjMyLDBjLTMxLjk4NywwLTU3LjQxNSw5LjAxOC03Ny43ODQsMjIuOTggICBjLTExLjg0MSw4LjExNS0xMi45MDcsMjUuOTA2LTQuMjMyLDM3LjM1NWw2LjMyNiw4LjM0OWM4LjY3NSwxMS40NDQsMjQuMjA5LDEyLjUzMiwzNi43ODQsNS41ODYgICBjMTEuNDYtNi4zMzEsMjMuMDgzLTkuNzU4LDM0LTkuNzU4YzE4LjEwNywwLDI4LjI5NCw3LjkxOSwyOC4yOTQsMjAuNzV2MC4zNzVjMCwxNi4yMjUtMTUuNDY5LDM5LjQxMS01OS4yMzEsNDMuMTgxbC0xLjUwNywxLjY5NyAgIGMtMC44MzIsMC45MzYsMC4yMTgsMTMuMjEyLDIuMzM5LDI3LjQxM2wxLjc0MSwxMS41OGMyLjEyMSwxNC4yMDEsMTQuMDY1LDI1LjcxLDI2LjY2OCwyNS43MXMyMy44MzktNS40MDYsMjUuMDgtMTIuMDY5ICAgYzEuMjU2LTYuNjY4LDIuMjY4LTEyLjA3NSwyLjI2OC0xMi4wNzVDMTk5LjkzNSwxNjAuODgyLDIzMS42MzQsMTI3LjUxMywyMzEuNjM0LDc5Ljk3NnoiIGZpbGw9IiM5OWFhYjUiLz4KCTxwYXRoIGQ9Ik0xMTguNDIsMjE3LjA5NWMtMTQuMzU5LDAtMjUuOTkzLDExLjY0LTI1Ljk5MywyNS45OTl2MTIuMTRjMCwxNC4zNTksMTEuNjQsMjUuOTk5LDI1Ljk5MywyNS45OTkgICBoMjIuMzIyYzE0LjM1OSwwLDI1Ljk5OS0xMS42NCwyNS45OTktMjUuOTk5di0xMi4xNGMwLTE0LjM1OS0xMS42NDUtMjUuOTk5LTI1Ljk5OS0yNS45OTlIMTE4LjQyeiIgZmlsbD0iIzk5YWFiNSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
}

.popout.search-popout .results-group .option{
	background: none;
	transition: background 100ms;
}

.popout.search-popout .results-group .option.selected,
.popout.search-popout .date-picker .date-picker-hint .hint-value{background: rgba(0, 0, 0, 0.2);}

.popout.search-popout .results-group .option:after{display: none;}


.popout.search-popout .date-picker,
.popout.search-popout .date-picker .react-datepicker,
.popout.search-popout .date-picker .react-datepicker .react-datepicker__header{
	background: none;
	border: none;
}

.popout.search-popout .date-picker .react-datepicker{
	margin: 10px!important;
	padding: 0!important;
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous,
.popout.search-popout .date-picker .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next{
	background: none;
	border: none;
	border-radius: 0;
}

.chat .search-results-wrap .pagination > .disabled{visibility: hidden;}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next{
	width: 20px;
	height: 20px;
	top: 8px!important;
	transform: none;
}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous{left: 8px!important;}
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next{right: 8px!important;}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:before,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:after,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:before,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:after{
	content: "";
	width: 10px;
	height: 3px;
	position: absolute;
	top: 50%;
	right: 25%;
	background: rgba(225, 225, 225, 0.8);
	border-radius: 2.5px;
	transition: transform 300ms;
}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:before,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:after{transform-origin: 25%;}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:before{transform: translate(0, 1px) rotate(40deg);}
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:after{transform: translate(0, -1px) rotate(-40deg);}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:hover:before{transform: translate(0, 1px) rotate(30deg);}
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--previous:hover:after{transform: translate(0, -1px) rotate(-30deg);}



.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:before,
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:after{transform-origin: 75% 50%;}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:before{transform: translate(0, -1px) rotate(40deg);}
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:after{transform: translate(0, 1px) rotate(-40deg);}

.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:hover:before{transform: translate(0, -1px) rotate(30deg);}
.popout.search-popout .date-picker .react-datepicker > a.react-datepicker__navigation--next:hover:after{transform: translate(0, 1px) rotate(-30deg);}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__current-month{
	font-size: 16px;
	color: rgba(225, 225, 225, 0.8);
	border: none;
	margin: 10px 0 20px 0!important;
	padding: 0!important;
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day-name{
	color: rgb(156, 60, 93);
    	font-weight: 800;
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day{
	color: rgba(225, 225, 225, 0.9);
	background: none;
	border-radius: 5px!important;
	transition: color 100ms, background 100ms;
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--disabled,
.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--outside-month{
	font-weight: 600;
	background: none;
	color: rgba(79, 84, 92, 0.5);
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--disabled:hover,
.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--outside-month:hover{
	color: rgba(79, 84, 92, 0.8);
	background-color: rgba(156, 60, 93, 0.4)!important;
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--today{color: rgb(156, 60, 93);}
.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--today:after{display: none;}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day--selected:hover,
.popout.search-popout .date-picker .react-datepicker .react-datepicker__day:hover{
	color: rgba(225, 225, 225, 0.9);
	background-color: rgb(156, 60, 93);
}

.popout.search-popout .date-picker .react-datepicker .react-datepicker__day,
.popout.search-popout .date-picker .date-picker-hint{border: none!important;}

.popout.search-popout .date-picker .date-picker-hint{justify-content: center;}

.popout.search-popout .date-picker .date-picker-hint .hint-value{
	padding: 5px;
	font-weight: 800;
	color: rgb(156, 60, 93);
	text-transform: uppercase;
}

/*bigger emotes Kappa*/
 .markup .emoji {
    object-fit: contain !important;
    width: 32px !important;
    height: 32px !important;
}
.markup .emoji.jumboable {
    object-fit: contain !important;
    width: 48px !important;
    height: 48px !important;
}
.markup .emote {
    max-height: 48px !important;
    max-width: 48px !important;
    width: 105% !important;
    height: 105% !important;
}

/*chat bubbles*/
.chat .message-group:not(.compact) .markup:not(:empty), .chat .accessory :-webkit-any(.embed, .embed-wrapper, .attachment-image, .attachment) {background: rgba(0,0,0,.35); position: relative; width: auto; min-width: 5px; min-height: 16px; max-width: 76%; padding: 4px !important; margin-bottom: 4px; border-radius: 4px;}
.chat .message-group .comment .attachment {margin: 0 0 5px;}
.chat .message-group {padding:10px 0 5px;}
.chat .message-group ~ div:last-child {margin-bottom:15px}
.chat .accessory :-webkit-any(.embed, .attachment-image, canvas) {max-width: 100%;}
.chat .comment {display: flex; flex-direction: column; margin-top: -10px;}
.chat .message-group .mentioned .message-text {background:transparent !important;}
.chat .message-group .mentioned .message-text:after {border-left: 0; background:transparent;}
.chat .markup, .chat .accessory {margin-left: 8px;}
.chat .reactions {margin-top: -2px; margin-bottom: 4px;}
.chat .message:not(.first) {margin-top: -6px !important}
.chat .embed-wrapper {margin-top: 0;}
.chat .embed.embed-inline {margin: 0 0 4px !important;}
.chat .embed .embed-thumbnail iframe {min-width: 346px; min-height: 260px}
.chat .markup .inline, .chat .markup .highlight {line-height: 24px;}
.chat .markup {padding-top: 4px !important;}
.chat .message-group .comment .edited {display: table; margin-left: 0; margin-top: 2px;}
.chat .message-group a {color: #d96a70;}
.chat .edit-container-outer .avatar-large {opacity:0;}
.chat .message-group .comment .attachment-image a {margin: 0;}
.chat .message-group .comment .markup:empty {padding:0;min-width: 0px; top:20px;}
.chat .markup pre {max-width: 99% !important; margin:2px; overflow: hidden;}
.chat .message-group .comment .markup pre code {word-break: break-all; width: calc(100% - 8px);}
.chat .message-group .embed {background-color: rgba(0,0,0,.35) !important;}
.chat .message-text :-webkit-any(.btn-option, .btn-reaction){margin-top: 10px;}
.chat .message-text div {order: 2;}
.chat .message-text .markup {order:1;}
.chat .message .message-text {display: flex; width: auto;}
.chat .message .image, .chat .embed .embed-thumbnail-gifv video {max-width: 100%; height: auto;}
.chat .message-group .comment .message.first {margin-top: 10px}
.chat .message-group:not(.compact) .message.first .markup:before {content:''; display: block; position: absolute; width: 8px; height: 12px; top: 4px; left: -8px; background:linear-gradient(40deg, transparent 43%, rgba(0,0,0,.35) 43%);}
.chat .message-group:not(.compact) .message.mentioned.first .markup:before, .chat .message-group.compact .message.mentioned.first .message-content:before {background:linear-gradient(40deg, transparent 43%, rgba(217,106,112,.65) 43%);}
.chat .message-group:not(.compact) .message.mentioned .markup, .message-group.compact .message.mentioned .message-content {background-color:rgba(217,106,112,.65) !important; text-shadow: 0 0 3px rgba(0,0,0,.2);}
.app:not(.theme-light) .chat .message-group:not(.compact) .message.mentioned .markup .mention:not(:hover) {color: #acbeff; background-color: rgba(0,0,0,0) !important;}
.app:not(.theme-light) .chat .message-group:not(.compact) .message.mentioned .markup .mention:hover {color: #fff;}
.chat .message-group .comment .markup code.inline, .chat .message-group .comment .markup pre code {background: rgba(20,20,20,.18) !important;}
.chat .message .mention {border-radius: 2px;}
.system-message {margin-top: 14px;}
.system-message .system-message-icon, .system-message .system-message-content {margin-top: -2px;}

/* compact */
.chat .message-group.compact {margin-left:10px;}
.chat .message-group.compact .message .message-text{margin-left: -20px;}
.chat .message-group.compact .message.first .message-content:before {content:''; display: block; position: absolute; width: 8px; height: 12px; top: 4px; left: -8px; background:linear-gradient(40deg, transparent 43%, rgba(0,0,0,.35) 43%);}
.chat .message-group.compact .accessory :-webkit-any(.embed-wrapper, .embed.embed-inline, .attachment-image, .invite-button, .reactions) {margin-left: 12px !important;}
.chat .message-group.compact .message .message-text .markup {text-indent: 0px; padding-left: 0px; margin-left: 0px; width: 100%; display: flex; margin-left: 12px; margin-top: 0;}
.chat .message-group.compact .message .message-text .markup .timestamp {color: transparent; margin-right: -116px; margin-left: 46px; margin-top: -7px;}
.chat .message-group.compact .message .message-text .markup .username-wrapper {width: 106px; display: flex; flex-flow: column; margin-right: 6px; margin-left: 4px; padding: 4px 6px 0; margin-top: -4px; align-items: flex-end;}
.chat .message-group.compact .message .message-text .markup .bot-tag {order: 3; display: table; margin-top: 4px; margin-right: 4px;}
.chat .message-group.compact .message .message-text .markup .user-name {order: 1; margin-top: -8px; word-break: break-word; text-align: right;}
.chat .message-group.compact .message .message-text .markup .renamer-tag {order: 2; margin-left: 0px; margin-right: 4px; margin-top: 4px; display: table;}
.chat .message-group.compact .message .message-text .markup span:last-of-type {margin-bottom: 4px;}
.chat .message-group.compact .message .message-text .markup .message-content:not(:empty), .message-group.compact .message-content ~ .CollapsibleEmbeds-processed {background: rgba(0,0,0,.35); position: relative; width: auto; min-width: 5px; min-height: 16px; max-width: 65%; padding: 4px !important; margin-bottom: 4px; border-radius: 4px; display: table; word-break: break-word; margin-top: 8px;}
.chat .message-group.compact .emoji {vertical-align: baseline;}
.chat .message-group.compact .system-message {margin-top: 24px;}
.chat .message-group.compact .comment .attachment {margin-left: 12px}

/* light theme */
.theme-light .chat .message-group:not(.compact) .markup, .theme-light .chat .message-group.compact .message .message-content, .theme-light .chat .accessory :-webkit-any(.embed, .embed-wrapper, .attachment-image) {background: rgba(202,207,215,.4) !important;}
.theme-light .chat .message-group .embed {background-color: rgba(202,207,215,.4) !important;}
.theme-light .chat .message-group:not(.compact) .message.first .markup:before, .theme-light .chat .message-group.compact .message.first .message-content:before {background:linear-gradient(40deg, transparent 43%, rgba(202,207,215,.43) 43%) !important;}
.theme-light .chat .message-group:not(.compact) .message.mentioned.first .markup:before, .theme-light .chat .message-group.compact .message.mentioned.first .message-content:before {background:linear-gradient(40deg, transparent 43%, rgba(217,106,112,.65) 43%) !important;}
.theme-light .chat .message-group:not(.compact) .message.mentioned .markup, .theme-light .chat .message-group.compact .message.mentioned .message-content {background-color:rgba(217,106,112,.65 !important; text-shadow: 0 0 3px transparent;}
.theme-light .chat .message .mention:not(:hover) { background: rgba(241, 243, 251,.5); border-radius: 2px;}
.theme-light .chat .message .mention:hover {color: #fff;}

/*mentions*/
.message-group .message.mentioned .message-text { animation: none !important; }
.message.mentioned .markup { -webkit-animation: mentionpulse 2s infinite; animation: mentionpulse 2s infinite; }
@-webkit-keyframes mentionpulse { 0% { box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.23); text-shadow: 0 0 0 rgba(250, 166, 26, .23); }
70% { box-shadow: 0 0 5px 5px rgba(241, 71, 71, 0); text-shadow: 0 0 5px rgba(241, 71, 71, 0), 0 0 5px rgba(241, 71, 71, 0); }
  to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0);  text-shadow: 0 0 0 rgba(241, 71, 71, 0); } }
@keyframes mentionpulse { 0% { box-shadow: 0 0 0 0 rgba(250, 166, 26, 0.23); text-shadow: 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23), 0 0 0 rgba(250, 166, 26, .23); }
70% { box-shadow: 0 0 5px 5px rgba(241, 71, 71, 0); text-shadow: 0 0 5px rgba(241, 71, 71, 0); }
  to { box-shadow: 0 0 0 0 rgba(241, 71, 71, 0);  text-shadow: 0 0 0 rgba(241, 71, 71, 0); } }