.redirects {

	&--table {
		@media (max-width: 640px) {
			&, thead, tbody, th, td, tr {
				display: block;
			}

			thead tr {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}

			td {
				padding: 10px !important;
				border-top: none !important;
			}

			.thin {
				width: calc(~"100% - 20px") !important;
				border-bottom: 2px solid #e3e5e8 !important;
			}

			.element.small {
				padding: 0 !important;
			}
		}
	}

	&--title-col {
		div,
		span,
		a {
			display: block !important;
		}
	}

	&--form {
		.fields {
			display: flex;
			margin-bottom: 10px;

			@media (max-width: 640px) {
				flex-wrap: wrap;

				> input {
					margin-bottom: 10px;
					margin-right: 0 !important;
				}
			}

			&.down {
				flex-direction: column;

				.field {
					margin-bottom: 10px;
				}

				textarea,
				input {
					margin-bottom: 10px;
				}

				input {
					max-width: 128px;
				}
			}

			&:not(.down) {
				input {
					margin-right: 10px;
				}
			}
		}

		.select:not(:last-child) {
			margin-right: 10px;
		}

		.type-select {
			display: flex;
			align-items: center;
			margin-top: 2px;

			color: #8f98a3;

			&:not(:last-of-type) {
				margin-bottom: 10px;
			}

			input {
				margin-bottom: 0 !important;
			}

			span {
				margin-left: 10px;
			}
		}
	}

	&--edit-row {
		background-color: #f4f4f4;

		td:first-child {
			padding-left: 10px;
		}

		td {
			@media (max-width: 640px) {
				padding: 5px 10px !important;
			}
		}

		td:last-child {
			padding-right: 10px;

			@media (max-width: 640px) {
				padding: 0 !important;
			}
		}
	}

	&--edit-controls {
		background-color: #f4f4f4;

		td {
			padding: 5px 10px !important;

			@media (max-width: 640px) {
				border-bottom-width: 2px !important;
				border-bottom-style: solid !important;
			}
		}

		input {
			margin-right: 10px;
		}
	}

}