//---------
//Variables
//---------
$background-color: #505166;
$links-color: rgb(55, 148, 231);
$btns-color: rgb(62, 139, 209);

$personal-color: rgb(62, 139, 209);
$personal-color-2: rgba(62, 139, 209, 0.7);
$secondary-color: #3a3e4c;

$font-name: 'Roboto';
$font-title-name: 'Proxima Nova';

$font-color: rgb(255, 255, 255);
$font-color-secondary: rgb(221, 221, 221);
$gray-font-color: rgb(196, 195, 206);
$light-font-color: rgb(166, 168, 173);
$hover-font-color: rgb(171, 172, 178);
$transparent-font-color: rgba(119, 119, 119, 0.4);

$light-border-color: #EEE;
$dark-border-color: rgba(221, 221, 221, 0.1);

$info-border-color: rgb(62, 139, 209);
$info-border-color2: rgba(62, 139, 209, 0.7);
$info-bg-color: rgba(62, 139, 209, 0.22);
$info-text-color: rgb(116, 189, 255);

$success-border-color: rgb(101, 202, 90);
$success-border-color2: rgba(101, 202, 90, 0.7);
$success-bg-color: rgb(83, 113, 61);
$success-text-color: rgb(111, 192, 97);

$warning-border-color: rgb(224, 195, 146);
$warning-border-color2: rgb(255, 187, 70);
$warning-bg-color: rgba(255, 203, 99, 0.47);
$warning-text-color: rgb(255, 195, 77);

$error-border-color: rgb(204, 49, 35);
$error-border-color2: rgba(204, 49, 35, 0.7);
$error-bg-color: rgb(113, 61, 61);
$error-text-color: rgb(231, 123, 123);

$light-bg-color: rgba(245, 245, 245, 0.5);
$light-border-color: rgb(224, 224, 224);
$light-border-color2: rgb(234, 234, 234);
$light-text-color: rgb(38, 38, 38);

//------------------
//Template selectors
//------------------
%cropping-text {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
%background-cover {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
	-moz-background-size: 100% 100% !important;
	-webkit-background-size: 100% 100% !important;
	-o-background-size: 100% 100% !important;
	background-size: 100% 100% !important;
}
@mixin fa-icons($type) {
	font-family: Font Awesome\ 5 $type;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	font-size: 1.33333em;
	line-height: 0.75em;
	vertical-align: -.0667em; 
}

//----
//Main
//----
* {
	margin: 0;
	padding: 0;
	outline: none !important;
}
html, body {
	width: 100%;
	height: 100%;
	background-color: $background-color;
	margin: 0;
	padding: 0;
	font-family: $font-name, sans-serif;
	color: $font-color;
	line-height: 20px;
	font-size: 15px;
	
}
a {
	color: $links-color;

	&.small {
		color: $light-font-color !important;
		font-size: 12px;
		border-bottom: 1px solid $personal-color-2;

		&:hover, &:focus {
			color: $gray-font-color !important;
		}
	}
	&:hover {
		color: rgb(49, 141, 224);
		text-decoration: none;
	}
	&[onclick] {
		color: $links-color;
		cursor: pointer;
	}
}

//loader
.loader {
	z-index: 1009;
	min-height: 32px;
	transition: all 0.1s;
	position: relative;
	height: 100%;
	width: 100%;

	&::after {
		content: '';
		display: block;
		height: 32px;
		width: 32px;
		background: url(../img/loader.gif);
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
}

//line
.blue-line {
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: $btns-color;
	box-shadow: 0 0 5px 0 rgba(62, 139, 209, 0.9);
}

//wapper
.wapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;

	& > .content {
		flex: 1 0 auto;

		.container.page {
			margin-top: 100px;
		}
		.mailing {
			text-transform: uppercase;
			margin-top: 50px;
			width: 100%;
			background: url(../img/mailing.png);
			text-align: center;
			padding: 150px 0 100px 0;

			h3 {
				font-family: $font-title-name;
				font-weight: 600;
				font-size: 22px;
				color: $personal-color;

				span {
					color: $font-color;
				}
			}
			p {
				font-family: $font-title-name;
			}
			input {
				margin-bottom: 40px;
				text-align: center;
			}
		}
	}

	& > .footer {
		position: relative;
		flex: 0 0 auto;
		background-color: rgb(59, 63, 77);
		padding-top: 80px;
		padding-bottom: 50px;
		color: $gray-font-color;
		font-family: $font-title-name;

		.blue-line {
			top: 0;
		}

		.block {
			margin-bottom: 20px;
		}

		.copyright {
			border-top: 1px solid $personal-color;
			padding-top: 10px;
			text-align: left;
			height: 40px;
			line-height: 40px;

			#copyright {
				height: 40px;
				line-height: 40px;
				display: inline-block;
				margin: 0;

				br {
					display: none;
				}
			}
			a {
				font-weight: 500;
			}
			p {
				display: inline-block;
				margin: 0;
			}
		}

		ul {
			position: relative;
			display: block;
			list-style: none;

			li {
				margin: 0;
				margin-bottom: 5px;
				line-height: 23px;

				a {
					text-transform: uppercase;
					font-size: 15px;
					color: $font-color;
				}
			}

			&.write_to_us {
				li {
					line-height: 40px;

					a {
						position: relative;
						padding-left: 50px;

						i {
							position: absolute;
							display: block;
							box-shadow: inset 0 0 5px 0 $personal-color,0 0 5px 0 $personal-color;
							height: 22px;
							width: 22px;
							border-radius: 50%;
							top: -2px;
							left: 0;
							padding: 4.4px 4.5px;
							font-size: 12px;
							color: $personal-color;
							border: 1px solid $personal-color;
						}
						&:hover {
							i {
								color: $font-color;
								background-color: $personal-color;
							}
						}
					}
					&:nth-child(2) {
						a {
							i {
								padding: 4.5px 4px;
							}
						}
					}
					&:nth-child(3) {
						a {
							i {
								padding: 4px 4px;
							}
						}
					}
				}
			}
		}
		.follow_us {
			text-align: right;

			a {
				display: inline-block;
				box-shadow: inset 0 0 5px 0 $personal-color,0 0 5px 0 $personal-color;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				padding: 5px;
				font-size: 17px;
				border: 1px solid $personal-color;
				margin-left: 20px;

				i {
					color: $personal-color;
				}
				&:hover {
					background-color: $personal-color;

					i {
						color: $font-color;
					}
				}
				&:nth-child(2) {
					i {
						position: relative;
						left: -1px;
					}
				}
				&:nth-child(3) {
					i {
						position: relative;
						left: -1px;
					}
				}
			}
		}
		.navigation_menu {
			text-align: right;
		}
		@media (max-width: 991.99px) {
			.follow_us {
				text-align: left;

				a {
					margin-left: 0;
					margin-right: 20px;
				}
			}
			.navigation_menu {
				text-align: left;
			}
		}
	}

	@media (min-width:1200px) {
		.container {
			max-width:1170px;
		}
	}

	//header&menu
	.header {
		position: relative;
		height: 110px;
		background: rgb(85, 88, 102);

		.logo {
			float: left;
			height: 108px;
			width: 72px;
			padding-top: 28px;

			a {
				display: block;
				height: 52px;
				width: 100%;

				img {
					height: 52px;
					width: 100%;
				}
			}
		}
	}
	@media (min-width:992px) {
		.header {
			.collapsible-menu { 
				font-size: 14px;
				list-style: none;
				padding: 0;
				margin: 0;
				width: calc( 100% - 100px);
				height: 108px;
				overflow: hidden;
				float: right;

				& > li {
					display: block;
					float: left;

					&.collapsible {
						padding-right: 20px;

						&::after {
							@include fa-icons(Free);
							font-weight: 900;
							content: "\f078";
							position: absolute;
							top: 49px;
							z-index: 1010;
							margin-left: -23px;
							font-size: 10px;
							color: $gray-font-color;
						}

						& > a {
							width: calc( 100% + 20px );
						}
					}

					& > a {
						color: $gray-font-color;
						font-family: $font-title-name;
						font-size: 14px;
						display: block;
						float: left;
						padding: 10px;
						margin: 0;
						font-weight: 400;
						line-height: 88px;
						position: relative;
						text-transform: uppercase;

						&:hover, &.open { 
							color: $font-color;
						}
					}

					& ul {
						display: none; 
						list-style: none; 
						margin: 0;
						padding: 0;
						position: absolute;
						z-index: 1011;
						top: 98px;
						background: rgb(85, 88, 102);
						overflow: hidden;
						padding: 15px 0;

						& > li {
							& > a {
								color: $gray-font-color;
								font-family: $font-title-name;
								font-size: 14px;
								text-transform: uppercase;
								margin: 0;
								display: block;
								position: relative;
								height: 35px;
								line-height: 40px;
								padding: 0 15px;

								&:hover {
									color: $font-color;
								}
							}
						}
					}
				}
			}
		}
	}
	@media (max-width: 991.99px) {
		.header {
			#hidden-menu {
				position: absolute;
				top: 110px;
				background: rgb(85, 88, 102);
				z-index: 1011;
				width: 100%;
				left: 0;
			}

			.collapsible-menu { 
				list-style: none;
				position: relative;
				padding: 0;
				margin: 0;
				border-bottom: 2px solid $personal-color;

				& > li {
					display: block;
					position: relative;

					&.collapsible {
						padding-right: 20px;

						&::before {
							@include fa-icons(Free);
							font-weight: 900;
							content: "\f078";
							position: absolute;
							top: 23px;
							z-index: 1010;
							font-size: 10px;
							right: 15px;
							color: $gray-font-color;
						}
						& > a {
							width: calc( 100% + 20px );
						}
					}

					& > a {
						color: $gray-font-color;
						font-family: $font-title-name;
						font-size: 14px;
						text-transform: uppercase;
						height: 50px;
						display: block;
						position: relative;
						padding: 10px;
						margin: 0;
						line-height: 30px;

						&:hover, &.open {
							color: $font-color;
						}
					}
					ul {
						display: none;
						list-style: none; 
						margin: 0;
						padding: 0;

						& > li {
							& > a {
								color: $gray-font-color;
								font-family: $font-title-name;
								text-transform: uppercase;
								font-size: 13px;
								margin: 0;
								display: block;
								position: relative;
								width: calc( 100% - 30px );
								height: 40px;
								line-height: 40px;
								margin-left: 15px;
								padding: 0 10px;

								&:hover {
									color: $font-color;
								}
							}
						}
					}
				}
			}
		}
	}
	.header {
		.menu-trigger {
			@include fa-icons(Free);
			font-weight: 900;
			float: right;
			color: $personal-color;
			margin-top: 34px;
			padding: 0 10px;
			height: 40px;
			width: 40px;
			text-align: center;
			background: none;
			border: 2px solid $personal-color;
			box-shadow: inset 0 0 5px 0 $personal-color, 0 0 5px 0 $personal-color;
		}
		.menu-trigger.collapsed:before {
			content: "\f0c9";
		}
		.menu-trigger:not(.collapsed):before {
			content: "\f066";
		}
	}
	#hidden-menu.collapse.show, #hidden-menu.collapsing {
		display: block !important;
	}

	.user-bar {
		width: 100%;
		height: 80px;
		background: #3a3e4c;
		padding: 10px 0;
		margin-bottom: 100px;

		.auth-btns {
			height: 60px;
			padding-top: 12.5px;
			text-align: right;
		}

		.collapsible-menu {
			list-style: none;
			padding: 0;
			height: 80px;
			overflow: hidden;
			float: right;
			margin: -10px 0;

			& > li {
				display: block;
				float: left;
				height: 80px;
				width: 80px;

				& > a {
					display: block;
					height: 80px;
					width: 80px;
					line-height: 80px;
					text-align: center;
					font-size: 21px;
					color: $light-font-color;

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

				&.collapsible {
					background: #181c1e;
					width: 120px;

					& > a {
						position: relative;
						width: 120px;

						img {
							width: 60px;
							border-radius: 50%;
							position: absolute;
							right: 30px;
							top: 10px;
						}
						i.fas {
							position: absolute;
							right: 17px;
							top: 27px;
							background: #3e8bd1;
							color: #FFF;
							width: 25px;
							height: 25px;
							padding: 6px 8px;
							border-radius: 50%;
							font-size: 16px;
						}
					}
					& > ul {
						display: none;
						min-width: 120px;
						position: absolute;
						width: 240px;
						margin-left: -120px;
						background: rgb(24, 28, 30) none repeat scroll 0% 0%;
						z-index: 1039;
						padding: 20px;
						overflow: hidden;
						list-style: none;

						& > li {

							& > a {
								line-height: 30px;
								text-transform: uppercase;
								font-size: 14px;
								color: $gray-font-color;

								&:hover {
									color: $font-color;
								}
							}
							&.mini-profile {
								border-bottom: 1px solid rgba(221, 221, 221, 0.15);
								padding-bottom: 10px;
								margin-bottom: 10px;

								h3 {
									font-family: $font-title-name;
									font-size: 20px;
									font-weight: 600;
									display: inline;
								}

								p {
									color: $gray-font-color;
									display: inline;
									font-size: 14px;
									margin-left: 5px;
								}
								span {
									color: $gray-font-color;
									font-size: 12px;
									line-height: 30px;

									a {
										margin-left: 7px;
										color: $gray-font-color;
										text-decoration: underline;
									}
								}
							}
						}
					}
				}
			}
		}

		@media (max-width: 991.99px){
			.collapsible-menu {
				width: 100%;

				& > li {
					width: calc( (100% - 80px) / 6 );

					& > a {
						width: 100%;
						font-size: 16px;
					}

					&.collapsible {
						width: 80px;

						& > a {
							width: 80px;

							img {
								width: 50px;
								top: 16px;
								right: 14px;
							}
							i.fas {
								right: 6px;
								top: 31px;
								width: 20px;
								height: 20px;
								padding: 4px 6px;
								font-size: 12px;
							}
						}
						& > ul {
							margin-left: -160px;
						}
					}
				}
			}
		}
	}
	@media (max-width: 991.99px) {
		& > .content .container.page {
		    margin-top: 0;
		}
	}

	//monitoring
	.monitoring {
		font-family: $font-title-name;
		text-transform: uppercase;

		& > div:last-child {
			.server {
				margin-bottom: 0;
			}
		}

		.server {
			margin-bottom: 30px;
			box-shadow: 0 0 14px -3px rgba(22,22,30,0.73);
			position: relative;
			height: 180px;
			overflow: hidden;

			img {
				width: 100%;
				height: 250px;
			}
			.server-info {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				padding: 20px;
				background: rgba(0, 0, 0, 0.7);

				h3 {
					font-size: 20px;
					font-weight: 600;
				}
				a {
					font-size: 15px;
					top: -3px;
					position: relative;
					color: $font-color;
					margin-bottom: 43px;
					display: block;
				}
				p {
					font-size: 15px;
					position: relative;
					padding-left: 50px;
					margin-bottom: 5px;

					i {
						position: absolute;
						left: 0;	
					}
					&:nth-child(4) {
						i {
							left: 4px;
						}
					}
				}
			}
			&:hover {
				.server-info {
					background: rgba(0, 0, 0, 0.2);	
				}
			}
		}

		@media (max-width: 991.99px) {
			.server .server-info a {
				margin-bottom: 23px;
			}
		}
	}
}

//block
.block {
	background: rgb(57, 61, 75);
	box-shadow: 0 0 14px -3px rgba(22, 22, 30, 0.73);
	padding: 30px 20px 30px 20px;
	margin-bottom: 30px;
	border: 0;
	overflow: hidden;

	& > img {
		margin: -30px -20px;
		width: calc( 100% + 40px);
	}
	& > .block_head {
		display: block;
		@extend %cropping-text;

		font-family: $font-title-name;
		font-size: 18px;
		color: $personal-color;
		background: #404758;
		height: 80px;
		line-height: 80px;
		padding: 0 20px;
		margin: -30px -20px;
		margin-bottom: 30px;
		border-bottom: 2px solid #3e8bd1;
		box-shadow: inset 0 -4px 5px -5px $personal-color, 0 0 5px 0 $personal-color;
		text-transform: uppercase;

		span {
			color: $personal-color;
		    font-size: 17px;
		    font-weight: 400;
		    margin-left: 10px;
		}
		a {
			color: $personal-color;

			small {
				float: right;
				position: relative;
				bottom: 2px;
			}
		}
	}
	& > .block_head_image {
		width: calc(100% + 60px);
		margin: -30px;
		margin-bottom: 30px;
		padding: 0;
		height: 70px;
		overflow: hidden;
		border-radius: 3px 3px 0 0;
	}

	&.transparent {
		margin-bottom: 60px;
		overflow: visible;
		background: none;
		box-shadow: none;
		border: 0;
		padding: 0;
		position: relative;

		& > .block_head {
			position: relative;
			color: #FFF;
			background: none;
			font-weight: 600;
			margin: 0;
			padding: 0 20px 0 20px;
			line-height: 14px;
			height: 30px;
			display: inline-block;
			margin-bottom: 30px;
			box-shadow: none;
			border: 0;
			max-width: 100%;

			&::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				height: 1px;
				width: 100%;
				border-bottom: 2px solid rgb(62, 139, 209);
				box-shadow: 0 0 5px 0 rgb(62, 139, 209);
				left: 0;
			}
		}
		& > .block_body {
			background: rgb(57, 61, 75);
			padding: 20px;
			border: 0;
		}
	}

	&.block-search {
		& > .input-search {
			width: 160px;
			position: absolute;
			right: 0px;
			top: -11px;

			i.fa-search {
				z-index: 1000;
				position: absolute;
				right: 0;
				color: $gray-font-color;
				font-size: 14px;
				cursor: pointer;
				top: 12px;

				&:hover {
					color: $font-color;
				}
			}
			input, select {
				padding-right: 20px;
				margin: 0;
				border: 0;
				background: none;
				color: $font-color;

				&::placeholder {
					color: $gray-font-color;
					text-transform: uppercase;
				}
			}
			select {
				padding-right: 20px;
				margin: 0;
				border: 0;
				background: none;
				color: $font-color;
			}
			.input-group {
				& > .form-control {
					position: relative;
				}
				& > .form-control::after {
					content: " ";
					display: block;
					position: absolute;
					top: 20px;
					background: rgb(221, 221, 221);
					height: 30px;
					width: 0.5px;
				}
			}
		}
		@media (max-width:991.98px) {
			& > .input-search {
				width: 140px;
			}
		}
	}
	&.block-table {
		padding: 0 !important;

		thead {
			border: 0;

			tr {
				border: 0;

				td {
					border: 0;
				}
			}
		}

		& > .block_head {
			margin: 0;
		}
		& > .table-responsive {
			border: 0;
		}
		.noty-block {
			width: calc( 100% - 60px );
			margin-left: 30px;
			margin-right: 30px;
			margin-bottom: 20px;
		}
	}
	.secondary_head {
		font-family: $font-title-name;
		font-size: 18px;
		color: $personal-color;
		text-transform: uppercase;
	}
}
.order-is-first {
	.block {
		box-shadow: none;
	}
}
.block-min {
	margin-bottom: 30px;

	.block_head {
		font-family: $font-title-name;
		color: $font-color-secondary;
		font-weight: 600;
		background: rgb(57, 61, 75);
		height: 40px;
		line-height: 47px;
		padding: 0 20px;
		border-radius: 10px 10px 0 0;
		font-size: 16px;
		text-transform: uppercase;
		margin: 0;
		display: inline-block;
		max-width: 100%;

		@extend %cropping-text;
	}

	.block-body {
		background: rgb(57, 61, 75);
		margin: 0;
		margin-top: -5px;

		&.secondary {
			padding: 20px 15px; 
		}
	}

	&.block-table {
		padding: 0 !important;

		& > .block_head {
			margin: 0;
		}
		& > .table-responsive {
			border: 0;
		}
		.noty-block {
			width: calc( 100% - 60px );
			margin-left: 30px;
			margin-right: 30px;
			margin-bottom: 20px;
		}
	}
}

//authorization&registration
.authorization {
	a.small {
		float: right;
	}
	.btn-outline-primary {
		float: right;
		height: 35px;
	}
	#steam_link, #vk_link, #fb_link {
		float: left;
		height: 35px;
		width: 35px;
		padding: 0;
		line-height: 35px;
		font-size: 13px;
		margin-right: 7px;
		
		i {
			color: $personal-color;
		}
	}
}

.registration {
	.privacy-policy {
		display: block;
		padding: 5px;
		font-size: 11px;
		background: #f5f5f5;
		color: $gray-font-color;
		line-height: 13px;
		margin-top: 20px;
		background: rgb(64, 71, 88);
		border-radius: 2px;
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.27);
	}
	.reg_btns {
		margin-top: 20px;

		a {
			float: right;
			height: 35px;
			width: 35px;
			padding: 0;
			line-height: 35px;
			font-size: 13px;
			margin-right: 7px;
			
			i {
				position: relative;
				left: -1px;
				color: $personal-color;
			}
		}
		button {
			height: 35px;
			float: right;
		}
	}


}

//vk-widgets
.vk-widgets {
	div[id^="vk_groups"] {
		margin-bottom: 30px;
	}
	div[id^="vk_subscribe"] {
		margin: 2px 0;
	}
}

.vertical-navigation {
	margin: -20px;

	ul {
		display: block !important;
		padding: 0;
		margin: 0;
		list-style: none;

		li {
			
			padding-left: 20px;
			padding-right: 20px;
			border-left: 1px solid rgba(0,0,0,0);

			&:hover, &.active {
				border-color: $personal-color;

				a {
					color: $font-color;
				}
			}
			a {
				@extend %cropping-text;

				display: block;
				height: 40px;
				line-height: 40px;

				font-size: 14px;
				color: $gray-font-color;

				&.active {
					color: $font-color;
					border-top: 0;
					margin-left: -21px;
					margin-right: -20px;
					border-left: 1px solid $personal-color;
					padding-left: 20px;
					padding-right: 20px;
				}
			}
		}
	}
}

//chat
#chat {
	a.small {
		font-size: 14px;
	}

	#drop_zone {
		width: 100%;
		height: 100%;
		position: relative;
		font-family: $font-name, sans-serif;

		& > #drop_mask {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			display: none;
			margin: -1px;
		}

		&.loader {
			background: #FFF;
			opacity: 0.4;
		}

		&.hover, &.error {
			@include fa-icons(Free);

			#chat_messages {
				height: 396px;
			}
		}
		&.hover:after, &.error:after {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			border-radius: 2px;
			text-align: center;
			font-size: 400%;
			line-height: 500%;
			outline-offset: -10px;
		}

		&.hover:after {
			content: "\f0c5";
			background: $info-bg-color;
			outline: 2px dashed $info-border-color;
			color: $info-text-color;
		}
		&.error:after {
			content: "\f2ed";
			background: $error-bg-color;
			outline: 2px dashed $error-border-color;
			color: $error-text-color;
		}
	}

	#chat_messages {
	    overflow-y: auto;
	    width: 100%;
	    height: 400px;

		.chat_message {
			position: relative;
			overflow: hidden;
			padding: 10px;
			background: #404758;
			border-radius: 2px;
			margin-top: 5px;

			& > a {
				img {
					float: left;
					border-radius: 50%;
					height: 40px;
					width: 40px;
					margin-right: 10px;
				}
			}
			.dell_message, .edit_message {
				color: $gray-font-color;
				position: absolute;
				top: 16px;
				font-size: 12px;
				cursor: pointer;
			}
			.dell_message {
				right: 0;
			}
			.edit_message {
				right: 15px;
			}
			textarea {
				margin: 3px;
				margin-top: 15px;
				width: calc( 100% - 10px );
			}
			.message {
				word-wrap: break-word;
				position: relative;
				overflow: hidden;
				font-size: 14px;
				line-height: 18px;

				.info {
					display: block;
					margin-bottom: 2px;
					height: 18px;

					.author {
						font-size: 14px;
						font-weight: 500;
						float: left;
						position: relative;
						cursor: pointer;
					}
					.date {
						font-size: 12px;
						color: $gray-font-color;
						font-weight: 400;
						position: relative;
						float: right;
						line-height: 12px;
					}
				}
				img {
					max-width: 300px;
				}
			}
		}
	}

	.input-group {
		.smile_input {
			width: calc( 100% - 150px );
			position: relative;

			input {
				padding-right: 30px;
			}
		}
		#send_button {
			width: 140px;
			margin-left: 10px;
		}
		#smile_btn {
			position: absolute;
			right: 11px;
			top: 14px;
		}
	}
}
#passive {
	background: rgb(57, 61, 75);
	padding: 20px;
	border: 0;
}

//smiles
#smile_btn {
	@include fa-icons(Free);
	width: 20px;
	height: 17px;
	line-height: 15px;
	cursor: pointer;

	&::after {
		color: $links-color;
		content: "\f118";
	}
}
.g_smile {
	height: 20px;
	width: 20px;
	display: inline-block;
}
.g_sticker {
	height: auto;
	width: auto;
}
.popover {
	background-color: rgb(64, 71, 88);
	border: 1px solid rgb(64, 71, 88);

	.popover-body {
		& > .smiles_box {
			overflow-x: hidden;
			overflow-y: scroll;
			width: 253px;
			height: 300px;

			.smile {
				cursor: pointer;
				margin: 7px;
				float: left;
				width: 25px;
				height: 25px;
			}
			.sticker {
				cursor: pointer;
				margin: 6px;
				float: left;
				width: 65px;
				height: 65px;
			}
		}
	}
}
.bs-popover-auto[x-placement^="bottom"] .arrow::after, .bs-popover-bottom .arrow::after {
    border-bottom-color: rgb(64, 71, 88);
}
.bs-popover-auto[x-placement^="top"] .arrow::after, .bs-popover-top .arrow::after {
    border-top-color: rgb(64, 71, 88);
}
.smiles_panel {
	width: 100%;
	margin-top: 5px;

	&> .btn {
		margin: 0;

		&:nth-child(1) {
			width: 80px;
		}
		&:nth-child(2) {
			width: 174px;
		}
	}
}
.stickers_img {
	border-radius: 2px;
	width: 236px;
	height: 250px;
}
.smile_input_forum {
	.btn {
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 0;
	}
	#smile_btn {
		position: relative;
		display: inline-block;

		&::after {
			position: absolute;
			top: 5px;
		}
	}
}

//notifications
#notifications_line {
	.btn {
		position: absolute;
		right: 15px;
	}
}
.noty-block, .bs-callout {
	color: $font-color;
	background-color: #42495b;
	border: 0;
	position: relative;
	display: block;
	width: 100%;
	padding: 30px 30px 30px 55px;
	margin: 10px 0;

	&::before {
		display: block;
		content: ' ';
		width: 1px;
		height: calc( 100% - 64px );
		position: absolute;
		top: 32px;
		left: 30px;
		background: $info-border-color;
		box-shadow: 0 0 5px 1px $info-border-color2;
	}

	&.info, &.bs-callout-info {
		&::before {
			background: $info-border-color;
			box-shadow: 0 0 5px 1px $info-border-color2;
		}
	}
	&.success, &.bs-callout-success {
		&::before {
			background: $success-border-color;
			box-shadow: 0 0 5px 1px $success-border-color2;
		}
	}
	&.error, &.bs-callout-danger {
		&::before {
			background: $error-border-color;
			box-shadow: 0 0 5px 1px $error-border-color2;
		}
	}
	&.warning, &.bs-callout-warning {
		&::before {
			background: $warning-border-color;
			box-shadow: 0 0 5px 1px $warning-border-color2;
		}
	}

	.m-icon.icon-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 13px;
		color: $gray-font-color;
		cursor: pointer;
	}

	& > span {
		font-size: 13px;
		color: $gray-font-color;
		display: block;
		margin-top: 5px;
	}
}
.block {
	.noty-block {
		margin-bottom: 20px;
	}
}

//events
#events {
	.event {
		position: relative;
		width: 100%;
		height: 70px;
		overflow: hidden;
		background: rgb(57, 61, 75);
		padding: 0 10px;
		margin: 10px 0;

		& > div {
			position: relative;
			float: left;
			display: table;
			height: 100%;
			width: 40%;
			
			& > a {
				height: 70px;
				vertical-align: middle;
				display: table-cell;
				line-height: 17px;
				margin: 0;
				font-size: 14px;
				color: $gray-font-color;
			}
		}
		& > a:not(.btn) {
			@extend %cropping-text;

			float: left;
			display: block;
			height: 100%;
			width: 20%;
			line-height: 70px;
			font-weight: bold;

			img {
				width: 40px;
				height: 40px;
				margin: 15px;
				float: left;
				border-radius: 50%;
				margin-right: 10px;
			}
		}
		& > span {
			@extend %cropping-text;

			color: $gray-font-color;
			float: left;
			display: block;
			height: 100%;
			width: 25%;
			padding-right: 10px;
			padding-left: 10px;
			line-height: 70px;
			font-size: 14px
		}
		& > a.btn {
			float: left;
			display: block;
			width: 15%;
			margin-top: 17px;
			line-height: 31px;
			margin-bottom: 20px;
		}
		& > i {
			cursor: pointer;
			position: absolute;
			top: 7px;
			right: 7px;
			font-size: 10px;
			color: $gray-font-color;
		}
		@media (max-width: 991.99px) {
			& > div {
				width: calc( 100% - 50px );
			}
			& > a:not(.btn) {
				width: 50px;

				img {
					margin-right: 0;
					margin-left: 10px;
				}

				span {
					display: none;
				}
			}
			& > span {
				display: none;
			}
			& > a.btn {
				display: none;
			}
		}
	}
}

//online users
#online_users, #companions {
	line-height: 15px;

	& > div {
		height: 50px;
		line-height: 40px;
		padding: 5px 0;

		& > a:nth-child(1) {
			float: left;
			display: block;
			width: calc( 100% - 40px );

			img {
				height: 40px;
				width: 40px;
				border-radius: 50%;
				margin-right: 10px;
				float: left;
			}
			span {
				color: $font-color;
				font-size: 15px;
				display: inline-block;
				width: calc(100% - 51px);
				float: right;
				@extend %cropping-text;
			}
		}
		& > a:nth-child(2) {
			display: block;
			width: 40px;
			height: 40px;
			float: right;
			text-align: center;

			i {
				color: $gray-font-color;
				font-size: 18px;
				bottom: -2px;
				position: relative;
			}
		}
	}

	& > a {
		padding-top: 10px;
		padding-bottom: 10px;
		border-top: 1px solid $light-border-color;
		display: block;
		height: 60px;
		width: 100%;



		span {
			line-height: 20px;
			display: inline-block;
			width: calc(100% - 51px);
			float: right;
			@extend %cropping-text;

			&:nth-child(2) {
				font-weight: 500;
				color: $links-color;
				font-size: 14px;
			}
			&:nth-child(3) {
				color: $light-font-color;
				font-size: 13px;
			}
		}
	}
}

//servers-online-line
.servers-online-line {
	border-radius: 3px;
	overflow: visible;
	position: relative;
	height: 30px;
	margin-top: -20px;
	background: rgb(64, 71, 88);
	border: 1px solid $dark-border-color;

	.progress-val {
		position: absolute;
		height: 100%;
		width: 100%;
		text-align: center;
		line-height: 30px;
		font-size: 13px;
	}
	.progress-bar {
		margin: -1px;
		border-radius: 3px 0 0 3px;
	}
	.progress-bar.bg-info {
		background-color: $info-bg-color !important;
		border: 1px solid $info-border-color2;
	}
	.progress-bar.bg-success {
		background-color: $success-bg-color !important;
		border: 1px solid $success-border-color2;
	}
	.progress-bar.bg-warning {
		background-color: $warning-bg-color !important;
		border: 1px solid $warning-border-color2;
	}
	.progress-bar.bg-danger {
		background-color: $error-bg-color !important;
		border: 1px solid $error-border-color2;
	}
}

//top users
#top_users {
	a {
		padding-top: 10px;
		padding-bottom: 10px;
		display: block;
		height: 60px;
		width: 100%;

		img {
			height: 40px;
			width: 40px;
			border-radius: 50%;
			margin-right: 10px;
			float: left;
		}

		div {
			margin: 0;
			font-weight: 500;
			color: $links-color;
			font-size: 14px;
			line-height: 20px;
			display: inline-block;
			width: calc(100% - 51px);
			float: right;
			
			& > span {
				@extend %cropping-text;

				max-width: 100%;
				line-height: 17px;
				width: auto;
			}
			p, & > span {
				&:nth-child(2) {
					@extend %cropping-text;
				}
				
				span {
					color: $gray-font-color;
					font-size: 13px;
				}
			}
		}

		span {
			display: inline-block;
			width: 33.3333%;
			color: $gray-font-color;
			font-size: 13px;
			            
			i {
				margin-right: 3px;
				&::before {
					color: $gray-font-color;
					font-size: 13px;
				}
			}
		}
	}
}

//last activity
#last_activity, #mybans {
	span {
		padding-top: 10px;
		padding-bottom: 10px;
		display: block;
		height: 80px;
		width: 100%;
		line-height: 14px;
		padding: 10px;
		background: rgb(64, 71, 88);
		border-radius: 2px;
		margin: 10px 0;

		p {
			@extend %cropping-text;

			margin: 0;
			color: $gray-font-color;
			font-size: 14px;
			line-height: 20px;
			display: inline-block;
			width: 100%;

			a {
				img {
					width: 13px;
					margin: -5px 5px 0 0;
					border-radius: 2px;
				}
				font-weight: 500;
				color: $font-color;

				&.title {
					font-family: $font-title-name;
					text-transform: uppercase;
				}
			}
			i {
				color: $gray-font-color;
				font-size: 12px;
				margin-right: 5px;
			}
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
}

//last online
#load_last_online {
	a {
		line-height: 21px;
		font-size: 14px;
	}
}
.popover_avatar {
	width: 50px;
	height: 50px;
	margin: -5px -8px;
	border-radius: 2px;
}

//new news
#new_news {
	& > div:not(.loader) {
		a {
			h3 {
				@extend %cropping-text;
				margin-bottom: 10px;
				width: 100%;
				display: inline-block;
				font-family: $font-title-name;
				color: $font-color;
				font-size: 20px;
				font-weight: 500;
				line-height: 18px;
				text-transform: uppercase;
			}
			img {
				width: 100%;
				margin-bottom: 20px;
			}
		}
		p {
			&.info {
				font-size: 14px;
				color: $gray-font-color;
			}
			&.text {
				font-size: 15px;
				line-height: 27px;
				color: $font-color;
			}
		}

		margin-bottom: 30px;
	}
}

//comment
.comment {
	position: relative;
	overflow: hidden;
	padding: 15px 20px;
	background: rgb(57, 61, 75);
	margin: 10px 0;

	& > a {
		float: left;
		display: block;

		img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
		}
	}
	& > div {
		float: right;
		width: calc( 100% - 60px );
		word-wrap: break-word;
		position: relative;
		overflow: hidden;
		font-size: 14px;
		line-height: 18px;

		.info {
			display: block;
			margin-bottom: 2px;
			height: 18px;

			.author {
				font-size: 14px;
				font-weight: 500;
				float: left;
				position: relative;
				cursor: pointer;
			}
			.date {
				font-size: 12px;
				color: $gray-font-color;
				font-weight: 400;
				position: relative;
				float: right;
				line-height: 12px;
			}
		}
		.dell_message, .edit_message {
			color: $gray-font-color;
			position: absolute;
			top: 16px;
			font-size: 11px;
			cursor: pointer;
		}
		.dell_message {
			right: 0;
		}
	}
}

//--------------------
//Pages special styles
//--------------------
//bans/index
#bans, #tickets, #open_tickets, #close_tickets {
	tr {
		&:nth-child(odd) {
			td {
				background: rgba(246, 246, 246, 0.05);
			}
		}
		td {
			a {
				color: $gray-font-color;

				&:hover {
					color: $font-color;
				}
			}
			&:nth-child(3) {
				text-transform: uppercase;
			}
			span {
				text-transform: uppercase;
			}
		}
	}
}

//bans/add_ban
#dop {
	#imgs {
		img {
			margin-bottom: 10px;
		}
	}
	#img_result {
		p {
			margin-bottom: 10px;
		}
	}
}

//bans/ban
.ban-application {
	&.ban-information {
		p {
			margin-bottom: 10px;
		}
	}
	#closed {
		.m-icon {
			display: none;
		}
	}
}

//forum/index
#forum, #forum_topics {
	.row, &.row {
		margin-bottom: 30px;

		.col-lg-8 {
			padding-top: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgb(71, 76, 90);

			img {
				border-radius: 50%;
				width: 50px;
				height: 50px;
				float: left;
				margin-right: 10px;
			}
			> div {
				width: calc( 100% - 60px );
				float: right;

				h3 {
					@extend %cropping-text;

					font-family: $font-title-name;
					text-transform: uppercase;
					line-height: 17px;
					margin-top: 4px;

					a {
						font-weight: 500;
						font-size: 15px;
						color: $font-color;
					}
					i {
						color: $gray-font-color;
						font-size: 12px;
					}
				}
				p {
					line-height: 15px;
					font-size: 13px;
					margin: 0;
					color: $gray-font-color;

					span {
						display: inline-block;
						color: $gray-font-color;
						font-size: 13px;
						margin-right: 15px;

						a {
							font-size: 14px;
							color: $gray-font-color;
						}
						i {
							margin-right: 3px;
							&::before {
								color: $gray-font-color;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
		.col-lg-4 {
			padding-top: 10px;
			padding-bottom: 10px;
			line-height: 16.666px;
			border-left: 1px solid rgb(71, 76, 90);
			border-bottom: 1px solid rgb(71, 76, 90);

			p {
				@extend %cropping-text;

				margin: 0;
				color: $gray-font-color;
				font-size: 13px;
				line-height: 13px;
				display: inline-block;
				width: 100%;

				a {
					font-weight: 500;
					color: $font-color;
				}
			}
		}
		> div:nth-last-child(1), > div:nth-last-child(2) {
			border-bottom: 0;
		}	
		&:last-child {
			margin-bottom: -30px
		}
	}
}
#forum_topics {
	&.row {
		margin: 0;

		.col-lg-12 {
			padding: 0px;

			h2 {
				font-family: $font-title-name;
				color: $gray-font-color;
				font-weight: 600;
				background: rgb(57, 61, 75);
				height: 40px;
				line-height: 47px;
				padding: 0 20px;
				border-radius: 10px 10px 0 0;
				font-size: 16px;
				text-transform: uppercase;
				margin: 0;
				margin-top: 50px;
				display: inline-block;				
			}
			&:first-child {
				h2 {
					margin-top: 0;
				}
			}
		}
		.col-lg-8, .col-lg-4 {
			background: rgb(57, 61, 75);
		}
	}
}
//forum/topic
.topic-answers {

	div[id^="answer"] {
		background: rgb(57, 61, 75);
		margin-bottom: 10px;

		&::after {
			clear: both;
			display: table;
			content: " ";
		}
		.left-side {
			float: left;
			padding-right: 15px;
		}
		.right-side {
			float: right;
			padding-left: 15px;
		}
		@media (max-width: 991.99px) {
			.left-side {
				width: 100px;
			}
			.right-side {
				width: calc( 100% - 100px );
			}
			.top-area {
				.left-side {
					font-size: 14px;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
		@media (min-width:992px) {
			.left-side {
				width: 150px;
			}
			.right-side {
				width: calc( 100% - 150px );
			}
		}
		.top-area {
			font-size: 15px;
			height: 20px;
			line-height: 20px;
			margin-bottom: 20px;
		
			a {
				color: $gray-font-color;

				i {
					margin-right: 5px;
				}
				span {
					font-size: 13px;
					position: relative;
					top: -1px;
					margin-right: 10px;
				}
				&:nth-child(2), &:nth-child(3) {
					float: left
				}
			}

			@extend %cropping-text;
		}

		.center-area, .bottom-area {
			position: relative;
			z-index: 1001;

			@media (max-width: 991.99px) {
				.left-side {
					p {
						font-size: 13px;

						&:nth-child(4) {
							display: none;
						}
					}
				}
			}
			@media (min-width:992px) {
				.left-side {
					p {
						font-size: 14px;
					}
				}
			}
		}
		.center-area {
			padding: 15px 15px 10px 15px;

			.left-side {
				position: relative;
				z-index: 0;

				a {
					&:nth-child(2) {
						@extend %cropping-text;
						display: inline-block;
						max-width: 115px;
						font-size: 17px;
					}
					&:nth-child(3) {
						display: block;
						float: right;
						width: 20px;
						text-align: center;
						color: $gray-font-color;
						height: 20px;
						line-height: 23px;
					}
				}

				img {
					border-radius: 50%;
					max-width: 100%;
					margin-bottom: 15px;			
				}
				p {
					@extend %cropping-text;
					
					color: $gray-font-color;
					display: block;
					margin-bottom: 0;
					line-height: 25px;
					width: 100%;
					width: auto;

					&:nth-child(4) {
						line-height: 20px;
						font-size: 10px;
						display: block;
						margin-top: -5px;
						text-transform: uppercase;
						margin-bottom: 10px;
					}
					span {
						float: right
					}
				}
			}
			.right-side {
				z-index: 0;

				.edited {
					margin-top: 10px;
					color: $gray-font-color;
					text-align: right;
					font-size: 13px;
				}
				.signature {
					margin-top: 10px;
					padding-top: 10px;
					border-top: 2px solid rgb(80, 81, 102);
					color: $gray-font-color;
				}
				.with_code {
					margin-bottom: 15px;
					font-size: 14px;
				}
			}
		}
		.bottom-area {
			padding: 0 15px;
			border-top: 1px solid rgb(80, 81, 102);

			.btn-group {
				display: block;
				width: 100%;
				margin: 10px 0;

				.btn {
					padding: 0 8px;
					float: left;
					width: 50%;
					margin: 0;

					&:last-child {
						margin-left: -1px;
					}
				}
				&::after {
					clear: both;
					display: table;
					content: " ";
				}
			}

			.thank_str {
				margin: 13px;
				margin-left: 0;
			}
		}
	}
}
//forum/edit_forum
.btn-group-toggle {
	.btn.btn-default {
		&.active {
			background: $btns-color;
		}
		&:not(.btn-sm) {
			line-height: 38px;
		}
	}
}
form[id^="section_settings"], div#add_section {
	.btn-group-toggle {
		& > label {
			font-size: 13px;
			height: 30px;
			padding: 5px 11px;
			margin: 0 5px 5px 0;
			line-height: 18px;
		}
	}
}
table {
	tbody[id^="forums"] {
		img {
			display: block;
			margin: 0 auto;
			height: 50px;
			width: 50px;
		}
		tr {
			td {
				padding: 5px !important;

				&:first-child {
					max-width: 60px;
				}
				&:nth-child(2) {
					max-width: 150px;

					input {
						width: 100%;
					}
				}
				input {
					margin: 0;
				}
				a.btn.btn-sm, input.btn.btn-sm, button.btn.btn-sm, label.btn.btn-sm {
					font-size: 13px;
					line-height: 29px;
					height: 25px;
					border-radius: 2px;
				}
			}
		}
	}
}

//home/banlist
#banlist {
	tr {
		td {
			background: rgba(246, 246, 246, 0.05);

			a {
				i {
					font-style: normal !important;
				}
			}
			&:nth-child(3), &:nth-child(4) {
				text-transform: uppercase;
			}
		}
	}
	div[id^="baninfo"] {
		i {
			font-style: normal !important;
		}
		input {
			margin: 0;
		}
	}
}

//home/muts
#muts {
	tr {
		td {
			background: rgba(246, 246, 246, 0.05);

			a {
				i {
					font-style: normal !important;
				}
			}
			&:nth-child(3), &:nth-child(4), &:nth-child(5) {
				text-transform: uppercase;
			}
		}
	}
	div[id^="muteinfo"] {
		i {
			font-style: normal !important;
		}
		input {
			margin: 0;
		}
	}
}

//home/admins
.admins {
	tbody {
		tr {
			& > td {
				color: $gray-font-color;

				&:nth-child(1) {
					a {
						color: $font-color;	
					}
				}
				&:nth-child(3) {
					text-transform: uppercase;
				}
				&:nth-child(4) {
					a {
						text-transform: uppercase;
						text-decoration: underline;	
					}
				}
			}

			&:nth-child(4n+1) {
				& > td {
					background: rgba(246, 246, 246, 0.05);
				}
			}
		}
	}
}

//aes_list
#list {
	tr {
		&:nth-child(odd) {
			& > td {
				background: rgba(246, 246, 246, 0.05);
			}
		}

		td {
			max-width: 200px;
			@extend %cropping-text;
			
			&:nth-child(3) {
				text-transform: uppercase;
			}
		}
	}
}

//home/edit_admins
#server_admins {

	tr[id^="admin"] {
		& > td {
			& > i[class^="fa"], & > .m-icon {
				margin-left: 5px;
				color: $links-color;
				font-size: 12px;
				cursor: pointer;
			}
		}
	}
	div[id^="admin_info"] {
		table {
			tbody {
				tr {
					td {
						font-size: 13px;
						padding: 7px;
					}
				}
			}
		}
		.services-title {
			margin-bottom: 12px;
			float: left;
		}
		.add-service {
			float: right;
		}
	}
	#admins_services {
		td {
			vertical-align: middle;
			word-wrap: normal;
			white-space: nowrap;
			font-size: 13px;
			padding: 7px;

			.btn {
				float: right;

				& > i[class^="fa"], & > .m-icon {
					font-size: 12px;
					color: $links-color;
				}
			}
			p {
				display: block;
				width: auto;
				float: left;
			}
			.form-control {
				margin: 0;
			}
			.hasDatepicker {
				font-size: .875rem;
				line-height: 1.5;
				text-indent: 5px;
			}
		}
	}
}
.admin-settings {
	@media (max-width: 991.99px) {
		tr {
			& > td:first-child {
				display: none;
			}
			& > td:last-child {
				border-left: 0;

				small {
					display: block;
					float: right;

					&::after {
						clear: both;
						display: table;
						content: " ";
					}
				}
			}
		}
	}
	@media (min-width:992px) {
		tr {
			& > td:last-child {
				small {
					display: none;
				}
			}
		}
	}
}
.admin-settings, #server_admins, tbody[id^="admins_services"] {
	td {
		background: rgba(246, 246, 246, 0.05);
	}
}

//home/edit_user
tr[id^="multi-account-"] {
	span {
		font-size: 12px;
		cursor: pointer;
		margin-left: 5px;
	}
}
#edit_user_avatar_result {
	p {
		margin-bottom: 0;
	}
}

//home/my_stores
div[id^="store_info"] table.table > tbody[id^="admins_services"] > tr > td {
	font-size: 13px;

	button {
		margin-top: 5px;
		width: 100%;
	}
	select {
		margin-top: 5px;
		margin-bottom: 0;
	}
}

//home/store 
#buy_service_area {
	h4 {
		text-transform: uppercase;
		font-size: 16px;
	}
	#button {
		margin-top: 20px;
		text-align: center;

		button {
			margin-bottom: 0;
		}
	}
}

//home/friends
.friends.tab-content > .active {
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
}
.friend, .user {
	position: relative;
	overflow: hidden;
	font-family: $font-title-name;
	margin-bottom: 15px;

	& > a {
		img {
			width: 100%;
		}
	}

	& > div {
		margin-top: 5px;
		height: 45px;

		& > a {
			@extend %cropping-text;
			
			float: left;
			display: inline-block;
			max-width: calc( 100% - 60px );
			line-height: 20px;

			&:nth-child(1) {
				font-size: 18px;
			}
			&:nth-child(3) {
				text-transform: uppercase;
				color: $gray-font-color;
				margin-top: 2px;
				font-size: 13px;
			}
		}
		& > .actions {
			float: right;
			width: 60px;
			position: relative;
			top: -20px;

			a {
				color: $gray-font-color;
				line-height: 40px;
				width: 20px;
				display: block;
				float: right;
				text-align: center;

				&:hover {
					color: $font-color;
				}
				.fa-envelope {
					font-size: 17px;
				}
				.fa-pencil-alt {
					font-size: 12px;
					position: relative;
					top: -2px;
				}
				.fa-trash {
					font-size: 13px;
					position: relative;
					bottom: 2px;
				}
			}
		}
	}
}
.dialogs {
	.block_head {
		.btn {
			display: inline-block;
			position: absolute;
			right: 37px;
			top: 21px;
		}
	}
}
#place_for_messages {
	margin: -30px -20px;

	#chat {
		padding: 20px;
		padding-top: 0;
	}
	#messages {
		overflow-y: auto;
		height: 400px;
	}
	textarea {
		width: 100%;
		max-width: 100% !important;
		min-width: 100% !important;
		height: 55px;
		max-height: 55px !important;
		min-height: 55px !important;
	}
	.dialog {
		height: 80px;
		overflow: hidden;
		cursor: pointer;

		& > div {
			&:nth-child(1) {				
				padding: 12px;
				float: left;
				width: calc( 100% - 40px );
				height: 80px;

				img {
					height: 50px;
					width: 50px;
					border-radius: 50%;
					float: left;
					margin: 5px;
					margin-right: 15px;
				}
				div {
					float: right;
					width: calc( 100% - 70px );

					p {
						margin: 0;
						@extend %cropping-text;

						&:nth-child(2) {
							font-size: 14px;
							line-height: 20px;
							color: $links-color;
						}
						&:nth-child(3) {
							margin-top: 1px;
						}
						&:nth-child(5), &:nth-child(6) {
							margin-top: -5px;
						}
						&:nth-child(6) {
							margin-left: 3px;
						}
						&:nth-child(5), &:nth-child(3), &:nth-child(6) {
							font-size: 13px;
							line-height: 13px;
						}
					}
				}
			}
			&:nth-child(2) {				
				float: right;
				width: 40px;
				height: 80px;
				text-align: center;
				padding-top: 33px;

				span {
					font-size: 16px;
					color: $gray-font-color;
				}
			}

			&:nth-child(2):hover {
				background-color: $error-bg-color;
				color: $error-text-color;
			}
		}
		&:hover {
			background-color: #444a5c;
		}
	}

	.im_message {
		display: block;
		height: auto;
		overflow: hidden;
		margin-top: 10px;
		margin-bottom: 10px;

		& > img {
			float: left;
			width: 40px;
			height: 40px;
			border-radius: 50px;
			margin-right: 10px;
		}
		& > div {
			word-wrap: break-word;
			position: relative;
			overflow: hidden;
			font-size: 14px;
			line-height: 18px;
			
			img {
				max-width: 300px;
			}
			& > .info {
				display: block;
				margin-bottom: 2px;
				height: 18px;

				& > a {
					font-size: 14px;
					font-weight: 500;
					float: left;
					position: relative;
					cursor: pointer;
				}
				& > span {
					float: right;
					font-size: 13px;
					color: $hover-font-color;
					font-family: $font-title-name;
					font-weight: 400;
					position: relative;
					line-height: 12px;
					margin-right: 3px;
				}
			}
		}
	}
}

//home/profile
.profile-page {
	.col-lg-8 {
		.block {
			overflow: visible;
		}
	}
	.profile-avatar {
		img {
			width: 150px;
			height: 150px;
			margin: 0 auto;
			display: block;
			border-radius: 50%;
		}
		#result_profile {
			margin-top: 10px;
			margin-bottom: 10px
		}
		.collapsible-menu {
			list-style: none;
			position: relative;
			display: block;
			width: 150px;
			margin: 0 auto;
			text-align: center;

			& > li {
				position: relative;
				& > a {
					padding: 10px;
					display: block;
					background: rgb(64, 71, 88);
					color: #DDD;
					text-transform: uppercase;
					font-size: 14px;
					box-shadow: 0 0 14px -3px rgba(22, 22, 30, 0.38);
					border-radius: 2px;

					i {
						font-size: 13px;
						margin-left: 5px;
					}
					&:hover, .open {
						background: rgb(74, 81, 101);
					}
				}
				& > ul {
					z-index: 1000;
					list-style: none;
					position: absolute;
					display: none;
					min-width: 150px;
					box-shadow: rgba(22, 22, 30, 0.38) 0px 5px 10px 0px;
					background: rgb(64, 71, 88);

					& > li {
						text-align: left;
						padding: 5px 10px;
						font-size: 13px;

						& > a {
							line-height: 16px;
							color: $gray-font-color;
							
							&[href]:hover, &[onclick]:hover {
								color: $font-color;
							}
							.m-icon {
								display: none;
							}
						}
					}
				}
			}
		}
	}
	.profile-info {
		h2 {
			position: relative;
			width: 100%;
			display: block;
			font-size: 19px;
			line-height: 23px;
			margin: 0;
		}
		small {
			position: absolute;
			display: block;
			right: 0;
			top: -2px;
			width: 130px;
			line-height: 14px;
			font-size: 13px;
			text-align: right;

			&.point {
				position: relative;
				height: 6px;
				width: 6px;
				background: rgb(61, 255, 0);
				border-radius: 50%;
				display: inline-block;
				margin-left: 10px;
			}
		}
		@media (max-width:991.98px) {
			small {
				margin-top: 5px;
				position: relative;
				left: 0;
				width: 100%;
				float: left;
				text-align: left;

				&.point {
					position: relative;
					left: auto;
					right: auto;
					float: none;
					text-align: right;
				}
			}
		}
		.profile-data {
			p:first-child {
				margin-top: 20px;
			}
		}
	}
	.profile-data {
		p {
			position: relative;
			line-height: 30px;
			margin-bottom: 10px;
			color: $gray-font-color;
			text-transform: uppercase;

			b {
				text-transform: none;
				position: absolute;
				right: 0;
				font-weight: 400;
				color: $font-color;

				a {
					color: $font-color;
				}
			}
			&:last-child {
				margin-bottom: 0;
			}

			#vk_user, #steam_user, #fb_user {
				line-height: 30px;

				img {
					height: 30px;
					width: 30px;
					margin-right: 5px;
					border-radius: 50%;
				}
				span {
					display: inline;
				}
			}
		}
	}
	.profile-data-secondary {
		p {
			position: relative;
			line-height: 20px;
			margin-bottom: 15px;
			color: $gray-font-color;
			text-transform: uppercase;

			b {
				text-transform: none;
				line-height: 20px;
				font-weight: 400;
				color: $font-color;

				a {
					color: $font-color;
				}
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	#friends {
		position: relative;
		overflow: hidden;
		max-height: 185px;
	
		&::after {
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 20px;
			bottom: 0;
			background: linear-gradient(to top, rgb(57, 61, 75), rgba(57, 61, 75, 0));
		}
		a.small-friend {
			display: block;
			padding: 5px 0;
			height: 60px;

			img {
				border-radius: 50%;
				width: 50px;
				height: 50px;
				float: left;
			}
			span {
				@extend %cropping-text;

				width: calc( 100% - 60px );
				display: block;
				float: right;
				line-height: 50px;
				font-size: 15px;
			}
		}
	}
	.purse {
		margin-top: 30px;
		text-transform: uppercase;
		text-align: center;

		p {
			font-size: 20px;
			margin: 0;
		}
		small {
			font-size: 16px;
			display: block;
		}
		a {
			margin-top: 20px;
			display: block;
			font-size: 18px;
			text-decoration: underline;
			line-height: 25px;
			margin-bottom: 5px;
		}
		span {
			line-height: 15px;
			color: $links-color;
			display: block;
			text-decoration: underline;
			font-size: 14px;
		}
		img {
			margin-top: 30px;
			width: 80%;
		}
	}
}

//home/purse
.pay_area {
	.block {
		text-align: center;

		img {
			width: 90%;
		}
		.fix-box {
			width: 70%;
			margin: 0 auto;
			position: relative;

			.form-control {
				&::placeholder {
					text-align: center;
				}
			}
			.success_message, .error_message {
				display: none !important;
			}
		}
		.block {
			.block_head {
				text-align: left;
			}
		}
	}
}
#operations {
	tr {
		td {
			text-transform: uppercase;

			span, p {
				color: $gray-font-color !important;

				a {
					text-transform: none;
				}
			}
		}

		&:nth-child(odd) {
			td {
				background: rgba(246, 246, 246, 0.05);
			}
		}
	}
}
//home/settings
.profile-settings {
	.m-icon {
		display: none;
	}
	#vk_user, #steam_user, #fb_user {
		img {
			height: 30px;
			width: 30px;
			margin-right: 5px;
			border-radius: 50%;
		}
		span {
			display: inline;
		}
	}
	table {
		tr {
			td[colspan="2"] {
				white-space: normal !important;
			}
		}
	}
}

//home/stats
#stats {
	table {
		max-width: 100%;
	}
	tr {
		td {
			max-width: 200px;
			@extend %cropping-text;

			.rank {
				width: 80px;
				height: 30px;
				display: block;
				margin: 0 auto;
			}
			a {
				i {
					font-style: normal !important;
				}
			}
		}
		&:nth-child(4n+1) {
			& > td {
				background: rgba(246, 246, 246, 0.05);
			}
		}
	}
	.progress {
		position: relative;
		margin: -7px 0;
		height: 17px;

		span {
			position: absolute;
			color: rgb(0, 0, 0);
			width: 100%;
			text-align: center;
			top: 1px;
		}
	}
	.label {
		padding: 3px 6px;
		border-radius: 2px;
		background-color: rgba(230, 226, 149, 0.5);
		color: rgb(255, 255, 255);
		border: 1px solid rgb(230, 226, 149);

		&.label-primary {
			background-color: rgba(254, 126, 14, 0.5);
			color: rgb(255, 255, 255);
			border-color: rgb(254, 126, 14);
		}
		&.label-success {
			background-color: rgba(255, 204, 0, 0.5);
			color: rgb(255, 255, 255);
			border-color: rgb(255, 204, 0);
		}
		&.label-info {
			background-color: $info-bg-color;
			color: $info-text-color;
			border-color: $info-border-color2;
		}
		&.label-warning {
			background-color: rgba(255, 25, 4, 0.5);
			color: rgb(255, 255, 255);
			border-color: rgb(255, 25, 4);
		}
		&.label-danger {
			background-color: rgba(0, 0, 0, 0.5);
			color: rgb(255, 255, 255);
			border-color: rgb(0, 0, 0);
		}
	}
}

//news/new
#news {
	.col-lg-6, .col-lg-4 {
		& > a {
			position: relative;
			display: block;
			overflow: hidden;
			height: 200px;
			width: 100%;

			& > img {
				width: 100%;
				min-height: 200px;
			}

			&:hover {
				& > div {
					background: rgba(0,0,0,0);
				}
			}

			& > div {
				position: absolute;
				height: 100%;
				width: 100%;
				background: rgba(0,0,0,0.7);
				top: 0px;
				color: $font-color;
				padding: 15px;

				&:hover {
					background: rgba(0,0,0,0.4);
				}
				& > div {
					position: absolute;
					bottom: 5px;
					max-width: calc( 100% - 30px );

					h3 {
						@extend %cropping-text;

						display: block;
						width: 100%;
						text-transform: uppercase;
						font-size: 18px;
						position: relative;
						line-height: 50px;

						&::after {
							content: "";
							position: absolute;
							bottom: 5px;
							left: 0;
							background: $font-color;
							height: 1px;
							width: 30%;
						}
					}
					span {
						font-size: 14px;
						display: block;
						margin-bottom: 5px;

						i {
							margin-right: 5px
						}
					}
					p {
						display: none;
					}
				}
			}			
		}
		margin-bottom: 30px;
	}
	@media (min-width:992px) {
		.col-lg-6:first-child {
			-ms-flex: 0 0 100%;
			flex: 0 0 100%;
			max-width: 100%;

			& > a {
				height: 400px;

				& > img {
					height: 400px;
				}
				& > div {
					p {
						display: block;
					}
				}
			}
		}
	}
	@media (max-width:991.98px) {
		.col-lg-6 {
			& > a {
				height: 150px !important;

				& > img {
					height: 150px !important;
				}
			}
		}
	}
	.col-lg-4 {
		& > a {
			height: 150px !important;

			& > img {
				height: 150px !important;
			}
		}
	}
}
.full-new {
	h3 {
		font-size: 22px;
		margin-bottom: 5px;
		text-transform: uppercase;
	}
	p {
		&.info-line {
			color: $gray-font-color;
			font-size: 14px;

			a {
				color: $gray-font-color;

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

			span {
				margin-right: 15px;

				i {
					margin-right: 5px;
				}
			}
		}
	}
}

//-----------------
//Bootstrap changes
//-----------------
//modal
*[data-toggle="modal"] {
	cursor: pointer;
}
.modal {
	.modal-content {
		background: rgb(57, 61, 75);
		box-shadow: 0 0 14px -3px rgba(22,22,30,0.73);
		border: 0;
		overflow: hidden;
		padding: 0;

		.modal-header {
			background: rgb(64, 71, 88);
			height: 80px;
			line-height: 80px;
			padding: 0 20px;
			margin-bottom: 30px;
			border-bottom: 2px solid $personal-color;
			box-shadow: inset 0 -4px 5px -5px $personal-color,0 0 5px 0 $personal-color;

			.close {
				position: absolute;
				right: 17px;
				top: 22px;
				font-size: 20px;
				margin: 3px;
				color: $personal-color;
				text-shadow: none;
				border-radius: 50%;
				box-shadow: inset 0 0 5px 0 $personal-color,0 0 5px 0 $personal-color;
				border: 1px solid $personal-color;
				height: 30px;
				width: 30px;
				padding: 2px;
				opacity: 1;

				span {
					color: $personal-color;
				}

				&:hover {
					background: $personal-color;
					color: $font-color;
					opacity: 1;

					span {
						color: $font-color;
					}
				}
			}
			h4 {
				color: $personal-color;
				text-transform: uppercase;
				font-family: $font-title-name;
				font-size: 18px;
				line-height: 80px;
			}
		}
		.modal-body {
			padding: 0 35px 35px 35px;

			table {
				td {
					vertical-align: middle;
				}
			}
		}
	}
}
.modal-backdrop.show {
    opacity: .75;
}
.modal-lg2 {
	width: 1200px;
}

//inputs
input, select {
	&.form-control, &[type="file"] {
		text-indent: 10px;
		height: 40px;
		line-height: 40px;
		margin-bottom: 10px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

		&:focus {
			box-shadow: none;
		}
	}
}
input[type="file"]::-webkit-file-upload-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 38px;
	line-height: 38px;
	border-radius: 0;
}

.form-control {
	color: $gray-font-color;
	background: rgb(64, 71, 88);
	border: 1px solid rgb(57, 61, 75);
	border-radius: 2px;
	font-size: 14px;

	&:focus, &:active, &:hover {
		box-shadow: none;
		color: $font-color;
		background: rgb(70, 77, 95);
		border-color: rgb(57, 61, 75);
	}
	&[disabled] {
		color: $light-font-color !important;
		cursor: not-allowed !important;
	}
}
select {
	&.form-control {
		text-indent: 3px;
		height: 40px !important;
	}
}
input {
	&[type="file"] {
		text-indent: 0;
		padding: 1px;
		border: 0;
		box-shadow: inset 0 0 1px 1px rgb(64, 71, 88);
		padding-bottom: 41px;
		overflow: hidden;
		max-width: 100%;
		background: rgb(64, 71, 88);
	}
	&.form-control.personal {
		font-family: $font-title-name;
		height: 42px;
		line-height: 42px;
		background: none;
		border: 0;
		border-bottom: 1px solid $personal-color-2;
		border-radius: 0;
		text-indent: 0;
		color: #c4c3ce;
		font-size: 15px;
		box-shadow: inset 0 -6px 5px -7px $personal-color-2;

		&:focus, &:active, &:hover {
			border-bottom: 1px solid $personal-color;
			box-shadow: inset 0 -6px 5px -7px $personal-color;
			color: $gray-font-color;
		}
	}
}
.input-xs {
	height: 18px;
	padding: 0 6px;
	font-size: 12px;
	line-height: 18px;
	border-radius: 2px;
	width: auto;

	&select {
		height: 23px;
		line-height: 23px;	
	}
	&[type="file"]{
		border-radius: 3px;
		padding: 0;
		height: 23px;
		width: auto;
		font-size: 12px;
		line-height: 23px;
	}
}

//input-group-sm
.input-group-sm {
	min-width: 150px;

	input {
		text-indent: 5px;
	}
}
.input-group {
	.input-group-text {
		height: 40px;
		background-color: rgb(245, 245, 245);
	}
	&.editing-date {
		select {
			padding-left: 5px;
			text-indent: 0;
		}
	}
	.input-group-prepend {
		& > button.btn {
			box-shadow: none;
			background: rgb(64, 71, 88);
			color: $gray-font-color;
			border: 1px solid rgb(57, 61, 75);
			border-radius: 2px;

			&:hover {
				background: rgb(70, 77, 95) !important;
				border-color: rgb(57, 61, 75) !important;
			}
		}
	}
}
input:hover,input:focus,button:hover,button:focus,select:hover,select:focus {
	z-index: 1 !important;
}

//form-group
.form-group {
	label {
		h4 {
			font-size: 16px;
			margin: 0;
			color: $gray-font-color;
		}
	}
}

//text
small {
	font-size: 85%;
	color: $gray-font-color;
}
* > p:last-child {
	margin-bottom: 0 !important;
}
p {
	margin-top: 0;
	margin-bottom: 20px;
}
.text-warning {
	color: $warning-text-color !important;
}
.text-success {
	color: $success-text-color !important;
}
.text-error, .text-danger {
	color: $error-text-color !important;
}

//buttons
a {
	&.btn {
		line-height: 36px;

		&.btn-outline-primary {
			color: $font-color !important;
		}
	}
	&[data-toggle="popover"] {
		cursor: pointer;
	}
}
a, input, button, label {
	&.btn {
		@extend %cropping-text;

		font-family: $font-title-name;
		text-transform: uppercase;
		padding: 0 18px;
		height: 40px;
		font-size: 15px;
		color: #FFF;
		border-radius: 25px;
		margin-bottom: 10px;
		box-shadow: inset 0 0 5px 0 $personal-color, 0 0 5px 0 $personal-color;

		&:hover {
			color: #FFF;
		}
		&.btn-primary, &.active {
			color: #FFF !important;
			background: $personal-color;
			border-color: $personal-color;

			span {
				color: #FFF !important;
			}
		}
		&.btn-outline-primary, &.btn-default {
			background: none;
			color: $personal-color;
			/*border: 2px solid $personal-color;*/
			
			&:hover:not([disabled]) {
				background: $personal-color;
				color: #FFF;

				span, i {
					color: #FFF !important;
				}
			}
		}
		&:focus {
			box-shadow: inset 0 0 5px 0 $personal-color, 0 0 5px 0 $personal-color;
		}

		&.btn-success, &.btn-success:focus {
			box-shadow: inset 0 0 5px 0 rgb(40, 167, 69),0 0 5px 0 rgb(40, 167, 69);
		}
		&.btn-warning, &.btn-warning:focus {
			box-shadow: inset 0 0 5px 0 rgb(255, 193, 7),0 0 5px 0 rgb(255, 193, 7);
		}
		&.btn-danger, &.btn-danger:focus {
			box-shadow: inset 0 0 5px 0 rgb(220, 53, 69),0 0 5px 0 rgb(220, 53, 69);
		}
		&.btn-sm {
			font-size: 15px;
			line-height: 33px;
			height: 35px;
		}
		.fa {
			line-height: 8px;
		}
		&.btn-xl {
			&[href="#"] {
				cursor: pointer;
			}

			display: block;
			width: 100%;
			height: 40px;
			font-size: 15px;
			outline: 2px dashed $info-border-color;
			margin-bottom: 0;
		}
		&[disabled] {
			cursor: not-allowed !important;
		}

	}
}

//blockquote
blockquote {
	padding: 10px;
	margin: 0 0 5px;
	border-left: 5px solid rgba(238, 238, 238, 0.12);
	background: rgba(238, 238, 238, 0.13) none repeat scroll 0% 0%;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
	margin-bottom: 0;
}
blockquote footer,
blockquote small,
blockquote .small {
	display: block;
	font-size: 80%;
	line-height: 1.42857143;
	color: #777;
}
blockquote footer:before,
blockquote small:before,
blockquote .small:before {
	content: '\2014 \00A0';
}
.blockquote-reverse,
blockquote.pull-right {
	padding-right: 15px;
	padding-left: 0;
	text-align: right;
	border-right: 5px solid #eee;
	border-left: 0;
}
.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
	content: '';
}
.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
	content: '\00A0 \2014';
}
blockquote:before,
blockquote:after {
	content: "";
}

//slider
#main-slider.carousel {
	margin-top: -100px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 12px 18px 0 rgba(0, 0, 0, 0.77);

	.carousel-caption {
		z-index: 10;
		padding: 0;
		color: $font-color;
		text-align: left;
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 100%;

		.slide-title {
			h1 {
				font-family: $font-title-name;
				font-size: 30px;
				font-weight: 600;

				a {
					color: $font-color;
				}
			}

			background: rgba(0, 0, 0, 0.65);
			padding: 20px;			
		}
		.slide-info {
			background: rgba(0, 0, 0, 0.65);
			padding: 20px;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding-bottom: 35px;

			p {
				color: rgb(221, 221, 221);
				width: 100%;
				display: block;
				padding-right: 200px;
				position: relative;
				padding-bottom: 20px;
				font-size: 16px;

				a {
					position: absolute;
					right: 0;
					top: 0;
					color: $font-color;
				}
			}
		}
	}
	
	/*
	.carousel-control-prev, .carousel-control-next {
	    height: 40px;
	    width: 40px;
		top: auto;
		border: 1px solid rgb(176, 176, 176);
		border-radius: 2px;
		padding-right: 1px;
		background: rgb(95, 95, 95);
		bottom: 30px;
	}
	.carousel-control-prev {
		right: 80px;
		left: auto;
	}
	.carousel-control-next {
	    right: 30px;
	}
    .carousel-control-next-icon, .carousel-control-prev-icon {
	    display: inline-block;
	    width: 10px;
	    height: 10px;
	}
	*/
	.carousel-indicators li {
		cursor: pointer;
		height: 12px;
		width: 12px;
		border-radius: 50%;		
		background-color: $font-color;

		&.active {
    		background-color: $personal-color;
		}
	}
}

//sizes
@media (max-width:575.98px) { //XS - Extra small  576px
}
@media (min-width:576px) { //SM - Small 576px
}
@media (max-width:767.98px) { //SM - Small 576px
}
@media (min-width:768px) { //MD - Medium 768px
}
@media (max-width:991.98px) { //MD - Medium 768px
}
@media (min-width:992px) { //LG - Large 992px
}
@media (max-width:1199.98px) { //LG - Large 992px
}
@media (min-width:1200px) { //XL - Extra large 1200px
}

//order
@media (max-width: 991.99px) {
	.order-is-first {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-is-last {
		-ms-flex-order: 13;
		order: 13;
	}
}
@media (min-width:992px) {
	.order-is-last {
		-ms-flex-order: -1;
		order: -1;
	}
	.order-is-first {
		-ms-flex-order: 13;
		order: 13;
	}
}

//tables
.table-responsive {
	width: 100%;
	margin-bottom: 15px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
@media (min-width: 992px) {
	.table-responsive {
		overflow: hidden;
	}
	.table-responsive > .table > thead > tr > th, 
	.table-responsive > .table > tbody > tr > th, 
	.table-responsive > .table > tfoot > tr > th, 
	.table-responsive > .table > thead > tr > td, 
	.table-responsive > .table > tbody > tr > td, 
	.table-responsive > .table > tfoot > tr > td {
		white-space: normal !important;
	}
}
.table-responsive > .table {
	margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
	white-space: nowrap;
}
.table-responsive > table.table {
	border: 0 !important;
}
.table-responsive > table.table > tbody:first-child > tr:first-child > th,
.table-responsive > table.table > tbody:first-child > tr:first-child > td,
.table-responsive > table.table > thead > tr:first-child > th,
.table-responsive > table.table > thead > tr:first-child > td {
	border-top: 0 !important;
}
.table-responsive > table.table > thead > tr > th:first-child,
.table-responsive > table.table > tbody > tr > th:first-child,
.table-responsive > table.table > tfoot > tr > th:first-child,
.table-responsive > table.table > thead > tr > td:first-child,
.table-responsive > table.table > tbody > tr > td:first-child,
.table-responsive > table.table > tfoot > tr > td:first-child {
	border-left: 0 !important;
}
.table-responsive > table.table > thead > tr > th:last-child,
.table-responsive > table.table > tbody > tr > th:last-child,
.table-responsive > table.table > tfoot > tr > th:last-child,
.table-responsive > table.table > thead > tr > td:last-child,
.table-responsive > table.table > tbody > tr > td:last-child,
.table-responsive > table.table > tfoot > tr > td:last-child {
	border-right: 0 !important;
}
.table-responsive > table.table > tbody > tr:last-child > th,
.table-responsive > table.table > tfoot > tr:last-child > th,
.table-responsive > table.table > tbody > tr:last-child > td,
.table-responsive > table.table > tfoot > tr:last-child > td {
	border-bottom: 0 !important;
}
table.table {
	background: transparent !important;

	&.table-sm {
		td {
			padding: 5px !important;
		}
	}
	& > thead {
		& > tr {
			& > td {
				font-family: $font-title-name;
				text-transform: uppercase;
				padding: 20px;
			}
		}
	}
	& > tbody {
		& > tr {
			&.danger {
				& > td {
					background: $error-bg-color !important;
					border-color: $error-border-color2;
					color: $error-text-color;

					span {
						color: $error-text-color;
					}
				}
			}
			&.success {
				& > td {
					background: $success-bg-color !important;
					border-color: $success-border-color2;
					color: $success-text-color;

					span {
						color: $success-text-color;
					}
				}
			}
			&.warning {
				& > td {
					background: $warning-bg-color !important;
					border-color: $warning-border-color2;
					color: $warning-text-color;

					span {
						color: $warning-text-color;
					}
				}
			}
			* {
				color: $gray-font-color;
			}
			& > td {
				//white-space: nowrap !important;
				padding: 20px;
				vertical-align: middle;
				font-size: 14px;
				line-height: 15px;
				color: $gray-font-color;
				border: 0;

				.btn {
					margin: 0;
				}
				p {
					margin: 0;
				}
				a {
					color: $links-color;
					white-space: nowrap;

					&[href*="profile"] img, img[src="../files/avatars/no_avatar.jpg"] {
						height: 30px !important;
						width: 30px !important;
						margin-right: 5px;
						border-radius: 50%;
					}
				}
				h4.modal-title {
					font-size: 18px;
				}
			}
		}
	}
	&.table-bordered {
		tr {
			td {
				border: 1px solid rgb(71, 76, 90);
			}
		}
	}
}
.responsive-bordered {
	border: 1px solid rgb(71, 76, 90);
}
.table-bg {
	tr {
		td {
			background: rgba(246, 246, 246, 0.05);
		}
	}
}
#search_ban_res_min {
	& > tr:nth-child(2n) {
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;

		& > td {
			height: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			border: 0 !important;
		}
	}
}
#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: rgba(245, 245, 245, 0.03);
}
#bans tr td:nth-child(1) a,
#tickets tr td:nth-child(2) a,
#open_tickets tr td:nth-child(2) a,
#close_tickets tr td:nth-child(2) a,
#search_ban_res_min tr td:nth-child(2) a {
	max-width: 300px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
}

#muts td, #banlist td, #stats td {
	max-width: 200px;
	vertical-align: middle;
	cursor: pointer;
}
td[colspan$="10"] img, td[colspan$="10"] {
	text-align: center;
	padding: 10px !important;
	color: $gray-font-color;
	font-weight: normal;
	font-size: 13px;
	background-color: rgba(246, 246, 246, 0.05);
	margin: 0 auto;
}

//table with modals fix
table tr[data-toggle="modal"] > td, table.admins tr > td {
	border-bottom: 0 !important;
}
.hidden-tr > td {
	height: 0 !important;
	border: 0 !important;
	padding: 0 !important;
}

//pagination
.pagination {
	display: inline-block;
	padding-left: 0;
	border-radius: 4px;
}
.pagination > li {
	cursor: pointer;
	display: inline;
}
.pagination > li > a,
.pagination > li > span {
	color: $gray-font-color;
	position: relative;
	float: left;
	padding: 0px 10px;
	margin-left: -1px;
	line-height: 1.42857143;
}
.pagination > li:first-child, .pagination > li:last-child {
	display: none;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	z-index: 2;
	color: $font-color;
	font-size: 18px;
	top: -3px;
}
.pagination > .active {
	cursor: default !important;
}
div[id^="pagination"] {
	display: block;
	margin: 0 auto;
	text-align: right;
	margin-bottom: 25px;

	ul {
		margin: 0;
		padding: 0;
	}
}
@media (max-width: 991.99px) {
	.pagination {
		& > li:nth-child(4), & > li:nth-child(5), & > li:nth-child(6), & > li:nth-child(7), & > li:nth-child(8), & > li:nth-child(9), & > li:nth-child(10) {
			display:none; 
		}
		& > li:nth-last-child(2), & > li:nth-last-child(3), & > li:nth-last-child(4) {
			display: inline !important; 
		}
	}
}

//---------------
//standardization
//---------------
//icons
.m-icon {
	@include fa-icons(Free);
	font-weight: 900;

	&.icon-trash:before {
		content: "\f2ed";
	}
	&.icon-remove:before {
		content: "\f00d";
	}
	&.icon-ok:before {
		content: "\f00c";
	}
	&.icon-pencil:before {
		content: "\f303";
	}
	&.icon-link:before {
		content: "\f0c1";
	}
	&.icon-time:before {
		font-weight: 400;
		content: "\f017";
	}
	&.icon-user:before {
		content: "\f007";
	}
	&.icon-up:before {
		content: "\f077";
	}
	&.icon-down:before {
		content: "\f078";
	}
	&.icon-left:before {
		content: "\f104";
	}
	&.icon-right:before {
		content: "\f105";
	}
	&.icon-plus:before {
		content: "\f067";
	}
	&.icon-minus:before {
		content: "\f068";
	}
	&.icon-bank:before {
		content: "\f19c";
	}
	&.icon-marker:before {
		content: "\f041";
	}
	&.icon-vk:before {
		font-family: 'Font Awesome 5 Brands';
		content: "\f189";
	}
	&.icon-steam:before {
		font-weight: 400;
		font-family: 'Font Awesome 5 Brands';
		content: "\f3f6";
	}
	&.icon-fb:before {
		font-family: 'Font Awesome 5 Brands';
		content: "\f39e";
	}
	&.icon-bars:before {
		content: "\f0c9";
	}
	&.icon-compress:before {
		content: "\f066";
	}
}

//with_code area
.with_code {
	overflow-wrap: break-word;

	ol {
		list-style: decimal;
		margin-left: 15px;
	}
	ul {
		list-style: disc;
		margin-left: 15px;
	}
	em {
		font-style: italic;
	}
	video {
		max-width: 100%;
	}
	.player {
		height: 40px;
		overflow: hidden;

		object {
			position: relative;
			margin-top: -22px;
		}
	} 
	video, iframe {
		border: 0;
		max-width: 100%;
	}
	img {
		max-width: 100%;
		height: auto;
		border-radius: 2px;

		&[style="margin-left:auto;margin-right:auto;"] {
			margin: 0 auto;
			display: block;
		}
	}
	.m-icon {
		font-size: 11px;
		margin-right: 2px;
	}
	&::after {
		clear: both;
		display: table;
		content: " ";
	}
	table {
		width: auto;
		max-width: 100% !important;

		tr {
			td {
				border: 1px solid rgb(71, 76, 90);
				padding: 5px;
				word-break: break-all;
				white-space: pre-wrap;
				word-wrap: break-word;
				background: rgba(246,246,246,0.05);
			}
		}
	}
	.g_sticker {
		max-width: 250px !important;
	}
}

//imgs
img.thumbnail-img {
	border-radius: 2px;
	height: auto;
	margin: 0;
	width: 100%;
}
#imgs {
	.thumbnail {
		max-width: 100px;
		margin-right: 10px;
		margin-bottom: 0;
		float: left;
	}
	&::before,
	&::after {
		display: table;
		content: " ";
	}
	&::after {
		clear: both;
	}
}

//spoiler
div.spoiler div.spoiler-title {
	font-weight: bold;
	padding: 20px;
	cursor: pointer;
	background: rgb(67, 71, 86);
	height: 60px;
	font-family: $font-title-name;
	font-size: 16px;
	color: $font-color;
	position: relative;
}
div.spoiler div.spoiler-title div.spoiler-toggle {
	display: inline-block;
	cursor: pointer;
	-webkit-user-modify: read-only;
	position: absolute;
	right: 15px;
	top: 23px;
	font-size: 12px;
}
div.spoiler div.spoiler-title div.hide-icon {
	&::after {
		@include fa-icons(Free);
		font-weight: 900;
		content: "\f077";
		color: $gray-font-color;
	}
}
div.spoiler div.spoiler-title div.show-icon {
	&::after {
		@include fa-icons(Free);
		font-weight: 900;
		content: "\f078";
		color: $gray-font-color;
	}
}
div.spoiler div.spoiler-content {
	font-size: 14px;
	border-top: 0;
	padding: 10px 20px;
	background: rgb(67, 71, 86);
	padding-top: 15px;
}
div.spoiler div.title-text {
	float: left;
	height: 24px;
	line-height: 20px;
	font-weight: normal;
}

//input error message
.error_message, .success_message {
	height: 0;
	margin: 0;
	font-size: 14px;
	position: relative;
	float: right;
	top: -40px;
	right: 10px;
}
.input_error {
	border-color: $error-border-color !important;
	background-color: $error-bg-color !important;

	&.personal {
		background: none !important;
		box-shadow: inset 0 -6px 5px -7px $error-border-color2 !important;
	}
}
.input_success {
	border-color: $success-border-color  !important;
	background-color: $success-bg-color !important;

	&.personal {
		background: none !important;
		box-shadow: inset 0 -6px 5px -7px $success-border-color2 !important;
	}
}
.success_message {
	color: $success-text-color !important;
}
.error_message {
	color: $error-text-color !important;
}

//tinymce
.mce-tinymce {
	box-shadow: none !important;

	.mce-btn-small button {
		padding: 7px 6px;
	}
	.mce-path {
		padding: 14px;
	}
	.mce-btn-group:not(:first-child) {
		border-left: 0;
	}
}
.mce-fullscreen {
	div[id^="mceu_"].mce-container.mce-fullscreen {
		z-index: 2000;
	}
}

//label
.label {
	&.label-default {
		color: $info-text-color;
	}
	&.label-success {
		color: $success-text-color;
	}
	&.label-danger {
		color: $error-text-color;
	}
}

//empty-element
.empty-element {
	display: block;
	width: 100%;
	padding: 10px;
	text-align: center;
	color: $gray-font-color;
	max-height: 40px;
	font-size: 14px;
}

//----------
//components
//----------
// Owl Carousel
.owl-carousel {
	display: none;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	position: relative;

	&.smiles_panel {
		& *::selection, & *::-moz-selection {
			background: none;
		}
		.owl-stage-outer {
			z-index: 1060;
			width: 212px;
			margin-left: 20.5px;
		}
		.owl-nav {
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1059;
		}
		.owl-prev, .owl-next {
			overflow: hidden;
			border: 1px solid $dark-border-color;
			height: 40px;
			width: 18px;
			padding-top: 10px;
			text-align: center;
			color: $gray-font-color;
		}
		.owl-prev {
			border-radius: 3px 0 0 3px;
			float: left;
		}
		.owl-next {
			border-radius: 0 3px 3px 0;
			float: right;
		}
		.smilebtn {
			float: left;
			height: 40px;
			border: 1px solid $dark-border-color;
			cursor: pointer;
			display: block;
			width: 100%;
			line-height: 34px;
			text-align: center;
			border-right: 0;

			img {
				display: inline-block;
				height: 30px;
				width: 30px;
			}
			&:hover, &:active {
				background: rgb(64, 71, 88);
			}
		}
	}

	&.owl-loading {
		opacity: 0;
		display: block;
	}
	&.owl-hidden {
		opacity: 0;
	}
	&.owl-rtl {
		direction: rtl;

		.owl-item {
			float: right;
		}
	}
	&.owl-text-select-on .owl-item {
		-webkit-user-select: auto;
		-moz-user-select: auto;
		-ms-user-select: auto;
		user-select: auto;
	}
	&.owl-loaded {
		display: block;
	}
	.animated {
		-webkit-animation-duration: 1000ms;
		animation-duration: 1000ms;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	.owl-animated-in {
		z-index: 0;
	}
	.owl-animated-out {
		z-index: 1;
	}
	.fadeOut {
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	}
	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	.owl-height {
		-webkit-transition: height 500ms ease-in-out;
		-moz-transition: height 500ms ease-in-out;
		-ms-transition: height 500ms ease-in-out;
		-o-transition: height 500ms ease-in-out;
		transition: height 500ms ease-in-out;
	}
	.owl-stage {
		position: relative;
		-ms-touch-action: pan-Y;
	}
	.owl-stage:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	.owl-stage-outer {
		position: relative;
		overflow: hidden;
		-webkit-transform: translate3d(0px, 0, 0);
	}
	.owl-controls .owl-nav .owl-prev,
	.owl-controls .owl-nav .owl-next,
	.owl-controls .owl-dot {
		cursor: pointer;
		cursor: hand;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.owl-refresh .owl-item {
		display: none;
	}
	.owl-item {
		position: relative;
		min-height: 1px;
		float: left;
		-webkit-backface-visibility: hidden;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.owl-item img {
		display: block;
		width: 100%;
		-webkit-transform-style: preserve-3d;
	}
	.owl-grab {
		cursor: move;
		cursor: -webkit-grab;
		cursor: -o-grab;
		cursor: -ms-grab;
		cursor: grab;
	}
	.owl-item .owl-lazy {
		opacity: 0;
		-webkit-transition: opacity 400ms ease;
		-moz-transition: opacity 400ms ease;
		-ms-transition: opacity 400ms ease;
		-o-transition: opacity 400ms ease;
		transition: opacity 400ms ease;
	}
	.owl-item img {
		transform-style: preserve-3d;
	}
	.owl-video-wrapper {
		position: relative;
		height: 100%;
		background: #000;
	}
	.owl-video-play-icon {
		position: absolute;
		height: 80px;
		width: 80px;
		left: 50%;
		top: 50%;
		margin-left: -40px;
		margin-top: -40px;
		background: url("owl.video.play.png") no-repeat;
		cursor: pointer;
		z-index: 1;
		-webkit-backface-visibility: hidden;
		-webkit-transition: scale 100ms ease;
		-moz-transition: scale 100ms ease;
		-ms-transition: scale 100ms ease;
		-o-transition: scale 100ms ease;
		transition: scale 100ms ease;
	}
	.owl-video-play-icon:hover {
		-webkit-transition: scale(1.3, 1.3);
		-moz-transition: scale(1.3, 1.3);
		-ms-transition: scale(1.3, 1.3);
		-o-transition: scale(1.3, 1.3);
		transition: scale(1.3, 1.3);
	}
	.owl-video-playing .owl-video-tn,
	.owl-video-playing .owl-video-play-icon {
		display: none;
	}
	.owl-video-tn {
		opacity: 0;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		-webkit-transition: opacity 400ms ease;
		-moz-transition: opacity 400ms ease;
		-ms-transition: opacity 400ms ease;
		-o-transition: opacity 400ms ease;
		transition: opacity 400ms ease;
	}
	.owl-video-frame {
		position: relative;
		z-index: 1;
	}
}
.no-js .owl-carousel {
	display: block;
}

//lightbox
.lightboxOverlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1100;
	background-color: black;
	opacity: 0.75;
	display: none;
}
.lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 1110;
	text-align: center;
	line-height: 0;
	font-weight: normal;

	.lb-outerContainer {
		position: relative;
		background-color: white;
		*zoom: 1;
		width: 250px;
		height: 250px;
		margin: 0 auto;
		border-radius: 2px;

		.lb-container {
			padding: 2px;

			> .nav {
				left: 0;
			}
			.lb-loader {
				position: absolute;
				top: 43%;
				left: 0;
				height: 25%;
				width: 100%;
				text-align: center;
				line-height: 0;

				.lb-cancel {
					display: block;
					width: 32px;
					height: 32px;
					margin: 0 auto;
					background: url("../img/loader.gif") no-repeat;
				}
			}
			.lb-image {
				display: block;
				height: auto;
				max-width: inherit;
				border-radius: 3px;
			}
			.lb-nav {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 10;

				a {
					outline: none;
					background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
				}

				.lb-prev, .lb-next {
					height: 100%;
					cursor: pointer;
					display: block;
				}

				a {
					&.lb-prev, &.lb-next {
						opacity: 0;
						transition: opacity 0.6s;
						background: rgba(0, 0, 0, 0.26);
					}
					&.lb-prev:after, &.lb-next:after {
						@include fa-icons(Free);
						line-height: 0.75em;
						font-weight: 900;
						font-size: 30px;
						color: #FFF;
						position: absolute;
						top: 50%;
						margin-top: -0.325em;
					}
					&.lb-prev {
						width: 20%;
						left: 0;
						float: left;
						&::after {
							margin-left: -8px;
							left: 10%;
							content: "\f104";
						}
					}
					&.lb-next {
						width: 20%;
						right: 0;
						float: right;
						&::after {
							margin-right: -8px;
							right: 10%;
							content: "\f105";
						}
					}
					&.lb-prev:hover, &.lb-next:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
	.lb-outerContainer:after {
		content: "";
		display: table;
		clear: both;
	}
	a img {
		border: none;
	}
}
.lb-dataContainer {
	margin: 0 auto;
	padding-top: 5px;
	*zoom: 1;
	width: 100%;

	&::after {
		content: "";
		display: table;
		clear: both;
	}
	.lb-data {
		padding: 0 4px;
		color: #ccc;

		.lb-details {
			width: 85%;
			float: left;
			text-align: left;
			line-height: 1.1em;
		}
		.lb-caption {
			font-size: 13px;
			font-weight: bold;
			line-height: 1em;
		}
		.lb-number {
			display: block;
			clear: left;
			padding-bottom: 1em;
			font-size: 12px;
			color: #999;
		}

		.lb-close {
			color: #ccc;
			display: block;
			float: right;
			width: 30px;
			height: 30px;
			text-align: right;
			outline: none;
			opacity: 0.7;
			transition: opacity 0.2s;

			&::after {
				@include fa-icons(Free);
				font-weight: 900;
				content: "\f00d";
			}
			&:hover {
				cursor: pointer;
				opacity: 1;
			}
		}
	}
}

//noty
#noty_bottomRight_layout_container {
	li {
		background: rgb(64, 71, 88) !important;
		box-shadow: 0 0 14px -3px rgba(22,22,30,0.73) !important;
		border-radius: 0 !important;

		.noty_bar {
			&.noty_type_error {
				.noty_message {
					background: $error-bg-color;
					color: $error-text-color;
					border: 1px solid $error-border-color2;
				}
				a {
					color: $error-text-color;
				}
			}
			.noty_message {
				background: rgb(57, 61, 75);
				color: $gray-font-color;
				padding: 16px !important;
				text-transform: uppercase;

				.noty_text {
					margin: -15px;
					display: block;
					font-weight: 400;

					a {
						display: block;
						padding: 15px;
						color: $gray-font-color;
					}
					a:hover {
						color: $font-color;
					}
				}
			}
		} 
	}
}

.animated {
	border: 0 !important;
	box-shadow: none !important;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;

	.infinite {
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}
	.hinge {
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
	}
}
@-webkit-keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutDown {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}
@keyframes fadeOutDown {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}
.fadeOutDown {
	-webkit-animation-name: fadeOutDown;
	animation-name: fadeOutDown;
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

//nprogress
#nprogress {
	z-index: 1200;
	pointer-events: none;

	.bar {
		background: $links-color;
		position: fixed;
		z-index: 1200;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
	}
	.peg {
		display: block;
		position: absolute;
		right: 0;
		width: 100px;
		height: 100%;
		box-shadow: 0 0 10px #EEE, 0 0 5px #EEE;
		opacity: 1.0;

		-webkit-transform: rotate(3deg) translate(0px, -4px);
		-ms-transform: rotate(3deg) translate(0px, -4px);
		transform: rotate(3deg) translate(0px, -4px);
	}
	.spinner {
		display: block;
		position: fixed;
		z-index: 1200;
		top: 15px;
		right: 15px;
	}
	.spinner-icon {
		width: 20px;
		height: 20px;
		box-sizing: border-box;

		border: solid 2px transparent;
		border-top-color: $links-color;
		border-left-color: $links-color;
		border-radius: 50%;

		-webkit-animation: nprogress-spinner 400ms linear infinite;
		animation: nprogress-spinner 400ms linear infinite;
	}
}
.nprogress-custom-parent {
	overflow: hidden;
	position: relative;
	.spinner, .bar {
		position: absolute;
	}
}
@-webkit-keyframes nprogress-spinner {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.result_ok, .result_ok_b {
	display: block;
	position: fixed;
	z-index: 1200;
	top: 16px;
	right: 18px;
	color: $links-color;
	font-size: 16px;
}
.result_error, .result_error_b {
	display: block;
	position: fixed;
	z-index: 1200;
	top: 17px;
	right: 18px;
	color: $links-color;
	font-size: 16px;
}

#cote {
	height: 150px;
	width: 150px;
	position: absolute;
	right: -25px;
	cursor: pointer;
	bottom: -29px;
	z-index: 1001;

	img {
		height: 150px;
		width: 150px;
	}
}
@media (max-width: 991.99px) {
	#cote {
		display: none;
	}
}

//vk-widgets
.vk-widgets {
	a[id^="admin_widget"] {
		margin-top: 3px;
		margin-bottom: 3px;
		display: block;

		img {
			display: block;
			width: 30px;
			height: 30px;
			float: left;
			border-radius: 50%;
		}
		span {
			display: block;
			width: calc( 100% - 40px );
			float: right;
			line-height: 30px;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		&::after {
			clear: both;
			display: table;
			content: " ";
		}
	}
}

//icons mobile fix
@media (max-width: 991.99px) {
	.wapper .header .menu-trigger {
		line-height: 20px;
		padding: 0;
	}
	.wapper > .footer ul.write_to_us li a i {
		padding: 4px 4px;
	}
	.wapper > .footer ul.write_to_us li:nth-child(2) a i {
		padding: 4.5px 3.5px;
	}
	.wapper > .footer ul.write_to_us li:nth-child(3) a i {
		padding: 4px 6.5px;
	}
	.wapper > .footer .follow_us a {
		padding: 5.5px 4.5px;
	}
	.wapper > .footer .follow_us a:nth-child(2) i {
		left: 2px;
	}
	.wapper > .footer .follow_us a:nth-child(3) i {
		left: 5px;
	}
}

//display
.disp-b {
	display: block;
}
.disp-n {
	display: none;
}