@import "./highlightjs.css";

body {
  --color-primary: #f1f1f1;
}

.page,
select,
option,
body {
  color: #f1f1f1;
  background-color: #414141;
}

.Resizer {
  background-color: #666;
}

.emoji-dialog .emoji-dialog-header li.active,
.emoji-dialog {
  background-color: #333;
}

.emoji-dialog .emoji-dialog-header {
  background-color: #252526;
}

.emoji-dialog .emoji-row .emoji:hover {
  background-color: #222;
}

.arrow-top:before {
  border-color: transparent transparent #252526 transparent;
}

.arrow-bottom:before {
  border-color: #252526 transparent transparent transparent;
}

.divider {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.primary {
  background-color: #252526 !important;
}

.accent {
  background-color: #0088ff !important;
}

.accent-pale {
  background-color: #333333 !important;
}

.text-accent {
  color: #0088ff !important;
}

.text-warning {
  color: #f5a623 !important;
}

.warning-pale {
  background-color: rgba(245, 166, 35, 0.2) !important;
  border-color: rgba(245, 166, 35, 0.4) !important;
}

.gray,
.primary-pale {
  background-color: #333 !important;
  border-color: #333 !important;
}

.gray-pale {
  background-color: #333 !important;
}

.gray.outline {
  border-color: #666 !important;
  color: #f1f1f1 !important;
}

.secondary-pale {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.text-dark,
.text-black {
  color: #fff;
}

.text-primary,
.primary-pale.text-tint,
.primary-pale .active {
  color: #8c9eff !important;
}

.primary.outline {
  border-color: #888 !important;
  color: #888 !important;
}

.primary.outline:hover {
  background-color: #888;
  color: #222;
}

.layer,
.layer.display {
  background-color: #252526;
  border-color: #252526;
  color: #f1f1f1;
}

.hljs-addition {
  background-color: #144212 !important;
}

.hljs-deletion {
  background-color: #600 !important;
}

.box,
.white {
  background-color: #252526 !important;
  border-color: #252526 !important;
  color: #f1f1f1 !important;
}

.shadow-divider {
  box-shadow: inset 0 -0.05rem 0 rgba(255, 255, 255, 0.15);
}

.layer {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.markdown-content a {
  color: #8c9eff;
}

.markdown-content h1 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.markdown-content blockquote {
  color: rgba(255, 255, 255, 0.65);
  border-left: 4px solid rgba(255, 255, 255, 0.1);
}

.display-backdrop {
  background-color: rgba(255, 255, 255, 0.3);
}

.input,
.textarea,
.select > select {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.iconbutton {
  color: #999;
}

.iconbutton:hover {
  color: #8c9eff;
}

.iconbutton:focus {
  background-color: #222;
}

.input[readonly],
.textarea[readonly],
.select > select[readonly],
.input[disabled],
.textarea[disabled],
.select > select[disabled],
.input .disabled,
.textarea .disabled,
.select > select .disabled {
  background-color: unset;
  opacity: 0.5 !important;
}

.info-pale {
  background-color: #666 !important;
  border-color: #666 !important;
}

.highlight {
  background-color: #e65100 !important;
}

kbd,
code {
  color: #8c9eff;
}

.hint,
[data-hint]:before {
  background-color: #222;
  color: #f1f1f1;
  border-color: rgba(255, 255, 255, 0.25);
}

.state:hover:after,
a:hover:after,
.state.hover:after,
a.hover:after,
.btn:hover:after,
.btn.hover:after {
  background: rgba(255, 255, 255, 0.1);
}

.app-login {
  background-color: #252526;
  background-image: linear-gradient(135deg, #333 0%, #252526 100%);
}

.app-login-form > .control > label {
  color: #999;
}

.nav-pills.nav-sm > a.active,
.bg-primary {
  background-image: linear-gradient(-225deg, #8c9eff 0%, #697bdb 100%);
}

.app-navbar {
  background: linear-gradient(224deg, #414141 0%, #333 100%) !important;
}

.app-chats-menu {
  background-color: #222;
}

.app-chats-menu-list .item.active {
  background-color: #1a1a1a !important;
}

.app-chat-group-list .app-group-list .heading > .title {
  color: #8c9eff;
}

.app-chat-header,
.app-chat-header > .toolbar,
.app-chat-transfers {
  background-color: #252526;
}

.app-chat-transfers {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.public-DraftEditorPlaceholder-root {
  color: #aaa;
}

.app-message-card > header .cell .subtitle {
  color: #aaa;
}

.app-chat-sendbox-toolbar {
  background-color: #252526;
}

.app-chats-cache {
  background-color: #414141;
}

.app-chat-sidebar .tabs > .nav {
  background-color: #2d2d2d;
}

.app-chat-sidebar {
  background-color: #252526;
}

.app-chat-sidebar .tab-pane {
  color: #f1f1f1;
}

.app-chats-history-header > .search-control > .search > .select > select {
  background-color: #222;
  color: #8c9eff;
}

.app-select-panel-tree .group-list .heading > .title {
  color: #aaa;
}

.app-chat-history-search-result {
  background-color: #252526;
  border-left: 1px solid #414141;
  border-right: 1px solid #414141;
}

.app-chats-menu-search > .control input::placeholder {
  color: #aaa;
}

.app-exts-nav {
  background-color: #414141;
}

.app-exts-nav > a::before {
  background-color: #333;
}

.app-exts-nav > a.active::before {
  background-color: #252526;
}

.app-exts-nav > a > .avatar {
  color: #666;
  filter: brightness(1.5);
}

.app-exts-app {
  background-color: #252526;
  color: #f1f1f1;
}

.app-web-app webview {
  background-color: #fff;
}

.app-exts-list > .app-ext-list-item-dev {
  background-color: #222;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.15);
}

.app-ext-list-item-type-label {
  filter: brightness(1.5);
}

.app-exts-list > .app-ext-list-item-dev .errors,
.app-exts-list > .app-ext-list-item-dev .infos {
  background-color: #333;
}

.app-ext-common-header > .nav > a.active {
  color: #8c9eff;
}

.is-send-by-me .app-message-content-code > .footer,
.app-message-content-code > .footer {
  background: linear-gradient(0deg, #333 0%, rgba(0, 0, 0, 0) 100%);
}

.is-send-by-me .app-message-content-code > .footer > .btn > .icon,
.app-message-content-code > .footer > .btn > .icon {
  background: #555;
  box-shadow: 0 0 0.25rem #555;
}

.app-message-actions:hover + .app-message-content {
  outline: #414141 2px solid;
}

.sharing .app-message-actions + .app-message-content {
  outline: #414141 4px solid;
  background-color: #414141;
}

.app-message-bubble {
  background-color: #414141;
}

.app-message-bubble .app-message-replied {
  background-color: #333333ab;
}

.app-message-replied .app-message-bubble {
  background-color: #333333ab;
}

.is-send-by-me .app-message-bubble .app-message-replied {
  background-color: #414141ab;
}

.is-send-by-me .app-message-replied .app-message-bubble {
  background-color: #414141ab;
}

.is-send-by-me .app-message-bubble {
  background-color: #333;
}
.scroll-list .app-message-divider > .content {
  background-color: #252526;
}


.progress > .box.primary-pale {
  background: rgba(255, 255, 255, 0.1) !important;
}

.progress .box > .bar.primary {
  background: #8c9eff !important;
}

.status-dot {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.status-dot.status-unverified,
.status-dot.status-disconnect {
  background-color: #666 !important;
}

.app-contacts {
  background: #252526;
}

.app-groups-view > .content > .list > .item,
.app-contacts-view > .content > .list > .item {
  border-color: #414141;
}

.app-contacts-side > .nav {
  background-color: #3a3a3a;
}

.contextmenu-member_profile .dropdown-menu > .item > .title,
.contextmenu-member_profile .dropdown-menu > .item > .content,
.app-chat-sidebar-profile .input,
.app-contacts-side .app-groups-menu > .item,
.group-list .heading > .title {
  color: #f1f1f1;
}

.app-contacts-side .app-groups-menu > .item.active,
.app-contacts-side .app-depts-tree > .app-list-item.active,
.app-contacts-side .app-depts-tree .heading.active {
  background: #444;
}

.app-contacts-side .app-depts-tree .heading:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

#app-about-dialog {
  background: #000;
}

#app-about-dialog img {
  filter: brightness(2);
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
  background-color: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-corner {
  background-color: #252526;
}
