OceanicBlue.theme.css

//META{"name":"OceanicBlue","description":"Supports all resolutions, Relaxing ocean view accompanied by a light cyan colour-scheme.","author":"den","version":"1.0"}*//{}

/* 

 .o88b. .d8888. .d8888.   d8888b. db    db   d8888b. d88888b d8b   db 
d8P  Y8 88'  YP 88'  YP   88  `8D `8b  d8'   88  `8D 88'     888o  88 
8P      `8bo.   `8bo.     88oooY'  `8bd8'    88   88 88ooooo 88V8o 88 
8b        `Y8b.   `Y8b.   88~~~b.    88      88   88 88~~~~~ 88 V8o88 ~ noot noot
Y8b  d8 db   8D db   8D   88   8D    88      88  .8D 88.     88  V888 
 `Y88P' `8888Y' `8888Y'   Y8888P'    YP      Y8888D' Y88888P VP   V8P 

Main Colors Used:
#00CCCC (0,204,204) - Cyan/Teal Blue
#121212
#3d3d3d
#232323

*/

body {
webkit-backface-visibility: hidden;
}

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

.callout-backdrop {
    background-image: url(https://i.imgur.com/1AA5IQM.jpg) !important;
background-size: cover;}

#voice-connection {
    margin-left: 3vh !important;
}


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

#voice-connection, #friends, #friends .btn, .friends-header, .friends-table, .search-bar, .guilds-wrapper, .channels-wrap, .guild-channels, .account, .links, .messages-wrapper, .title-wrap, .content, .chat-empty, .message-group-blocked, .private-channels, .guild-header header, .typing, .ider-red span {
    background: transparent !important;
}

.channel:not(.selected) {
    transition: background .3s ease-out !important;
}

.channel:not(.selected):hover {
    background: rgba(0, 0, 0, 0.0) !important;
    transition: background .2s ease-in !important;
}

.friends-row:hover, .search-result:hover, .btn-friends.selected, .search-result.selected, .channel.selected.private, .channel.channel-text.selected {
    background: rgba(0, 0, 0, 0.0) !important;
}

.guild-channels .channel-text.selected {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)) !important;
}

.guild-channels .channel-text.selected:before, .guild-channels .channel-text.selected:hover:before, .guild-channels .channel-text:hover.channel-muted:before, .guild-channels .channel-text:hover:not(.unread):before, .private-channels .channel.selected:before, .private-channels .channel:hover:before {
    border-left: 3px solid #00CCCC;
}

.guild-channels .channel-text:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0)) !important;
}

.guild-channels ul .channel-text.unread:not(.selected):not(.channel-muted):before {
    left: -11px;
}

.guild-header ul {
    opacity: 0;
    transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.guild-header-open ul {
    opacity: 1;
}

.invite-btn {
    background-color: rgba(0,204,204, 0.5) !important;
}

.private-channels .channel:hover:before {
    opacity: .25 !important;
}

.user-settings-modal button.preview-sound:before {
    -webkit-filter: hue-rotate(235deg) saturate(400%);
}

.scroller-wrap .scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.scroller-wrap .scroller::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 1px solid rgba(0, 0, 0, 0.0) !important;
}

.voice-connection-channel {
    color: #000000;
    font-size: 12px;
}

.inline {
    background-color: #23232323 !important;
    border-radius: 5px !important;
    font-size: 12px;
    color: #00CCCC !important;
    line-height: 22px;
}

/*Transparency*/

/*Guild name*/

/*Scrolling bar*/

/*Buttons*/

.badge {
    background-color: #00CCCC;
    border: 1px solid rgba(0, 0, 0, 0.5);
    color: #000000;
}

.channel.channel-text.unread a {
    background: transparent !important;
}

.markup {
    color: #ffffff;
    font-size: 16px;
}

.member.member-status.member-status-offline:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.member.member-status.member-status-online:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.notice {
    background-color: #a1a1a1;
    color: #000000;
}

.timestamp {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px;
}

.ider span {
    background-color: #615900;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #ffffff;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.6);
}

.chat>.title-wrap {
    box-shadow: none !important;
}

.hljs {
    background-color: #232323 !important;
    border-radius: 4px !important;
    font-size: 16px ;
    font-style: normal;
    font-weight: normal;
}

.member-activity {
    color: #ffffff !important;
}

.links li a:hover {
    color: #00CCCC !important;
}

.topic.topic-expandable {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
}

.topic.topic-expandable a {
    color: #00CCCC !important;
}

.topic.topic-expandable:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
}

.member.member-status.member-status-online {
    background: transparent;
}

.messages {
    background: transparent;
    margin-top: 5px !important;
    margin-right: 20px !important;
}

.chat .title-wrap {
    padding-bottom: 1px;
    border-bottom: 1px solid transparent !important;
    margin-top: 1px;
}

.guild-header header span {
    margin-left: 30%;
}

.chat .messages-wrapper {
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 4%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%) !important;
}

.links li a {
    margin-left: 1.2vw !important;
    color: #dbdbdb !important;
}

.guild-channels header {
    opacity: 0.9;
}

.scroller.channel-members {
    padding-top: 3 px;
}

.discriminator {
    transition: all 900ms ease !important;
}

.guilds {
    transition: all 900ms ease !important;
}

.btn {
    width: auto !important;
}

.btn-mute {
    height: 25px !important;
    width: 2.2vw !important;
    background-color: rgba(35,35,35,0.5) !important;
}

.btn-deafen {
    height: 25px !important;
    width: 2.2vw !important;
    background-color: rgba(35,35,35,0.5) !important;
}

.btn-settings {
    height: 25px !important;
    width: 2.2vw !important;
    background-color: rgba(35,35,35,0.5) !important;
}

.btn-info {
    height: 25px !important;
    width: 2.2vw !important;
    background-color: rgba(35,35,35,0.5) !important;
}

.btn-disconnect {
    height: 25px !important;
    width: 2.2vw !important;
    background-color: rgba(35,35,35,0.5) !important;
}

.btn-group{
  opacity: 0.6 !important;
}


.channels-wrap {
    width: 15vw !important;
}

#voice-connection .btn-info {
    border-right: 1px solid rgba(0,204,204, .3) !important;
    height: 26px;
    bottom: 2px;
}

.account .btn-mute {
    border-right: 1px solid rgba(0,204,204, .3) !important;
    height: 26px;
}

.account .btn-settings {
    height: 26px;
}

.account .btn-deafen {
    border-right: 1px solid rgba(0,204,204, .3) !important;
    height: 26px;
    background-color: #232323 !important;
}

.account .btn-deafen:hover {
    background-color: #232323 !important;
}

.account .btn-group, #voice-connection .btn-group {
    border-radius: 10px;
    background-color: #232323 !important;
}

#voice-connection .btn {
    background-color: #232323 !important;
    border: none;
}

.account .btn {
    background: transparent !important;
    border: none;
}

.links {
    display: none;
}

.account .username {
    width: 65px !important;
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media  (max-width: 1620px) {
  .account .username {    
    width: 50px !important;    
    font-size: 10px !important;    
    white-space: nowrap;    
    overflow: hidden;    
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
}

span.ping{
      background-color: transparent !important;
      color: #00CCCC !important;
      transition: opacity 3s ease-in-out
  }
  
.voice-connection-quality-fine {    
    font-size: 80% !important;    
    padding-right: 30px !important;
    transition: opacity 3s ease-in-out
  }

@media  (max-width: 1445px) {
  .account .username {    
    width: 32px !important;    
    white-space: nowrap;    
    overflow: hidden;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    
    -ms-text-overflow: ellipsis;    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .channel-members {    
    max-width: 150px !important;
  }
  .channel-members h2 {    
    font-size: 10px !important;    
    padding-left: 10px !important;
  }
  .member-activity {    
    color: rgba(255, 255, 255, 0.8) !important;    
    font-size: 10px !important;
  }
  .member-status {    
    padding-left: 20px !important;
  }
  .channel-members-wrap {    
    min-width: 80px !important;
  }
  .invite-btn {    
    padding-left: 5% !important;
  }
  span.ping{
      opacity: 0 !important;
  }
}

.search-bar {
    box-shadow: none !important;
}

.guild-header.guild-header-open ul {
    background-color: #121212 !important;
    border-radius: 5px;
    margin-left: 1.2vh;
    width: 15vw;
}

.guild-header-open ul li a {
    color: #00CCCC;
    opacity: 1 !important;
}

#voice-connection {
      margin-left: 1vh !important;
  }

@media  (max-width: 1260px) {
  .account .username {    
    display: none !important;
  }
  .account .discriminator {    
    display: none !important;
  }
}
  

@media  (max-width: 1200px) {
  .member-username-inner, member-activity {    
    color: rgba(0, 0, 0, 0.0);
  }
  .channel-members h2 {    
    font-size: 6px;    
    padding-left: 8px !important;
  }
  .channel-members {    
    max-width: 80px !important;
  }
  .channel-members .member-status {    
    padding-left: 40% !important;
  }
  .channel-members-wrap {    
    min-width: 80px !important;
  }
  .invite-btn {    
    display: none !important;
  }
  .channels-wrap {    
    max-width: 15% !important;    
    min-width: 144px !important;
  }
  .guild-header.guild-header-open ul {    
    min-width: 130px !important;
  }
  .btn-group {    
    margin-left: -10px !important;    
    min-width: 56px !important;
  }
  .btn {    
    min-width: 28px !important;
  }
  .links li a {    
    display: none !important;
  }
  .voice-connection-quality-fine {    
    font-size: 80% !important;    
    padding-right: 30px !important;
  }
  .voice-connection-channel {    
    display: none !important;
  }
  .btn-disconnect {    
    width: 50% !important;
  }
  .btn-info {    
    width: 50% !important;
  }
}

@media  (max-width: 1050px) {
  .voice-connection-quality-fine {    
    opacity: 0 !important;
  }
  
}

@media  (max-width: 740px) {
  .message-group .avatar-large {    
    display: none !important;
  }
}

@media  (max-height: 700px) {
  .btn-group .btn {    
    height: 23px !important;
  }
}


.voice-connection-quality-fine {
    transition: all 900ms ease !important;
}

.channel-members, .channel-members-wrap {
    transition: all 400ms ease;
}

.embed-video-actions {
    width: 90%;
    height: 90%;
}

.embed {
    border-radius: 15px !important;
}

.highlight {
    color: #00CCCC;
}

.highlight:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
    color: #00CCCC !important;
}

.friends-icon {
    background-color: rgba(0,204,204, 0.9);
}

.friends-online {
    color: #ffffff;
}

.guild-separator {
    border-top: 2px solid rgba(0,204,204, 0.5);
    border-bottom: 2px solid rgba(0,204,204, 0.5);
}

.guild-separator:after {
    background-color: transparent !important;
}

.channel-textarea {
   
}

.speaking .avatar-small {
    border: 2px dotted #00CCCC !important;
}

.speaking .avatar-small:hover {
    border: 2px dotted #00CCCC !important;
}

.channel-members .member.popout-open {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.0)) !important;
    border-left: 4px solid rgba(0,204,204, 0.9);
}

.status {
    border-color: transparent !important;
}

#voice-connection .btn-info:after {
    padding-bottom: 2px;
}

/* Unread Channel Message */

.guild-channels .channel-text.unread:not(.selected):not(.channel-muted):before {
    background: #00CCCC !important;
}

/* Guild Unread Message */

.guilds-wrapper .guilds .guild.unread:before {
    background: #00CCCC !important;
}

/* Guild Unread Message */

.guilds-wrapper .guilds .guild.selected:before {
    background: #00CCCC !important;
}

.divider.divider-red span {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #00CCCC !important;
}

.divider.divider-red>div {
    background: rgba(0,204,204, 0.7) !important;
}

/* Private Chat */

.private-channels .scroller {
    background: none !important;
    border-radius: 5px !important;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    margin-left: 2vh;
}

.private-channels .channel.selected:before {
    background-color: linear-gradient(to right, rgba(0,204,204, 0.4), rgba(0, 0, 0, 0.0)) !important;
    border-left: 2px solid #00CCCC;
}

.priavte-channels .channel:hover::before {
    border-left: 2px solid #00CCCC !important;
    background-color: linear-gradient(to right, rgba(0,204,204, 0.4), rgba(0, 0, 0, 0.0)) !important;
}

.friends-header {
    box-shadow: none;
    border: none !important;
}

.search-bar-inner input {
    font-size: 62% !important;
    border: 1px solid rgba(0,204,204, 0.4);
}

/* Friends */

#friends .friends-table .friends-table-body {
    background-color: rgba(35,35,35,0.5) !important;
    border-radius: 5px !important;
    border: 1px solid rgba(0,204,204, 0.0);
    margin-left: 1.6vw;
    margin-bottom: 2.5vh;
    margin-right: 2.5vh;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
}

#friends .friends-table .friends-table-header {
    background-color: rgba(35,35,35,0.5) !important;
    border-radius: 5px !important;
    margin-left: 1.6vw;
    height: 3vh;
    margin-bottom: 1.2vh;
    margin-right: 2.5vh;
}

#friends .friends-header {
    margin-left: 1.6vw;
}

.tab-bar-item:hover {
    background-color: transparent;
}

.new-messages-bar button {
    background-color: #3b3b3b !important;
    color: #00CCCC !important;
}

span.bot-tag {
    background-color: rgba(0,204,204, 0.8) !important;
}

/* Instant invite section */

.instant-invite-popout section {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.instant-invite-popout header {
    background-color: #00CCCC !important;
}

.countdown {
    color: #00CCCC !important;
}

.checkbox span {
    color: #a8a8a8 !important;
}

/* Guilds 'Add' Button */

.guild.guilds-add {
    border-color: rgba(0,204,204, 0.5) !important;
    border-style: groove !important;
}

.guild.guilds-add:hover {
    border-color: rgba(0,204,204, 0.9) !important;
}

/* Speech bubble CSS */

.tooltip {
    background: rgba(0, 0, 0, 0.4) !important;
}

.tooltip.tooltip-right:after {
    border-right-color: rgba(0, 0, 0, 0.4) !important;
}

.tooltip.tooltip-left:after {
    border-left-color: rgba(0, 0, 0, 0.4) !important;
}

.tooltip.tooltip-top:after {
    border-top-color: rgba(0, 0, 0, 0.4) !important;
}

.tooltip.tooltip-bottom:after {
    border-bottom-color: rgba(0, 0, 0, 0.4) !important;
}

/** Delete comment window **/

.form-inner {
    background-color: #3d3d3d !important;
}

.form-header header {
    color: #00CCCC !important;
}

.form-inner p {
    color: #ffffff !important;
}

.btn.btn-default.close {
    background-color: rgba(0, 0, 0, 0.0) !important;
    color: #00CCCC;
}

.form-header {
    background-color: #3d3d3d !important;
}

.form-actions {
    background-color: #3d3d3d !important;
}

ul li a {
    color: #00CCCC;
}

.header.control-group {
    background-color: #3d3d3d !important;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/** User settings */

.avatar-uploader-inner {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    border-color: #00CCCC !important;
}

#settings-username {
    border-radius: 4px;
    padding-left: 10px;
    border-color: #00CCCC !important;
}

#settings-email {
    border-radius: 4px;
    padding-left: 10px;
    border-color: #00CCCC !important;
}

#settings-current-password {
    border-radius: 4px;
    padding-left: 10px;
    border-color: #00CCCC !important;
}

button.btn.btn-primary {
    background-color: #00CCCC !important;
}

.settings-actions {
    background-color: #121212 !important;
}

a.remove-button {
    color: #00CCCC !important;
}

.control-group label a {
    color: #00CCCC !important;
}

.settings .settings-inner, .settings .settings-actions {
    background-color: #3d3d3d;
}

div.settings-actions{
    background-color: #121212 !important;
}

.settings .settings-header {
    background-color: #3d3d3d !important;
}

.settings-wrapper.settings-panel {
    background-color: #3d3d3d !important;
}


.tab-bar-item.selected {
    padding-left: 15px !important;
}

.checkbox-inner span {
    background-color: #00CCCC !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}

.radio-inner {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.radio {
    color: #ffffff !important;
}

.tab-bar-item {
    margin-right: 5px !important;
    margin-left: 5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

div p a {
    color: #00CCCC !important;
}

.radio-theme.dark label {
    border-color: #00CCCC !important;
}

.radio-theme.light label {
    border-color: #ffffff;
}

.action-icon:before {
    -webkit-filter: hue-rotate(305deg) saturate(400%) !important;
}

.slider-bar-fill {
    background: #00CCCC !important;
}

.radio .radio-inner span:after {
    background: #00CCCC !important;
}

.tab-bar.TOP .tab-bar-item.selected {
    border-bottom: 2px solid #00CCCC !important;
}

#help-query {
    border-color: #00CCCC;
    border-width: 3px;
}

/* User profile popup message box */

.avatar-popout {
    border: 3px dotted rgba(0,204,204, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.reset-voice-settings {
    color: #00CCCC !important;
}

/* Add new server popup window */

.form-inner header {
    color: #00CCCC !important;
}

.action-header {
    color: #00CCCC !important;
}

.action-icon {
    background-color: #ffffff !important;
}

.btn.btn-primary {
    background-color: #00CCCC !important;
}

/* Light Theme Support*/

span.channel-name {
    color: #ffffff !important;
}

a.channel-name.channel-private {
    color: rgba(255, 255, 255, 0.9) !important;
}

.form-inner.loading {
    background-color: #232323 !important;
}

div.footer {
background-color: #3d3d3d !important;
}

#user-profile-modal .scroller {
    background: #fff;
    padding-top: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px solid transparent;
    margin-top: 0px;
    margin-bottom: 0px;
}

.empty-message h1 {
    color: rgba(255, 255, 255, 0.8) !important;
}

img.image {
    width: 90%;
    height: 90%;
    border-radius: 10px;
}

#app-mount > div > span:nth-child(6) > div.modal > div > div > div > img {
    max-height: 700px !important;
    width: auto !important;
    max-width: 1000px;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

#app-mount > div > span:nth-child(6) > div.modal > div > div > a {
    opacity: 1 !important;
    text-align: center;
    color: #ffffff;
}

#app-mount > div > span:nth-child(6) > div.modal > div > div > a:hover {
    text-align: center;
    color: #00CCCC;
}

div.form-inner {
    background-color: #232323 !important;
}

.connection-integrations.no-integrations div {
    color: #6b6b6b !important;
}

.connection-integrations.no-integrations {
    background-color: #ffffff !important;
}

.settings-panel-header.user-settings-modal-connections-header label {
    color: #00CCCC !important;
}

header.header {
    background: transparent !important;
    background-color: #3d3d3d !important;
}

div.sub-header {
    background-color: #3d3d3d !important;
}

#user-profile-modal > div.tab-bar.TOP{
    background-color: #3d3d3d !important;
}

div#user-profile-modal footer {
    background-color: #3d3d3d !important;
}

.add-friend{
    background-color: #00CCCC !important;
    border: 1px solid white;
}

div.scroller.guilds div.guild:hover{
  border-radius:4px !important;
}

div.btn {
    background-color: #00CCCC !important;
    border: 1px solid white;
}

#user-profile-modal footer {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

button.btn.add-friend {
}

div.flex-horizontal.flex-spacer.content-inner label {
    color: #ffffff !important;
}

label.subtitle {
    color: #00CCCC !important;
}

label.title {
    color: #00CCCC !important;
}

div.control-group label {
    color: #00CCCC !important;
}

div.checkbox span {
    color: #a6a6a6 !important;
}

div.help-text {
    color: #ffffff !important;
}

.channel-pins-wrap {
    background: transparent !important;
    background-color: #3d3d3d !important;
}

.channel-pins-wrap .header {
    background: transparent !important;
    background-color: rgba(0,204,204, 0.7) !important;
}

.channel-pins .message-group {
    background: transparent !important;
    background-color: #3d3d3d !important;
    border: 1px solid #00CCCC !important;
}

.action-buttons .jump-button {
    background: transparent !important;
    background-color: rgba(0,204,204, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
}

.guild-channels .channel a {
    opacity: 0.7;
}

.channel-members .member:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.0)) !important;
    border-left: 4px solid rgba(0,204,204, 0.3);
}

li div span {
    color: rgba(0,204,204, 0.8) !important;
}

.channel-name:before {
    color: rgba(0,204,204, 0.9) !important;
}

.action.create {
    background-color: #ffffff !important;
}

.action.join {
    background-color: #ffffff !important;
}

div.icon-friends {
    background-color: #00CCCC !important;
}

.channel-textarea-autocomplete {
    background-color: #00CCCC !important;
}

#voice-connection .btn:hover:after {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

div.add-friend-popout header {
    background: transparent !important;
    background-color: #00CCCC !important;
}

div.notice {
    background-color: #474747 !important;
    color: #009499 !important;
}

div.tab-bar-item {
    background: transparent !important;
}

div.activity {
    color: #fff !important;
}

a.embed-title {
    color: #00CCCC !important;
}

.tab-bar.SIDE .tab-bar-item.selected:before {
    opacity: 0;
}

.tab-bar.SIDE {
    margin-right: -17px;
}

button.btn.btn-default {
    background: transparent !important;
    color: #ffffff !important;
}

.connect-container .btn {
    height: 50px !important;
    width: 50px !important;
}

#bd-pane .scroller-wrap div[style*="background:#2E3136; color:#ADADAD; height:30px; position:absolute; bottom:0; left:0; right:0;"] {
    background: #ffffff !important;
}

#bd-pane > div > div > div.bd-settings > div:nth-child(6) > span:nth-child(1) {
    color: #696969;
}

#bd-changelog {
    color: #696969;
}

div.new-messages-bar button {
    margin-top: 10px !important;
}

.tab-bar.SIDE {
    background-color: #232323 !important;
}

.tab-bar.SIDE .tab-bar-item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.tab-bar.SIDE .tab-bar-item:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

.tab-bar.SIDE .tab-bar-item.hover:before {
    display: none !important;
}

.tab-bar.SIDE .tab-bar-item:before {
    display: none !important;
}

/* Public Server CSS */

#pubs-container {
    background: transparent !important;
    background-color:#3d3d3d !important;
    border-radius: 10px !important;
}

#pubs-header {
    background-color: #232323 !important;
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
}



#pubs-container > div.server-row.server-pinned{
    background-color: #3d3d3d !important;
    border-bottom: 3px solid #232323 !important;
}

#pubs-list > div{
    background-color: #3d3d3d !important;
    transition: all .3s ease-in-out;
}


.server-row button {
    background-color: rgba(0,204,204, 0.7) !important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

.server-row button:hover {
    background-color: rgba(0,204,204, 0.7) !important;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

.server-info span{
    color: #fff !important;
}

.bd-dropdown-select {
    background-color: rgba(0,204,204, 0.9) !important;
    transition: all .3s ease-in-out;
    color: #fff !important;
    border-radius: 5px;
}

input#pubs-sterm {
    background-color: rgba(0,204,204, 0.9) !important;
    transition: all .3s ease-in-out;
    color: #fff !important;
    padding-left: 7px;
    border-radius: 5px;
    width: 120px !important;
    margin-right: 10px !important;
    margin-left: -10px !important;
}

button#pubs-searchbtn {
    background-color: rgba(0,204,204, 0.9) !important;
    transition: all .3s ease-in-out;
    color: #fff !important;
    border-radius: 5px;
}

div.bd-dropdown-list {
    background: transparent !important;
}

.pubs-cat-select-li {
    background: transparent !important;
    background-color: rgba(0,204,204, 0.8) !important;
    transition: all .3s ease-in-out;
    color: #fff !important;
}

.server-row .server-icon {
    border-radius: 5px !important;
    border: 2px solid #00CCCC;
}

#pubs-select-dropdown > div > ul {
    border-bottom-left-radius: 5px !important;
    margin-top: -2px !important;
}

div.bd-dropdown {
    background: transparent !important;
    transition: all .3s ease-in-out;
}

.server-official {
    color: #00CCCC !important;
    animation: color_change 1s infinite alternate;
}



@keyframes color_change {
  from {
    
    color: #3d3d3d;
  }
  to {
    
    color: #00CCCC;
  }
}


#pubs-footer {
    background: transparent !important;
    background-color: #3d3d3d !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.3);
}

/* Scroller for popup servers window */

#pubs-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(0, 0, 0, 0.4) !important;
}

#pubs-scroller::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-track, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-track-piece, .bda-dark #pubs-container .scroller::-webkit-scrollbar, .bda-dark #pubs-container .scroller::-webkit-scrollbar-track, .bda-dark #pubs-container .scroller::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-thumb, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-thumb, .bda-dark #pubs-container .scroller::-webkit-scrollbar-thumb, .bda-dark .emoji-picker .scroller::-webkit-scrollbar-thumb {
    border: 1px solid #00CCCC !important;
    background: #00CCCC !important;
}

.bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-thumb:active, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-thumb:active, .bda-dark #pubs-container .scroller::-webkit-scrollbar-thumb:active, .bda-dark .emoji-picker .scroller::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar, .bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-track, .bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Popup @person box */

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > form > div > div.channel-textarea-autocomplete {
    background: transparent !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > form > div > div.channel-textarea-autocomplete > div > ul {
    background-color: rgba(0,204,204,0.6) !important;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > form > div > div.channel-textarea-autocomplete > div > ul > li {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > form > div > div.channel-textarea-autocomplete > div > header {
    background-color: rgba(0,204,204,0.8) !important;
    color: #fff !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > form > div > div.channel-textarea-autocomplete > div {
    background-color: rgba(0,0,0,0.7) !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: none;
}

div[data-bd="backdrop"] {
    background-image: url(https://i.imgur.com/6f8vevM.jpg) !important;
    background-size: cover !important;
}

/* Paste into console to pause @innertext box: setTimeout(function(){debugger;}, 5000) */

/* Styling thanks to Nyxxay#8107 */

#rmenu {
    background: #00CCCC !important;
    border: 1px solid #00CCCC;
}

.emoji-picker .search-bar input {
    border: 1px solid #00CCCC;
    -webkit-animation: searchpulse 2s infinite;
    animation: searchpulse 2s infinite;
}

.bda-dark #bda-qem {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .5) !important;
}

.bda-dark #bda-qem button {
    background: rgba(0, 0, 0, .15) !important;
    border: 1px solid rgba(0, 0, 0, .5) !important;
}

.bda-dark #bda-qem button.active {
    background: rgba(0, 0, 0, .5) !important;
}

.bda-dark #bda-qem-favourite-container, .bda-dark #bda-qem-twitch-container, .bda-dark .emoji-picker, .bda-dark .emoji-picker .category, .bda-dark .emoji-picker .header .search-bar {
    background: rgba(0, 0, 0, .5) !important;
}

.emoji-picker .sticky-header {
    background: rgba(0, 0, 0, .75) !important;
}

.bda-dark .emoji-picker .scroller::-webkit-scrollbar, .bda-dark .emoji-picker .scroller::-webkit-scrollbar-track, .bda-dark .emoji-picker .scroller::-webkit-scrollbar-track-piece, .bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar, .bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-track, .bda-dark #bda-qem-favourite-container .scroller::-webkit-scrollbar-track-piece, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-track, .bda-dark #bda-qem-twitch-container .scroller::-webkit-scrollbar-track-piece, .bda-dark #pubs-container .scroller::-webkit-scrollbar, .bda-dark #pubs-container .scroller::-webkit-scrollbar-track, .bda-dark #pubs-container .scroller::-webkit-scrollbar-track-piece {
    background: rgba(0, 0, 0, .5) !important;
    border: 1px solid rgba(0, 0, 0, .5) !important;
    width: 8px;
}

.guild-settings-modal-members {
    border: 1px solid #00CCCC !important;
    background: #00CCCC !important;
}

.channel-textarea-autocomplete-inner {
    background: rgba(0,0,0,0.84);
}

.channel-textarea-autocomplete-inner header {
    background: rgba(0,0,0,0.84);
}



.channel-members h2 {
    border-radius: 10px;
    color: #ffffff !important;
    margin-left: 10px;
    padding-top: 0px;
}

.title-wrap {
    box-shadow: none !important;
    background-color: #121212;
}

.markup a {
    color: #00CCCC !important;
}

.message-group {
    background-color: rgba(35,35,35,0.5) !important;
    border-radius: 5px !important;
    margin-top: 15px !important;
    padding-left: 20px !important;
}

.guild-header header {
    position: absolute;
    right: 20px;
    border: transparent;
    color: #ffffff;
    height: 58px;
    background-color: #232323;
    width: 120%;
}

div.guild-header header {
    background-color: #121212;
}

.guild-channels {
    background-color: #121212;
    border-right: 1px solid transparent;
    margin-left: 2vh px;
    margin-top: 59px;
    margin-bottom: 0.1vhpx;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
}

.channel-textarea-inner textarea {
    padding-left: 10 px;
    margin-bottom: -10px;
    color: rgba(0,204,204, 0.7) !important;
    background-color: transparent !important;
    margin-top: -5px;
    padding-top: 2px;
}

.channel-textarea-inner {
    background-color: rgba(35,35,35, 0.5) !important;
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid rgba(0,204,204, 0.0) !important;
    margin-top: 1.6vhpx;
    margin-left: 2vh px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    margin-bottom: -13px;
}

.account {
    border: none !important;
    margin-top: 1.6vhpx !important;
    margin-left: 2vh px !important;
    margin-bottom: 5px !important;
    padding-left: 10px !important;
    width: auto !important;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    border-top-right-radius: 4px !important;
    border-top-left-radius: 4px !important;
}

.channel-members {
    background-color: rgba(35,35,35,0.5) !important;
    margin-right: 20px !important;
    margin-top: 3px !important;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%) !important;
    margin-bottom: 15px !important;
}

.username {
    transition: all 900ms ease !important;
}

.account .avatar-small {
    border-radius: 3px;
    margin-left:4px !important;
    border: 1px solid  #00CCCC;
}

div.channel-textarea-inner textarea {
    padding-left: 10px;
}

div.flex-spacer.flex-vertical form {
    background-color: #121212;
}

.avatar-large {
    border: 3px solid rgba(0,204,204,0.6) !important;
    width: 30px;
    height: 30px;
    border-radius:4px !important;
    background-size: cover !important;
    margin-left:3px !important;
}

.guilds-wrapper {
    background: transparent !important;
    background-color: rgba(0,0,0,0.3) !important;}

.guilds {
    transition: all 900ms ease !important;
    background-color: rgba(0,0,0,0.3) !important;
    border-right-width: 5px !important;
    border-color: #121212 !important;
    border-style: solid !important;
    width: 70px !important;
    margin-top: 20% !important;
    padding-top: 30px !important;
    margin-bottom: 10% !important;
    padding-bottom: 20px !important;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.guilds-wrapper > div {
background-color: rgba(35,35,35,0.7) !important;
}

.voice-connection-quality-fine {
    color: #00CCCC !important;
}

span.text {
    font-size: 10px !important;
    color: #00CCCC !important;
}

span.text.strong {
    font-size: 10px !important;
    color: #00CCCC !important;
}

spinner-pulsing-ellipsis .spinner-item {
    background-color: rgba(0,204,204,0.4) !important;
}


/*User Status*/
/* ONLINE */
.member-status-online .avatar-small {
  border: 3px solid rgba(67,181,129,0.7) !important;
}
.status-online {
  opacity: 0 !important;
}
.account .status-online {
  opacity: 1 !important;
}

/* IDLE */
.member-status-idle .avatar-small {
  border: 3px solid rgba(250,166,26,0.7) !important;
}
.status-idle {
  opacity: 0 !important;
}
.account .status-idle {
  opacity: 1 !important;
}

.btn-option {
    background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/cyan-firewatch/cyan-setting.svg') !important;
}




/* Custom SVGs */
/* Voice and account buttons */
#voice-connection .btn-group, .account .btn-group {
  border-radius: 10px !important;
  border: 1px solid rgba(17,47,45,0.3);
}

.account .btn-mute {
  opacity: 1 !important;
}

.account .btn-mute:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-muted.svg') !important;
  opacity: 0.4 !important;
}

.account .btn-mute.disabled:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-muted.svg') !important;
  opacity: 1 !important;
}

.account .btn-mute:hover:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-muted.svg') !important;
  opacity: 1 !important;
}

.account .btn-deafen:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-deafen.svg') !important;
  opacity: 0.4 !important;
}

.account .btn-deafen.disabled:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-deafen.svg') !important;
  opacity: 1 !important;
}

.account .btn-deafen:hover:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-deafen.svg') !important;
  opacity: 1 !important;
}

.account .btn-settings:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-setting.svg') !important;
  opacity: 0.4 !important;
}

.account .btn-settings.disabled:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-setting.svg') !important;
  opacity: 1 !important;
}

.account .btn-settings:hover:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-setting.svg') !important;
  opacity: 1 !important;
}
/* Icons */
.icon-muted {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-muted.svg') !important;
}

.icon-deafened {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-deafen.svg') !important;
}

.icon-settings {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-setting.svg') !important;
}

.icon-instant-invite {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-instant-invite.svg') !important;
}

.message-group .btn-option {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-setting.svg') !important;
}



.guilds-wrapper .guilds .guild.audio .guild-inner:after {
  background: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-audio.svg') 50% no-repeat !important;
  background-color: #1e2124 !important;
  background-size: 16px !important;
}


#voice-connection .btn-disconnect:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-disconnect.svg') !important;
  opacity: 0.4 !important;
}
#voice-connection .btn-info:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-info-ping.svg') !important;
  opacity: 0.4 !important;
}

#voice-connection .btn-disconnect:hover:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-disconnect.svg') !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
}
#voice-connection .btn-info:hover:after {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-info-ping.svg') !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > div > div > div > div:nth-child(37) > div.comment > div.message.mentioned > div.body > div > div.markup{
    background-color: rgba(0,255,255,0.2) !important;
    background: transparent !important;
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
    
}


.bda-dark .server-info button {
    background-color: #00CCCC !important;
}

#bd-themes-pane > ul > li{
    background-color: #3d3d3d !important;
}

#bd-themes-pane > ul > li > div.bda-left > div > div{
    color: #fff !important;
}

#bd-plugins-pane > ul > li{
    background-color: #3d3d3d !important;
}

#bd-plugins-pane > ul > li > div.bda-left > div > div{
    color: #fff !important;
}

#bd-emotes-tab.selected {
    color: #00CCCC !important;
}

#bd-customcss-tab.selected {
    color: #00CCCC !important;
}
#bd-themes-tab.selected {
    color: #00CCCC !important;
}
#bd-settings-tab.selected {
    color: #00CCCC !important;
}
#bd-plugins-tab.selected {
    color: #00CCCC !important;
}

#app-mount > div > span:nth-child(6) > div.modal > div > form > div.settings-right > div:nth-child(1) > div > div > div.control-groups > div > div > div.user-settings-streamer-mode-enable-inner > ul > li > div.help-text > a {
        color: #00CCCC !important;
}

.tip > a {
    color: #00CCCC !important;
}


#app-mount > div > span:nth-child(6) > div.modal > div > form > div.settings-right > div:nth-child(1) > div > div > div > div > div > div:nth-child(2) > div > label .selected {
    border-color: #00CCCC !important;
}

#app-mount > div > span:nth-child(6) > div.modal > div > form > div.settings-right > div:nth-child(1) > div > div > div.tab-bar.TOP > div .selected {
    color: #00CCCC !important;
}

a {
    color: #00CCCC !important;
}

.win-close {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-closewindow.svg') !important;
  opacity: 0.4 !important;
}
.win-minimize {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/minimise.svg') !important;
  opacity: 0.4 !important;
}
.win-maximize {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-maximise.svg') !important;
  opacity: 0.4 !important;
}

.win-close:hover {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-closewindow.svg') !important;
  opacity: 1 !important;
}
.win-minimize:hover {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/minimise.svg') !important;
  opacity: 1 !important;
}
.win-maximize:hover {
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/blue-maximise.svg') !important;
  opacity: 1 !important;
}

#friends > div.friends-header > div.tab-bar.UNIQUE > div{
color: #00CCCC !important;}

#friends > div.friends-header > div.btn{
color: #00CCCC !important;}

#app-mount > div > span.theme-dark > div > div > div.body {
background-color: #3d3d3d !important;
}

#app-mount > div > span.theme-dark > div > div > div.footer {
background-color: #3d3d3d !important;
}


#app-mount > div > span.theme-light > div > div > div.body {
background-color: #3d3d3d !important;
}

#app-mount > div > span.theme-light > div > div > div.footer {
background-color: #3d3d3d !important;
}

#app-mount > div > span.theme-dark > div > div > div.body > div > div{
color: #00CCCC !important;}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.guilds-wrapper > div > button{
color: #00CCCC !important;}

#app-mount > div > div.app.flex-vertical.theme-light > div > section > div.guilds-wrapper > div > button{
color: #00CCCC !important;
opacity: 0.4 !important;
}

#app-mount > div > div.app.flex-vertical.theme-light > div > section > div.guilds-wrapper > div > button:hover:after{
opacity: 1 !important;}

.theme-light .message-group{
  border: none !important;
}

.theme-light .highlight{
  background-color: #232323 !important;
}
div.settings-right > div.settings-actions{
background-color: #3d3d3d !important;}


/* Exclamation, Invite, Mobile and Twitter SVGs */
.chat .welcome-message .item-container .icon.exclamation { 
    background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/exclamation.svg'); 
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > div > div > div > div > div:nth-child(3) > div{
background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/invite.svg') !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > div > div > div > div > div:nth-child(4) > div{
background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/mobile.svg') !important;
}

#app-mount > div > div.app.flex-vertical.theme-dark > div > section > div.chat.flex-vertical.flex-spacer > div.content.flex-spacer.flex-horizontal > div.flex-spacer.flex-vertical > div > div > div > div > div:nth-child(5) > div{
background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/twitter.svg') !important;
}

.guilds .avatar-small{
border:none !important;} 


.spinner-inner {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
}

.spinner-wandering-cubes .spinner-item {
    background-color: #00CCCC;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: spinner-wandering-cubes 1.8s infinite ease-in-out;
    animation: spinner-wandering-cubes 1.8s infinite ease-in-out;
}


.jump-to-present-bar button{
  background-color: #3d3d3d !important;
  color: #00CCCC !important;
}

.chat .jump-to-present-bar .spinner {
  background-color: #3d3d3d !important;
  color: #00CCCC !important;
}

.new-messages-bar{
  background-color: #3d3d3d !important;
}

.spinner-pulsing-ellipsis .spinner-item{
  background-color: #00CCCC !important;
  margin-bottom:-10px !important;
}

div.tab-bar-item.selected{
  color: #00CCCC !important;
}


.guild-header header {
    position: absolute;
    right: 0px;
    border: transparent;
    color: #ffffff;
    height: 58px;
    width: 140%;
}




.checkbox span {
    color: #a6a6a6 ;
    padding-left: 30px;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
}


.checkbox .checkbox-inner span {
    border-radius: 10px;
    height: 22px;
    width: 50px;
    padding-bottom: 11px;
    background-color: #a8a8a8 !important;
    background-image: url(https://i.imgur.com/XVZz4KO.png) !important;
    background-size: 44%;
    background-repeat: no-repeat;
    border: none;
}

.checkbox .checkbox-inner input[type=checkbox]:checked+span:after {
    margin-left: 15px !important;
    border: none !important;
}

.checkbox .checkbox-inner input[type=checkbox]:checked+span {
    width: 50px;
    transform: rotate(180deg) !important;
    background-color: #00CCCC !important;
}

div.avatar-uploader-inner {
    margin-top: 20px !important;
    width: 200px !important;
    height: 200px !important;
    background-size: cover !important;
}

button.btn.icon.icon-logout:hover {
    background-color: #00CCCC !important;
    border-radius: 5px;
}

div.scroller.guilds {
  margin-top:0px !important;
  margin-bottom:0px !important;
}

div.avatar-small{
  border-radius:4px !important;
}

.welcome-message h1 {
  color: #00CCCC !important;
}

.item-group{
  background-color: #232323 !important;
}

.item-group .item{
  background-color: #232323 !important;
  color: #00CCCC !important;}
}

.emoji-picker .scroller .emoji-item.selected {
  border-bottom: 2px solid #00CCCC;
}

.emoji-picker .categories .item.selected{
  border-bottom-color: #00CCCC !important;
}


#bd-themes-pane > ul > li{
  border:none !important;
}

.bda-slist li{
  border: none !important;
}

.scroller .bda-description{
  border: none !important;
}

.option-popout .small-popout-box{
  background-color: #232323 !important;
}

.option-popout .small-popout-box .btn-item{
  background-color: #232323 !important;
color: #00CCCC !important;}


span[style='background-image: url("/assets/70b7e4bf8b79bb44805705ef2611393b.svg");'] {
    background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/bell.svg') !important;
} 
span[style*="/assets/ac9e460931395610d173fd5db87399b7.svg"] {
    background: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/bell-muted.svg') !important;
}

span[style='background-image: url("/assets/cfb80ab4c0c135cdcb4dbcf0db124c4d.svg");'] {
    background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/questionmark.svg') !important;
}
span[style='background-image: url("/assets/d32f71be1ee4fd022a802b7989c6fbe0.svg");'] {
    background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/pin.svg') !important;
}

span[style='background-image: url("/assets/535815751d1ba2ac3d45300dca6356d9.svg");']{
  background-image: url('https://ditmcouk.ipage.com/noottech/discord-icons/blue/person.svg') !important;}





div.option-popout.small-popout-box{
background-color: #232323 !important;
border: none;}
div.btn-item{
background-color: #232323 !important;
color: #00CCCC !important;
border:none;}


.context-menu .item-toggle .checkbox {
    pointer-events: none;
    transform: scale(.8);
    cursor: pointer!important;
    right: 10px;
    margin-top: -5px;
    position: absolute;
    overflow: visible !important;
}
div.flex-spacer.flex-vertical form{
    background: none;
}

/* Server Stuff*/
.guild-header header {
    box-shadow: none;
}


div#voice-connection{
  border: none !important;
}