$infobox : #d8e1e5;
$label-bg : #848c9b;
$text : #556e89;
$text-white : #fff;
$text-dark : #0e2627;

$success : #1ebc5e;
$danger : #f7464e;
$warning: #fd9008;
$grey : #e0e0e0;

$info : #a4efee;
$basic: #d5d7d7;
$error : #d33a2e;

$btn-hover : #1797f3;

.btn {
		border:none;
		height:32px;
		color:$text-white;
		border-radius: 3px;
		background-color:$text;
		padding:5px 10px;
		text-decoration: none;
		&:hover {
			background-color:$btn-hover;
			color:#fff;
			cursor:pointer;
		}
	}
.hide {
		display: none;
	}

.success {
	color:$success;
}
.success-bg {
	background-color:$success;
	color:#fff;
}
.warning {
	color:$warning;
}
.warning-bg {
	background-color:$warning;
	color:#fff;
}
.danger {
	color:$danger;
}
.danger-bg {
	background-color:$danger;
	color:#fff;
}

.basic {
	color:$text;
}

.basic-bg {
	background-color:$text;
	color:$text-white;
}

.info-bg {
	background-color:$info;
	color:$text-white;
}
.error {
	background-color:$error;
	color:$text-white;
}
.infobox-bg {
	background-color:$infobox;
	color:$text;
}

.btn.cancel {
	background-color:$basic;
	color:$text-white;
}
.label-bg {
	background-color:$label-bg;
}

p {
	font-size: 1em;
}

.dw-admin-container {
	display:block;
	position:relative;
	max-width:96%;
	font-size: 14px;
	color: $text-dark;
	&* {
		box-sizing:border-box;
	}

	.apply {
		background-color:$success;
		&:hover {
			background-color:$btn-hover;
		}
	}
	.standby {
		background-color:$text;
		&:hover {
			background-color:$btn-hover;
		}
	}
	.reject {
		background-color:$danger;
		&:hover {
			background-color:$btn-hover;
		}
	}



	nav {
		display: block;
		padding:10px 0;
		ul {
			margin:0;
		}
		ul > li {
			display: inline-block;
		}
	}

	.btn-set { 
		margin:10px 0;
	}	

	.box {
		border:1px solid $grey;
		background-color: $text-white;
		color:$text;
		padding:20px;
		line-height: 1.8em;
	}

	#message-box {
		border: 1px solid #f0f3f3;
		padding: 10px 50px 10px 20px;
		text-align:left;
		margin-bottom:10px;
		position:relative;
		p {
			font-size: 1em;
			margin:0;
		}
		.btn-set {
			display: inline-block;
			position:absolute;
			right:50px;
			bottom: -4px;
		}
	}

	button.close {
		background-color:#fff;
		border:none;
		width:28px;
		height:28px;
		position:absolute;
		top:10px;
		right:10px;
		&:hover {
			cursor:pointer;
		}
	}

	.infobox {
		background-color:$infobox;
		border: 1px solid #f0f3f3;
		padding: 10px 50px 10px 20px;
		text-align:left;
		background-color:$basic;
		margin-bottom:10px;
		position:relative;

		ul {
			list-style-type:disc !important;
			margin-left: 20px;
		}
	}

	#standby-list {
		table {
			border:1px solid #ccc;
			border-collapse:collapse;
			width:100%;
			background-color:#fff;

			td {
				padding: 8px 10px;
				border: 1px solid #eee;
				font-size:0.85em;
				p {
					margin:0;
					line-height: 1.4em;
				}
			}

			thead td {
				background-color:#627f91;
				color:#fff;
				text-align:center;
			}

		}
		.rq-new-cat {
			.fa {
				color:$success;
			}
		}

	}

	.clear {
		display: inline-block;
		width:100%;
		height:1px !important;
		float:none !important;
		padding:0 !important;
	}

	#search-box {
		padding: 10px;
		position:relative;
		background-color:$infobox;
		height:40px;
		margin-bottom:0;
		div {
			height:100%;
			line-height: 40px;
			float:left;
		}
		.label-bg {
			width:80px;
			color:$text-white;
			text-align:center;
		}
		.search-input {
			max-width:400px;
			height:100%;
			margin:0 10px;
			input[type="text"] {
				width:300px;
				height:100%;
				font-size: 1.2em;
				padding-left:10px;
				padding-right:10px;
				position:relative;
				top:-1px;
			}
			.btn {
				height:38px;
				min-width:80px;
				position:relative;
				top:-2px;
			}
		}
		.exp {
			width: calc( 100% - 500px);
			height:100%;
			p {
				font-size: 1em;
				margin:0;
				line-height:40px;
			}
			img {
				position:relative;
				top:2px;
				vertical-align: top;
			}
		}
	}

	#search-result {
		background-color: $text-white;
		color:$text;
		padding:20px;
		line-height: 1.8em;
		ul {
			@media (min-width:769px){
				column-count:3;
			}
			@media (max-width:414px){
				column-count:1;
			}
			@media (min-width:415px) and (max-width:768px) {
				column-count: 2;
			}
		}
		a {
			display: block;
			text-decoration:underline;
			word-break: keep-all;
			clear:both;
		}
	}

	#cat-select-box {
		display: block;
		background-color:$text-white;
		padding:10px;
		position:relative;
		clear:both;
		fieldset {
			margin:0 0 5px 0;
			label {
				display: block;
				clear:both;
				margin-bottom: 5px;
			}
		}
		.cat_lev {
			width:100%;
			@media (min-width:768px) {
				width:33.333%;
				float:left;
			}

			select {
				height:36px;
				min-width:30%;
				@media (min-width:768px) {
					min-width:65%;
				}
			}
			input {
				height: 36px;
				margin-left:20px;
				@media (min-width:768px) {
					margin-left:0;
				}
			}
			div {
				display: inline-block;
			}
			.add {
				background-color:$success;
			}
			.edit {
				background-color:$text;
			}
			.del {
				background-color:$danger;
			}
		}
	}

	#search-wrap {
		padding: 10px;
		box-sizing:border-box;
		display: flex;
		flex-basis: 1;
		&* {
			box-sizing:border-box;
		}
		.s-type {
			flex : 1;
			&:nth-child(1){
				flex:none;
				margin-right: 20px;
			}
		}
		label {
			display: block;
			clear:both;
			margin-bottom:10px;
		}
		input[type="text"], select {
			height:34px;
		}
		input[type="text"] {
			min-width:300px;
		}
		.btn {
			min-width:80px;
		}
	}

	#item-list {
		font-size:14px;
		.fn-wrap {
			padding:8px 0;
			position:relative;
			select {
				width: 100px;
			}
			#total-count {
				display: block;
				float:right;
				bottom:-10px;
				right:10px;
				position:relative;
			}
		}
		.fn-wrap-bottom {
			float:right;
			height:80px;
		}
		table.list {
			width:100%;
			border-top:1px solid $basic;
			border-bottom:1px solid $basic;
			border-collapse:collapse;
			background-color:#fff;

			td {
				padding: 8px;
				border:1px solid $basic;
			}
			thead > tr > td {
				text-align:center;
			}
			tr > td:nth-child(2){
				text-align:center;
			}

			tbody > tr:nth-child(even) > td {
				background-color: #f0f3f6;
			}

			.user {
				display: inline-block;
				padding-right: 10px; 
				position:relative;
				.user-info {
					display: none;
					width:200px;
					background-color:#fff;
					border:2px solid $basic;
					padding:10px;
					position:absolute;
					top: 0;
					left:1em;
					z-index:10;
				}
			}
		}

		#pagination {
			float:left;
			height: 80px;
			ul {
				list-style:none;
				li {
					display: inline-block;
					width:30px;
					height:30px;
					line-height:30px;
					font-size:0.8em;
					border:1px solid $text;
					background-color:#fff;
					text-align:center;
					margin-right:3px;
					&:hover {
						background-color:$info;
						cursor: pointer;
					}
					a {
						text-decoration:none;
						color:$text;
					}
				}
				.end {
					width:60px;
				}
				.active {
					background-color:$text;
					a {
						color:#fff;
					}
				}
			}
		}
	}

	#action-area {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		background-color:rgba(0,0,0,.8);

		#edit {
			background-color:#fff;
			border:4px solid $basic;
			box-shadow:3px 3px 10px #000;
			clear:both;
			padding: 10px 20px;
			position:absolute;
			top: calc(100vh / 2 - 200px);
			left: calc(100% / 2 - 300px);
			width: 600px;

			
			table {
				border:none;
				width:100%;
				td {
					padding:5px 0;
				}
				tr > td:nth-child(1) {
					width: 100px;
					text-align: center;
					vertical-align: middle;
				}
				tr > td:nth-child(2) {
					width:calc(100% - 100px);
				}
				tr:last-child > td {

					.btn {
						width:80px;
					}
				}
				input {
					width: 100%;
					height:34px;
					padding:0 10px;
				}
				textarea {
					width:100%;
					min-height:100px;
				}
				select {
					height:34px;
					min-width:150px;
				}
			}

			.close {
				position:absolute;
				right:10px;
				top:8px;
				font-size:1.2em;
				color:$text;
				&:hover {
					cursor:pointer;
					color:$danger;
				}
			}
		}
	}

	.modal {
		display: none;
		position:fixed;
		width:100%;
		height:100vh;
		background-color:rgba(0,0,0,0.8);
		left:0;
		top:0;
		z-index:10;
		box-sizing:border-box;
		&* {
			box-sizing:border-box;
		}

		.modal-container {
			position:absolute;
			background-color:#fff;
			border:4px solid $text;
			max-width:400px;
			max-height:300px;
			width:100%;
			height:100%;
			left:calc(100% / 2 - 200px);
			top:calc(100% / 2 - 150px);

			.modal-title {
				padding:10px;
				font-size:1.2em;
				font-weight: bold;
				text-align:center;
				background-color:$warning;
				color:#fff;
			}
			.modal-content {
				display: table-cell;
				padding:10px;
				font-size:1em;
				vertical-align: middle;
			}

			#modal-close {
				position:absolute;
				bottom:1em;
				left:calc(50% - 10px);
				text-decoration: none;
				background-color:$text;
				color:#fff;
				padding:6px 10px;
			}
		}
	}

	.dw-footer {
		font-size:0.8em;
		padding:10px;
		text-align:right;
	}
}