@charset "UTF-8";
body {

	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	background-color: var(--main-bg-color);

	font-family: var(--main-font-family);
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	color: var(--main-text-color);

	#wrp {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		display: flex;

		#nav {

			display: block;
			width: var(--nav-width);
			height: 100%;
			box-sizing: border-box;
			padding-bottom: 48px;
			background-color: var(--color-green-d2);
			overflow: hidden;
			position: relative;

			#logo {
				display: block;
				height: 48px;
				padding: 8px 12px 9px;
				margin: 24px 0 12px;
				box-sizing: border-box;
				filter: drop-shadow(0 1px 1px var(--color-green-d3));

				a {
					display: block;
					height: 32px;
					mask-image: url('icon/qmob-logo.svg'); /* Using a transparent PNG as a mask */
					mask-size: 82px 32px;
					mask-repeat: no-repeat;
					mask-position: center;
					background: var(--color-lime);
					background: linear-gradient(30deg,var(--color-lime) 10%, var(--color-green-l2) 100%);

					span {
						display: none;
					}
				}
			}

			#menu{

				padding: 8px 16px;

				div {
					display: block;
					font-size: 14px;
					line-height: 24px;
					text-transform: uppercase;
					font-weight: 500;
					color: var(--color-gray-04);
					font-family: var(--font-condensed);

					a, span {
						display: block;
						height: 24px;
						line-height: 26px;
						color: var(--color-white);
						text-decoration: none;
						padding: 4px 0;

						i {
							display: block;
							float: left;
							width: 20px;
							height: 20px;
							line-height: 20px;
							margin: 2px 4px 2px 0;
							background-color: var(--color-white);
							mask-size: 20px 20px;
							mask-repeat: no-repeat;
						}

					}

					a:hover, a.active, span:hover, span.active {
						text-decoration: underline;
						color: var(--color-lime);
						i {
							background-color: var(--color-lime);
						}
					}

				}
			}

			#off {

				width: 100%;
				height: 56px;
				padding: 12px 32px;
				box-sizing: border-box;

				position: absolute;
				bottom: 0;

				div {
					display: block;
					height: 32px;
					text-align: center;

					a {
						display: inline-block;
						box-sizing: border-box;
						width: 32px;
						height: 32px;
						padding: 6px;
						border-radius: 50%;
						background-color: var(--color-lime);
						background: linear-gradient(0deg,var(--color-green-l2) 0%, var(--color-lime) 100%);
						box-shadow: 0 1px 1px var(--color-teal-d3);

						i {
							display: block;
							width: 20px;
							height: 20px;
							background-color: var(--color-teal-d2);
							mask-position: center;
						}
					}

					a:hover {
						background: var(--color-lime);
						i {
							background-color: var(--color-teal-d2);
						}
					}

				}
			}

		}

		#main {
			display: block;
			flex: 1;
			height: 100%;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
			box-shadow: 0 0 6px 0 var(--color-teal-d3);

			#msgwrp {
				display: block;
				width: 100%;
				max-width: 640px;
				position: fixed;
				overflow: hidden;
				background: none;
				box-sizing: border-box;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				padding: 8px 12px;
				z-index: 9;

				.msg {
					display: block;
					background-color: var(--main-bg-color);
					border: solid 1px var(--main-border-color);
					border-left: solid 3px var(--color-blue);
					box-shadow: 0 3px 6px #00000011;
					margin: 0 0 12px;
					border-radius: 4px;
					box-sizing: border-box;
					padding: 12px 48px 12px 23px;
					font-size: 16px;
					line-height: 22px;
					overflow: hidden;
					position: relative;

					b { color: var(--color-blue-d2); }
					a { color: var(--color-blue-d3); }
					.close {
						display: block;
						position: absolute;
						right: 12px;
						top: 50%;
						transform: translateY(-50%);
						border: none;

						i {
							width: 24px;
							height: 24px;
						}
					}
				}

				.msg.ok {
					border-left-color: var(--color-green);
					b { color: var(--color-green-d2); }
					a { color: var(--color-green-d3); }
				}

				.msg.wr {
					border-left-color: var(--color-orange);
					b { color: var(--color-orange-d2); }
					a { color: var(--color-orange-d3); }
				}

				.msg.er {
					border-left-color: var(--color-red);
					b { color: var(--color-red-d2); }
					a { color: var(--color-red-d3); }
				}
			}

			#header {
				display: block;
				height: var(--header-height);
				width: 100%;
				position: relative;
				overflow: hidden;
				background: var(--main-bg-color);
				box-sizing: border-box;
				border-bottom: solid 1px var(--main-border-color);
				color: var(--color-gray-07);

				.wrp {
					width: 100%;
					display: flex;

					#breadcrumbs {
						flex-basis: fit-content;
                        flex-shrink: 1;
						height: 24px;
						margin: 12px 12px 0 24px;
						font-size: 14px;
						line-height: 24px;
						text-transform: uppercase;
						font-weight: 500;
						font-family: var(--font-condensed);

						a, span {
							display: inline-block;
							height: 24px;
							line-height: 26px;
							color: var(--color-gray-07);
							text-decoration: none;

							i {
								display: block;
								float: left;
								width: 20px;
								height: 20px;
								line-height: 20px;
								margin: 2px 4px 2px 0;
								background-color: var(--color-gray-07);
							}
						}

						a:hover {
							text-decoration: underline;
						}

						span.dot {
							color: var(--color-gray-05);
							margin: 0 3px;
						}

						span.dot:last-of-type {
							display: none;
						}

					}

					.menu {
						flex: 1;
						box-sizing: border-box;
						height: 32px;
						padding: 0 24px 0 12px;
						margin: 8px 0 7px;
						text-align: right;

						.user {
							display: inline-block;
							width: 32px;
							height: 32px;
							border-radius: 50%;
							background-color: var(--color-purple-l1);
							background: linear-gradient(0deg,var(--color-purple-l1) 50%, var(--color-purple) 100%);

							i {
								display: block;
								height: 20px;
								padding: 6px;
								mask-size: 20px 20px;
                            	mask-repeat: no-repeat;
                            	mask-position: center;
								background-color: var(--color-white);
							}
						}

						.user:hover {
							background: var(--color-purple-d1);
						}
					}
				}
			}

			#content {

				display: block;
				top: var(--header-height);
				right: 0;
				bottom: 0;
				left: 0;
				position: absolute;
				box-sizing: border-box;
				padding: 8px 24px;
				overflow: auto;
				background: var(--main-bg-color);

				input, select, textarea{
					display: block;
					width: 100%;
					height: 32px;

					font-size: 14px;
					line-height: 20px;
					color: var(--main-text-color);
					font-family: var(--main-font-family);
					border-radius: 3px;

					box-sizing: border-box;
					padding: 5px 8px 4px;
					text-align: left;
					border: solid 1px var(--main-border-color);
					border-bottom-width: 2px;
					border-bottom-color: var(--color-purple-l1);
					min-width: 100%;
					background: none;
					outline: none;
				}

				input.er, select.er, textarea.er{
					/* border-color: var(--color-red-d2-a20); */
					border-bottom-color: var(--color-red);
				}

				::placeholder {
					color: var(--color-gray-04);
				}

				input:disabled, select:disabled, option:disabled, textarea:disabled {
					color: var(--color-gray-05);
				}

				section {
					display: block;
					padding: 8px 0 0;
					min-width: 100%;
					width: fit-content;

					.top {
						display: flex;
						height: 32px;
						padding: 10px 0;
						column-gap: 16px;

						.col {
							flex: 1;
							min-height: 32px;
							line-height: 32px;
							padding: 0;
							text-align: right;

							.btn {
								margin-left: 6px;
							}
						}

						.col.title {
							flex: none;
							flex-basis: fit-content;
							flex-shrink: 1;
							min-height: 32px;
							font-size: 18px;
							line-height: 24px;
							font-weight: 400;
							padding: 4px 0;
							color: var(--color-gray-07);
							box-sizing: border-box;
							text-shadow: 0 1px 0 var(--color-white);
						}

					}

					.box {
						display: block;
						background-color: var(--main-bg-color);
						border-radius: 6px;
						margin: 8px 0 0;
						padding: 12px;
						box-sizing: border-box;
						overflow: hidden;
						border: solid 1px var(--main-border-color);

						table {
							width: 100%;
							min-width: 540px;
							thead {
								background-color: var(--color-gray-01);

								.tableHeader {
									color: inherit;
									text-decoration: none;
									cursor: pointer;
								}

								.tableHeader:hover {
									text-decoration: underline;
								}


								tr {
									th {
										font-family: var(--font-main);
										font-size: 12px;
										line-height: 14px;
										font-weight: 600;
										padding: 11px 12px;
										box-sizing: border-box;
										white-space: nowrap;
										border-bottom: 1px solid var(--main-border-color);
									}
									th.lowpad {
										padding: 11px 6px;
									}
								}

							}

							tbody {
								tr {
									td {
										font-family: var(--font-main);
										font-size: 14px;
										line-height: 18px;
										font-weight: 400;
										padding: 9px 12px;
										box-sizing: border-box;
										border-bottom: 1px solid var(--main-border-color);
									}

									td.input {
										padding: 8px 6px;
										height: 36px;

										input:disabled, select:disabled, option:disabled, textarea:disabled {
											color: var(--main-text-color);
											border-bottom-color: var(--color-gray-04);
											cursor: not-allowed;
										}
									}

									td.action {

										white-space: nowrap;
										text-align: center;
										padding: 6px 12px;

										.actionwrp {
											display: block;
											width: 100%;
											height: 24px;
											line-height: 24px;
											padding: 0;
											box-sizing: border-box;

											.btn {
												display: inline-block;
												margin: 0 6px 0 0;
											}

											.btn:last-child {
												margin-right: 0;
											}
										}


									}

									td.subtable {
										padding: 0;

										thead {
											background: none;

											th {
												font-size: 10px;
												text-transform: uppercase;
											}
										}
									}
								}

								tr:hover td {
									background-color: var(--color-gray-01);
								}

								tr.empty td {
									padding: 17px 12px;
									font-size: 18px;
									line-height: 22px;
									font-weight: 400;
									text-align: center;
									color: var(--color-orange-d1);
								}
							}

							tfoot tr td {
								font-family: var(--font-main);
								font-size: 14px;
								line-height: 18px;
								font-weight: 400;
								padding: 9px 12px;
								box-sizing: border-box;

								.paging {
									height: 32px;
									line-height: 24px;

									.page, .btn {
										vertical-align: top;
									}

									.btn {
										margin-left: 6px;
									}

									.page {
										display: inline-block;
										height: 32px;
										line-height: 34px;
										margin:0 8px 0 0;
										color: var(--color-gray-07);

										span {
											font-weight: 600;
											color: var(--color-purple-d1);
										}
									}
								}
							}

						}

						table.sourcingupdate tbody{
							tr td, tr:hover td {
								background: none;
							}

							tr td table {
								thead tr th{
									border-bottom: none;
									padding: 11px 8px 4px;
									color: var(--color-green-d2);
								}

								tbody {
									tr:hover td {
										background-color: var(--color-gray-01);
									}

									tr:first-child td{
										padding-top: 4px;
									}

									tr:last-child td{
										border-bottom: none;
										padding-bottom: 12px;
									}

									tr td.input input{
										min-width: 110px;
									}

									tr td.input.small input{
										min-width: 70px;
									}

									tr td.action{
										padding: 0;
										.actionwrp {
											height: 28px;
											padding: 0 12px 4px;
										}
									}
								}
							}

							tr:hover td table thead tr th {
								background-color: var(--color-gray-01);
							}

						}

						div.empty {
							display: block;
							min-height: 24px;
							padding: 17px 12px;
							font-size: 18px;
							line-height: 22px;
							font-weight: 400;
							text-align: center;
							color: var(--color-orange-d1);
						}

						form, .form {
							display: block;

							button {
								display: inline-block;
								box-sizing: border-box;
								cursor: pointer;
							}

							.row {
								display: block;
								margin-top: 12px;

								label {
									display: block;
									.label {
										display: block;
										height: 24px;
										box-sizing: border-box;
										padding: 2px 0;
										font-family: var(--font-main);
										color: var(--color-green-d2);
										font-weight: 500;
										font-size: 14px;
										line-height: 16px;
									}
								}
							}

							.row.nomrg,
							.row:first-child {
								margin: 0;
							}

							.cols {
								display: flex;
								column-gap: 16px;

								.row {
									box-sizing: border-box;
									flex: 1;
									margin: 0;
								}
							}
						}

					}

					.box.nopad {
						padding: 0;
					}

					.boxrow {
						display: flex;
						column-gap: 16px;

						.boxcel {
							flex: 1;
						}
					}
				}

				section.hfix {
					left: 0;
					position: sticky;
				}

				section:first-child{
					padding-top: 0;
				}

			}

		}

	}
}