#desys {
	background-color: #ebeef2;
	position: relative;
	display: flex;
	width: 100%;
	min-width: 320px;
	min-height: 100%;
	font-family: 'Roboto';
	font-size: 14px;

	h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
		margin: 0 0 16px 0;
		font-weight: bold;
		color: #333;
	}
	h1, .h1 { font-size: 24px; }
	h2, .h2 { font-size: 22px; }
	h3, .h3 { font-size: 20px; }
	h4, .h4 { font-size: 18px; }
	h5, .h5 { font-size: 16px; }
	h6, .h6 { font-size: 16px; }

	.desys-side {
		background: #333;
		width: 275px;
		min-width: 275px;
		padding: 16px;
		color: #fff;
		.desys-side__logo {
			display: flex;
			align-items: center;
			text-transform: uppercase;
			white-space: nowrap;
			a {
				background: $red;
				display: block;
				padding: 2px 10px 3px;
				font-size: 20px;
				font-weight: 900;
				letter-spacing: 1px;
				color: $white;
			}
			span {
				display: block;
				padding: 2px 8px 3px;
				font-size: 16px;
				font-weight: bold;
			}
		}
		.desys-side__search {
			margin-top: 40px;
			.form-group {
				display: flex;
				.form-field {
					flex-grow: 1;
					.form-control {
						background: #fff;
						border: 1px solid #fff;
						@include border-radius(0);
						@include box-shadow();
					}
				}
				.form-button {
					.btn {
						background: #000;
						background: linear-gradient(180deg, #2D2D2D 0%, #000000 100%);
						border: 1px solid #000 !important;
						color: #fff !important;
						padding-left: 12px;
						padding-right: 12px;
						@include border-radius(0);
					}
				}
			}
		}
		.desys-menu {
			margin-top: 40px;
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				& > li {
					&:not(:first-child){
						margin-top: 8px;
					}
					&.active {
						position: relative;
						&:before {
							content: '';
							background: #8ad422;
							position: absolute; top: 6px; left: -20px;
							display: block;
							width: 8px;
							height: 8px;
							@include border-radius(50%);
						}
						a {
							color: #8AD422;
						}
					}
					a {
						border: none;
						display: block;
						color: #fff;
						text-decoration: none !important;
						&:hover {
							color: #8AD422;
						}
					}
					.icobox {
						&.size_16 {
							padding-left: 28px;
						}
					}
					ul {
						border-left: 1px solid #666;
						margin: 8px 0 0 32px;
						padding-left: 16px;
					}
				}
			}
		}
	}
	.desys-container {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.desys-header {
		background: #fff;
		padding: 12px 24px;
	}
	.desys-content {
		padding: 12px 24px;
		flex-grow: 1;
	}
	.desys-footer {
		background: #fff;
		padding: 12px 24px;
	}

	//
	.desys-header-options {
		display: flex;
		align-items: center;
		.desys-header-options__view {
			display: flex;
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					margin-left: 8px;
				}
				a {
					background: #e9e9e9;
					border: 1px solid #e5e5e5;
					display: block;
					width: 32px;
					height: 32px;
					line-height: 32px;
					color: #333;
					text-align: center;
					.fa-desktop { font-size: 15px; }
					.fa-mobile { font-size: 20px; }
				}
				&.active {
					a {
						background: linear-gradient(180deg, #E6E6E6 1.83%, #CCCCCC 100%);
						color: $blue;
					}
				}
			}
		}
		.desys-header-options__params {
			display: flex;
			margin: 0 0 0 auto;
			padding: 0;
			list-style: none;
			font-size: 13px;
			& > li {
				&:not(:first-child){
					margin-left: 16px;
				}
				label {
					input {
						margin-right: 4px;
					}
					&:hover {
						color: $blue;
						cursor: pointer;
					}
				}
			}
		}
	}

	//
	.desys-panel {
		background: #fff;
		@include box-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

		& + .desys-panel {
			margin-top: 32px;
		}

		.desys-panel__head {
			padding: 16px 24px;
		}
		.desys-panel__body {
			padding: 16px 24px;
			&:not(:first-child){
				border-top: 1px solid #e5e5e5;
			}
			pre {
				background: none;
				border: 0;
				margin: 0;
				padding: 0;
			}
			code {}
		}
		.desys-panel__table {
			&:not(:first-child){
				border-top: 1px solid #e5e5e5;
			}
			table {
				min-width: 100%;
				tr {
					td {
						padding: 16px 24px;
						vertical-align: top;
					}
					&:nth-of-type(odd){
						background: #f5f7fa;
					}
				}
			}
		}
		.desys-panel__footer {
			padding: 16px 24px;
			&:not(:first-child){
				border-top: 1px solid #e5e5e5;
			}
		}
	}
}