@import '~shared/styles/colors';

.root {
	padding: 20px;

	section {
		border-bottom: 1px solid @gray-light;
		display: flex;
		flex: 1 1 auto;
		padding: 20px 10px;

		&> div {
			flex: 1;
		}

		&:first-child {
			padding-top: 0px;
		}

		&:last-child {
			border-bottom-width: 0px;
		}

		@media (max-width: 600px) {
			display: flex;
			flex-direction: column;

			h2 {
				flex: none;
				margin-bottom: 20px;
			}

			&> :last-child {
				padding-left: 20px;
			}
		}
	}

	h2 {
		flex: 0 0 200px;
		font-size: 15px;
		font-weight: normal;
		line-height: 26px;
		margin: 0px;
		padding: 0px;
	}

	label {
		display: block;
		padding: 0px;

		span {
			font-size: 15px;
		}
	}

	input[type='checkbox'],
	input[type='radio'] {
		margin-right: 10px;
	}

	input[type='number'] {
		border: 1px solid @gray-light;
		font-size: 15px;
		padding: 5px 10px;
		width: 50px;
	}

	.minutes {
		margin-left: 5px;
	}
}
