/* 
SET CHARTSET
*/

@charset "utf-8";

/* 
IMPORT FONT FILES
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700');

/*
COMMON
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	min-height: 100%;
}

body {
	font-family: "Roboto", "Source Sans Pro", "Arial" !important;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -.04em;
	line-height: 22px;
	color: #34495e;
	background-color: #fff;
}

div, form {
	position: relative;
	display: block;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

h1, h2, h3, h4, h5, h6, span, p, a {
	letter-spacing: -.01em;
}

a {
	color: inherit;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

a:hover, a:active, a:focus, button:focus {
	outline: 0;
	border: 0;
	color: inherit;
	text-decoration: none;
}

ol, ul, li {
	list-style: none;
}

input, textarea {
	outline: none;
}

select {
	-moz-appearance: none; /* Firefox */
	-webkit-appearance: none; /* Safari and Chrome */
	background-image: url('//www.ablestor.com/public/image/icon/select_arrow.png');
	background-repeat: no-repeat;
	background-position: right 9px center;
}

input[type=text].req,
input[type=password].req,
select.req {
	background-image: url('//www.ablestor.com/public/image/icon/check.png');
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 34px !important;
}

/*
Layout
*/

.layout {
	position: relative;
	width: 1024px;
	height: auto;
	margin: 0 auto;
}

/*
ABLESTOR Icon Libaray
*/

.Acon {
width: 18px;
height: 18px;
margin: 0 4px;
padding: 0;
vertical-align: middle;
display: inline-block;
background-size: 100% 100%;
}

/*
Acon Social Icons
*/

.Acon.ablestor {
	background-image: url('/public/image/icon/ablestor_icon.png');
}

.Acon.facebook {
	background-image: url('/public/image/icon/facebook_icon.png');
}

.Acon.google {
	background-image: url('/public/image/icon/google_icon.png');
}

.Acon.naver {
	background-image: url('/public/image/icon/naver_icon.png');
}

.Acon.kakao {
	background-image: url('/public/image/icon/kakao_icon.png');
}

.Acon.kakao-plus {
	background-image: url('/public/image/icon/kakao_plus_icon.png');
}

/*
Acon Useful Icons
*/

.Acon.alert {
	background-image: url('/public/image/icon/important.png');
}

.Acon.checkbox {
	background-image: url('/public/image/icon/check_box.png');
}

.Acon.check {
	background-image: url('/public/image/icon/check.png');
}

.Acon.folder {
	background-image: url('/public/image/icon/folder_small.png');
}

.Acon.file {
	background-image: url('/public/image/icon/file_small.png');
}

/* DEFAULT TABLE */

table.template {
	width: 100%;
	margin-bottom: 14px;
}

table.template th {
	padding: 12px 7px;
	color: #c9c7c7;
	font-weight: normal;
	border-bottom: 1px solid #ddd;
}

table.template td {
	padding: 12px 7px;
	font-size: 14px;
	transition: all .1s;
}

table.template tr:hover td {
	background-color: #eee !important;
}

table.template tr:nth-child(2n) td {
	background-color: #f9fbfb;
}

table.template tr.state-red td {
	background-color: #f2dede !important;
}

table.template tr.state-red:hover td {
	background-color: #ebcccc !important;
}

table.template tr.state-green td {
	background-color: #dff0d8 !important;
}

table.template tr.state-green:hover td {
	background-color: #d0e9c6 !important;
}

table.template tr.state-blue td {
	background-color: #d9edf7 !important;
}

table.template tr.state-blue:hover td {
	background-color: #c4e3f3 !important;
}

table.template tr.state-yellow td {
	background-color: #ffeaa7 !important;
}

table.template tr.state-yellow:hover td {
	background-color: #ffecaf !important;
}

table.template .status {
	width: 70px;
	padding: 3px 0;
	display: inline-block;
}

table.template .status.wait {
	color: #fff !important;
	text-align: center;
	border-radius: 35px;
	background-color: #DADFE1;
}

table.template .status.ok {
	color: #fff !important;
	text-align: center;
	border-radius: 35px;
	background-color: #4183D7;
}

table.template .status.more {
	color: #fff !important;
	text-align: center;
	border-radius: 35px;
	background-color: #EC644B;
}

/* table.template .status.wait::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-top: -2px;
	margin-right: 6px;
	line-height: normal;
	vertical-align: middle;
	border-radius: 50%;
	background-color: lightgray;
}

table.template .status.ok::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-top: -2px;
	margin-right: 6px;
	line-height: normal;
	vertical-align: middle;
	border-radius: 50%;
	background-color: skyblue;
}

table.template .status.more::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-top: -2px;
	margin-right: 6px;
	line-height: normal;
	vertical-align: middle;
	border-radius: 50%;
	background-color: tomato;
} */

table.template select {
	width: 80px;
	padding: 7px 4px;
	border: 1px solid #ddd;
	border-radius: 3px;
}

/* SWAL */

.swal-title {
	font-size: 24px;
	font-weight: 500;
}

.swal-text {
	font-size: 14px;
}

.swal-button {
	padding: 8px 26px !important;
	font-weight: normal;
}

.swal-button--confirm {
	background-color: #ff444f !important;
}

.swal-button--confirm:focus {
	color: #fff;
}

.fixed-menu {
	position: fixed;
	width: 48px;
	height: 48px;
	bottom: 24px;
	right: 24px;
	text-align: center;
	background-color: #3556bf;
	border-radius: 50%;
	overflow: hidden;
	transition: .3s;
	z-index: 100;
}

.fixed-menu:hover {
	overflow: visible;
}

.fixed-menu:hover .menu-icon {
	display: none;
}

.fixed-menu:hover .menus {
	display: block;
}

.fixed-menu .menu-icon {
	position: absolute;
	width: 48px;
	line-height: 48px;
	bottom: 0;
	right: 0;
	color: #fff;
	font-size: 20px;
}

.fixed-menu .menus {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0;
	margin-bottom: 0;
	border-radius: 3px;
	overflow: hidden;
	display: none;
}

.fixed-menu .menus li {
	width: 228px;
	color: #fff;
	font-size: 16px;
	text-align: right;
	line-height: 48px;
	vertical-align: middle;
	background-color: #3556bf;
	transition: all .3s;
}

.fixed-menu .menus li:hover {
	background-color: #2a4497;
}

.fixed-menu .menus li span {
	width: 180px;
	float: left;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
}

.fixed-menu .menus li i {
	width: 48px;
	text-align: center;
	font-size: 20px;
	line-height: 48px;
	vertical-align: middle;
	display: inline-block;
}

.board-pagination {
	width: 100%;
	text-align: center;
}

.board-pagination .board-pagination__list {
	margin: 7px 0 14px !important;
	border-radius: 0;
}

.board-pagination .board-pagination__list li {
	min-width: 40px;
	margin: 0 4px;
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
}

.board-pagination .board-pagination__list li:hover a {
	background-color: #e0e0e0;
}

.board-pagination .board-pagination__list li.active a {
	color: #fff;
	background-color: #4183D7;
}

.board-pagination .board-pagination__list li.active a:hover {
	background-color: #286abd;
}

.board-pagination .board-pagination__list li:not(:last-child) {
	border-right: none;
}

.board-pagination .board-pagination__list li a, .board-pagination .board-pagination__list li span {
	height: 40px;
	line-height: 40px;
	display: block;
	background-color: #f9f9f9;
	transition: background-color .25s;
}

.board-pagination .board-pagination__list .board-pagination__text-node {
	min-width: 70px;
	border-radius: 20px;
}