main > .wrapper {
	margin: 0 auto;
	max-width: 755px;
	padding-top: 47px;
	position: relative;
	width: auto;
	font-family: "Open Sans", sans-serif;

	@media screen and (min-width: 1024px) {
		max-width: 960px;
		padding-top: 78px;
	}

	@media screen and (min-width: 1216px) {
		max-width: 1152px;
	}

	@media screen and (min-width: 1270px) {
		max-width: 1206px;
	}

	label {
		color: #333;
		cursor: pointer;
		display: block;
		font-size: 14px;
		line-height: 20px;
		margin: 11px 0;
		padding-left: 32px;
		padding-right: 5px;
		position: relative;
	}

	[type="checkbox"] {
		margin-right: 20px;
		left: 0;
		top: 20%;
		position: absolute;

		&:hover:before {
			border: 1px solid #88d2ff !important;
		}

		&:before {
			background: #ffffff;
			border-radius: 0;
			border-radius: 2px;
			border: 1px solid #ddd;
			content: "";
			cursor: pointer;
			height: 17px;
			height: 21px;
			left: 0;
			margin-top: -11px;
			margin-top: -9px;
			position: absolute;
			top: 50%;
			width: 17px;
			width: 21px;
		}

		&:after {
			content: url(/assets/pages/resources/check-mark.svg);
			left: 3px;
			opacity: 0;
			position: absolute;
			top: 0px;
			transform: scale(0);
			transition: all 0.2s;
		}

		&:checked:after {
			opacity: 1;
			transform: scale(1);
		}
	}

	aside {
		font-size: 18px;
		margin: 0 5px 0 5px;
		padding-top: 20px;
		position: fixed;
		width: 190px;
		z-index: 3;

		&::after {
			background-color: #fff;
			bottom: 0;
			content: "";
			display: block;
			height: 10px;
			left: 0;
			position: fixed;
			width: 100%;
			z-index: 3;
		}

		@media (max-width: 768px) {
			background-color: #fff;
			height: 100vh;
			left: -345px;
			margin: 0;
			overflow-y: scroll;
			padding-bottom: 15px;
			padding-left: 20px;
			top: 25px;
			transition: left 0.5s;
			width: 320px;
			z-index: 2;

			&.visible {
				left: 0;
			}
		}

		@media (min-width: 769px) {
			.categories {
				bottom: 0;
				overflow-y: auto;
				position: fixed;
				top: 120px;
				width: 195px;
			}
		}

		@media (min-width: 1024px) {
			margin-left: 0;
			margin: 0 15px 0 10px;
			width: 245px;

			.categories {
				top: 155px;
				width: 245px;
			}
		}

		@media (min-width: 1270px) {
			width: 270px;
		}

		.categories {
			margin-bottom: 25px;
		}

		h1 {
			font-size: 18px;
			font-weight: 600;
			font-weight: normal;
			margin-bottom: 20px;
			margin-top: 20px;

			@media (min-width: 769px) {
				position: fixed;
			}
		}

		.header {
			background-color: #fff;
			padding: 1px 0;
			position: sticky;
			top: 0;
			z-index: 1;

			@media (min-width: 769px) {
				display: none;
			}

			button {
				background: #fff;
				border: none;
				cursor: pointer;
				height: 20px;
				position: absolute;
				right: 17px;
				top: 20px;
				width: 20px;

				&::before,
				&::after {
					background: #4a4a4a;
					content: "";
					height: 1px;
					pointer-events: none;
					position: absolute;
					top: -5.5px;
					transition: all 0.4s ease;
					width: 100%;
				}

				&::after {
					top: 5.5px;
				}

				&::before {
					top: 10px;
					transform: rotate(45deg);
					left: -3px;
				}

				&::after {
					top: 10px;
					transform: rotate(135deg);
					left: -3px;
				}
			}
		}

		.footer {
			background-color: #fff;
			bottom: 0;
			height: 10px;
			position: sticky;
			z-index: 1;
		}
	}

	.overlay {
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		bottom: 0;
		display: flex;
		justify-content: center;
		left: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 46px;
		transition: all 0.4s ease;
		z-index: 1;

		&.active {
			opacity: 1;
			pointer-events: auto;

			@media (min-width: 769px) {
				opacity: 0;
			}
		}
	}

	.search-fields {
		@media (min-width: 769px) {
			background-color: #fff;
			border-bottom: 2px solid #e0e0e0;
			display: grid;
			grid-template-areas: "company software description available";
			grid-template-columns: 130px 120px 190px 108px;
			left: 205px;
			padding-top: 20px;
			position: absolute;
			top: 0;
			z-index: 1;
		}

		@media screen and (min-width: 1024px) {
			left: 250px;
			grid-template-columns: 237px 130px 215px 131px;
		}

		@media screen and (min-width: 1216px) {
			grid-template-columns: 266px 198px 304px 124px;
		}

		@media screen and (min-width: 1268px) {
			grid-template-columns: 265px 208px 337px 130px;
			left: 255px;
		}

		div {
			margin-bottom: 10px;
			padding-right: 20px;

			p {
				display: none;

				@media (min-width: 769px) {
					display: block;
					font-size: 16px;
					font-weight: 600;
					margin: 1px 0 8px 0;
				}
			}

			input {
				border-radius: 4px;
				border: 1px solid #dbdbdb;
				box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
				color: #363636;
				font-size: 14px;
				padding: 7px 5px 7px 8px;
				width: 100%;

				&::placeholder {
					color: #cecece;
				}
			}

			&.company {
				grid-area: company;
			}

			&.software {
				grid-area: software;
			}

			&.description {
				grid-area: description;
			}

			&.available {
				grid-area: available;
				display: none;

				@media (min-width: 769px) {
					display: initial;
					padding: 20px 0 0 3px;

					[type="checkbox"] {
						left: 0px;
						top: 15px;
						width: auto;
					}

					label {
						margin-bottom: 0;
						margin-top: 2px;
						padding-left: 30px;
					}
				}

				@media (min-width: 1024px) {
					padding-left: 10px;
				}

				@media (min-width: 1216px) {
					padding-left: 15px;
				}
			}
		}
	}

	button.filter {
		display: none;

		@media (max-width: 768px) {
			-webkit-user-select: none;
			background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9ImZhLXN2ZWx0ZSBpY29uLWZpbHRlciBzdmVsdGUtMWQxNXljaSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDg3Ljk3NiAwSDI0LjAyOEMyLjcxIDAtOC4wNDcgMjUuODY2IDcuMDU4IDQwLjk3MUwxOTIgMjI1Ljk0MVY0MzJjMCA3LjgzMSAzLjgyMSAxNS4xNyAxMC4yMzcgMTkuNjYybDgwIDU1Ljk4QzI5OC4wMiA1MTguNjkgMzIwIDUwNy40OTMgMzIwIDQ4Ny45OFYyMjUuOTQxbDE4NC45NDctMTg0Ljk3QzUyMC4wMjEgMjUuODk2IDUwOS4zMzggMCA0ODcuOTc2IDB6Ij48L3BhdGg+PC9zdmc+);
			background-position: 11px 12px;
			background-repeat: no-repeat;
			background-size: 45%;
			border-radius: 50%;
			bottom: 95px;
			height: 41px;
			position: fixed;
			right: 30px;
			user-select: none;
			width: 41px;
			z-index: 2;
			box-shadow:
				0 1px 6px 0 rgba(0, 0, 0, 0.06),
				0 2px 32px 0 rgba(0, 0, 0, 0.16);
			background-color: #009ddf;
			border: none;
			cursor: pointer;
			display: block;
			width: 41px;
		}
	}

	table {
		border-collapse: collapse;
		border: none;
		margin-bottom: 50px;
		width: 100%;

		@media screen and (min-width: 769px) {
			margin-left: 210px;
			margin-top: 95px;
			width: auto;
		}

		@media screen and (min-width: 1024px) {
			margin-left: 260px;
		}

		@media screen and (min-width: 1268px) {
			margin-left: 265px;
		}

		td {
			border: none;
			font-size: 14px;
			line-height: 20px;

			.grid {
				display: grid;
				grid-template-columns: 35% 65%;
				grid-template-areas:
					"company soft-name"
					"company description"
					"start-working start-working";

				@media screen and (min-width: 769px) {
					grid-template-columns: 60px 60px 120px 185px 121px;
					grid-template-areas: "company company soft-name description start-working";
				}

				@media screen and (min-width: 1024px) {
					grid-template-columns: 115px 115px 130px 220px 130px;
					grid-template-areas: "company company soft-name description start-working";
				}

				@media screen and (min-width: 1216px) {
					grid-template-columns: 80px 180px 197px 303px 130px;
				}

				@media screen and (min-width: 1268px) {
					grid-template-columns: 80px 180px 207px 340px 130px;
				}

				div {
					padding: 7px;

					&.company {
						display: grid;
						grid-area: company;
						grid-template-columns: 35% 65%;
						padding: 0;
						text-align: center;
						grid-template-areas:
							"logo logo"
							"company-name company-name";

						@media screen and (min-width: 1024px) {
							display: grid;
							grid-template-areas: "logo company-name";
							grid-template-columns: 35% 65%;
							padding: 7px;
						}

						.ext-link {
							top: 2px;
						}

						span {
							margin-right: 5px;
						}
					}

					&.logo {
						align-items: center;
						display: flex;
						grid-area: logo;
						justify-content: center;
						padding: 20px 10px 0 10px;

						@media screen and (min-width: 769px) {
							padding: 5px 0 0 0;

							img {
								margin-top: 5px;

								@media screen and (min-width: 1024px) {
									margin: 0;
								}
							}
						}

						@media screen and (min-width: 1024px) {
							align-content: center;
							align-items: center;
							display: grid;
							justify-items: center;
							padding: 7px;
						}
					}

					&.company-name {
						grid-area: company-name;

						@media screen and (min-width: 1024px) {
							align-content: center;
							align-items: center;
							display: inline-flex;
							flex-wrap: wrap;
							justify-items: center;
							padding: 7px;
							text-align: left;
						}
					}

					&.description {
						align-items: center;
						display: flex;
						font-size: 12px;
						grid-area: description;
						line-height: 20px;

						@media screen and (max-width: 768px) {
							padding-bottom: 30px;
						}
					}

					&.soft-name {
						align-content: center;
						align-items: center;
						display: inline-flex;
						flex-wrap: wrap;
						grid-area: soft-name;
						justify-items: center;

						@media screen and (max-width: 768px) {
							align-content: end;
							font-size: 16px;
							font-weight: bold;
							padding: 50px 10px 0 10px;
						}

						span {
							margin-right: 5px;
						}
					}

					&.start-working {
						align-items: center;
						display: flex;
						grid-area: start-working;
					}
				}
			}

			a {
				color: #009ddf;
				margin-right: 5px;
				text-decoration: none;

				&.ext-link {
					background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9ImZhLXN2ZWx0ZSBpY29uLWxpbmstZXh0IHN2ZWx0ZS0xZDE1eWNpIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU3NiA1MTIiPjxwYXRoIGZpbGw9IiMwMDlkZGYiIGQ9Ik01NzYgMjR2MTI3Ljk4NGMwIDIxLjQ2MS0yNS45NiAzMS45OC00MC45NzEgMTYuOTcxbC0zNS43MDctMzUuNzA5LTI0My41MjMgMjQzLjUyM2MtOS4zNzMgOS4zNzMtMjQuNTY4IDkuMzczLTMzLjk0MSAwbC0yMi42MjctMjIuNjI3Yy05LjM3My05LjM3My05LjM3My0yNC41NjkgMC0zMy45NDFMNDQyLjc1NiA3Ni42NzZsLTM1LjcwMy0zNS43MDVDMzkxLjk4MiAyNS45IDQwMi42NTYgMCA0MjQuMDI0IDBINTUyYzEzLjI1NSAwIDI0IDEwLjc0NSAyNCAyNHpNNDA3LjAyOSAyNzAuNzk0bC0xNiAxNkEyMy45OTkgMjMuOTk5IDAgMCAwIDM4NCAzMDMuNzY1VjQ0OEg2NFYxMjhoMjY0YTI0LjAwMyAyNC4wMDMgMCAwIDAgMTYuOTctNy4wMjlsMTYtMTZDMzc2LjA4OSA4OS44NTEgMzY1LjM4MSA2NCAzNDQgNjRINDhDMjEuNDkgNjQgMCA4NS40OSAwIDExMnYzNTJjMCAyNi41MSAyMS40OSA0OCA0OCA0OGgzNTJjMjYuNTEgMCA0OC0yMS40OSA0OC00OFYyODcuNzY0YzAtMjEuMzgyLTI1Ljg1Mi0zMi4wOS00MC45NzEtMTYuOTd6Ij48L3BhdGg+PC9zdmc+);
					background-repeat: no-repeat;
					display: inline-block;
					height: 12px;
					position: relative;
					text-decoration: none;
					top: 1px;
					width: 12px;
				}

				&.benchmark {
					background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDA5ZGRmIiBkPSJNNDk2IDM4NEg2NFY4MGMwLTguODQtNy4xNi0xNi0xNi0xNkgxNkM3LjE2IDY0IDAgNzEuMTYgMCA4MHYzMzZjMCAxNy42NyAxNC4zMyAzMiAzMiAzMmg0NjRjOC44NCAwIDE2LTcuMTYgMTYtMTZ2LTMyYzAtOC44NC03LjE2LTE2LTE2LTE2ek00NjQgOTZIMzQ1Ljk0Yy0yMS4zOCAwLTMyLjA5IDI1Ljg1LTE2Ljk3IDQwLjk3bDMyLjQgMzIuNEwyODggMjQyLjc1bC03My4zNy03My4zN2MtMTIuNS0xMi41LTMyLjc2LTEyLjUtNDUuMjUgMGwtNjguNjkgNjguNjljLTYuMjUgNi4yNS02LjI1IDE2LjM4IDAgMjIuNjNsMjIuNjIgMjIuNjJjNi4yNSA2LjI1IDE2LjM4IDYuMjUgMjIuNjMgMEwxOTIgMjM3LjI1bDczLjM3IDczLjM3YzEyLjUgMTIuNSAzMi43NiAxMi41IDQ1LjI1IDBsOTYtOTYgMzIuNCAzMi40YzE1LjEyIDE1LjEyIDQwLjk3IDQuNDEgNDAuOTctMTYuOTdWMTEyYy4wMS04Ljg0LTcuMTUtMTYtMTUuOTktMTZ6Ii8+PC9zdmc+DQo=);
					display: inline-block;
					height: 14px;
					position: relative;
					width: 14px;
				}
			}

			button {
				background-color: #009ddf;
				border-color: transparent;
				border-radius: 4px;
				color: #fff;
				cursor: pointer;
				font-size: 14px;
				font-weight: 500;
				padding: 6px 4px;
				transition: background-colorы 0.3s;
				width: 100%;

				@media screen and (min-width: 769px) {
					width: 105px;
				}

				@media screen and (min-width: 1024px) {
					width: 115px;
					padding: 6px;
				}

				@media screen and (min-width: 1216px) {
					width: 130px;
				}

				&:hover {
					background-color: #0094d2;
				}
			}
		}

		tr {
			border-bottom: 1px dotted #ddd;
			border: none;
			position: relative;

			@media (min-width: 769px) {
				&:nth-child(odd) {
					background-color: #fafafa;
				}
			}
		}
	}
}