* {
  box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	background: #EEE;
}

h1, h2 {
	margin: 0;
	margin-bottom: 16px;
	font-weight: 300;
	font-size: 32px;
}

h2 {
	font-size: 20px;
	text-align: center;
}

a {
	text-decoration: none;
	color: #000;
}

b {
	font-weight: 700;
}

#content {
	margin: 32px auto;
	max-width: 800px;
	padding: 32px;
	background: #FFF;
	position: relative;
}

.lang {
	position: absolute; 
	right: 32px; 
	top: 32px;
}

.steps {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}

.steps hr {
	border: 1px solid #DDD;
}

.step, .steps hr {
	text-align: center;
	flex: 1;
}

.step.active {
	font-weight: 700;
}

.dot {
	width: 48px;
	height: 48px;
	line-height: 48px;
	background: #999;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	color: #FFF;
	font-weight: 300;
	margin-bottom: 8px;
	font-size: 20px;
}

.step.active .dot, .step.done .dot {
	background: #00a1d8;
}

.calendar-header {
	font-size: 20px;
	position: relative;
}

.month {
	text-align: center;
	padding: 8px 0;
}

.month-link {
	display: inline-block;
	color: #666;
	text-align: center;
	padding: 8px;
	position: absolute;
	top: 0;
}

.month-link:hover {
	background: #DDD;
	color: #000;
}

.calendar {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 16px;
}

.calendar a, .calendar span {
	
	padding: 16px 0;
	text-align: center;
}

.day {
	background: #d1f3b7;
	display: block;
	color: #666;
}

a.day:hover {
	background: #bfdfa7;
	color: #000;
}

.calendar span {
	background: #FFF;
}

.calendar span.day {
	background: #EEE;
	color: #999;
}

.calendar .weekday {
	background: #FFF;
	color: #666;
	font-weight: 700;
}

.calendar .full {
	background: #ffcec9;
	color: #666;
}

.time {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

.time a, .time span {
	padding: 16px;
	text-align: center;
}

.time a {
	background: #d1f3b7;
	color: #333;
}

.time a:hover {
	background: #bfdfa7;
	color: #000;
}

.time span {
	background: #EEE;
	color: #999;
}

.row {
	display: flex;
	gap: 8px;
}

.col {
	flex-grow: 1;
	flex-basis: 0;
}

.form-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.form-row > label {
	flex: 1;
	line-height: 32px;
}

.form-row > input, .form-row > select {
	flex: 1;
}

.input-field {
	position: relative; 
	width: 100%;
	margin-bottom: 32px;
}

.input-field label {
	position: absolute; 
	left: 8px; 
	top: -8px; 
	background: #FFF; 
	padding: 0 4px;
}

.input-field input:focus + label,
.input-field select:focus + label,
.input-field input:active + label,
.input-field select:active + label {
	color: #00a1d8;
}

.input-field input, .input-field select {
	height: 48px; 
	border-radius: 4px; 
	padding: 0 12px;
}

.input-field select {
	padding: 0 8px;
}

select, input {
	height: 32px;
	width: 100%;
	padding: 0 8px;
	border: 1px solid #999;
	outline: none;
}

select:focus, input:focus {
	border-color: #00a1d8;
}

button, a.button {
	display: inline-block;
	background: #00a1d8;
	border: 0;
	color: #FFF;
	padding: 0 16px;
	cursor: pointer;
	font-size: 16px;
	border-radius: 4px;
	height: 48px;
	line-height: 48px;
}

button:hover, a.button:hover {
	background: #0081ad;
}

button.green, a.button.green {
	background: #38ca74;
}

button.green:hover, a.button.green:hover {
	background: #2fa85f;
}