/* "/common/css/less-config.less" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Common Color */
@color_link					: #0E6EB8;
@color_line					: #0E6EB8;

/* Body */
@color_body_bg				: #F3F3F3;
@color_body_font			: #222222;


/* Color */
@color_black				: #131313;
@color_white				: #FFFFFF;
@color_brightgrey			: #f6f6f6;
@color_lightgrey			: #F1F1F1;
@color_grey					: #9E9E9E;
@color_darkgrey				: #616161;
@color_bluegrey				: #607D8B;
@color_orange				: #FF5722;
@color_gold					: #FCBF33;

@color_red					: #F44336;
@color_yellow				: #FFFF66;
@color_green				: #4CAF50;
@color_blue					: #0E6EB8;

@color_olive				: #32CD32;
@color_teal					: #008080;
@color_violet				: #EE82EE;
@color_purple				: #B413EC;
@color_pink					: #FF1493;
@color_brown				: #A52A2A;



/* Screen Size */
@screen_mobile_max			: 699px;
@screen_tablet_min			: 700px;
@screen_tablet_max			: 999px;
@screen_computer_min		: 1000px;
@screen_computer_max		: 1280px;


/* Option Slider */
@option_width				: 185px;
@option_bg					: #FFFFFF;

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


table:not(.ui).table {
	table-layout:fixed;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;

	.table_boder_color(@color) {
		> tbody > tr > th, > tbody > tr > td {
			border-color: @color !important;
		}
	}

	&.tb-bd-color-black {.table_boder_color(@color_black);}
	&.tb-bd-color-lightgrey {.table_boder_color(@color_brightgrey);}
	&.tb-bd-color-grey {.table_boder_color(@color_grey);}
	&.tb-bd-color-darkgrey {.table_boder_color(@color_darkgrey);}
	&.tb-bd-color-red {.table_boder_color(@color_red);}
	&.tb-bd-color-blue {.table_boder_color(@color_blue);}

	> caption {
		font-size:1.3rem;
		padding: 1em 0 0.5em 1em;
		font-weight: bold;
		text-align: left;
	}

	> thead {
		>tr {
			>th, >td {
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F1F1F1');
				background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);

				border: 1px solid #DEDEDE;
				border-top: 1px solid #AEAEAE;
				border-bottom: 1px solid #4C545B;
				padding: 1rem 0;

				&.no-border {
					border: 0;
				}
			}
			>th {
				text-align: center;
			}
		}
	}
	> tbody {
		>tr {
			>th, >td {
				border: 1px solid #DEDEDE;
				padding: 1rem 0.3rem;
				overflow-x: hidden;
				text-overflow: ellipsis;

				&.no-border {
					border: 0!important;
				}
			}


			>th {
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F1F1F1');
				background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
				background: -moz-linear-gradient(top, #F8F8F8, #F1F1F1);

				font-weight: inherit;
				vertical-align: middle;
				text-align:center;
			}



		}
	}
	&.tiny {
		>thead {
			>tr {
				>th, >td {
					padding: 0.2rem !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 0.2rem !important;
				}
			}
		}
	}
	&.small {
		>thead {
			>tr {
				>th, >td {
					padding: 0.5rem 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 0.5rem 0.2rem !important;
				}
			}
		}
	}
	&.big {
		>thead {
			>tr {
				>th, >td {
					padding: 2rem 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					padding: 2rem 1rem !important;
				}
			}
		}
	}

	&.list {
		>thead {
			>tr {
				>th, >td {

					/* 소팅 아이콘 */
					>span {
						margin: 0 3px;

						&.list_sort {
							background-repeat:no-repeat;
							background-position:100% 50%;
							cursor:pointer;
							display:block;

							&.list_sort_asc {
								background-image:url(data:image/gif;base64,R0lGODlhCQAJAIABAO0gJP///yH5BAEAAAEALAAAAAAJAAkAAAIPjAOnwIrcDJxvQoez3qEAADs=);
							}
							&.list_sort_desc {
								background-image:url(data:image/gif;base64,R0lGODlhCQAJAIABADxXp////yH5BAEAAAEALAAAAAAJAAkAAAINjI+py+D/AoxmJnpRAQA7);
							}
						}
					}
				}
			}
		}
		>tbody {
			> tr:nth-child(2n):not(.no-sel) {
				background-color: rgba(0,0,50,.02);

				>th, >td{


				}
			}
		}
	}
	
	&.line {
		>thead {
			>tr {
				>th, >td {
					border-left: 0 !important;
					border-right: 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th, >td {
					border-left: 0 !important;
					border-right: 0 !important;
				}
			}
		}
	}

	&.line2 {
		>thead {
			>tr {
				>th:first-child, >td:first-child {
					border-left: 0 !important;
					border-right: 0 !important;
				}
			}
		}
		>thead {
			>tr {
				>th:last-child, >td:last-child {
					border-left: 0 !important;
					border-right: 0 !important;
				}
			}
		}
		>tbody {
			>tr {
				>th:first-child, >td:first-child {
					border-left: 0;
					border-right: 0;
				}
			}
		}
		>tbody {
			>tr {
				>th:last-child, >td:last-child {
					border-left: 0;
					border-right: 0;
				}
			}
		}
	}

	&.line3 {
		>thead, >tbody {
			>tr {
				>th, >td {
					border-top: 0 !important;
					border-bottom: 0 !important;
					border-left: 0 !important;
					border-right: 1px solid #DEDEDE;
				}
				>th:first-child, >td:first-child {
				/*	border-left: 0 !important; */
				}
				>th:last-child, >td:last-child {
					border-right: 0 !important;
				}

			}
		}

	}

	&.no-padding {
		>tbody {
			>tr {
				>th, >td {
					padding:0 !important;

					>input[type="text"], >textarea {
						border: 0;
						width: -webkit-fill-available !important; 
						width: -moz-available !important; 
						width: fill-available !important; 
						padding: 0.5rem;
						margin: 0;
						vertical-align: top;
						
						&:hover, &:focus {
							background-color: @color_yellow;
						}
					}
				}
			}
		}
	}


	&.flat {
		>thead {
			>tr {
				>th {
					background: @color_brightgrey;
				}
			}
		}
		>tbody {
			>tr {
				>th {
					background: @color_brightgrey;
				}
			}
		}
	}

	&.simple {
		max-width: 100%;
		>thead, >tbody {
			>tr {
				>th {
					background: @color_brightgrey;
					font-weight: 700;
					text-align: center;
				}
			}
		}
		>thead , >tbody {
			>tr {
				>th, >td {
					border: 1px solid @color_black;
					padding: 1rem;
					min-width: 5rem;
				}
			}
		}
		>tbody {
			>tr {
				>th {
					width: 10rem;
				}
			}
		}
	}
	
	&.hoverable {
		tbody{
			tr:hover {
				th,td {background-color:#ffffcc;}
			}
		}
	}

	&.no-border {
		>thead, >tbody {
			>tr {
				>th, >td {
					border: 0 !important;
					vertical-align: top;
					background: unset;
				}
			}
		}
	}


	.bd_double_top {
		border-top:3px double #DEDEDE !important;
		&.bd-color-lightgrey {border-color: @color_lightgrey !important;}
		&.bd-color-darkgrey {border-color: @color_darkgrey !important;}
		&.bd-color-black {border-color: @color_black !important;}
		&.bd-color-blue {border-color: @color_blue !important;}
		&.bd-color-red {border-color: @color_red !important;}
	}
	.bd_double_bottom {
		border-bottom:3px double #DEDEDE !important;
		&.bd-color-lightgrey {border-color: @color_lightgrey !important;}
		&.bd-color-darkgrey {border-color: @color_darkgrey !important;}
		&.bd-color-black {border-color: @color_black !important;}
		&.bd-color-blue {border-color: @color_blue !important;}
		&.bd-color-red {border-color: @color_red !important;}
	}
	.bd_double_left {
		border-left:3px double #DEDEDE !important;
		&.bd-color-lightgrey {border-color: @color_lightgrey !important;}
		&.bd-color-darkgrey {border-color: @color_darkgrey !important;}
		&.bd-color-black {border-color: @color_black !important;}
		&.bd-color-blue {border-color: @color_blue !important;}
		&.bd-color-red {border-color: @color_red !important;}
	}
	.bd_double_right {
		border-right:3px double #DEDEDE !important;
		&.bd-color-lightgrey {border-color: @color_lightgrey !important;}
		&.bd-color-darkgrey {border-color: @color_darkgrey !important;}
		&.bd-color-black {border-color: @color_black !important;}
		&.bd-color-blue {border-color: @color_blue !important;}
		&.bd-color-red {border-color: @color_red !important;}
	}
}

@media only screen and (max-width: @screen_mobile_max) {
	table.table.stackable:not(.ui) {
		width: 100%;
		table-layout: auto;

		> thead {
			display: block;
			> tr {
				padding-top: 1em;
				padding-bottom: 1em;
			}
		}
		> tbody {
			display: block;
			> tr {
				padding-top: 1em;
				padding-bottom: 1em;
			}
		}
		> tfoot {
			display: block;
		}
	}
	table.table.stackable:not(.ui) > thead,
	table.table.stackable:not(.ui) > tbody,
	table.table.stackable:not(.ui) > thead > tr:not(.display-hidden),
	table.table.stackable:not(.ui) > tbody > tr:not(.display-hidden),
	table.table.stackable:not(.ui) > thead > tr > th:not(.display-hidden),
	table.table.stackable:not(.ui) > thead > tr > td:not(.display-hidden),
	table.table.stackable:not(.ui) > tbody > tr > th:not(.display-hidden),
	table.table.stackable:not(.ui) > tbody > tr > td:not(.display-hidden)  {
		width: auto !important;
		display: block !important;
	}

	table.table.stackable:not(.ui) > thead > tr > th:not(:first-child),
	table.table.stackable:not(.ui) > thead > tr > td:not(:first-child),
	table.table.stackable:not(.ui) > tbody > tr > th:not(:first-child),
	table.table.stackable:not(.ui) > tbody > tr > td:not(:first-child) {
		border-top: 0;
	}
}