.appointment {
	width: 100%;
	height: 960px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #eeeeee;
}

.appointment .subform {
	height: 100%;
	width: 100%;
	overflow: hidden;
	float: left;
	padding: 10px;
	position: relative;
	overflow: scroll;
}

.appointment button {
	font-weight: bold;
	padding: 0 20px;
	-webkit-appearance: none;
	cursor: pointer;
	border-radius: 2px;
	line-height: 40px;
	font-size: 14px;
}

.appointment .back {
	float: left;
	background-color: #ffffff;
	border: 1px solid #797979;
}

.appointment .forward {
	float: right;
	border: none;
	background-color: #9d1350;
	color: #ffffff;
}

.appointment .field {
	background-color: #ffffff;
	border-radius: 4px;
	padding: 10px;
	margin: 0 0 10px 0;
	overflow: hidden;
}

.appointment h2 {
	margin: 0 0 10px 0;
	font-size: 20px;
	line-height: 30px;
	-webkit-text-size-adjust: none;
	padding: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.appointment textarea {
	width: 100%;
	font-size: 14px;
	resize: none;
	border: 1px solid #797979;
	font-family: Arial;
	height: 60px;
	line-height: 30px;
	border-radius: 4px;
	padding: 0 10px;
	-webkit-appearance: none;
}

.appointment input[type="text"] {
	width: 100%;
	line-height: 34px;
	border: 1px solid #797979;
	margin: 0 0 10px 0;
	padding: 0 10px;
	font-size: 14px;
	border-radius: 4px;
	-webkit-appearance: none;
}

.appointment .division {
	width: 50%;
	float: left;
	display: inline-block;
	padding: 0 10px 0 0;
}

.appointment .division:last-child {
	padding: 0;
}

.appointment .select {
	display: none;
	position: absolute;
}
.appointment .select + label {
	float: left;
	vertical-align: middle;
	display: inline-block;
	width: 50%;
	margin: 0 0 4px 0;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.appointment .select + label::before {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	background-color: #ffffff;
	border: 2px solid #424242;;
	border-radius: 10px;
	display: inline-block;
	content: "";
	vertical-align: middle;
	margin: 0 10px 0 0;
}

.appointment .select:checked + label::before {
	background-color: #ffffff;
	border: 6px solid #9d1350;
}

.appointment .select:checked + label {
	color: #9d1350;
}

.appointment .select:disabled + label::before {
	background-color: #f2f2f2;
	border: 2px solid #cccccc;
}

.appointment .select:disabled + label {
	color: #cccccc;
}

.appointment .complexselect {
	display: none;
}

.appointment .complexselect + label {
	display: block;
}

.appointment .complexselect + label img, .appointment .complexselect + label .img{
	border: 4px solid #797979;
	overflow: hidden;
	margin: 0 auto;
}

.appointment .complexselect + label .img {
	width: 100%;
	height: 180px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.appointment .complexselect:checked + label img, .appointment .complexselect:checked + label .img {
	border: 4px solid #9d1350;
}

.appointment .calendar {
	width: 100%;
	height: 240px;
	border-radius: 4px;
	overflow: hidden;
}

.appointment .calendar * {
	line-height: 30px;
	display: inline-block;
}

.appointment .calendar .prev, .appointment .calendar .next {
	width: 10%;
	text-align: center;
	float: left;
	background-color: #797979;
	font-size: 20px;
	color: #ffffff;
	cursor: pointer;
}

.appointment .calendar .month {
	width: 40%;
	text-align: right;
	font-size: 20px;
	float: left;
}

.appointment .calendar .year {
	width: 40%;
	text-align: left;
	float: left;
	font-size: 20px;
	padding-left: 10px;
	font-weight: bold;
}

.appointment .calendar .week {
	width: 14.285%;
	float: left;
	text-align: center;
	font-weight: bold;
}

.appointment .calendar .dates {
	position: relative;
	width: 100%
}

.appointment .calendar .dates .indent {
	height: 1px;
	float: left;
}

.appointment .calendar .dates .day {
	width: 14.285%;
	float: left;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	height: 30px;
	border-bottom: 2px solid #f2f2f2;
}

.appointment .calendar .dates .day:hover {
	background-color: #f2f2f2;
}

.appointment .calendar .dates .selected {
	background-color: #9d1350;
	color: #ffffff;
}

.appointment .calendar .dates .selected:hover {
	background-color: #9d1350;
}

.appointment .calendar .dates .today {
	color: #9d1350;
	background-color: #ffdde8;
	font-weight: bold;
}

.appointment .calendar .dates .day[data-status="holiday"] {
	background-color: #f2f2f2;
	color: #9a9a9a;
}

.appointment #location .division {
	width: 33%;
}
@media(max-width: 700px) {
	.appointment #location .division {
		width: 100%;
		padding: 0;
	}

	.appointment #location .complexselect + label .img {
		width: 100%;
		margin: 0 0 10px 0;
		height: 110px;
		background-size: contain;
	}
}