@charset "UTF-8";

:root {

	--clr-white: #fff;
	--clr-black: #000;
	--clr-red: #fe272c;
	--clr-red-50: #FFF2F0;
	--clr-red-300: #FF9185;
	--clr-red-600: #D70017;
	--clr-amber: #ff5f0b;
	--clr-amber-300: #FFA382;
	--clr-amber-600: #D24B00;
	--clr-orange: #fe9515;
	--clr-orange-50: #FFF3E9;
	--clr-orange-300: #FFBD83;
	--clr-orange-600: #D07700;
	--clr-yellow: #fbb901;
	--clr-yellow-300: #FFD179;
	--clr-lime: #c8d405;
	--clr-lime-300: #DAE63B;
	--clr-green: #01db3f;
	--clr-green-50: #E1FFE0;
	--clr-green-300: #46F55E;
	--clr-green-600: #00B131;
	--clr-turquise: #15d2af;
	--clr-turquise-300: #4EECC8;
	--clr-acqua: #06b7da;
	--clr-acqua-300: #4FD7FA;
	--clr-blue: #3273fd;
	--clr-blue-50: #F0F5FF;
	--clr-blue-300: #80ABFF;
	--clr-purple: #7c24fc;
	--clr-purple-300: #A58BFF;
	--clr-violet: #d722eb;
	--clr-violet-300: #F27FFF;
	--clr-pink: #fe369d;
	--clr-pink-300: #FF94BF;
	--clr-gray: #b1aeb6;
	--clr-gray-300: #f9f9f8;
	--clr-dark-purple: #1d0048;
	--clr-dark-gray: #55525d;
	--clr-mid-gray: rgb(177, 174, 182);
	--clr-mid-gray: #b1aeb6;
	--clr-light-gray: #f9f9f8;

	--fnt-main: "Mulish", serif;

	--wht-regular: 400;
	--wht-medium: 500;
	--wht-semibold: 600;
	--wht-bold: 700;
	--wht-extrabold: 800;
	--wht-black: 900;

	--rds-box: 8px;
	--rds-btn: 4px;
	--rds-inp: 3px;

	--rds-cont: 16px;
	--rds-box: 8px;

	--shd-msg: 0 4px 8px 1px rgba(0,0,0,0.2);
	--shd-box: 0 2px 4px rgba(0,0,0,0.2);
	--shd-btn: 0 2px 4px rgba(0,0,0,0.2);
	--shd-pill: 0 3px 6px #b1aeb64d;
	--shd-glow-red: 0 3px 6px #fe272c4d;
	--shd-glow-amber: 0 3px 6px #ff5f0b4d;
	--shd-glow-orange: 0 3px 6px #fe95154d;
	--shd-glow-yellow: 0 3px 6px #fbb9014d;
	--shd-glow-lime: 0 3px 6px #c8d4054d;
	--shd-glow-green: 0 3px 6px #01db3f4d;
	--shd-glow-turquise: 0 3px 6px #15d2af4d;
	--shd-glow-acqua: 0 3px 6px #06b7da4d;
	--shd-glow-blue: 0 3px 6px #3273fd4d;
	--shd-glow-purple: 0 3px 6px #7c24fc4d;
	--shd-glow-violet: 0 3px 6px #d722eb4d;
	--shd-glow-pink: 0 3px 6px #fe369d4d;
	--shd-glow-gray: 0 3px 6px #b1aeb64d;

	--mrg-lbx-full: 32px;
	--mrg-lbx-half: 16px;
	--mrg-lbx-min: 8px;

	--mrg-wrp-full: 32px;
	--mrg-wrp-half: 16px;

	--mrg-box-full: 32px;
	--mrg-box-half: 16px;
	--mrg-box-min: 8px;

	--mrg-header-full: 24px;
	--mrg-header-half: 12px;

	--mrg-tbl-full: 24px;
	--mrg-tbl-half: 16px;
	--mrg-tbl-quarter: 12px;

	--mrg-form-component: 8px;

}

.ui-pill {
	display: inline-block;
	font-size: 14px;
	height: 24px;
	line-height: 24px;
	overflow: hidden;
	font-weight: var(--wht-bold);
	color: var(--clr-white);
	border-radius: 12px;
	padding: 0 6px;
	white-space: nowrap;
	vertical-align: middle;
	background-color: var(--clr-mid-gray);
	box-shadow: var(--shd-pill);
	text-shadow: 0 1px 0 #00000033;
}

.ui-pill._red{
	background-color: var(--clr-red);
	box-shadow: var(--shd-glow-red);
}
.ui-pill._amber{
	background-color: var(--clr-amber);
	box-shadow: var(--shd-glow-amber);
}
.ui-pill._orange{
	background-color: var(--clr-orange);
	box-shadow: var(--shd-glow-orange);
}
.ui-pill._yellow{
	background-color: var(--clr-yellow);
	box-shadow: var(--shd-glow-yellow);
}
.ui-pill._lime{
	background-color: var(--clr-lime);
	box-shadow: var(--shd-glow-lime);
}
.ui-pill._green{
	background-color: var(--clr-green);
	box-shadow: var(--shd-glow-green);
}
.ui-pill._turquise{
	background-color: var(--clr-turquise);
	box-shadow: var(--shd-glow-turquise);
}
.ui-pill._acqua{
	background-color: var(--clr-acqua);
	box-shadow: var(--shd-glow-acqua);
}
.ui-pill._blue{
	background-color: var(--clr-blue);
	box-shadow: var(--shd-glow-blue);
}
.ui-pill._purple{
	background-color: var(--clr-purple);
	box-shadow: var(--shd-glow-purple);
}
.ui-pill._violet{
	background-color: var(--clr-violet);
	box-shadow: var(--shd-glow-violet);
}
.ui-pill._pink{
	background-color: var(--clr-pink);
	box-shadow: var(--shd-glow-pink);
}
.ui-pill._gray{
	background-color: var(--clr-gray);
	box-shadow: var(--shd-glow-gray);
}

.ui-progress {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 4px;

	.line {
		display: block;
		float: left;
		height: 4px;
		width: 0;
		box-sizing: border-box;
		padding: 0 1px 0 0;

		.out {
			display: block;
			height: 4px;
			width: 100%;
			overflow: hidden;
			border-radius: 2px;
			background-color: var(--clr-dark-gray);
			.in {
				display: block;
				height: 4px;
				width: 100%;
				overflow: hidden;
				border-radius: 2px;
			}
		}
	}

	.line:last-child {
		padding: 0;
	}

	.line._red .out {
		background-color: var(--clr-red);
		box-shadow: 0 2px 4px #fe272c4d;
		.in { box-shadow: inset 0 1px 2px #fe951580; }
	}

	.line._amber .out {
		background-color: var(--clr-amber);
		box-shadow: 0 2px 4px #FF5F0B4d;
		.in { box-shadow: inset 0 1px 2px #FE951580; }
	}

	.line._orange .out {
		background-color: var(--clr-orange);
		box-shadow: 0 2px 4px #FE95154d;
		.in { box-shadow: inset 0 -1px 2px #FF5F0B80; }
	}

	.line._yellow .out {
		background-color: var(--clr-yellow);
		box-shadow: 0 2px 4px #FBB9014d;
		.in { box-shadow: inset 0 1px 2px #DAE63B80; }
	}

	.line._lime .out {
		background-color: var(--clr-lime);
		box-shadow: 0 2px 4px #C8D4054d;
		.in { box-shadow: inset 0 -1px 2px #32E85080; }
	}

	.line._green .out {
		background-color: var(--clr-green);
		box-shadow: 0 2px 4px #01DB3F4d;
		.in { box-shadow: inset 0 -1px 2px #06B7DA80; }
	}

	.line._turquise .out {
		background-color: var(--clr-turquise);
		box-shadow: 0 2px 4px #15D2AF4d;
		.in { box-shadow: inset 0 -1px 2px #06B7DA80; }
	}

	.line._acqua .out {
		background-color: var(--clr-acqua);
		box-shadow: 0 2px 4px #06B7DA4d;
		.in { box-shadow: inset 0 -1px 2px #3273FD80; }
	}

	.line._blue .out {
		background-color: var(--clr-blue);
		box-shadow: 0 2px 4px #3273FD4d;
		.in { box-shadow: inset 0 -1px 2px #7C24FC80; }
	}

	.line._purple .out {
		background-color: var(--clr-purple);
		box-shadow: 0 2px 4px #7C24FC4d;
		.in { box-shadow: inset 0 1px 2px #D722EB80; }
	}

	.line._violet .out {
		background-color: var(--clr-violet);
		box-shadow: 0 2px 4px #D722EB4d;
		.in { box-shadow: inset 0 1px 2px #FE369D80; }
	}

	.line._pink .out {
		background-color: var(--clr-pink);
		box-shadow: 0 2px 4px #FE369D4d;
		.in { box-shadow: inset 0 1px 2px #FE272C80; }
	}

	.line._gray .out {
		background-color: var(--clr-gray);
		box-shadow: 0 2px 4px #b1aeb64d;
		.in { box-shadow: inset 0 1px 2px #6563694d; }
	}

}

.ui-steps {
	position: relative;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0;
	margin: 0 0 12px;
	display: flex;
	justify-content: space-between;
	align-items: top;

	.step {
		width: 50%;
		display: block;
		box-sizing: border-box;
		color: var(--clr-mid-gray);
		text-align: center;
		font-weight: var(--wht-bold);
		line-height: 32px;

		.line {
			display: block;
			position: relative;
			width: 100%;
			height: 4px;
			top: 18px;
			background-color: var(--clr-light-gray);

			.bar {
				display: block;
				width: 0;
				height: 4px;
				background-color: var(--clr-green);
				box-shadow: var(--shd-glow-green);
			}
		}

		.num {
			display: inline-block;
			position: relative;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			font-size: 16px;
			margin-top: -16px;
			line-height: 27px;
			text-align: center;
			font-weight: var(--wht-bold);
			box-sizing: border-box;
			border: solid 2px var(--clr-mid-gray);
			background: var(--clr-white);
			color: var(--clr-mid-gray);
		}

		.text {
			display: block;
			font-size: 16px;
			font-weight: var(--wht-bold);
			text-align: center;
			line-height: 20px;
			margin: 6px 0 0;
			padding: 0 6px;
		}
	}

	.step:first-child {
		text-align: left;
		color: var(--clr-black);
		.line,
		.line .bar{
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}
		.num {
			border-color: var(--clr-green);
			background: var(--clr-green);
			color: var(--clr-white);
			text-shadow: 0 1px 0 #00000033;
			box-shadow: var(--shd-glow-green);
		}
		.text {
			text-align: left;
			padding-left: 0;
		}
	}

	.step:last-child {
		text-align: right;
		.line,
		.line .bar{
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}
		.text {
			text-align: right;
			padding-right: 0;
		}
	}

}

.ui-steps._done .step {
	color: var(--clr-black);
	.line .bar { width: 100%; }
	.num {
		border-color: var(--clr-green);
		background: var(--clr-green);
		color: var(--clr-white);
		text-shadow: 0 1px 0 #00000033;
		box-shadow: var(--shd-glow-green);
	}
}

.ui-steps._step2 .step:nth-child(-n+2),
.ui-steps._step3 .step:nth-child(-n+3),
.ui-steps._step4 .step:nth-child(-n+4),
.ui-steps._step5 .step:nth-child(-n+5),
.ui-steps._step6 .step{
	color: var(--clr-black);
	.line .bar { width: 100%; }
	.num {
		border-color: var(--clr-green);
		background: var(--clr-green);
		color: var(--clr-white);
		text-shadow: 0 1px 0 #00000033;
		box-shadow: var(--shd-glow-green);
	}
}

.ui-steps._step2 .step:nth-child(2),
.ui-steps._step3 .step:nth-child(3),
.ui-steps._step4 .step:nth-child(4),
.ui-steps._step5 .step:nth-child(5){
	.line .bar { width: 50%; }
}

.ui-steps._x2._step2 .step:nth-child(2),
.ui-steps._x3._step3 .step:nth-child(3),
.ui-steps._x4._step4 .step:nth-child(4),
.ui-steps._x5._step5 .step:nth-child(5){
	.line .bar { width: 100%; }
}

.ui-steps._step2 .step:nth-child(2),
.ui-steps._step3 .step:nth-child(3),
.ui-steps._step4 .step:nth-child(4),
.ui-steps._step5 .step:nth-child(5){
	.line .bar { width: 50%; }
}

.ui-steps._x3 .step { width: 50%; }
.ui-steps._x3 .step:first-child, .ui-steps._x3 .step:last-child { width: 25%; }
.ui-steps._x4 .step { width: 31.25%; }
.ui-steps._x4 .step:first-child, .ui-steps._x4 .step:last-child { width: 18.75%; }
.ui-steps._x5 .step { width: 23.3%; }
.ui-steps._x5 .step:first-child, .ui-steps._x5 .step:last-child { width: 16%; }
.ui-steps._x6 .step { width: 18.75%; }
.ui-steps._x6 .step:first-child, .ui-steps._x6 .step:last-child { width: 12.5%; }

.ui-btn {
	display: inline-block;
	height: 36px;
	font-size: 14px;
	line-height: 34px;
	text-transform: uppercase;
	font-weight: var(--wht-bold);
	color: var(--clr-dark-gray);
	background: var(--clr-white);
	box-sizing: border-box;
	border: solid 1px var(--clr-mid-gray);
	box-shadow: var(--shd-btn);
	padding: 0 12px;
	border-radius: var(--rds-btn);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	user-select: none;

	i {
		display: inline-block;
		height: 27px;
		line-height: 27px;
		vertical-align: top;
		margin: 0 6px;

		svg {
			display: inline-block;
			vertical-align: bottom;
		}
	}

	&.disabled {
		opacity: 0.4;
	}
}

.ui-btn._ico {
	padding: 0 4px;
}

.ui-btn._ico-txt {
	padding-left: 2px;
}

.ui-btn._txt-ico {
	padding-right: 2px;
}

.ui-btn._h24 {
	height: 24px;
	font-size: 12px;
	line-height: 22px;
	padding: 0 8px;

	i {
		height: 21px;
		line-height: 21px;
		margin: 0 3px;

	}
}

.ui-btn._h24._ico {
	padding: 0 4px;
}

.ui-btn._h24._ico-txt {
	padding-left: 2px;
}

.ui-btn._h24._txt-ico {
	padding-right: 2px;
}

.ui-btn._purple {
	color: var(--clr-white);
	background: var(--clr-purple);
	border-color: var(--clr-purple);
	box-shadow: var(--shd-glow-purple);
}

.ui-btn._acqua {
	color: var(--clr-white);
	background: var(--clr-acqua);
	border-color: var(--clr-acqua);
	box-shadow: var(--shd-glow-acqua);
}

.ui-btn._violet {
	color: var(--clr-white);
	background: var(--clr-violet);
	border-color: var(--clr-violet);
	box-shadow: var(--shd-glow-violet);
}

.ui-btn._green {
	color: var(--clr-white);
	background: var(--clr-green);
	border-color: var(--clr-green);
	box-shadow: var(--shd-glow-green);
}

.ui-btn._green:hover {
	color: var(--clr-green);
	border: solid 1px var(--clr-green-300);
}

.ui-btn._on, .ui-btn:hover, .ui-btn._purple:hover {
	background: var(--clr-white);
	color: var(--clr-purple);
	border: solid 1px var(--clr-purple-300);
}

.ui-btn._clear, .ui-btn._on._clear, .ui-btn._clear:hover {
	background: none;
	border-color: rgba(255,255,255,0);
	box-shadow: none;
}

.ui-btn._red {
	color: var(--clr-white);
	background: var(--clr-red);
	border-color: var(--clr-red);
	box-shadow: var(--shd-glow-red);
}

.ui-btn._red:hover {
	color: var(--clr-red);
	border: solid 1px var(--clr-red-300);
}

/* Callout */

.callout {
    padding: 12px;
    border: 1px solid var(--clr-mid-gray);
    margin-bottom: 12px;
	border-radius: 2px;

	.callout_title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
	}

	p {
		line-height: 1.2;
	}

	&.info {
		border-color: var(--clr-blue);
	}
}

/* Custom Select */

.customSelect {
	display: block;
	width: 100%;
	line-height: 24px;
	font-size: 14px;
	height: 36px;
	position: relative;

	&.multi_select {
		min-width: 52px;
	}
}

.customSelect.loading::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url('icon/ani-loading-24-dark.gif');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 20px;
	z-index: 2;
}

.customSelect .cswrp {
	width: 100%;
	height: 36px;
	position: absolute;
	background-color: #FFF;
	overflow: hidden;
}

.customSelect.focused .cswrp {
	position: absolute;
	height: 32px;
    min-height: 80px;
	z-index: 9;
	border: solid 1px var(--clr-mid-gray);
	border-radius: var(--rds-inp);
	box-sizing: border-box;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .2);
}

.customSelect .cswrp .csmainwrp {
	display: block;
	width: 100%;
	height: 32px;
	box-sizing: border-box;
	line-height: 24px;
	font-size: 14px;
	outline: none;
	border-width: 1px;
	border-style: solid;
	padding: 4px 24px 4px 8px;
	border-radius: 1px;
	white-space: nowrap;
	overflow: hidden;
	color: #000;
	position: relative;
}

.customSelect.focused .cswrp .csmainwrp {
	border-top: none;
	border-right: none;
	border-left: none;
}

.customSelect .cswrp .csmainwrp .csmain {
	display: block;
	width: 100%;
	overflow: hidden;
}

.customSelect.loading .cswrp .csmainwrp .csmain {
	display: none;
}

.customSelect.disabled .cswrp .csmainwrp .csmain {
	color: #6d6d6c;
}

.customSelect .cswrp .csmainwrp .csico {
	display: block;
	position: absolute;
	top: 8px;
	right: 3px;
	float: right;
    width: 18px;
    height: 18px;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOCAxOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiM3NTc1NzUiIGQ9Ik01LDZsNCw0bDQtNGwxLDFsLTUsNUw0LDdMNSw2eiIvPgo8L3N2Zz4=');
}

.customSelect.loading .cswrp .csmainwrp .csico {
	opacity: 0.4;
}

.customSelect .cswrp .csoptwrp {
	display: none;
	outline: none;
	box-sizing: border-box;
	padding: 6px;
	position: relative;
}

.customSelect.focused .cswrp .csoptwrp {
	display: block;
}

.customSelect .cswrp .csoptwrp .cssrc {
	display: block;
	width: 100%;
	height: 32px;
	line-height: 20px;
	font-size: 14px;
	padding: 1px;
	outline: none;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--rds-inp);
	padding: 1px 6px 1px 24px;
	background-repeat: no-repeat;
	background-position: 4px center;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIGlkPSJMYXllcl8xIiBmb2N1c2FibGU9ImZhbHNlIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGZpbGw9IiM0MjQyNDIiIGQ9Ik05LjkzOCw4LjY2NGw0LjAwMiw0LjAwMmwtMS4yNTYsMS4yNThsLTQtNGMtMi4wNDQsMS4zNTktNC44MDQsMC44MDUtNi4xNjMtMS4yNCAgQzEuMTYxLDYuNjQsMS43MTYsMy44ODEsMy43NiwyLjUyMmMyLjA0NC0xLjM1OSw0LjgwMy0wLjgwNCw2LjE2MiwxLjI0YzAuOTg2LDEuNDgzLDAuOTkyLDMuNDEzLDAuMDE0LDQuOTAxTDkuOTM4LDguNjY0eiAgIE02LjIyMiw4Ljg4OWMxLjQ3MywwLDIuNjY3LTEuMTk0LDIuNjY3LTIuNjY3YzAtMS40NzMtMS4xOTQtMi42NjYtMi42NjctMi42NjZjLTEuNDczLDAtMi42NjYsMS4xOTQtMi42NjYsMi42NjYgIEMzLjU1Niw3LjY5NCw0Ljc1LDguODg5LDYuMjIyLDguODg5eiIvPgo8L3N2Zz4=');
}

.customSelect .cswrp .csoptwrp .csoptcont {
	display: block;
	height: 125px;
	overflow: hidden;
	overflow-y: auto;
	padding: 0;
	margin: 5px -6px 0px;
}

.customSelect .cswrp .csoptwrp .cssrc.hide ~ .csoptcont {
	margin: -6px -6px 0px;
}

.customSelect .cswrp .csoptwrp .csoptcont .csopts {
	display: block;
	padding: 0;
	margin: 0;
}

.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt {
    display: flex;
    white-space: nowrap;
    line-height: 20px;
    font-size: 14px;
    height: 24px;
    box-sizing: border-box;
    padding: 3px 6px;
    margin: 0;
    cursor: pointer;
    color: var(--clr-dark-gray);
    overflow: hidden;
    align-items: center;

	.hierarchy_space {
		display: inline-block;
		width: 16px;
	}
}

.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt.cshide {
	display: none;
}

.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt.cson,
.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt:hover {
	color: var(--clr-white);
	background-color: var(--clr-purple);
}

.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt.csoff,
.customSelect .cswrp .csoptwrp .csoptcont .csopts .csopt.csoff.cson {
	color: var(--clr-mid-gray);
	background-color: var(--clr-white);
	cursor: unset;
}

/* Placeholders Container */

.placeholders-container {
	margin-top: 8px;
	border: 1px solid #a9a9a9;
	border-radius: 4px;
	background: #fff;
	padding: 16px;

	.placeholders-header {
		padding-bottom: 8px;
		border-bottom: 1px solid #eee;

		&:hover {
			cursor: pointer;
		}
	}

	.placeholders-header h3 {
		color: #333;
		margin: 0 0 5px 0;
		font-size: 16px;
		font-weight: 600;
        margin-bottom: 0px;
	}

	.placeholders-header small, .placeholder-category small {
		color: #666;
		font-size: 12px;
	}

	.placeholders-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 20px;
		margin-top: 16px;
	}

	.placeholder-category h4 {
		color: #444;
		margin: 0 0 8px 0;
		font-size: 14px;
		font-weight: 600;
        margin-bottom: 0px;
	}

	.placeholder-category ul {
		list-style: none;
		padding: 0px;
		margin: 8px 0px 0px 0px;
	}

	.placeholder-category li {
		padding: 8px 12px;
		margin-bottom: 4px;
		border: 1px solid #eee;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		flex-direction: column;
	}

	.placeholder-category li:hover {
		background-color: #f8f9fa;
		border-color: #ddd;
	}

	.placeholder-text {
		font-family: monospace;
		color: #7c3aed;
		font-size: 13px;
		margin-bottom: 2px;
	}

	.placeholder-desc {
		font-size: 12px;
		color: #666;
	}
}

/* Toast de Notificação */

.toast-notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #333;
	color: white;
	padding: 12px 24px;
	border-radius: 4px;
	display: none;
	z-index: 9999;
	animation: slideIn 0.3s, fadeOut 0.3s 1.5s;
}

@keyframes slideIn {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}