* { box-sizing: border-box; }
body, html { 
	padding:0; margin:0; 
	width:100%;
	height:100%;
}
a { cursor:pointer; text-decoration:none; }
a:hover { text-decoration:none; }

.validation_box {
	position: relative;
}

.validation_box .vaildation {
	border: 2px solid rgb(193, 0, 21);
	border-radius: 4px;
}

.validation_box p {
	padding: 4px 12px 0;
	font-size: 12px;
	margin: 0;
	color: #C10015;
}

.active_tab {
	border-top: 2px solid #aaa;
	border-left: 2px solid #aaa;
	border-right: 2px solid #aaa;
	border-start-end-radius: 13px;
}
.active_button {
	color: white;
	background-color: #F15A29 !important;
	border: 1px solid black;
}

.required-field div:after {
	content: "*";
	color: red;
}

.bg-tomato {
	background-color: tomato;
}
.text-tomato {
	color: tomato;
}

/* table */
table {
	width:100%;
	border-collapse: collapse;
	border-spacing: 0;
}
table td {
	vertical-align:top;
	text-align : left;
}
table th,
table td,
table.q-table th,
table.q-table td {
	padding: 4px 8px; 
}
table.form-table > tr > td,
table.form-table > tbody > tr > td {
	padding : 0;
}


.box {
	border: 1px solid #999;
}
.box.round { border-radius: 3px; }

table.border {
	border-left:1px solid #aaa;
	border-top:1px solid #aaa;
}
table.border > thead > tr > th,
table.border > thead > tr > td,
table.border > tbody > tr > td {
	border-right:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
.sticky > .q-table > thead > tr:first-child > th {
	top: 0;
}
.sticky > .q-table > thead > tr > th {
	position: sticky;
	z-index: 1;
	background-color: #fff;
}

.border0 { border:0; }
.border-tl-r0 { border-top-left-radius:0; }
.border-tr-r0 { border-top-right-radius:0; }
.border-bl-r0 { border-bottom-left-radius:0; }
.border-br-r0 { border-bottom-right-radius:0; }
.border { border: 1px solid #aaa; }
.border-l0 { border-left: 0; }
.border-r0 { border-right: 0; }
.border-t0 { border-top: 0; }
.border-b0 { border-bottom: 0; }
.border-l1 { border-left: 1px solid #aaa; }
.border-r1 { border-right: 1px solid #aaa; }
.border-t1 { border-top: 1px solid #aaa; }
.border-b1 { border-bottom: 1px solid #aaa; }


[v-cloak] {
	display: none;
}

/* thumbnail */
.list-image-thumbnail {
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 2px;
	text-align: center;
	position: relative;
}
.list-image-thumbnail img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-width: 100%;
	max-height: 100%;
}


/* layout */
.pointer {
	cursor:pointer;
}

.page_container { 
	position: relative; 
	display: inline-block;
	width:100%;
	text-align: left;
	padding:15px 0 5px;
}

.page_column { 
	position: relative; 
	display:block; 
	float:left; padding:0 0px; }
.page_column_layout-1_1 { width: 100%; }
.page_column_layout-1_2 { width: 50%; }
.page_column_layout-1_3 { width: 33.3333%; }
.page_column_layout-2_3 { width: 66.6666%; }
.page_column_layout-1_4 { width: 25%; }
.page_column_layout-3_4 { width: 75%; }
.page_column_layout-1_5 { width: 20%; }
.page_column_layout-2_5 { width: 40%; }
.page_column_layout-3_5 { width: 60%; }
.page_column_layout-4_5 { width: 80%; }
.page_column_layout-1_6 { width: 16.6666%; }
.page_column_layout-5_6 { width: 83.3333%; }
.page_column_layout-3_8 { width: 37.5%; }

/* 
1) 모든 element는 page_element를 자동으로 갖는다.
   즉, 콤포넌트 안에서 명시적으로 써주지 않아도 페이지 랜더링시에 무조건 부여한다.
2) element는 하위에 element-item을 가질 경우 사용한다. 
   다시말해, element에는 margin:0 -15px과같이 사이즈를 늘리주지만, 
   image-element는 하위 아이템이 없으므로 margin이 0이다.
*/
.page_element {
	margin-bottom: 10px;
}

.element {
	position: relative;
	margin-left:-15px;
	margin-right:-15px;
	padding:0;
	display:flex;
	flex-wrap: wrap;
}
.element-item {
	float:left;
	padding:0 15px;
	margin:0;
}
.element.column-1 .element-item { width: 100%; }
.element.column-2 .element-item { width: 50%; }
.element.column-3 .element-item { width: 33.3333%; }
.element.column-4 .element-item { width: 25%; }
.element.column-5 .element-item { width: 20%; }
.element.column-6 .element-item { width: 16.6666%; }

@media (max-width: 768px)  {
	.page_column_layout-1_2,
	.page_column_layout-2_3,
	.page_column_layout-3_4,
	.page_column_layout-2_5,
	.page_column_layout-3_5,
	.page_column_layout-4_5,
	.page_column_layout-5_6,

	.page_column_layout-1_3,
	.page_column_layout-1_4,
	.page_column_layout-1_5,
	.page_column_layout-1_6,
	.page_column_layout-3_8 { width: 100%; }
	
	.page_element { padding-left: 10px; padding-right: 10px; }
	.page_column_layout-1_4 .page_element,
	.page_column_layout-1_5 .page_element,
	.page_column_layout-1_6 .page_element { 
		width: 50%; 
		float: left;
	}
	
	.element.column-1 .element-item,
	.element.column-2 .element-item { width: 100%; }
	.element.column-3 .element-item,
	.element.column-4 .element-item,
	.element.column-5 .element-item,
	.element.column-6 .element-item { width: 50%; }
	
	#app {
		overflow-x : hidden;
	}
}

.flexbox-parent {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* align items in Main Axis */
	align-items: stretch; /* align items in Cross Axis */
	align-content: stretch; /* Extra space in Cross Axis */
}
.flexbox-vspace {
	flex: 1; 
}

/* margin */
.ma0 { margin:0; }
.ma1 { margin:2px; }
.ma2 { margin:4px; }
.ma3 { margin:6px; }
.mx0 { margin-left:0; margin-right:0; }
.mx1 { margin-left:2px; margin-right:2px; }
.mx2 { margin-left:4px; margin-right:4px; }
.mx3 { margin-left:6px; margin-right:6px; }
.my0 { margin-top:0; margin-bottom:0; }
.my1 { margin-top:2px; margin-bottom:2px; }
.my2 { margin-top:4px; margin-bottom:4px; }
.my3 { margin-top:6px; margin-bottom:6px; }
.ml0 { margin-left:0; }
.ml1 { margin-left:2px; }
.ml2 { margin-left:4px; }
.ml3 { margin-left:6px; }
.mr0 { margin-right:0; }
.mr1 { margin-right:2px; }
.mr2 { margin-right:4px; }
.mr3 { margin-right:6px; }
.mt0 { margin-top:0; }
.mt1 { margin-top:2px; }
.mt2 { margin-top:4px; }
.mt3 { margin-top:6px; }
.mb0 { margin-bottom:0; }
.mb1 { margin-bottom:2px; }
.mb2 { margin-bottom:4px; }
.mb3 { margin-bottom:6px; }

.mx-1 { margin-left:-2px; margin-right:-2px; }
.mx-2 { margin-left:-4px; margin-right:-4px; }
.mx-3 { margin-left:-6px; margin-right:-6px; }
.my-1 { margin-top:-2px; margin-bottom:-2px; }
.my-2 { margin-top:-4px; margin-bottom:-4px; }
.my-3 { margin-top:-6px; margin-bottom:-6px; }
.ml-1 { margin-left:-2px; }
.ml-2 { margin-left:-4px; }
.ml-3 { margin-left:-6px; }
.mr-1 { margin-right:-2px; }
.mr-2 { margin-right:-4px; }
.mr-3 { margin-right:-6px; }
.mt-1 { margin-top:-2px; }
.mt-2 { margin-top:-4px; }
.mt-3 { margin-top:-6px; }
.mb-1 { margin-bottom:-2px; }
.mb-2 { margin-bottom:-4px; }
.mb-3 { margin-bottom:-6px; }

/* padding */
.pa0 { padding:0; }
.pa1 { padding:2px; }
.pa2 { padding:4px; }
.pa3 { padding:6px; }
.px0 { padding-left:0; padding-right:0; }
.px1 { padding-left:2px; padding-right:2px; }
.px2 { padding-left:4px; padding-right:4px; }
.px3 { padding-left:6px; padding-right:6px; }
.py0 { padding-top:0; padding-bottom:0; }
.py1 { padding-top:2px; padding-bottom:2px; }
.py2 { padding-top:4px; padding-bottom:4px; }
.py3 { padding-top:6px; padding-bottom:6px; }
.pl0 { padding-left:0; }
.pl1 { padding-left:2px; }
.pl2 { padding-left:4px; }
.pl3 { padding-left:6px; }
.pr0 { padding-right:0; }
.pr1 { padding-right:2px; }
.pr2 { padding-right:4px; }
.pr3 { padding-right:6px; }
.pt0 { padding-top:0; }
.pt1 { padding-top:2px; }
.pt2 { padding-top:4px; }
.pt3 { padding-top:6px; }
.pb0 { padding-bottom:0; }
.pb1 { padding-bottom:2px; }
.pb2 { padding-bottom:4px; }
.pb3 { padding-bottom:6px; }

/* width */
.w20px { width:20px; }
.w40px { width:40px; }
.w60px { width:60px; }
.w80px { width:80px; }
.w100px { width:100px; }
.w120px { width:120px; }
.w140px { width:140px; }
.w160px { width:160px; }
.w180px { width:180px; }
.w200px { width:200px; }
.w20p { width:20%; }
.w25p { width:25%; }
.w30p { width:30%; }
.w40p { width:40%; }
.w50p { width:50%; }
.w100p { width:100%; }
.h100p { height:100%; }

/* display */
.d-none { display:none; }
.d-block { display:block; }
.d-inline-block { display:inline-block; }
.d-flex { display:flex; }
.d-inline-flex { display:inline-flex; }
.d-table { display:table; }
.d-row { display:table-row; }
.d-col { display:table-cell; }

/* position */
.p-relative { position:relative; }
.p-absolute { position:absolute; }
.p-sticky { position:sticky;z-index:1; }
.p-left { left:0; }
.p-right { right:0; }
.p-top { top:0; }
.p-bottom { bottom:0; }

/* float */
.f-left { float:left; }
.f-right { float:right; }

/* vertical-align */
.v-top { vertical-align:top; }
.v-middle { vertical-align:middle; }
.v-bottom { vertical-align:bottom; }

/* clearfix */
.clearfix::after {
	content: "";
	clear: both;
	display: block;
}

/* font */
.ft10 { font-size:10px; }
.ft12 { font-size:12px; }
.ft14 { font-size:14px; }
.ft16 { font-size:16px; }
.ft18 { font-size:18px; }
.ft20 { font-size:20px; }

/* height */
.clear-mh {
	min-height:unset;
}

/* width */
.width-hidden {
	overflow-x:hidden;
}

.text-omr {
	color: #DC3545;
}
.bg-omr {
	background-color: #E97B86;
}

.table_omr {
	border-top: 1px solid #DC3545;
	border-left: 1px solid #DC3545;
	border-collapse: initial;
}
	.table_omr tr td {
		padding: 0;
		vertical-align: middle;
		border-right: 1px solid #DC3545;
		border-bottom: 1px solid #DC3545;
	}

.student_table {

}
	.student_table tr td {
		padding: 0;
		max-height: 40px;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
/* dashboard layout */
.page_main {
	background: #fff;
}
.page_contents {
	background: #fff;
}