@charset "utf-8";

/* =================================================================
 * 프로젝트: 관리자페이지 CSS
 * 파일명: button.css
 * 작업자: 유상민
 * 작업일: 2021. 08. 05 ~ 
/* =============================================================== */

a.btn, button.btn, input.btn {
	border:1px solid #ddd;
	background:#f4f4f4;
	font-size:14px;
	letter-spacing:0;
	color:#444!important;
	text-align:center;
	padding:12px 18px; /*10px 15px*/
	display:inline-block;
	box-shadow:0 1px rgba( 255, 255, 255, 0.5 );
	cursor:pointer;
	margin:0 3px;
	border-radius:3px;
	text-decoration:none!important;
	letter-spacing: -0.025em;
	position:relative;
	vertical-align:top;
}

a:hover.btn, button:hover.btn, input:hover.btn {
	background:#e7e7e7;
	border:1px solid #adadad;
}

button.red, a.red, input.red {
	background:#dd4b39!important;
	border:1px solid #d73925!important;
	color:#fff!important;
}

button:hover.red, a:hover.red, input:hover.red {
	background:#d73925!important;
	border:1px solid #ac2925!important;
	color:#fff!important;
}

button.green, a.green, input.green {
	background:#00a65a!important;
	border:1px solid #008d4c!important;
	color:#fff!important;
}

button:hover.green, a:hover.green, input:hover.green {
	background:#008d4c!important;
	border:1px solid #398439!important;
	color:#fff!important;
}

button.blue, a.blue, input.blue {
	background:#3c8dbc!important;
	border:1px solid #367fa9!important;
	color:#fff!important;
}

button:hover.blue, a:hover.blue, input:hover.blue {
	background:#367fa9!important;
	border:1px solid #204d74!important;
	color:#fff!important;
}

button.sky, a.sky, input.sky {
	background:#00c0ef!important;
	border:1px solid #00acd6;
	color:#fff!important;
}

button:hover.sky, a:hover.sky, input:hover.sky {
	background:#00acd6!important;
	border:1px solid #269abc!important;
	color:#fff!important;
}

button.orange, a.orange, input.orange {
	background:#ff851b!important;
	border:1px solid #d86a0a!important;
	color:#fff!important;
}

button:hover.orange, a:hover.orange, input:hover.orange {
	background:#d46f16!important;
	border:1px solid #d58512!important;
	color:#fff!important;
}

button.yellow, a.yellow, input.yellow {
	background:#f39c12!important;
	border:1px solid #e08e0b!important;
	color:#fff!important;
}

button:hover.yellow, a:hover.yellow, input:hover.yellow {
  background:#e08e0b!important;
}

button.navy, a.navy, input.navy {
	background:#07396d!important;
	border:1px solid #000!important;
	color:#fff!important;
}

button:hover.navy, a:hover.navy, input:hover.navy {
  background:#001f3f!important;
}

button.small, a.small, input.small {font-size:13px!important;padding:7px 12px;height:auto;}
button.small:hover, a.small:hover, input.small:hover {font-size:13px!important}
button.lg, a.lg, input.lg {font-size:18px!important;padding:15px 30px;height:auto;}
button.lg:hover, a.lg:hover, input.lg:hover {font-size:18px!important}


/* 버튼영역 */
.btnArea {
	margin: 1em 0;
	text-align: center;
	zoom: 1;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:baseline;
}
.btnArea.fl {
	display:flex;
	justify-content:flex-start;
}
.btnArea.fr {
	display:flex;
	justify-content:flex-end;
}


/* toggle switch */
.switch {position:relative;display:inline-block;width:50px;height:28px;}
.switch input {opacity:0;width:0;height:0;}
.switch-toggle {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:34px;-webkit-transition:.4s;transition:.4s;}
.switch-toggle:before {position:absolute;content:'';width:20px;height:20px;left:4px;bottom:4px;background:#fff;border-radius:50%;-webkit-transition:.4s;transition:.4s;}
input:checked+.switch-toggle {background:#3c8dbc;}
input:focus+.switch-toggle {box-shadow:0 0 1px #3c8dbc;}
input:checked+.switch-toggle:before {-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}