.ADMINALERT{
    display : flex;
    justify-content : space-between;
    padding : .5rem .75rem;
    margin : 0 0 1rem 0;
    background-color : #F60;
    border-radius : .25rem;
    color : #FFF;
    font-size : .815rem;
}
.ADMINALERT > a{
    text-decoration : underline;
    cursor : pointer;
}

.BUTTONS{
    display : flex;
    justify-content : flex-end;
    align-items : center;
    margin-bottom : 1rem;
}
.BUTTONS > button{
    height : 2rem;
    padding : 0 1rem;
    background-color : #999;
    border : 0;
    border-radius : .25rem;
    color : #FFF;
    font-weight : bold;
    font-size : 1rem;
    cursor : pointer;
}
.BUTTONS > button#GOTO-REGIST{ background-color : #F90; }

#ORDERS{
    display : block;
    font-size : .815rem;
}

#ORDERS > thead{ display : block; }
#ORDERS > thead > tr{
    display : flex;
    align-items : center;
    background-color : #777;
    color : #FFF;
}
#ORDERS > thead > tr > th{
    flex-grow : 0;
    padding : .5rem 0;
    text-align : center;
    font-weight : bold;
}
#ORDERS > thead > tr > th:nth-child(1){ width : 6rem; }
#ORDERS > thead > tr > th:nth-child(2){ flex-grow : 1 }
#ORDERS > thead > tr > th:nth-child(3){ width : 8rem; }
#ORDERS > thead > tr > th:nth-child(4){ width : 9rem; }
#ORDERS > thead > tr > th:nth-child(5){ width : 8rem; }
#ORDERS > thead > tr > th:nth-child(6){ width : 10rem; }

#ORDERS.ADMIN > thead > tr > th:nth-child(1){ width : 6rem; }
#ORDERS.ADMIN > thead > tr > th:nth-child(2){ flex-grow : 1 }
#ORDERS.ADMIN > thead > tr > th:nth-child(3){ width : 8rem; }
#ORDERS.ADMIN > thead > tr > th:nth-child(4){ width : 8rem; }
#ORDERS.ADMIN > thead > tr > th:nth-child(5){ width : 9rem; }
#ORDERS.ADMIN > thead > tr > th:nth-child(6){ width : 8rem; }
#ORDERS.ADMIN > thead > tr > th:nth-child(7){ width : 10rem; }

#ORDERS > thead > tr > th > i#ORDERING{
	font-style : normal;
	font-size : 0;
}
#ORDERS > thead > tr > th > i#ORDERING::after{
	display : inline;
	content : '▲';
	margin-left : .25rem;
	font-size : .75rem;
	cursor : pointer;
}
#ORDERS > thead > tr > th > i#ORDERING.DESC::after{ content : '▼'; }

#ORDERS > tbody{ display : block; }
#ORDERS > tbody > tr{
    display : flex;
    align-items : center;
    border-bottom : solid 1px #DDD;
}
#ORDERS > tbody > tr > td{
    flex-grow : 0;
    padding : .5rem 0;
    text-align : center;
}
#ORDERS > tbody > tr > td:nth-child(1){ width : 6rem; }
#ORDERS > tbody > tr > td:nth-child(2){ flex-grow : 1; text-align : left; }
#ORDERS > tbody > tr > td:nth-child(3){ width : 8rem; }
#ORDERS > tbody > tr > td:nth-child(4){ width : 9rem; }
#ORDERS > tbody > tr > td:nth-child(5){ width : 8rem; }
#ORDERS > tbody > tr > td:nth-child(6){ width : 10rem; }

#ORDERS.ADMIN > tbody > tr > td:nth-child(1){ width : 6rem; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(2){ flex-grow : 1; text-align : left; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(3){ width : 8rem; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(4){ width : 8rem; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(5){ width : 9rem; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(6){ width : 8rem; }
#ORDERS.ADMIN > tbody > tr > td:nth-child(7){ width : 10rem; }

#ORDERS > tbody > tr > td strong.SS{ background-color : #FC0; }
#ORDERS > tbody > tr > td i{
	margin-left : .5rem;
	color : #E50;
	font-style : normal;
	font-weight : bold;
}
#ORDERS > tbody > tr > td i::before{ content : '[' }
#ORDERS > tbody > tr > td i::after{ content : ']' }

#ORDERS > tbody > tr > td > span.STATE{
    display : block;
    width : 5rem;
    height : 1.75rem;
    margin : 0 auto;
    background-color : #888;
    border-radius : .25rem;
    color : #FFF;
    font-weight : bold;
    font-size : .75rem;
    line-height : 1.75rem;
}
#ORDERS > tbody > tr > td > span.STATE.STEP0{ background-color : #CCC }
#ORDERS > tbody > tr > td > span.STATE.STEP1{ background-color : #666 }
#ORDERS > tbody > tr > td > span.STATE.STEP2{ background-color : #09C }
#ORDERS > tbody > tr > td > span.STATE.STEP3{ background-color : #A64 }
#ORDERS > tbody > tr > td > span.STATE.STEP4{ background-color : #3C9 }
#ORDERS > tbody > tr > td > span.STATE.STEP5{ background-color : #FC6 }

#ORDERS > tbody > tr > td > span.STATE.STEP6{ background-color : #E33 }

#ORDERS > tbody > tr > td > select[name="STATE"]{
	width : 5rem;
	height : 1.5rem;
	font-size : .75rem;
}
#ORDERS > tbody > tr > td > select[name="STATE"] > option{ color : #FFF; font-weight : bold; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="0"]{ background-color : #CCC; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="1"]{ background-color : #666; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="2"]{ background-color : #09C; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="3"]{ background-color : #A64; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="4"]{ background-color : #3C9; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="5"]{ background-color : #FC6; }
#ORDERS > tbody > tr > td > select[name="STATE"] > option[data-step="6"]{ background-color : #E33; }

#ORDERS > tbody > tr > td > input[name="DELIVCODE"]{ text-align : center; }

#ORDERS > tbody > tr:hover{
    background-color : #F5F5F5;
    cursor : pointer;
}

#PAGING{
    display : flex;
    align-items : center;
    justify-content : center;
    gap : .5rem;
    margin-top : 1rem;
}
#PAGING > a{
    min-width : .9rem;
    height : 1.4rem;
    padding : 0 .25rem;
    border : solid 1px #CCC;
    color : #888;
    text-align : center;
    line-height : 1.4rem;
    font-size : .875rem;
}
#PAGING > a.ON{
    border-color : #000;
    color : #000;
}
#PAGING > a:hover{
    background-color : #999;
    border-color : #999;
    color  : #FFF;
    cursor : pointer;
}

.BUTTONS{
	margin-top : .25rem;
}

.DOWNLOAD{
    display : flex;
    align-items : center;
    justify-content : center;
    gap : .5rem;
    margin-top : 1rem;
}
.DOWNLOAD > span{ font-size : .75rem; }
.DOWNLOAD > button{
    height : 2rem;
    padding : 0 1rem;
    background-color : #095;
    border-radius : .25rem;
    color : #FFF;
    cursor : pointer;
    vertical-align : middle;
}

#SEARCHFORM{
	display : flex;
	justify-content : center;
	align-items : center;
	gap : .5rem;
	margin-top : 1rem;
}
#SEARCHFORM > select{
	width : 7rem;
	height : 1.75rem;
	padding : 0 .5rem;
	font-size : .75rem;
}
#SEARCHFORM > input{
	height : 1.75rem;
}
#SEARCHFORM > button{
	height : 1.75rem;
	padding : 0 1rem;
    background-color : #09C;
    border-radius : .25rem;
    color : #FFF;
    cursor : pointer;
    vertical-align : middle;
}



@media ( max-device-width : 480px ){

	body{
		padding : 0;
		padding-bottom : 3rem;
	}

	.ADMINALERT{ margin : 0; }

	.BUTTONS{
		justify-content : flex-end;
		gap : 1rem;
		position : fixed;
		bottom : 0;
		left : 0;
		right : 0;
		height : 3.5rem;
		margin-bottom : 0;
		padding : 0;
		z-index : 10000;
	}
	.BUTTONS > button{
		height : 3.5rem;
		padding : 0;
		border-radius : 0;
	}
	.BUTTONS > button#GOTO-REGIST{ width : 100%; }
	
	#ORDERS > thead{ display : none; }

	#ORDERS > tbody > tr{
		position : relative;
		display : block;
		padding : 1rem;
		height : 3.5rem;
	}
	#ORDERS > tbody > tr > td{
		display : block;
		position : absolute;
		padding : 0;
		text-align : unset;
	}
	#ORDERS > tbody > tr > td:nth-child(1){
		top : 1rem;
		left : 1rem;
		width : auto;
		height : 1rem;
		font-size : .7rem;
	}
	#ORDERS > tbody > tr > td:nth-child(1)::before{ content : '주문번호 : '; }
	#ORDERS > tbody > tr > td:nth-child(2){
		top : 2rem;
		left : 1rem;
		right : 4.5rem;
		height : 2rem;
		font-size : 1.125rem;
		line-height : 2rem;
		overflow : hidden;
		text-overflow : ellipsis;
		white-space : nowrap;
	}
	#ORDERS > tbody > tr > td:nth-child(3){
		top : 4rem;
		left : 6rem;
		color : #666;
		font-size : .7rem;
	}
	#ORDERS > tbody > tr > td:nth-child(4){
		top : 4rem;
		left : 1rem;
		width : 6rem;
		color : #666;
		font-size : .7rem;
	}
	#ORDERS > tbody > tr > td:nth-child(5){
		top : 1rem;
		bottom : 1rem;
		right : 1rem;
		width : 3.5rem;
		height : 3.5rem;
	}

	#ORDERS > tbody > tr > td > span.STATE{
		display : flex;
		justify-content : center;
		align-items : center;
		width : 2.5rem;
		height : 2.5rem;
		padding : .5rem;
		text-align : center;
		font-size : .875rem;
		line-height : 1.125;
		word-break : break-all;
	}
	#ORDERS > tbody > tr > td strong.SS{
		background-color : #FC0;
	}


	#ORDERS.ADMIN > tbody > tr{
		padding : 0;
		height : 5rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(1){
		top : .75rem;
		left : .75rem;	
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(1)::before{ content : '주문번호 : '; }
	#ORDERS.ADMIN > tbody > tr > td:nth-child(2){
		top : 1.75rem;
		left : .75rem;
		right : 6.75rem;
		height : 1.75rem;
		font-size : 1rem;
		line-height : 1.75rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(3){
		top : 3.5rem;
		left : 5rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(4){
		top : 3.5rem;
		left : 7.5rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(4)::before{ content : '('; }
	#ORDERS.ADMIN > tbody > tr > td:nth-child(4)::after{ content : ')'; }
	#ORDERS.ADMIN > tbody > tr > td:nth-child(5){
		top : 3.5rem;
		left : .75rem;
		width : 5rem;
		font-size : .7rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(6){
		top : .75rem;
		bottom : auto;
		right : .75rem;
		width : 6rem;
		height : 1.5rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(6) > select{ width : 100%; height : 100%; }
	#ORDERS.ADMIN > tbody > tr > td:nth-child(7){
		top : 2.5rem;
		right : .75rem;
		width : 6rem;
		height : 1.5rem;
	}
	#ORDERS.ADMIN > tbody > tr > td:nth-child(7) > input{ width : 100%; height : 100%; }

	.BUTTONS.ADMIN > button#DELIVCODE-ALLACCEPT{
		width : 100%;
		background-color : #333;
	}

	.DOWNLOAD{ padding-bottom : 2rem; }

}