@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {

	--header-height: 48px;
	--nav-width: 160px;

	--font-regular: "Roboto", serif;
	--font-mono: "Roboto Mono", serif;
	--font-condensed: "Roboto Condensed", serif;

	--color-green-l5: #deffe8;
	--color-green-l4: #8dffba;
	--color-green-l3: #66f0a2;
	--color-green-l2: #51dd90;
	--color-green-l1: #39cb7f;
	--color-green: #0bb96d;
	--color-green-d1: #009758;
	--color-green-d2: #006c3d;
	--color-green-d2-a20: #99c4b1;
	--color-green-d3: #004123;
	--color-teal-l5: #dafdff;
	--color-teal-l4: #85f8ff;
	--color-teal-l3: #66e7ef;
	--color-teal-l2: #50d4dc;
	--color-teal-l1: #39c2ca;
	--color-teal: #00b1b9;
	--color-teal-d1: #009097;
	--color-teal-d2: #00676b;
	--color-teal-d3: #003e41;
	--color-blue-l5: #edf6ff;
	--color-blue-l4: #cbe6ff;
	--color-blue-l3: #a8d6ff;
	--color-blue-l2: #83c6ff;
	--color-blue-l1: #58b5ff;
	--color-blue: #0ea3ff;
	--color-blue-d1: #0084d2;
	--color-blue-d2: #005e97;
	--color-blue-d3: #00385d;
	--color-purple-l5: #f5f4ff;
	--color-purple-l4: #e2deff;
	--color-purple-l3: #d0c9ff;
	--color-purple-l2: #beb3ff;
	--color-purple-l1: #ad9cff;
	--color-purple: #9d84ff;
	--color-purple-d1: #8360eb;
	--color-purple-d2: #6129cb;
	--color-purple-d3: #3d008b;
	--color-pink-l5: #fff0fb;
	--color-pink-l4: #ffd3f3;
	--color-pink-l3: #ffb5ed;
	--color-pink-l2: #ff93e7;
	--color-pink-l1: #f676dc;
	--color-pink: #e462cb;
	--color-pink-d1: #c933b1;
	--color-pink-d2: #980085;
	--color-pink-d3: #5e0051;
	--color-red-l5: #fff1f1;
	--color-red-l4: #ffd8d6;
	--color-red-l3: #ffbdbb;
	--color-red-l2: #ffa1a0;
	--color-red-l1: #ff8183;
	--color-red: #ff5b65;
	--color-red-d1: #e62141;
	--color-red-d2: #aa0028;
	--color-red-d2-a20: #dd99a9;
	--color-red-d3: #690015;
	--color-orange-l5: #fff3e7;
	--color-orange-l4: #ffe3c8;
	--color-orange-l3: #ffd3a8;
	--color-orange-l2: #ffc284;
	--color-orange-l1: #ffb05b;
	--color-orange: #fd9e26;
	--color-orange-d1: #d07e00;
	--color-orange-d2: #925700;
	--color-orange-d3: #563100;
	--color-yellow-l5: #fbff72;
	--color-yellow-l4: #f2f661;
	--color-yellow-l3: #e9ec56;
	--color-yellow-l2: #e0e34b;
	--color-yellow-l1: #d7da40;
	--color-yellow: #ced12b;
	--color-yellow-d1: #a6a800;
	--color-yellow-d2: #737400;
	--color-yellow-d3: #414200;

	--color-lime: #b5fa86;

	--color-gray-01: #f6f9f9;
	--color-gray-02: #ecf0ef;
	--color-gray-03: #e5e5e5;
	--color-gray-04: #c1c4c3;
	--color-gray-05: #919493;
	--color-gray-06: #646766;
	--color-gray-07: #3a3d3c;

	--color-white: #FFF;
	--color-black: #171717;

	--main-border-color: var(--color-gray-03);
	--main-text-color: var(--color-black);
	--main-font-family: var(--font-regular);
	--main-bg-color: var(--color-white);

	--input-bg: var(--color-white);
	--input-border: solid 1px var(--main-border-color);

}

i.w20-sourcing { mask-image: url('icon/globe-search-20.svg'); }
i.w20-products { mask-image: url('icon/package-20.svg'); }
i.w20-clients { mask-image: url('icon/person-pin-20.svg'); }
i.w20-suppliers { mask-image: url('icon/pallete-20.svg'); }
i.w20-users { mask-image: url('icon/shield-person-20.svg'); }
i.w20-logout { mask-image: url('icon/logout-20.svg'); }
i.w20-settings { mask-image: url('icon/settings-20.svg'); }
i.w20-user { mask-image: url('icon/user-20.svg'); }
i.w20-add { mask-image: url('icon/add-20.svg'); }
i.w20-minus { mask-image: url('icon/minus-20.svg'); }
i.w20-upload { mask-image: url('icon/upload-20.svg'); }
i.w20-download { mask-image: url('icon/download-20.svg'); }
i.w20-next { mask-image: url('icon/arrow-right-20.svg'); }
i.w20-prev { mask-image: url('icon/arrow-left-20.svg'); }
i.w20-box-remove { mask-image: url('icon/box-remove-20.svg'); }
i.w20-box-clone { mask-image: url('icon/box-add-20.svg'); }
i.w20-close { mask-image: url('icon/close-20.svg'); }
i.w20-table { mask-image: url('icon/table-20.svg'); }

.btn {
	font-size: 12px;
	line-height: 26px;
	font-family: var(--font-condensed);
	font-weight: 500;
	color: var(--color-white);
	display: inline-block;
	border-radius: 3px;
	text-transform: uppercase;
	box-sizing: border-box;
	text-decoration: none;
	height: 24px;
	overflow: hidden;
	padding: 0 8px;
	background-color: var(--color-gray-05);
	text-shadow: 0 1px 0 #00000011;
	border: none;
	cursor: pointer;

	i {
		display: inline-block;
		width: 24px;
		height: 24px;
		background-color: var(--color-white);
		mask-size: 20px 20px;
		mask-repeat: no-repeat;
		mask-position: center;
		vertical-align: top;
	}
}

.btn:hover {
	background-color: var(--color-gray-06);
}

.btn.h32 {
	font-size: 14px;
	height: 32px;
	line-height: 34px;
	padding: 0 12px;

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

.btn.brd, .btn.off {
	line-height: 24px;
	text-shadow: none;
	border-width: 1px;
	border-style: solid;
	padding: 0 7px;

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

.btn.off {
	color: var(--color-gray-04);
	background-color: var(--color-white);
	border-color: var(--color-gray-03);
	cursor: not-allowed;

	i {
		background-color: var(--color-gray-04);
	}
}

.btn.h32.brd, .btn.h32.off {
	line-height: 32px;
	padding: 0 11px;

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

.btn.ir, .btn.h32.ir {
	padding-right: 0;
}

.btn.il, .btn.h32.il {
	padding-left: 0;
}

.btn.ico {
	width: 24px;
	height: 24px;
	padding: 0;

	i {
		display: block;
		width: 24px;
		height: 24px;
		mask-size: 20px 20px;
		mask-repeat: no-repeat;
		mask-position: center;
	}
}

.btn.h32.ico {
	width: 32px;
	height: 32px;

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

.btn.brd.ico, .btn.off.ico {
	width: 24px;
	height: 24px;
	padding: 0;
	i {
		width: 22px;
		height: 22px;
	}
}

.btn.h32.brd.ico, .btn.h32.off.ico {
	width: 32px;
	height: 32px;

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

/* BTN COLORS */

.btn.green {
	color: var(--color-white);
	background-color: var(--color-green);
	background: linear-gradient(0deg,var(--color-green) 50%, var(--color-green-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.green {
	color: var(--color-green-d1);
	border: solid 1px var(--color-green);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-green-d1);
	}
}

.btn.green:hover, .btn.brd.green:hover {
	color: var(--color-white);
	border-color: var(--color-green-d1);
	background: var(--color-green-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.teal {
	color: var(--color-white);
	background-color: var(--color-teal);
	background: linear-gradient(0deg,var(--color-teal) 50%, var(--color-teal-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.teal {
	color: var(--color-teal-d1);
	border: solid 1px var(--color-teal);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-teal-d1);
	}
}

.btn.teal:hover, .btn.brd.teal:hover {
	color: var(--color-white);
	border-color: var(--color-teal-d1);
	background: var(--color-teal-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.blue {
	color: var(--color-white);
	background-color: var(--color-blue);
	background: linear-gradient(0deg,var(--color-blue) 50%, var(--color-blue-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.blue {
	color: var(--color-blue-d1);
	border: solid 1px var(--color-blue);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-blue-d1);
	}
}

.btn.blue:hover, .btn.brd.blue:hover {
	color: var(--color-white);
	border-color: var(--color-blue-d1);
	background: var(--color-blue-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.purple {
	color: var(--color-white);
	background-color: var(--color-purple);
	background: linear-gradient(0deg,var(--color-purple) 50%, var(--color-purple-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.purple {
	color: var(--color-purple-d1);
	border: solid 1px var(--color-purple);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-purple-d1);
	}
}

.btn.purple:hover, .btn.brd.purple:hover {
	color: var(--color-white);
	border-color: var(--color-purple-d1);
	background: var(--color-purple-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.pink {
	color: var(--color-white);
	background-color: var(--color-pink);
	background: linear-gradient(0deg,var(--color-pink) 50%, var(--color-pink-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.pink {
	color: var(--color-pink-d1);
	border: solid 1px var(--color-pink);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-pink-d1);
	}
}

.btn.pink:hover, .btn.brd.pink:hover {
	color: var(--color-white);
	border-color: var(--color-pink-d1);
	background: var(--color-pink-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.red {
	color: var(--color-white);
	background-color: var(--color-red);
	background: linear-gradient(0deg,var(--color-red) 50%, var(--color-red-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.red {
	color: var(--color-red-d1);
	border: solid 1px var(--color-red);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-red-d1);
	}
}

.btn.red:hover, .btn.brd.red:hover {
	color: var(--color-white);
	border-color: var(--color-red-d1);
	background: var(--color-red-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.orange {
	color: var(--color-white);
	background-color: var(--color-orange);
	background: linear-gradient(0deg,var(--color-orange) 50%, var(--color-orange-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.orange {
	color: var(--color-orange-d1);
	border: solid 1px var(--color-orange);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-orange-d1);
	}
}

.btn.orange:hover, .btn.brd.orange:hover {
	color: var(--color-white);
	border-color: var(--color-orange-d1);
	background: var(--color-orange-d1);

	i {
		background-color: var(--color-white);
	}
}

.btn.yellow {
	color: var(--color-white);
	background-color: var(--color-yellow);
	background: linear-gradient(0deg,var(--color-yellow) 50%, var(--color-yellow-l1) 100%);

	i {
		background-color: var(--color-white);
	}
}

.btn.brd.yellow {
	color: var(--color-yellow-d1);
	border: solid 1px var(--color-yellow);
	background: var(--main-bg-color);
	text-shadow: none;

	i {
		background-color: var(--color-yellow-d1);
	}
}

.btn.yellow:hover, .btn.brd.yellow:hover {
	color: var(--color-white);
	border-color: var(--color-yellow-d1);
	background: var(--color-yellow-d1);

	i {
		background-color: var(--color-white);
	}
}