:root {
  --bs-border-color: #3d3f41;
  --bs-link-color: #F57200;
  --bs-link-hover-color: #2467cc
}

body {

  --mainBackgroundColor: #121212;
  --mainForegroundColor: #FFF;
  --mainBackgroundHoverColor: #fef3ec;

  /* Compat with PeerTube < 3.2 */
  --submenuColor: #202020;
  --submenuBackgroundColor: #181818;

  --inputForegroundColor: #e0e0e1;
  --inputBackgroundColor: var(--mainBackgroundColor);
  --inputPlaceholderColor: #d1d1d1;
  --textareaForegroundColor: #e0e0e1;
  --textareaBackgroundColor: var(--mainBackgroundColor);
  --markdownTextareaBackgroundColor: #30363d;
  --greyForegroundColor: #bbb;
  --greyBackgroundColor: #464340;
  --greySecondaryBackgroundColor: #4e4d4a;
  --actionButtonColor: #bbb;
  --activatedActionButtonColor: #fff;
  --channelBackgroundColor: #303030;
  --mainColorVeryLight: #242320;
  --mainColorLightest: #3f3834;
  --mainColor: #0083F5;
  --inputBorderColor: #a5a5a5;
  --hoverColor: #2d2d2d0d;
  --mainHoverColor: #2a4858;
}

.logged-in-block,
.logged-in-block > div {
  background-color: #181818 !important;
}

.danger-zone button,
input[type=submit] {
  background-color: #af3221 !important;
}

.danger-zone button:hover,
input[type=submit]:hover {
  background-color: #61261e !important;
}

.channel-info {
  background-color: #1c1c1c !important;
}

.menu-link:hover {
  color: #F57200 !important;
}

.dropdown-header {
  color: var(--mainForegroundColor);
}

.dropdown-item:active {
  background-color: var(--hoverColor) !important;
}

.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--hoverColor) !important;
}

.dropdown-menu,
.dropdown-divider {
  border-color: var(--inputBorderColor);
}

.icon-logo {
  background-color: #fff;
  background-origin: content-box;
  border-radius: 20px;
  min-height: 29px;
  min-width: 29px;
  padding: 3px 4px 3px 8px;
}

.ng-dropdown-panel {
  border-color: var(--inputBorderColor);
}

.ng-optgroup {
  background-color: var(--mainBackgroundColor) !important;
  color: var(--inputPlaceholderColor) !important;
}

.ng-option-marked,
.ng-select-container,
.ng-select-container.ng-has-value,
.ng-select-container.ng-select-focused.ng-select-opened,
.ng-select-multiple {
  background-color: var(--mainBackgroundColor) !important;
  color: var(--mainForegroundColor) !important;
}

.ng-option:hover,
.ng-option.ng-option-selected {
  background-color: #555 !important;
  color: var(--mainForegroundColor) !important;
}

.ng-select-container .ng-arrow,
.peertube-select-container::after {
  border-top-color: var(--mainForegroundColor) !important;
}

.ng-select.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
  border-bottom-color: var(--mainForegroundColor) !important;
}

.notification {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.notification svg,
.notifications-header svg,
.menu-link svg {
  color: var(--greyForegroundColor) !important;
}

.notification.unread {
  background-color: #ffffff0d !important;
}

.notifications-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--greyForegroundColor) !important;
}

.popover {
  --bs-popover-bg: var(--mainBackgroundColor) !important;
  --bs-popover-body-color: var(--mainForegroundColor) !important;
  --bs-popover-box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .15) !important;
  --bs-popover-header-color: var(--mainForegroundColor) !important
}

.progress {
  background-color: var(--greySecondaryBackgroundColor) !important;
}

.progress>span,
.all-notifications,
.notifications-header svg:hover,
.menu-link:hover svg {
  color: var(--mainForegroundColor) !important;
}

.root-header {
  box-shadow: 0 1px 3px rgba(200, 200, 200, .10) !important;
}

input#search-video {
  box-shadow: rgba(200, 200, 200, 0.1) 0 1px 20px 0 !important;
}