@import 'less-config.less';

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



.transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	-o-transition: @transition;
	transition: @transition;
}

form {
	&.limit {
		max-width: @screen_computer_max !important;
		margin: 0 auto !important;
	}

	&.search {
		text-align: right;
		padding-bottom:20px;
	}
}
.inline {
	display:inline-block;
	*display:inline;
	_display:inline;
	zoom:1;

	> label {
		font-weight: 700;
		display: block;
		text-align: left;
		border-bottom: 1px solid @color_lightgrey;
	}
}

input:-moz-read-only { background-color: @color_lightgrey!important;}  /* For Firefox */
input:read-only { background-color: @color_lightgrey!important;}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
button, a.button {
	display: inline-block;
	outline: none;
    line-height: 27px;
	padding: 0 20px;
	background: @color_white;
	color: @color_grey;
    font-size: 1rem;
    margin: .2rem;
    flex: 1 0 auto;
	cursor: pointer;
	overflow: visible;
	vertical-align: middle;
	letter-spacing: normal;

	border: 1px solid @color_grey;
	color: @color_darkgrey;


	.transition(all 0.2s ease-in-out);

	&.button-sml {
		padding: 2px 6px;
		font-size: 0.7rem;
		letter-spacing: -1px;
	}
	&.button-big {
		padding: 6px 40px;
		font-size: 1rem;
		font-weight: 700;
	}

	&[class^="icon-"], &[class^=" icon-"]{
		border: 1px solid transparent;
		padding: 0;
		border-radius: 50%;
		text-align: center;
		line-height: initial;

		&:before {
			font-size: 1.3rem;
		}
	}

	&:hover {
		background-color: @color_lightgrey;
		color: @color_black;
	}
	&.invert {
		background-color: @color_grey;
		color: @color_white;
		&:hover {
			background-color: @color_white;
			color: @color_grey;
		}
	}

	&.orange {
		border: 1px solid @color_orange;
		color: @color_darkgrey;
		&:hover {
			background-color: @color_orange;
			color: @color_white;
		}
		&.invert {
			background-color: @color_orange;
			color: @color_white;
			&:hover {
				background-color: @color_white;
				color: @color_orange;
			}
		}
	}
	&.blue {
		border: 1px solid @color_blue;
		color: @color_darkgrey;
		&:hover {
			background-color: @color_blue;
			color: @color_white;
		}
		&.invert {
			background-color: @color_blue;
			color: @color_white;
			&:hover {
				background-color: @color_white;
				color: @color_blue;
			}
		}
	}
	&.green {
		border: 1px solid @color_green;
		color: @color_darkgrey;
		&:hover {
			background-color: @color_green;
			color: @color_white;
		}
		&.invert {
			background-color: @color_green;
			color: @color_white;
			&:hover {
				background-color: @color_white;
				color: @color_green;
			}
		}
	}

	label {
		cursor: inherit;
	}

	&.small {
		line-height: 23px;
		margin: unset;
		padding: 0 0.5rem;
		font-size: 0.9rem;
	}
	&.big {
		margin-right: 0.5rem;
		padding: 0.5rem 3rem;
		font-size: 1.3rem;
	}


	@media (max-width:@screen_mobile_max){
		padding: 0 5px;

		> label {
			display: none;
		}

		&.small {
			padding: 0 3px;
			font-size: 0.7rem;
		}

		&.big {
			margin-right: 0.2rem;
			padding: 2px 15px;
			font-size: 1rem;
		}
	}

	&.width-full {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

}


.switch-box {
	.switch {
		position: relative;
		display:inline-block;zoom:1;*display:inline;_display:inline;
		width: 48px;
		height: 26px;
		input {
			display: none;
		}

		.slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: @color_lightgrey;
			-webkit-transition: .4s;
			transition: .4s;
			&:before {
				position: absolute;
				content: "";
				height: 18px;
				width: 18px;
				left: 4px;
				bottom: 4px;
				background-color: @color_white;
				-webkit-transition: .4s;
				transition: .4s;
			}
		}
		input {
			&:checked {
				&+.slider {
					background-color: @color_blue;
					&:before {
						-webkit-transform: translateX(18px);
						-ms-transform: translateX(18px);
						transform: translateX(18px);
					}
				}
			}
			&:focus {
				&+.slider {
					box-shadow: 0 0 1px #2196F3;
				}
			}
		}
		.slider.round {
			border-radius: 26px;
			&:before {
				border-radius: 50%;
			}
		}
	}

	span.text {
		position: absolute;
		left: 70px;
		display:inline-block;zoom:1;*display:inline;_display:inline;
		height:26px;
		line-height:26px;
	}
}



input[type="text"],input[type="number"],input[type="date"],input[type="password"],select, textarea {
	margin: 0.2rem 0;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	outline: 0;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
	text-align: left;
	font-size: 1rem;
	height: 28px;
//	line-height: 28px;
	line-height: 1.5rem;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #DEDEDF;
	border-radius: .28571429rem;
	box-shadow: none;
	overflow: hidden;
	vertical-align: middle;

	&.input-large {
		height:43px;
		line-height:43px;
		font-size:31px;
		letter-spacing:5px;
		padding:0 15px;
	}
}


form.width-full {
	input[type="text"],input[type="number"],input[type="date"],input[type="password"],select, textarea {
		width: auto;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
	}
/*
	button {
		width: 100%;
		width: -webkit-fill-available;
		width: -moz-available;
		width: fill-available;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
*/
}
input[type="date"] {
	width: 140px;
	letter-spacing: -1px;
	padding-right: 0;
}
select {
	padding: 0 5px;
}
textarea {
	resize: none;
}
select, textarea {
	overflow: auto;
}



.input-box {
	position: relative;
	width: 100%;
	font-weight: 400;
	font-style: normal;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	color: rgba(0,0,0,.87);

	input[type="text"],input[type="password"] {
		padding-left: 30px;
	}

	i[class*="icon-"] {
		position: absolute;
		opacity: 0.5;
		transition: opacity 0.3s ease;
		font-size: 1rem;
		left: 5px;

		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		vertical-align: middle;
		-ms-flex-item-align: center!important;
		align-self: center!important;
	}

	&.big {
		margin: 5px 0;
		input[type="text"],input[type="password"] {
			padding: 5px 10px 5px 50px!important;
			font-size: 1.5rem;
			letter-spacing: 0.1rem;
		}

		i[class*="icon-"] {
			font-size: 1.5rem;
		}
	}
}


.btn_box {
	text-align:right;
	padding: 30px 0 20px 0;
}

.LIST_PAGE_BOX {
	text-align:center;
	padding:20px 0;
}

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

.checkbox-box {
	position: relative;
	display: inline-block;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	outline: none;
	vertical-align: baseline;
	font-style: normal;
	min-height: 2.1rem;
	font-size: 1rem;
	width: unset;
	min-width: 4rem;
	line-height: 2.1rem;
	padding: 4px 12px 4px 0;
	vertical-align: middle;

	input {
		width: 3.5rem;
		height: 1.5rem;
		&[type="checkbox"], &[type="radio"] {
			left: 0;
			cursor: pointer;
			position: absolute;
			opacity: 0 ;
			outline: none;
			z-index: 3;
			margin: 0;
		}
		&[type="radio"] {
			&:focus:checked~label {
				&:before {
					background-color: #0D71BB ;
				}
			}
		}
		&[type="checkbox"] {
			&:focus:checked~label {
				&:before {
					background-color: #CDD021 ;
				}
			}
		}



		&:checked ~ label.radio:before {
			background-color: #2185D0;
		}
		&:checked ~ label.checkbox:before {
			background-color: #CDD021;
		}
		&:checked ~ label:before {
			background: #FFFFFF;
			border-color: rgba(34, 36, 38, 0.35);
		}

		&[disabled]~label {
			cursor: default ;
			opacity: 0.5;
			color: #000000;
		}
		&~label:after {
			left: -0.05rem;
			-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
		}
		&:checked~label {
			color: red ;
			&:before {
				background-color: #2185D0 ;
			}
			&:after {
				left: 2.15rem;
				-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
				box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			}
		}
	}
	label {
		line-height: 1.5rem;
		white-space: nowrap;
		cursor: auto;
		position: relative;
		display: block;
		outline: none;
		font-size: 1rem;
		min-height: 1.5rem;
		padding-left: 3.7rem;
		color: rgba(0, 0, 0, 0.87);
		padding-top: 0.3em;
		border: none;
		&.checkbox:before {
			border-radius: 0.5rem;
		}
		&.checkbox:after {
			border-radius: 0.5rem;
		}
		&:before {
			position: absolute;
			display: block;
			top: 4px;
			left: 0;
			z-index: 1;
			width: 3.5rem;
			height: 1.5rem;
			content: '';
			background: rgba(0, 0, 0, 0.05);
			border-radius: 500rem;
			-webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
			transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
		}
		&:after {
			position: absolute;
			font-size: 14px;
			width: 1.5rem;
			height: 1.5rem;
			top: 4px;
			left: 0;
			text-align: center;
			color: rgba(0, 0, 0, 0.87);
			content: '' ;
			opacity: 1;
			z-index: 2;
			background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
			-webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
			border-radius: 500rem;
			-webkit-transition: background 0.3s ease, left 0.3s ease;
			transition: background 0.3s ease, left 0.3s ease;
		}
		&:hover::before {
			background-color: rgba(0, 0, 0, 0.15);
		}
		&:active::before {
			border-color: rgba(34, 36, 38, 0.35);
		}

	}
	label, &+label {
		color: rgba(0, 0, 0, 0.87);
		-webkit-transition: color 0.1s ease;
		transition: color 0.1s ease;
		vertical-align: middle;
		&:hover {
			color: rgba(0, 0, 0, 0.8);
		}
	}
}



/* Placeholder 색상 */
::-webkit-input-placeholder { /* WebKit browsers */
	color: @color_lightgrey;
	font-size: 1rem;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: @color_lightgrey;
	font-size: 1rem;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: @color_lightgrey;
	font-size: 1rem;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: @color_lightgrey;
	font-size: 1rem;
}


/* Address Search */
.ADDSCH_FORM_box {
	margin:10px 0;

	.ADDSCH_type {
		width:150px;
		text-align:center;
		border:1px solid #11A1E3!important;
	}

	.ADDSCH_zip {width:60px;background:#ddd;}
	.ADDSCH_sido {width:290px;background:#ddd;}
	.ADDSCH_detail {width:150px;}
	.ADDSCH_old {width:490px;background:#ddd;}
	.ADDSCH_map_x {display:none;}
	.ADDSCH_map_y {display:none;}

	.ADDSCH_close {
		display:none;
		float:right;
		padding: 5px;
		border: 0;

		&:before {
			content: '\f2d3';
			font-family: "fontawesome";
			font-size: 1.5rem;
		}
		&:hover {
			color: @color_red;
			background-color: unset;
		}
	}

	.ADDSCH_Pgmove {
		float:right;
		display:none;
		margin-right:5px;

		.page-prev, .page-next {
			padding: 5px;
			border: 0;

			&:before {
				content: '\f137';
				font-family: "fontawesome";
				font-size: 1.5rem;
			}
			&:hover {
				color: @color_blue;
				background-color: unset;
			}
		}
		.page-next {
			&:before {
				content: '\f138';
			}
		}
	}

	.ADDSCH_List {
		max-height:200px;
		overflow-y:auto;
		overflow-x:hidden;
		border-top:2px solid #aaa;
		border-bottom:2px solid #eee;
		display:none;

		table {
			table-layout:fixed;
			border-collapse: collapse;
			border-spacing: 0;
			font-size: 12px;
			width:100%;

			>thead th {
				line-height: 2rem;
				text-align: center;
			}

			>tbody {
				>tr {
					&:hover {
						>td {
							background: #E7F2FB;
						}
					}
					>th, >td {
						color: #000;
						line-height: 2rem;
						padding: 3px 2px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						border: 1px solid #E5E5E5;
					}
					>th {
						background: #49A25A;
						color:#fff;
						text-align: center;
					}
					>td {
						>span {
							color:rgba(0,0,0,1);

							&:hover {
								cursor:pointer;
								color:#FF0039;
								text-decoration:underline;
							}
						}
					}
				}
			}
		}
	}
}