/* alignment */
.align-center {text-align: center !important; }
.align-left {text-align: left !important; }
.align-right {text-align: right !important; }
.float-left {float: left !important; }
.float-right {float: right !important; }
.full-pd { width: 100% !important;}

/* warning */
.warning-grey { color: #606060; font-size: 0.7em;}
.warning-light-grey { color: #c2c2c2; font-size: 0.7em;}
.warning-orange { color: #ef692e; font-size: 0.7em;}
.warning-info { color: #60c6cf; font-size: 0.7em;}

/* text */
.text-yellow {font-size: 1.5em; font-weight: 600; color: yellow; letter-spacing: -0.5px;line-height: 130%;}

/* color */
.black { color: #000 !important; }
.dark-grey { color:#444 !important; }
.grey { color: #606060 !important; }
.light-grey { color: #c2c2c2 !important; }
.orange { color: #ef692e !important; }

/* background */
.bg-yellow { background-color: #f2ab27 !important;}

/* font */
.fs05 {font-size: 0.5em !important; }
.fs06 {font-size: 0.6em !important; }
.fs07 {font-size: 0.7em !important; }
.fs08 {font-size: 0.8em !important; }
.fs09 {font-size: 0.9em !important; }
.fs10 {font-size: 1.0em !important; }
.fs11 {font-size: 1.1em !important; }
.fs12 {font-size: 1.2em !important; }
.fs13 {font-size: 1.3em !important; }
.fs14 {font-size: 1.4em !important; }
.fs15 {font-size: 1.5em !important; }
.fs16 {font-size: 1.6em !important; }
.fs17 {font-size: 1.7em !important; }
.fs18 {font-size: 1.8em !important; }
.fs19 {font-size: 1.9em !important; }
.fs20 {font-size: 2.0em !important; }

.f300 {font-weight: 300 !important; }
.f400 {font-weight: 400 !important; }
.f500 {font-weight: 500 !important; }
.f600 {font-weight: 600 !important; }

/* padding/margin */
.pd10 { padding: 10px !important; }
.pd20 { padding: 20px !important; }
.pd30 { padding: 30px !important; }
.pd40 { padding: 40px !important; }
.pd50 { padding: 50px !important; }

.pd-tb10 {padding: 10px 0;}
.pd-tb20 {padding: 20px 0;}
.pd-tb30 {padding: 30px 0;}
.pd-tb40 {padding: 40px 0;}
.pd-tb50 {padding: 50px 0;}

.pd-top05 {padding-top: 5px !important; }
.pd-top10 {padding-top: 10px !important; }
.pd-top20 {padding-top: 20px !important; }
.pd-top30 {padding-top: 30px !important; }
.pd-top40 {padding-top: 40px !important; }
.pd-top50 {padding-top: 50px !important; }

.pd-bottom10 {padding-bottom: 10px !important; }
.pd-bottom20 {padding-bottom: 20px !important; }
.pd-bottom30 {padding-bottom: 30px !important; }
.pd-bottom40 {padding-bottom: 40px !important; }
.pd-bottom50 {padding-bottom: 50px !important; }

.pd-left05 {padding-left: 5px !important; }
.pd-left10 {padding-left: 10px !important; }
.pd-left20 {padding-left: 20px !important; }
.pd-left30 {padding-left: 30px !important; }
.pd-left40 {padding-left: 40px !important; }
.pd-left50 {padding-left: 50px !important; }

.mg10 { margin: 10px !important; }
.mg20 { margin: 20px !important; }
.mg30 { margin: 30px !important; }
.mg40 { margin: 40px !important; }
.mg50 { margin: 50px !important; }

.mg-tb05 {margin: 5px 0;}
.mg-tb10 {margin: 10px 0;}
.mg-tb20 {margin: 20px 0;}
.mg-tb30 {margin: 30px 0;}
.mg-tb40 {margin: 40px 0;}
.mg-tb50 {margin: 50px 0;}

.mg-top05 {margin-top: 5px !important; }
.mg-top10 {margin-top: 10px !important; }
.mg-top20 {margin-top: 20px !important; }
.mg-top30 {margin-top: 30px !important; }
.mg-top40 {margin-top: 40px !important; }
.mg-top50 {margin-top: 50px !important; }

.mg-bottom05 {margin-bottom: 5px !important; }
.mg-bottom10 {margin-bottom: 10px !important; }
.mg-bottom20 {margin-bottom: 20px !important; }
.mg-bottom30 {margin-bottom: 30px !important; }
.mg-bottom40 {margin-bottom: 40px !important; }
.mg-bottom50 {margin-bottom: 50px !important; }

.mg-right10 {margin-right: 10px !important; }
.mg-right20 {margin-right: 20px !important; }
.mg-right30 {margin-right: 30px !important; }
.mg-right40 {margin-right: 40px !important; }
.mg-right50 {margin-right: 50px !important; }

/* width */
.width-20 { width: 20%; }
.width-25 { width: 25%; }
.width-30 { width: 30%; }
.width-40 { width: 40%; }
.width-50 { width: 50%; }
.width-60 { width: 60%; }
.width-65 { width: 65%; }
.width-70 { width: 70%; }
.width-75 { width: 75%; }
.width-80 { width: 80%; }
.width-100 { width: 100%; }


/* datepicker */
.datepicker_div {
	display: flex;
}

.datepicker_wrap {
	display: flex;
}
.datepicker_wrap:nth-child(2n) {
	margin-left: 10px;
}
.datepicker_wrap .datepicker_date_wrap {
	position: relative;
	width: 110px;
	border: 1px solid #ced4da;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 0 10px;
	display: flex;
	background-color: #fff;
}

.datepicker_wrap .datepicker_date_wrap:hover .datepicker_cancel {
	display: block;
}

.datepicker_wrap span {
	height: 31px;
	line-height: 33px;
	font-size: 13px;
}

.datepicker_wrap .datepicker_cancel {
	position: absolute;
	width: 25px;
	height: 32px;
	right: 0;
	color: #fc5454;
	background-color: transparent;
	display: none;
	border:0px;
}

.datepicker_wrap .ui-datepicker-trigger {
	padding: .375rem .75rem;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border:0px;
	background-color: #fac609;
	color:#fff;
}

/* etc */
.user-img { width: 32px; height: 32px; border-radius: 50%; background-color: #c2c2c2; margin-right: 5px;}
.comp-img { width: 60px; height: 60px; border-radius: 50%; background-color: #c2c2c2; margin-right: 5px;}
.nodata { text-align: center; padding: 10px 0;}
.pointer { cursor: pointer; }

.tb_th { font-size: 1.2em; background-color: #e5e5e5 !important; font-weight: 600;}
.tb_th2 { font-size: 1.1em; background-color: #e5e5e5 !important; font-weight: 600; }
.tb_th3 { font-size: 1em; background-color: #e7e7e780 !important; font-weight: 500; }
.tbl_wrap { background-color: #fff; }
.required { border : 1px solid red;}

/* page top search */
.list_search { overflow: hidden; display: flex; }
.list_search .datepicker_wrap { margin-left: 5px; flex-shrink: 0; }
.list_search > *:first-child { margin-left: 0; }
.list_search .datepicker_date_wrap.expand_width { width: 130px; }
.list_search .input-group-block2.layer_search { flex-basis: 180px; margin-left: 5px; flex-shrink: 0; }
.list_search select { max-width: 150px; margin-left: 5px; flex-shrink: 0; }
.list_search input:not([name='keyword']),.list_search .input-group-block2 span { width: 150px; }
.list_search input { margin-left: 5px; }
.list_search .submit_btn { width: 60px; margin-left: 5px; }

[class^="input-group-"] { flex-basis: 100%; display: flex; }
[class^="input-group-"] button { height: 33px; padding: 0 10px; }
[class^="input-group-"] button.init_btn { position: absolute; top: 1px; right: 0; width: 25px; background-color: transparent; color: #fc5454; padding: 0; display: none; }
[class^="input-group-"]:hover button.init_btn { display: block; }

.input-group-block2 input { width: 100%; }
.input-group-block2 > span { width: 100%; height: 33px; line-height: 32px; padding: 0 10px; border: 1px solid #ced4da; background-color: #fff; border-top-left-radius: 4px; border-bottom-left-radius: 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.input-group-block2 button { margin-left:5px; height: 30px; }
.input-group-block2 button.btn-search { width: auto !important; border : 1px solid #dcdcdc; color: #444; font-weight: 600; background: #eee; border-radius: 5px; }
.input-group-block2:not(.btn-left) button.init_btn { right: 35px; }
.input-group-block2 button span { width: max-content; font-size: inherit; display: block; }
.input-group-block2 button span i { margin-left: 10px; }
.input-group-block2.btn-left input,.input-group-block2.btn-left select { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; float: right; }
.input-group-block2.btn-left span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-block2.btn-left button { border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-block2.btn-side input { width: calc(100% - 66px); border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; float: left; }
.input-group-block2.btn-side button:first-child { border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-block2.checkbox_wrap { height: 33px; }
.input-group-block2.checkbox_wrap input[type='text'] { width: calc(100% - 5px); border-radius: 4px; margin-right: 5px; }
.input-group-block2.checkbox_wrap input[type='checkbox'] + label { position: relative; top: 5px; }
.input-group-block2.checkbox_wrap label { height: max-content; margin-right: 5px; flex: none; }