@function darker($color, $tone) {
	$adjust: -16*$tone;
	@return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
}

@function lighter($color, $tone) {
	$adjust: 16*$tone;
	@return adjust-color($color, $red: $adjust, $green: $adjust, $blue: $adjust);
}

html, body {
	background-color: $bg-color;
	color: $font-color;
}

a, a[onclick] {
	color: $primary-color;

	&:hover {
		color: darken($primary-color, 3);
	}
}

table {
	&.table-bordered {
		td, th {
			border-color: $card-color-light;
		}
	}

	&.table {
		& > tbody {
			& > tr {

				@each $color, $value in $theme-colors {
					&.#{$color} {
						& > td {
							background: rgba($value, 0.1);
							border-color: rgba($value, 0.2);
							color: $font-color;

							span {
								color: $value;
							}
						}
					}
				}

				*, & > td {
					color: $font-color;
				}
			}
		}
	}

	td[colspan$="10"] img, td[colspan$="10"] {
		color: $font-color;
		background-color: transparent;
	}
}

@each $color, $value in $theme-colors {
	.text-#{$color} {
		color: $value !important;
	}
}

.table .table {
	background-color: transparent;
}


small {
	color: $font-color-light;
}

.block {
	background: $card-color;
	border-color: $card-color;
	box-shadow: $shadow;
	border-radius: $border-radius;

	.block_head {
		color: $title-color;

		a {
			color: $title-color;
		}
	}

	&.block-search {
		& > .input-search {
			background: $input-color;
			border-top: 1px solid $input-color;
			border-left: 1px solid $primary-color;
			border-bottom: 1px solid $input-color;

			i.fa-search {
				color: $primary-color;
			}
		}
	}

	&.block-table {
		& > .table-responsive {
			border-color: $card-color-light;
		}
	}
}

.wapper {
	.navigation {
		background: $card-color-light;
		border-color: $card-color-light;
		box-shadow: $shadow;

		.breadcrumb {
			li {
				& > a {
					color: $font-color;
				}

				&.active {
					color: $font-color-light;
				}
			}
		}
	}

	.header {
		background: $header-color;
		border-bottom: 1px solid $card-color;

		.collapsible-menu {
			& > li {
				& > a {
					background: $header-color;
					color: $title-color;
					border-bottom: 1px solid $header-color;

					&::after, &::before {
						background: $card-color-light;
					}

					&.open {
						background: $card-color-light;
						border-color: $primary-color;
					}
				}

				ul {
					background: $card-color-light;
					border-radius: 0 0 $border-radius-sm $border-radius-sm;

					& > li {
						&:hover {
							background: rgba($card-color, 0.6);
						}

						& > a {
							color: $font-color;
							border-bottom: none;
						}
					}
				}
			}

			&.user-menu {
				& > li {
					& > a {
						h3 {
							color: $title-color;
						}

						p {
							color: $font-color;
						}
					}
				}

				.point {
					background: $green-color;
					border: 2px solid $card-color-light;
				}
			}
		}

		.menu-trigger {
			background: $card-color-light;
			color: $title-color;
		}
	}

	@media (max-width: 991.99px) {
		.header {
			background: $header-color;
			border-bottom: 1px solid $card-color;

			.collapsible-menu {
				& > li {
					border-radius: $border-radius;
					overflow: hidden;

					& > a {
						border-bottom: 1px solid $card-color;
						color: $title-color;

						&.open {
							background: $card-color-light;
							border-color: $primary-color;
						}
						&:hover {
							background: $card-color-light;
						}
					}
					ul {
						& > li {
							& > a {
								color: $title-color;
								border-bottom: 1px solid $card-color-light;

								&:hover {
									background: transparent;
								}
							}
						}
					}
				}
				&.user-menu {
					& > li {
						border-radius: 0;
						overflow: visible;

						& > ul {
							background: $card-color-light;
							box-shadow: $shadow;

							& > li {
								&:hover {
									background: $card-color-light;
								}
								& > a {
									color: $title-color;
								}
							}
						}

						& > a {
							background: $header-color;

							& > p {
								color: $title-color;
							}
							&.open {
								background: $card-color-light;
								border-color: $primary-color;
							}
						}
					}
				}
			}
		}
	}

	.monitoring {
		.server {
			border-radius: $border-radius;
			border-color: $card-color;
			border-bottom: 2px solid $pink-color;
			background: $card-color;
			box-shadow: $shadow;

			&:nth-child(odd) {
				background: $card-color;
				border-bottom: 2px solid $blue-color;
			}

			&:nth-child(3n) {
				background: $card-color;
				border-bottom: 2px solid $orange-color;
			}

			h3 {
				color: $font-color;
			}

			.map-image {
				border-radius: $border-radius-sm;
			}

			& > p {
				color: $font-color-light;

				a {
					color: $font-color-light;
				}
			}
		}
	}

	& > .footer {
		background-color: $card-color;
		border-color: $card-color;
		box-shadow: none;

		strong {
			color: $title-color;
		}

		ul li a {
			color: $font-color;
		}

		hr {
			border-color: $card-color-light;
		}
	}
}

.btn {
	border: 2px solid transparent;
}

a, input, button, label {
	box-shadow: none;

	&.btn {
		&.active:focus, &.focus, &:focus, &.active, &:active, &:focus:active {
			box-shadow: none;
		}

		border-radius: $border-radius-sm;

		&.btn-primary {
			background: $primary-color;
			border-color: $primary-color;

			&:not([disabled]):not(.disabled) {
				&:active, &:hover, &:focus, &:focus:active, &:active:focus {
					color: $white;
					background: darker($primary-color, 2);
					border-color: darker($primary-color, 2);
					box-shadow: $shadow;
				}
			}
		}

		&.btn-outline-primary, &.btn-default {
			background: transparent;
			color: $primary-color;
			border-color: $primary-color;

			&:not([disabled]):not(.disabled) {
				&:active, &:hover, &:focus, &:focus:active, &:active:focus {
					color: $white;
					background: darker($primary-color, 2);
					border-color: darker($primary-color, 2);
					box-shadow: $shadow;
				}
			}
		}
	}
}

.form-control::placeholder {
	color: $font-color-light;
}

textarea.form-control, input.form-control, input[type="file"], select.form-control, select[type="file"], .form-control {
	background: $input-color;
	border-color: $input-border-color;
	border-radius: $border-radius;
	color: $font-color;
	box-shadow: none;

	&:focus {
		color: $font-color;
		border-color: $input-border-color;
		background: $input-color;
		box-shadow: $shadow;
	}
}

.input_error {
	border-color: $red-color !important;
	background-color: rgba($red-color, 0.2) !important;
}

.input_success {
	border-color: $green-color !important;
	background-color: rgba($green-color, 0.7) !important;
}

.error_message {
	color: $red-color !important;
}

.success_message {
	color: $green-color !important;
}

#last_activity span p a, #mybans span p a, table.table > tbody > tr > td a {
	color: $primary-color;
}

#last_activity span p, #mybans span p {
	color: $font-color;
}

#new_news div:not(.loader) p:last-child, .news div:not(.loader) p:last-child {
	color: $font-color-light;
}

#main-slider {
	&.carousel {
		border-radius: $border-radius;

		.carousel-control-prev, .carousel-control-next {
			border-radius: $border-radius-sm;
			border: 1px solid $card-color;
			background: $card-color;
		}
	}
}

#online_users a span:nth-child(3) {
	color: $font-color;
}

#top_users {
	a {
		div {
			& > span {
				color: $font-color;
			}

			& > p span {
				color: $font-color;

				i::before {
					color: rgba($primary-color, 0.5);
				}
			}
		}
	}
}


#forum .row .col-lg-8 > div p span i::before, #forum.row .col-lg-8 > div p span i::before, #forum_topics .row .col-lg-8 > div p span i::before, #forum_topics.row .col-lg-8 > div p span i::before {
	color: rgba($primary-color, 0.5);
}

#events .event {
	& > div > a, span {
		color: $font-color;
	}
}

.vertical-center-line::after {
	background: $card-color-light;
}

.vertical-navigation {
	ul {
		li {
			border-color: $card-color;

			&:hover, &.active {
				background: rgba($card-color, 0.6);
				border-color: $primary-color;
			}

			a {
				border-color: $card-color-light;
				color: $font-color;

				&.active {
					background: rgba($card-color, 0.6);
					border-color: $primary-color;

					&::before {
						background-color: $card-color-light;
					}
				}
			}
		}
	}
}

.empty-element {
	border-top: $card-color-light;
	color: $font-color-light;
}

.servers-online-line {
	background: $input-color;
	border: $input-border-color;

	.progress-bar {
		@each $color, $value in $theme-colors {
			&.bg-#{$color} {
				background-color: $value !important;
				border-color: $value;
			}
		}
	}

	.progress-val {
		color: $title-color;
	}
}

.label, #stats .label {
	@each $color, $value in $theme-colors {
		&.label-#{$color} {
			background-color: $value;
			color: $white;
			border-color: $value;
		}
	}
}

#stats .progress span {
	color: $white;
}

.progress {
	background-color: $input-color;
	border-radius: $border-radius-sm;
	overflow: hidden;
	color: $white;

	span {
		color: $white;
	}
}

.form-group label h4 {
	color: $title-color;
}

.noty-block, .bs-callout {
	color: $font-color;
	background-color: darken($card-color-light, 1);
	border: 1px solid darken($card-color-light, 4);
	border-left: 3px solid darken($card-color-light, 4);
	border-radius: $border-radius;

	@each $color, $value in $theme-colors {
		&.#{$color}, &.bs-callout-#{$color} {
			color: $white;
			background-color: $value !important;
			border-color: $value;

			* {
				color: $white;
			}
		}
	}
}

.noty_bar {
	.noty_message {
		background: $primary-color;
		color: $white;
		border: 1px solid $primary-color;
		box-shadow: none;

		a {
			color: $white;
		}
	}
	&.noty_type_error {
		.noty_message {
			background: $red-color;
			border-color: $red-color;
		}
	}
	&.noty_type_success {
		.noty_message {
			background: $green-color;
			border-color: $green-color;
		}
	}
}

#smile_btn {
	filter: brightness(0%) contrast(1%);
}

.modal {
	.modal-content {
		background-color: $card-color;

		.modal-header {
			h4 {
				color: $title-color;
			}
		}
	}
}

.close {
	color: $title-color;
	text-shadow: 0 1px 0 rgb(0, 0, 0);

	&:hover {
		color: $title-color;
	}
}

#chat #chat_messages .chat_message {
	.message {
		.info {
			.date {
				color: $font-color-light;
			}
		}
	}
}

#forum > h2, #forum .col-lg-12 > h2, #forum_topics > h2, #forum_topics .col-lg-12 > h2 {
	background: $card-color-light;
	border-top: $card-color-light;
	border-left: 1px solid $primary-color;
	border-bottom: $card-color-light;
	color: $title-color;
}

#new_news div:not(.loader) a h3, .news div:not(.loader) a h3 {
	color: $primary-color;
}

#forum .row .col-lg-8 > div h3 a, #forum.row .col-lg-8 > div h3 a, #forum_topics .row .col-lg-8 > div h3 a, #forum_topics.row .col-lg-8 > div h3 a,
#forum .row .col-lg-4 p a, #forum.row .col-lg-4 p a, #forum_topics .row .col-lg-4 p a, #forum_topics.row .col-lg-4 p a {
	color: $primary-color;
}

#forum .row .col-lg-8 > div p, #forum.row .col-lg-8 > div p, #forum_topics .row .col-lg-8 > div p, #forum_topics.row .col-lg-8 > div p,
#forum .row .col-lg-4 p, #forum.row .col-lg-4 p, #forum_topics .row .col-lg-4 p, #forum_topics.row .col-lg-4 p,
#forum .row .col-lg-8 > div p span a, #forum.row .col-lg-8 > div p span a, #forum_topics .row .col-lg-8 > div p span a, #forum_topics.row .col-lg-8 > div p span a,
#forum .row .col-lg-8 > div p span, #forum.row .col-lg-8 > div p span, #forum_topics .row .col-lg-8 > div p span, #forum_topics.row .col-lg-8 > div p span {
	color: $font-color-light;
}

a.small {
	color: $font-color;
	border-color: $primary-color;

	&:hover, &:focus, &:visited {
		color: $title-color;
	}
}

.registration .privacy-policy {
	border: 1px solid $card-color-light;
	border-left: 3px solid $card-color-light;
	background: $input-color;
	color: $font-color-light;
	border-radius: $border-radius;
	line-height: 1.5;
	font-size: 13px;
}

.text-error, .text-danger {
	color: $red-color !important;
}

.pagination {
	& > li, & > .disabled {
		& > a, & > span {
			color: $font-color;
			background-color: $card-color;
			border-color: $card-color;

			&:hover, &:focus {
				color: $title-color;
				background-color: $primary-color;
				border-color: $primary-color;
			}
		}
	}

	& > .active {
		& > a, & > span {
			color: $title-color;
			background-color: $primary-color;
			border-color: $primary-color;

			&:hover, &:focus {
				color: $title-color;
				background-color: darken($primary-color, 3);
				border-color: darken($primary-color, 3);
			}
		}
	}
}

.profile-page #friends::after {
	background: linear-gradient(to top, $card-color, rgba(255, 255, 255, 0));
}

.topic-answers div[id^="answer"] .center-area::after, .topic-answers div[id^="answer"] .bottom-area::after {
	content: " ";
	height: 100%;
	position: absolute;
	width: 1px;
	background: rgb(42, 41, 49);
	top: 0;
}

blockquote {
	border-radius: $border-radius;
	padding: 10px;
	margin: 0 0 5px;
	border-left: 5px solid $card-color-light;
	background: rgba($card-color-light, 0.5);
}

.comment > div .info .date, .comment > div .dell_message, .comment > div .edit_message {
	color: $font-color-light;
}

.bs-popover-auto[x-placement^="top"] .arrow::after, .bs-popover-top .arrow::after {
	border-top-color: $card-color-light;
}

.popover {
	background: $card-color-light;
	border-color: $card-color-light;

	.popover-body {
		color: $font-color;
	}
}

.owl-carousel.smiles_panel .owl-prev, .owl-carousel.smiles_panel .owl-next {
	border-color: $card-color;
}

.owl-carousel.smiles_panel .smilebtn {
	border-color: $card-color;

	&:hover, &:active {
		background: $card-color;
	}
}

.table-responsive,
#last_activity span, #mybans span, #top_users a, #online_users a, #chat #chat_messages .chat_message, #chat, #events .event,
#forum .row .col-lg-8, #forum.row .col-lg-8, #forum_topics .row .col-lg-8, #forum_topics.row .col-lg-8,
#forum .row .col-lg-4, #forum.row .col-lg-4, #forum_topics .row .col-lg-4, #forum_topics.row .col-lg-4,
#new_news div:not(.loader), .news div:not(.loader), .new > p:last-child, .comment, .friend, .user, #companions div {
	border-color: $card-color-light;
}

#bans tr td:nth-child(1):hover, #tickets tr td:nth-child(2):hover, #open_tickets tr td:nth-child(2):hover,
#close_tickets tr td:nth-child(2):hover, #search_ban_res_min tr td:nth-child(2):hover {
	background-color: $card-color-light;
}

.form-control-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
	border-radius: $border-radius-sm;
}

.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

table.table > tbody > tr > td h4.modal-title {
	color: $title-color;
}

#place_for_messages {
	.dialog {
		& > div {
			&:nth-child(1), &:nth-child(2) {
				background-color: $card-color-light;
				border-color: $card-color-light;
			}
			&:nth-child(1):hover, &:nth-child(2):hover {
				background-color: darken($card-color-light, 1);
				border-color: darken($card-color-light, 1);
			}
		}
	}
}

.pay_area .block img {
	opacity: 0.7;
	border-radius: $border-radius;
}

.purse .row .col-lg-3 {
	& > div {
		border-radius: $border-radius;
	}

	&:nth-child(1) > div, &:nth-child(2) > div, &:nth-child(3) > div, &:nth-child(4) > div {
		background-color: $card-color-light;
		border-color: $card-color-light;
		color: $title-color;
	}

	&:nth-child(1) > div {
		color: $primary-color;
	}

	&:nth-child(2) > div {
		color: $blue-color;
	}

	&:nth-child(3) > div {
		color: $pink-color;
	}

	&:nth-child(4) > div {
		color: $green-color;
	}
}

div.buy-product-key-info {
	background: rgba($white, 0.2);
	border-color: rgba($white, 0.2);
	border-radius: $border-radius;
}

.profile-page .profile table tbody tr td[colspan="2"] h4 {
	margin-left: -40px;
	background: $card-color-light;
	border-top: 1px solid $card-color-light;
	border-left: 1px solid $primary-color;
	border-bottom: 1px solid $card-color-light;
	color: $title-color;
}

.topic-answers {
	div[id^="answer"] {
		.top-area {
			background: $card-color-light;
			border-top: 1px solid $card-color-light;
			border-left: 1px solid $primary-color;
			border-bottom: 1px solid $card-color-light;
			color: $title-color;

			.right-side {
				a {
					color: $font-color-light;
				}
			}
		}
		.center-area {
			.left-side {
				img {
					background: $card-color-light;
					box-shadow: none;
					border-radius: $border-radius;
				}
				p {
					color: $font-color;

					&::after {
						background: $card-color-light;
					}
				}
			}

			.right-side {
				.edited {
					color: $font-color-light;
				}
				.signature {
					color: $font-color-light;
					border-color: $card-color-light;
				}
			}
		}
		.bottom-area {
			border-color: $card-color-light;

			&::after {
				background: $card-color-light;
			}
		}
	}
}

div.spoiler {
	div.spoiler-title {
		border-color: $card-color-light;
		background: $card-color-light;
	}
	div.spoiler-content {
		border-color: $card-color-light;
		background: $card-color;
	}
}

.new > p:last-child {
	color: $font-color-light;
}

#news a.small-new {
	border-color: $card-color-light;

	div {
		p {
			color: $font-color-light;
		}
	}
}

.reward, .product-block, #my_cases_area .opened-case {
	border-color: $card-color-light !important;
}

.sortition #prizes h5, .sortition #prizes .prize span {
	color: $card-color;
}

.monitoring-table {
	background: $card-color;
	border-color: $card-color;
	box-shadow: $shadow;
	border-radius: $border-radius;

	& > table {
		& > tbody {
			& > tr {
				& > td {
					.servers-online-line {
						background: $input-color;
						border: 1px solid $input-color;

						.progress-bar {
							@each $color, $value in $theme-colors {
								&.bg-#{$color} {
									background-color: $value !important;
									border-color: $value;
								}
							}
						}

						.progress-val {
							color: $title-color;
						}
					}

					a {
						color: $white;
					}

					&:last-child {
						& > a {
							@each $bg-color, $i in (
									$primary-color, 1
							), (
									$green-color, 2
							), (
									$blue-color, 3
							) {
								&:nth-child(#{$i}) {
									background: $bg-color;
									border: 1px solid $bg-color;

									&:hover {
										background: rgba($bg-color, 0.7);
									}

									& > i {
										color: $white;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}