.register {
	width: 100%;
}

.register .top {
	margin: 0;
	padding: 0;
	text-align: center;
	font: 18px/33px 'Kanit', Arial, sans-serif;
}

.register .mid {
	margin: 0;
	padding: 0;
}

.register .mid .block-1 {
	margin: 0;
	padding: 0;
}

.register .mid .block-1 label {
	margin: 0;
	padding: 0;
	font: 18px/33px 'Kanit', Arial, sans-serif;
}

.register .mid .block-2 {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

.register .mid .block-2 label {
	margin: 0;
	padding: 0;
	font: 18px/19px 'Kanit', Arial, sans-serif;
}

.register .block-3 {
	margin: 0;
	padding: 0;
	padding-top: 17px;
	font: 18px/33px 'Kanit', Arial, sans-serif;
}

.register .mid .block-4 {
	margin: 0;
	padding: 0;
	padding-top: 23px;
	/* margin-bottom:10px; */
}

.register .mid .block-4 label {
	margin: 0;
	padding: 0;
	font: 18px/19px 'Kanit', Arial, sans-serif;
}

.register .form-check-label {
	padding-left: 10px;
}

.register .floating-label-group {
	position: relative;
	margin-top: 15px;
	margin-bottom: 25px;
}

.register .floating-label {
	color: #cccccc;
	position: absolute;
	pointer-events: none;
	top: 9px;
	left: 12px;
	transition: all 0.1s ease;
	font: 16px/20px 'Kanit', Arial, sans-serif;
}

.register input:focus~.floating-label, input:not(:placeholder-shown)~.floating-label {
	/* input:not(:focus):valid ~ .floating-label { */
	top: -15px;
	bottom: 0px;
	left: 0px;
	font-size: 12px;
	opacity: 1;
	color: #404040;
}

.register .form-control {
	border: none;
	border-bottom: 1px solid #0082cb;
	border-radius: 0;
	font: 16px/20px 'Kanit', Arial, sans-serif;
}

.register .form-control:focus {
	border-bottom: 2px solid #3ccaff;
}

.register .stat-absent {
	margin: 0;
	padding: 0
}

.register .stat-absent .table-block {
	margin: 0;
	padding: 0;
}

.register .stat-absent .table-block table th {
	text-align: center;
	font: 16px/20px 'Kanit', Arial, sans-serif;
}

.register .stat-absent .table-block table td {
	font: 16px/20px 'Kanit', Arial, sans-serif;
}

.register .stat-absent .table-block .table-striped tbody tr:nth-of-type(odd) {
	background-color: #eaf9ff;
}

@media (max-width: 374px) {
	.register .mid .block-2 label {
		margin-bottom: 10px;
	}
	.register .mid .block-2 .form-check-input {
		margin-bottom: 10px;
	}
	.register .floating-label-group {
		margin-bottom: 10px;
	}
	.register .mid .block-4 {
		margin-left: 60px;
	}
	.register .stat-absent .table-block {
		width: 700px;
	}
}

@media (min-width: 375px) and (max-width: 419px) {
	.register .mid .block-2 label {
		margin-bottom: 10px;
	}
	.register .mid .block-2 .form-check-input {
		margin-bottom: 10px;
	}
	.register .floating-label-group {
		margin-bottom: 10px;
	}
	.register .mid .block-4 {
		margin-left: 60px;
	}
	.register .stat-absent .table-block {
		width: 700px;
	}
}

@media (min-width: 420px) and (max-width: 575px) {
	.register .mid .block-2 label {
		margin-bottom: 10px;
	}
	.register .mid .block-2 .form-check-input {
		margin-bottom: 10px;
	}
	.register .floating-label-group {
		margin-bottom: 10px;
	}
	.register .mid .block-4 {
		margin-left: 60px;
	}
	.register .stat-absent .table-block {
		width: 700px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.register .mid .block-2 label {
		margin-bottom: 10px;
	}
	.register .mid .block-2 .form-check-input {
		margin-bottom: 10px;
	}
	.register .floating-label-group {
		margin-bottom: 10px;
	}
	.register .mid .block-4 {
		margin-left: 60px;
	}
	.register .stat-absent .table-block {
		width: 700px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.register .mid .block-4 {
		margin-left: 60px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.register .mid .block-2 .col-lg-2 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

@media (min-width: 1200px) and (max-width: 1280px) {
	...
}

@media (min-width: 1281px) and (max-width: 1366px) {
	...
}

@media (min-width: 1367px) and (max-width: 1440px) {
	...
}

@media (min-width: 1441px) and (max-width: 1600px) {
	...
}