:root {
	--bs-border-color: #57595c;
	--bs-link-color: #80ff00;
	--bs-link-hover-color: #fffcb3;
}

body {
	--mainColor: #66a329;
	--mainColorVeryLight: #4F0532;
	--mainColorLightest: #710E49;
	--mainHoverColor: #80cc33;
	--mainBackgroundColor: #0d0d0d;
	--mainForegroundColor: #cbcbcd;
	--mainBackgroundHoverColor: #fef3ec;
	--menuBackgroundColor: #1a1a1a;
	
	/* Compat with PeerTube < 3.2 */
	--submenuColor: #202020;
	--submenuBackgroundColor: #0d0d0d;

	--inputForegroundColor: #e0e0e1;
	--inputBackgroundColor: var(--mainBackgroundColor);
	--inputPlaceholderColor: #d1d1d1;
	--textareaForegroundColor: #e0e0e1;
	--textareaBackgroundColor: var(--mainBackgroundColor);
	--markdownTextareaBackgroundColor: #30363d;
	--greyForegroundColor: #f2f2f2;
	--greyBackgroundColor: #464340;
	--greySecondaryBackgroundColor: #353431;
	--actionButtonColor: #f2f2f2;
	--activatedActionButtonColor: #fff;
	--channelBackgroundColor: #303030;
	--inputBorderColor: #a5a5a5;
	--hoverColor: #ffffff0d;
}

/* width */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	border: none;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--mainColor); 
	border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--mainHoverColor); 
}

a {
	color: #fff !important;
}

a:hover, a>span:hover {
	color: var(--bs-link-hover-color) !important;
}

button {
	color: var(--actionButtonColor) !important;
}

input[type=text] {
	color: var(--inputForegroundColor) !important;
	background: none !important;
	border: 1px solid var(--inputBorderColor) !important;
	border-radius: 6px !important;
}

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

.accordion-button.collapsed {
	color: var(--mainForegroundColor);
}

.alert-danger {
	color: #fff !important;
	background-color: #cc2900 !important;
	border-color: #b32400 !important;
}

.alert-warning {
	--bs-alert-color: #fff;
	--bs-alert-bg: var(--mainColorVeryLight);
	--bs-alert-border-color: var(--mainColorVeryLight);
}

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

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

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

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

.feed {
	width: 120% !important;
}

.feed:hover {
	color: var(--bs-link-hover-color) !important;
}

.icon-logo {
	background-color: transparent;
	background-size: cover;
	background-origin: content-box;
	min-height: 30px;
	min-width: 30px;
	padding: 0;
}

.input-group-text {
	color: var(--mainForegroundColor) !important;
	background: none !important;
}

li.suggestion:last-of-type, li.suggestion a {
	background: var(--greySecondaryBackgroundColor) !important;
}

.logged-in-block {
	background-color: var(--menuBackgroundColor) !important;
}

.logged-in-menu {
	border: none !important;
}

.modal {
	--bs-modal-color: #fff;
	--bs-modal-bg: #ffff00;
	--bs-modal-border-color: var(--bs-border-color);
	--bs-modal-border-width: 2px;
}

.nav-pills {
	--bs-nav-pills-link-active-color: #fff !important;
	--bs-nav-pills-link-active-bg: var(--mainColor) !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	color: var(--bs-nav-pills-link-active-color) !important;
	background-color: var(--bs-nav-pills-link-active-bg) !important;
}

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

.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;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
	background-color: #6a6562 !important;
	color: #fff !important;
}

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

.notification .message a{
	color: var(--bs-link-color) !important;
}

.notification .message a:hover{
	color: var(--bs-link-hover-color) !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(--greySecondaryBackgroundColor);
	--bs-popover-body-color: var(--greyForegroundColor);
	--bs-popover-box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .15);
	--bs-popover-header-color: var(--greyForegroundColor);
}

.popover-notifications.popover .popover-body {
	padding: 8px 8px 8px 0 !important;
}

.help-popover .popover-body {
	background-color: var(--greyBackgroundColor) !important;
}

.peertube-title:hover{
	color: var(--bs-link-hover-color) !important;
}

.peertube-title .icon.icon-logo {
	margin-inline-end: 4px !important;
}

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

.progress>span {
	color: #fff !important;
}

.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;
}

.search-highlight {
	font-weight: bold !important;
}

.text-gray-light:hover {
	color: #fff !important;
}

.video-add-nav a.nav-link {
	border: 2px solid var(--mainForegroundColor) !important;
}

.upload-video-container{
	border: 2px solid var(--mainForegroundColor) !important;
	border-top: none !important;
}

.video-add-nav {
	border-bottom: 2px solid var(--mainForegroundColor) !important;
}