@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");

@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-regular-rounded/css/uicons-regular-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-brands/css/uicons-brands.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-solid-straight/css/uicons-solid-straight.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-solid-rounded/css/uicons-solid-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-bold-rounded/css/uicons-bold-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-thin-rounded/css/uicons-thin-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-thin-rounded/css/uicons-thin-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-regular-rounded/css/uicons-regular-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.4.2/uicons-regular-straight/css/uicons-regular-straight.css");
@import url('https://cdn-uicons.flaticon.com/2.4.2/uicons-bold-straight/css/uicons-bold-straight.css');

@font-face {
	font-family: "DINRoundPro";
	src: url("../fonts/din-round-pro/DINRoundPro-Black.eot");
	src: local("DINRoundPro-Black"), url("../fonts/din-round-pro/DINRoundPro-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/din-round-pro/DINRoundPro-Black.woff2") format("woff2"), url("../fonts/din-round-pro/DINRoundPro-Black.woff") format("woff"), url("../fonts/din-round-pro/DINRoundPro-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "DINRoundPro";
	src: url("../fonts/din-round-pro/DINRoundPro-Medi.eot");
	src: local("DINRoundPro-Medi"), url("../fonts/din-round-pro/DINRoundPro-Medi.eot?#iefix") format("embedded-opentype"), url("../fonts/din-round-pro/DINRoundPro-Medi.woff2") format("woff2"), url("../fonts/din-round-pro/DINRoundPro-Medi.woff") format("woff"), url("../fonts/din-round-pro/DINRoundPro-Medi.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "DINRoundPro";
	src: url("../fonts/din-round-pro/DINRoundPro-Light.eot");
	src: local("DINRoundPro-Light"), url("../fonts/din-round-pro/DINRoundPro-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/din-round-pro/DINRoundPro-Light.woff2") format("woff2"), url("../fonts/din-round-pro/DINRoundPro-Light.woff") format("woff"), url("../fonts/din-round-pro/DINRoundPro-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "DINRoundPro";
	src: url("../fonts/din-round-pro/DINRoundPro.eot");
	src: local("DINRoundPro"), url("../fonts/din-round-pro/DINRoundPro.eot?#iefix") format("embedded-opentype"), url("../fonts/din-round-pro/DINRoundPro.woff2") format("woff2"), url("../fonts/din-round-pro/DINRoundPro.woff") format("woff"), url("../fonts/din-round-pro/DINRoundPro.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "DINRoundPro";
	src: url("../fonts/din-round-pro/DINRoundPro-Bold.eot");
	src: local("DINRoundPro-Bold"), url("../fonts/din-round-pro/DINRoundPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/din-round-pro/DINRoundPro-Bold.woff2") format("woff2"), url("../fonts/din-round-pro/DINRoundPro-Bold.woff") format("woff"), url("../fonts/din-round-pro/DINRoundPro-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

:root {
	--color-primary: #0095ff;
	--color-primary-96: #0095fff5;
	--color-primary-88: #0095ffe0;
	--color-primary-80: #0095ffcc;
	--color-primary-72: #0095ffb8;
	--color-primary-64: #0095ffa3;
	--color-primary-56: #0095ff8f;
	--color-primary-48: #0095ff7a;
	--color-primary-32: #0095ff52;
	--color-primary-24: #0095ff3d;
	--color-primary-16: #0095ff29;
	--color-primary-08: #0095ff14;
	--color-primary-04: #0095ff0a;
	--color-primary-02: #0095ff05;

	--color-white: #ffffff;
	--color-white-96: #fffffff5;
	--color-white-88: #ffffffe0;
	--color-white-80: #ffffffcc;
	--color-white-72: #ffffffb8;
	--color-white-64: #ffffffa3;
	--color-white-56: #ffffff8f;
	--color-white-48: #ffffff7a;
	--color-white-32: #ffffff52;
	--color-white-24: #ffffff3d;
	--color-white-16: #ffffff29;
	--color-white-08: #ffffff14;
	--color-white-04: #ffffff0a;
	--color-white-02: #ffffff05;

	--color-white-fixed: #ffffff;
	--color-white-fixed-96: #fffffff5;
	--color-white-fixed-88: #ffffffe0;
	--color-white-fixed-80: #ffffffcc;
	--color-white-fixed-72: #ffffffb8;
	--color-white-fixed-64: #ffffffa3;
	--color-white-fixed-56: #ffffff8f;
	--color-white-fixed-48: #ffffff7a;
	--color-white-fixed-32: #ffffff52;
	--color-white-fixed-24: #ffffff3d;
	--color-white-fixed-16: #ffffff29;
	--color-white-fixed-08: #ffffff14;
	--color-white-fixed-04: #ffffff0a;
	--color-white-fixed-02: #ffffff05;

	--color-dark: #003052;
	--color-dark-96: #003052f5;
	--color-dark-88: #003052e0;
	--color-dark-80: #003052cc;
	--color-dark-72: #003052b8;
	--color-dark-64: #003052a3;
	--color-dark-56: #0030528f;
	--color-dark-48: #0030527a;
	--color-dark-32: #00305252;
	--color-dark-24: #0030523d;
	--color-dark-16: #00305229;
	--color-dark-08: #00305214;
	--color-dark-04: #0030520a;
	--color-dark-02: #00305205;

	--color-yellow: #fec514;
	--color-yellow-96: #fec514f5;
	--color-yellow-88: #fec514e0;
	--color-yellow-80: #fec514cc;
	--color-yellow-72: #fec514b8;
	--color-yellow-64: #fec514a3;
	--color-yellow-56: #fec5148f;
	--color-yellow-48: #fec5147a;
	--color-yellow-32: #fec51452;
	--color-yellow-24: #fec5143d;
	--color-yellow-16: #fec51429;
	--color-yellow-08: #fec51414;
	--color-yellow-04: #fec5140a;
	--color-yellow-02: #fec51405;

	--color-orange: #ff6300;
	--color-orange-08: #ff630014;
	--color-orange-16: #ff630029;
	--color-orange-88: #ff6300e0;

	--color-blue: #0657a3;
	--color-blue-04: #0657a30a;
	--color-blue-08: #0657a314;
	--color-blue-16: #0657a329;
	--color-blue-88: #0657a3e0;

	--color-purple: #bd66ff;
	--color-purple-96: #bd66fff5;
	--color-purple-88: #bd66ffe0;
	--color-purple-80: #bd66ffcc;
	--color-purple-72: #bd66ffb8;
	--color-purple-64: #bd66ffa3;
	--color-purple-56: #bd66ff8f;
	--color-purple-48: #bd66ff7a;
	--color-purple-32: #bd66ff52;
	--color-purple-24: #bd66ff3d;
	--color-purple-16: #bd66ff29;
	--color-purple-08: #bd66ff14;
	--color-purple-04: #bd66ff0a;
	--color-purple-02: #bd66ff05;

	--color-green: #00bfb3;
	--color-green-04: #00bfb30a;
	--color-green-08: #00bfb314;
	--color-green-16: #00bfb329;
	--color-green-32: #00bfb352;
	--color-green-48: #00bfb37a;
	--color-green-56: #00bfb38f;
	--color-green-64: #00bfb3a3;
	--color-green-72: #00bfb3b8;
	--color-green-88: #00bfb3e0;

	--color-red: #f0425f;
	--color-red-96: #f0425ff5;
	--color-red-88: #f0425fe0;
	--color-red-80: #f0425fcc;
	--color-red-72: #f0425fb8;
	--color-red-64: #f0425fa3;
	--color-red-56: #f0425f8f;
	--color-red-48: #f0425f7a;
	--color-red-32: #f0425f52;
	--color-red-24: #f0425f3d;
	--color-red-16: #f0425f29;
	--color-red-08: #f0425f14;
	--color-red-04: #f0425f0a;
	--color-red-02: #f0425f05;

	--color-whatsapp: #29d045;
	--color-whatsapp-08: #29d04514;
	--color-whatsapp-16: #29d04529;
}

.mode-dark {
	--color-dark: #ffffff;
	--color-dark-96: #fffffff5;
	--color-dark-88: #ffffffe0;
	--color-dark-80: #ffffffcc;
	--color-dark-72: #ffffffb8;
	--color-dark-64: #ffffffa3;
	--color-dark-56: #ffffff8f;
	--color-dark-48: #ffffff7a;
	--color-dark-32: #ffffff52;
	--color-dark-24: #ffffff3d;
	--color-dark-16: #ffffff29;
	--color-dark-08: #ffffff14;
	--color-dark-04: #ffffff0a;
	--color-dark-02: #ffffff05;

	--color-white: #001524;
	--color-white-96: #001524f5;
	--color-white-88: #001524e0;
	--color-white-80: #001524cc;
	--color-white-72: #001524b8;
	--color-white-64: #001524a3;
	--color-white-56: #0015248f;
	--color-white-48: #0015247a;
	--color-white-32: #00152452;
	--color-white-24: #0015243d;
	--color-white-16: #00152429;
	--color-white-08: #00152414;
	--color-white-04: #0015240a;
	--color-white-02: #00152405;
}

[contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}

* {
	font-family: "DINRoundPro", sans-serif;

	line-height: normal;
}

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

html,
body {
	color: var(--color-dark);
	background-color: var(--color-white);
	background: var(--color-white);

	font-size: 16px;
}

@media (max-width: 1450px) {
	html,
	body {
		font-size: 14px;
	}
}

::-webkit-scrollbar-track {
	background-color: var(--color-white-48);
}

::-webkit-scrollbar {
	width: 6px;
	height: 0;
	background: var(--color-white-48);
}

::-webkit-scrollbar-thumb {
	background: var(--color-dark-16);
}

::-webkit-resizer {
	display: none;
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

a,
a.link,
a:link,
a:hover {
	font-weight: 600;
	text-decoration: none;

	color: var(--color-dark);
}

a:hover {
	opacity: 0.7;
}

.text-primary {
	color: var(--color-primary) !important;
}

i.fi {
	width: 1rem;
	height: 1rem;

	line-height: 1;

	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* buttons */

button {
	padding: 0;
	margin: 0;

	background: transparent;
	border: 0;
}

.link {
	font-weight: 500;

	color: var(--color-primary);

	display: inline-flex;
	align-items: center;
}

.link-grey {
	color: var(--color-dark-56);
}

.buttons {
	display: flex;
	gap: 0.5rem;
}

.btn {
	font-size: 1rem;
	text-transform: uppercase;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.75rem 1.25rem;

	border-radius: 0.75rem;

	border: 0;
	border-style: solid;
	border-color: transparent;

	color: var(--color-dark);

	transition: all 0s;

	font-weight: 600;
}

.btn.small_ {
	padding: 0.5rem 1rem;

	font-size: 0.8rem;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn > i,
.link > i {
	font-size: 1rem;
	width: clamp(1rem, 1rem, 1rem);
	height: clamp(1rem, 1rem, 1rem);

	margin: 0 -0.25rem;
}

.btn.btn-primary,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:hover {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-dark-32);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-primary); */
}

.btn.btn-primary:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-primary); */
	/* transform: translateY(3px); */
}

.btn.btn-primary-outline,
.btn.btn-primary-outline:active,
.btn.btn-primary-outline:focus,
.btn.btn-primary-outline:hover {
	color: var(--color-primary);
	background: transparent;
	border: 2px solid var(--color-primary);

	/* box-shadow: 0 3px 0 0 var(--color-primary); */
}
.btn.btn-primary-outline:active {
	/* box-shadow: 0 0 0 0 var(--color-primary); */
	/* transform: translateY(3px); */
}

.btn.link-red,
.btn.link-red:active,
.btn.link-red:focus,
.btn.link-red:hover {
	color: var(--color-red);
}
.btn.link-red:hover {
	background: var(--color-red-08);
}

.btn.btn-red,
.btn.btn-red:active,
.btn.btn-red:focus,
.btn.btn-red:hover {
	color: var(--color-white);
	background: var(--color-red);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-red); */
}

.btn.btn-red-outline,
.btn.btn-red-outline:active,
.btn.btn-red-outline:focus,
.btn.btn-red-outline:hover {
	color: var(--color-red);
	background: transparent;
	border-color: var(--color-red);
	border-width: 2px;

	/* box-shadow: 0 2px 0 0 var(--color-red); */
}
.btn.btn-red-outline:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-24); */
	/* transform: translateY(2px); */
}

.btn.btn-green,
.btn.btn-green:active,
.btn.btn-green:focus,
.btn.btn-green:hover {
	color: var(--color-white);
	background: var(--color-green);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-green); */
}
.btn.btn-green:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-green); */
	/* transform: translateY(3px); */
}

.btn.btn-green-outline,
.btn.btn-green-outline:active,
.btn.btn-green-outline:focus,
.btn.btn-green-outline:hover {
	color: var(--color-green);
	background: transparent;
	border-color: var(--color-green);
	border-width: 2px;

	/* box-shadow: 0 2px 0 0 var(--color-green); */
}
.btn.btn-green-outline:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-24); */
	/* transform: translateY(2px); */
}

.btn.btn-orange,
.btn.btn-orange:active,
.btn.btn-orange:focus,
.btn.btn-orange:hover {
	color: var(--color-white);
	background: var(--color-orange);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-orange); */
}
.btn.btn-orange:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-orange); */
	/* transform: translateY(3px); */
}

.btn.btn-blue,
.btn.btn-blue:active,
.btn.btn-blue:focus,
.btn.btn-blue:hover {
	color: var(--color-white);
	background: var(--color-blue);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-blue); */
}
.btn.btn-blue:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-blue); */
	/* transform: translateY(3px); */
}

.btn.btn-purple,
.btn.btn-purple:active,
.btn.btn-purple:focus,
.btn.btn-purple:hover {
	color: var(--color-white);
	background: var(--color-purple);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-blue); */
}

.btn.btn-whatsapp,
.btn.btn-whatsapp:active,
.btn.btn-whatsapp:focus,
.btn.btn-whatsapp:hover {
	color: var(--color-white);
	background: var(--color-whatsapp);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-whatsapp); */
}
.btn.btn-blue:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-blue); */
	/* transform: translateY(3px); */
}

.btn.btn-white,
.btn.btn-white:active,
.btn.btn-white:focus,
.btn.btn-white:hover {
	color: var(--color-primary);
	background: var(--color-white);

	/* box-shadow: 0 3px 0 0 var(--color-dark-32), 0 3px 0 0 var(--color-white); */
}

.btn.btn-white:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-32), 0 0 0 0 var(--color-white); */
	/* transform: translateY(3px); */
}

.btn.btn-grey-outline,
.btn.btn-grey-outline:active,
.btn.btn-grey-outline:focus,
.btn.btn-grey-outline:hover {
	color: var(--color-dark-64);
	background: transparent;
	border-color: var(--color-dark-24);
	border-width: 1px;

	/* box-shadow: 0 2px 0 0 var(--color-dark-24); */
}

.btn.btn-grey-outline:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-24); */
	/* transform: translateY(2px); */
}

.btn.btn-grey-link-outline,
.btn.btn-grey-link-outline:active,
.btn.btn-grey-link-outline:focus,
.btn.btn-grey-link-outline:hover {
	color: var(--color-primary);
	background: transparent;
	border-color: var(--color-dark-24);
	border-width: 2px;

	/* box-shadow: 0 2px 0 0 var(--color-dark-24); */
}

.btn.btn-grey-link-outline:active {
	/* box-shadow: 0 0 0 0 var(--color-dark-24); */
	/* transform: translateY(2px); */
}

.btn.btn-link-outline,
.btn.btn-link-outline:active,
.btn.btn-link-outline:focus,
.btn.btn-link-outline:hover {
	color: var(--color-primary);
	background: transparent;
	border-color: transparent;

	text-decoration: none;
}

.btn.btn-simple,
.btn.btn-simple:active,
.btn.btn-simple:focus,
.btn.btn-simple:hover {
	color: var(--color-dark);
	background: transparent;
	border-color: transparent;
}

.btn.btn-simple:hover {
	background: var(--color-dark-04);
}

button.disabled {
	cursor: default !important;
}

div.buttons {
	display: flex;
	gap: 0.5rem;
}

div.buttons.end {
	justify-content: flex-end;
}

div.buttons.center {
	justify-content: center;
}

/* alert */

.alert {
	padding: 0.75rem 1rem;
	margin: 0;

	background: transparent;

	font-weight: 500;

	border-width: 1px;

	border-radius: 0.75rem;

	display: flex;
	align-items: center;
}

.alert i {
	font-size: 1rem;

	width: 1rem;
	height: 1rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.alert span {
	position: relative;
	bottom: -0.5px;
}

.alert.slim {
	padding: 0;

	border-width: 0;
}

.alert.alert-danger {
	border-color: var(--color-red);
	color: var(--color-red);
}

.alert.alert-red {
	border-color: transparent;
	background: var(--color-red-08);
	color: var(--color-dark);
}

.alert.alert-default {
	border-color: transparent;
	background: var(--color-dark-04);
	color: var(--color-dark);
}

.alert.alert-green {
	border-color: transparent;
	background: var(--color-green-08);
	color: var(--color-dark);
}

.alert.alert-yellow {
	border-color: transparent;
	background: var(--color-yellow-08);
	color: var(--color-dark);
}

/* forms */

select {
	-webkit-appearance: none; /* Remove o estilo padrão do Safari */
	-moz-appearance: none;    /* Remove o estilo no Firefox */
	appearance: none; 
}

::placeholder {
	font-weight: 400;

	color: var(--color-dark-48);
}

.select2-container {
	width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	width: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.2;

	padding: 0 1rem 0 0;
}

.input,
.input.btn:first-child:hover,
:not(.btn-check) + .input.btn:hover .input:hover,
.select2-container--default .select2-selection--single,
.form-select {
	padding: 0.75rem 1rem;

	height: auto;

	opacity: 1;

	width: 100%;

	border-radius: 0.75rem;

	border: 1px solid var(--color-dark-16);
	background: var(--color-white);
	color: var(--color-dark);

	transition: 0.2s;
}

.input:disabled {
	opacity: 0.5;
}

.input.between {
	display: flex;
	justify-content: space-between;
}

.input.a-center {
	display: flex;
	align-items: center;
}

.input:active,
.input:focus,
.input:focus-visible,
.input:focus-within {
	border: 1px solid var(--color-dark-32);
	outline: 0 !important;
}

select.input {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: .65rem;
}

.form-check-input:checked {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.form-check {
	margin: 0;
	padding-left: 0;

	display: flex;
	align-items: center;

	min-height: unset;
}

.form-check > input.form-check-input {
	margin-left: 0;
}

.form-check > label.form-check-label {
	font-size: 0.9rem;

	padding-top: 0.15rem;

	display: block;
	margin-left: 0.75rem;
}

.form-check > label.form-check-label i {
	position: relative;
	bottom: -2px;
}

.form-switch .form-check-input,
.form-switch .form-check-input:focus {
	width: 3.5rem;
	height: 1.75rem;

	margin: 0;

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 48, 82, 0.24%29'/%3e%3c/svg%3e");
	background-color: var(--color-white);
	border: 2px solid var(--color-dark-24);

	box-shadow: none !important;

	cursor: pointer;
}

body.mode-dark .form-switch .form-check-input,
body.mode-dark .form-switch .form-check-input:focus {
	width: 3.5rem;
	height: 1.75rem;

	margin: 0;

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.40%29'/%3e%3c/svg%3e");
	background-color: var(--color-white);
	border: 2px solid var(--color-dark-32);

	box-shadow: none !important;

	cursor: pointer;
}

.form-switch .form-check-input:checked,
body.mode-dark .form-switch .form-check-input:checked {
	background-color: var(--color-primary);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch.small .form-check-input {
	width: 2.5rem;
	height: 1.25rem;
}

.form-check-input:checked[type="checkbox"] {
	background-repeat: no-repeat;

	margin: 0;
}

label.label-input,
span.label-input,
div:has(> .input) label,
div:has(> .dropdown-full_) label,
div:has(> .dropdown_) label {
	margin-bottom: 0.5rem;

	font-weight: 500;
	font-size: 0.85rem;
}

/* dropdown full */

div.dropdown-full_ {
	position: relative;

	display: flex;
}

div.dropdown-full_.show {
	z-index: 88;
}

div.dropdown-full_ > button {
	background: transparent;
	color: var(--color-dark);
	border: 0;

	width: 100%;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

div.dropdown-full_ > aside {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;

	/* width: 100%; */
	min-width: 10rem;

	background: var(--color-white);
	border: 1px solid var(--color-dark-16);

	border-radius: 0.75rem;

	padding: 0.5rem 0;

	z-index: 8;

	display: none;

	/* transition: 0.4s; */
}

div.dropdown-full_.show > aside {
	display: block;
}

div.dropdown-full_.right_ > aside {
	top: 0;
	left: calc(100% + 0.5rem);
}

div.dropdown-full_.bottom_ > aside {
	top: unset;
	bottom: calc(100% + 0.5rem);
}

div.dropdown-full_ > aside > ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	width: 100%;
	max-height: 20rem;

	overflow-y: auto;
}

div.dropdown-full_ > aside > ul > li,
div.dropdown-full_ > aside > ul > li > div.dropdown-full_ > button {
	padding: 0 0.85rem;

	min-height: 2rem;

	font-size: 0.85rem;
	font-weight: 500;

	color: var(--color-dark-64);

	display: flex;
	align-items: center;

	cursor: pointer;
}

div.dropdown-full_ > aside > ul > li > div.dropdown-full_ {
	width: calc(100% + (0.85rem * 2));

	margin: -1rem -0.85rem;
}

div.dropdown-full_ > aside > ul > li > div.dropdown-full_ > button {
	width: 100%;

	justify-content: flex-start;
}

div.dropdown-full_ > aside > ul > li.active {
	color: var(--color-primary);
}

div.dropdown-full_ > aside > ul > li:not(.active):hover {
	background: var(--color-dark-04);
	color: var(--color-dark);
}

div.dropdown-full_.select_ li {
	display: flex;
	align-items: center;

	width: 100%;

	font-weight: 500;

	color: var(--color-dark-64);
}

div.dropdown-full_ > aside > ul > li > a {
	font-weight: 400;
}

div.dropdown-full_.select_ li > i[class*="br-check"] {
	display: none;
}

div.dropdown-full_.select_ li.selected {
	color: var(--color-dark);
	background: var(--color-primary-02);
}

div.dropdown-full_.select_ li.selected > i {
	display: flex;

	color: var(--color-primary);
}

div.dropdown-full_ div.block-aside {
	padding: 0 0.75rem 0.25rem;
}

div.dropdown-full_ div.block-aside > div.header {
	margin-bottom: 1em;

	display: flex;
	align-items: center;
}

div.dropdown-full_ div.block-aside > div.header button.close-block-aside > i {
	color: var(--color-dark-64);

	font-size: 1.25rem;

	width: clamp(1.25rem, 1.25rem, 1.25rem);
	height: clamp(1.25rem, 1.25rem, 1.25rem);

	display: flex;
	align-items: center;
	justify-content: center;

	margin-right: 0;
}

div.dropdown-full_ div.block-aside > div.header > span.title {
	font-weight: 500;
	font-size: 1rem;
}

div.dropdown-full_:has(> aside > div.block-aside) > aside {
	min-width: 20rem;
}

/* mult select */

div.dropdown-full_.mult-select li {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;

	font-weight: 500;

	color: var(--color-dark-64);
}

div.dropdown-full_.mult-select li > i[class*="br-check"] {
	display: none;
}

div.dropdown-full_.mult-select li.selected {
	color: var(--color-dark);
}

div.dropdown-full_.mult-select li.selected > i {
	display: flex;

	color: var(--color-primary);
}

div.dropdown-full_ > aside > ul > li > a {
	display: flex;
	align-items: center;

	color: var(--color-dark-64);

	min-height: 2rem;

	margin: 0 -0.85rem;
	padding: 0 0.85rem;

	font-size: 0.85rem;
	font-weight: 500;

	width: 100%;
}

div.dropdown-full_ > aside > ul > li > a:hover {
	color: var(--color-dark);
}

/* dropdown */

div.dropdown_ {
	position: relative;

	display: flex;
}

div.dropdown_ > button {
	background: transparent;
	color: var(--color-dark);
	border: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

div.dropdown_ button > span.icon-dots {
	font-size: 1.25rem;

	width: 1.25rem;
	min-width: 1.25rem;
	height: 1.25rem;

	color: var(--color-dark-80);

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

div.dropdown_ > aside {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;

	min-width: 10rem;

	background: var(--color-white);
	border: 2px solid var(--color-dark-16);

	border-radius: 0.75rem;

	padding: 0.5rem 0;

	z-index: 8;

	display: none;

	transition: 0.4s;
}

div.dropdown_.show > aside {
	display: block;
}

div.dropdown_.left_ > aside {
	top: unset;
	bottom: 0;
	right: unset;
	left: calc(100% + 0.5rem);
}

div.dropdown_ > aside > ul {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	width: 100%;
}

div.dropdown_ > aside > ul > li > button,
div.dropdown_ > aside > ul > li > span,
div.dropdown_ > aside > ul > li > a {
	padding: 0 0.85rem;

	min-height: 1.85rem;

	width: 100%;

	font-size: 0.9rem;
	font-weight: 500;
	text-align: left;

	color: var(--color-dark-56);
	background: transparent;
	border: 0;

	display: flex;
	align-items: center;

	cursor: pointer;

	position: relative;

	z-index: 8;
}

div.dropdown_ > aside > ul > li > button.red,
div.dropdown_ > aside > ul > li > span.red,
div.dropdown_ > aside > ul > li > a.red {
	color: var(--color-red);
}

div.dropdown_ > aside > ul > li > button:hover,
div.dropdown_ > aside > ul > li > span:hover,
div.dropdown_ > aside > ul > li > a:hover {
	background: var(--color-dark-04);
	color: var(--color-dark);
}

div.dropdown_ > aside > ul > li > span:has(> span.toggle-item) {
	border-bottom: 2px solid var(--color-dark-16);
	background: transparent !important;

	padding-bottom: 0.45rem;
	padding-right: 0.45rem;
	margin-bottom: 0.15rem;
}

div.dropdown_ > aside > ul > li > span > span.toggle-item {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
}

div.dropdown_ > aside > ul > li > span > span.toggle-item > span.label {
	color: var(--color-dark);
}

/* datepicker */

.flatpickr-calendar {
	box-shadow: none;
	max-width: 100%;
}

.flatpickr-months {
	margin-bottom: 0.5rem;
}

.flatpickr-rContainer {
	max-width: 100%;
}

.flatpickr-days {
	width: 100%;
}

.dayContainer {
	width: 100%;
	max-width: 100%;
	min-width: unset;
}

.flatpickr-day {
	padding: 3% 0;

	max-height: unset;
	height: auto;
	line-height: unset;
}

select.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-size: 1rem !important;
}

div:has(> .flatpickr-calendar) > input {
	display: none;
}

/* tags */

div.tags {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

div.tags > span {
	white-space: nowrap;

	font-weight: 500;
	font-size: 0.8rem;

	color: var(--color-dark);
	background: var(--color-dark-08);

	border-radius: 0.5rem;

	padding: 0 0.5rem;
	padding: 0 .35rem;

	display: inline-flex;
	align-items: center;

	height: 1.5rem;
}

div.tags > span.green {
	background: var(--color-green-16);
}

div.tags > span.red {
	background: var(--color-red-16);
}

div.tags > span.blue {
	background: var(--color-blue-16);
}

div.tags > span.yellow {
	background: var(--color-yellow-16);
}

/* Estilos específicos para tags de usuários e salas */
div.tags > span.tag-user {
	background: var(--color-primary-16);
}

div.tags > span .close {
	margin-left: .5rem;
	margin-right: -3px;

	padding-bottom: 2px;

	width: 1rem;
	height: 1rem;

	background: var(--color-dark-04);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: .25rem !important;
}

div.tags > span .close i {
	margin-right: 0 !important;
}

/* pagination */

nav.pagination {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	margin: 0;
}

nav.pagination span.desc {
	color: var(--color-dark-64);

	font-size: 0.85rem;
	font-weight: 500;

	display: inline-flex;
}

nav.pagination ul {
	display: flex;

	list-style: none;

	padding: 0;
}

nav.pagination ul li {
	margin-right: 0.5rem;
}

nav.pagination ul li a {
	width: 2rem;
	height: 2rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-weight: 500;
	line-height: 1;

	border-radius: 8px;

	color: var(--color-dark-64);
}

nav.pagination ul li a i {
	display: flex;
}

nav.pagination ul li:first-child a,
nav.pagination ul li:last-child a,
nav.pagination ul li a:hover {
	opacity: 0.8;

	background: var(--color-dark-08);
}

nav.pagination ul li a.active {
	background: var(--color-primary);
	color: #ffffff;
}

nav.pagination ul li a.disabled {
	opacity: 0.4;
}

/* design block */

section.block {
	padding: 1.5rem 1.5rem 1.5rem;

	border: 2px solid var(--color-dark-16);

	border-radius: 1rem;
}

section.block-t {
	padding: 1.25rem 1.5rem 1.5rem;

	border: 2px solid var(--color-dark-16);

	border-radius: 1rem;
}

/* loader */

span.button-loader {
	width: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 1px;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side, var(--color-white-32) 90%, #0000);
	background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
	background-size: calc(100% / 3) 50%;
	animation: l3 1s infinite linear;
}

span.button-loader-dark {
	width: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 1px;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side, var(--color-dark-32) 90%, #0000);
	background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
	background-size: calc(100% / 3) 50%;
	animation: l3 1s infinite linear;
}

@keyframes l3 {
	20% {
		background-position: 0% 0%, 50% 50%, 100% 50%;
	}
	40% {
		background-position: 0% 100%, 50% 0%, 100% 50%;
	}
	60% {
		background-position: 0% 50%, 50% 100%, 100% 0%;
	}
	80% {
		background-position: 0% 50%, 50% 50%, 100% 100%;
	}
}

div.loading-full {
	position: absolute;

	width: 100%;
	height: 100%;

	left: 0;
	top: 0;

	background: var(--color-white-96);

	display: flex;
	align-items: center;
	justify-content: center;

	z-index: 88;
}

aside.direct-box div.loading-full {
	border-radius: 0 0 1rem 1rem;
}
span.loader {
	display: flex;
	justify-content: center;
}
span.loader::before {
	content: "";

	display: block;

	width: 3rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(farthest-side, var(--color-primary) 94%, #0000) top/.25rem 0.25rem no-repeat, conic-gradient(#0000 30%, var(--color-primary));
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 0.25rem), #000 0);
	animation: loader 1s infinite linear;
}
span.loader.small::before {
	width: 2rem !important;
}
span.loader.tiny::before {
	width: 1.5rem !important;
}

@keyframes loader {
	100% {
		transform: rotate(1turn);
	}
}

/* modal */

.modal.show.modal-static .modal-dialog {
	transform: none !important;
}

.modal-content {
	border: 0;

	border-radius: 1rem;

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

.modal-backdrop {
	opacity: 1 !important;

	background: var(--color-dark-64);

	backdrop-filter: blur(0.25rem);
}

.modal-content > div.header {
	display: flex;
	align-items: center;

	padding: 1rem 1rem 0 1.5rem;

	position: absolute;

	width: 100%;
}

.modal-content > div.header:has(> span.title) {
	padding: 1rem 1rem 1rem 1.5rem;

	border-bottom: 2px solid var(--color-dark-16);

	position: relative;
}

.modal-content > div.body {
	padding: 1rem 1.5rem 1.5rem;
}

.modal-content:not(:has(> div.header > span.title)) > div.body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.modal-content > div.header > span.title {
	font-weight: 600;
	font-size: 1.15rem;

	color: var(--color-dark);
}

.modal-content > div.header > button.close {
	margin: 0;
	margin-left: auto;
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	width: clamp(1.75rem, 1.75rem, 1.75rem);
	height: clamp(1.75rem, 1.75rem, 1.75rem);

	font-size: 1.75rem;

	color: var(--color-dark);
}

.modal-content > .header:not(:has(> span.title)) > button.close {
	position: absolute;

	right: 1rem;
	top: 1rem;
}

/* dropzone */

.dropzone.dz-clickable {
	border: 2px dashed var(--color-dark-16);

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 1rem;
}

.dropzone.dz-clickable:hover {
	border-style: solid;
	border-color: var(--color-primary);
}

.upload-dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	width: 100%;
}

.upload-dropzone span.icon > i {
	font-size: 5rem;

	width: clamp(5rem, 5rem, 5rem);
	height: clamp(5rem, 5rem, 5rem);

	color: var(--color-dark-32);

	margin-bottom: 1rem;
}

.upload-dropzone span.label {
	font-size: 1.25rem;

	color: var(--color-dark-56);
}

.dropzone.dz-clickable:hover .upload-dropzone span.label,
.dropzone.dz-clickable:hover .upload-dropzone span.icon > i {
	color: var(--color-primary);
}

/* buttons */

div.buttons-end {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}

/* toggle-switch */

span.toggle-switch {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

span.toggle-switch > span.label {
	font-weight: 500;
	font-size: 0.9rem;
}

/* upload */

div.upload-input {
	display: flex;
	align-items: center;

	padding: 0.75rem 0.75rem 0.75rem 1.25rem;

	border: 2px solid var(--color-dark-16);

	border-radius: 0.75rem;
}

div.upload-input > span.name {
	width: 100%;

	font-weight: 500;
	font-size: 1rem;

	color: var(--color-dark-64);
}

div.upload-input button {
	white-space: nowrap;
}

/* audio-container */

div.audio-container {
	display: flex;
	align-items: center;
	gap: 0.25rem;

	width: 100%;

	padding: 0 1rem 0 0;

	background: var(--color-dark-04);

	border-radius: 0.75rem;
}

div.audio-container button.play {
	min-width: 2.75rem;
	min-height: 2.75rem;

	border-radius: 2.75rem;

	color: var(--color-dark-56);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;
}

div.audio-container button.play::before {
	content: "";

	width: 100%;
	height: 100%;

	position: absolute;
	left: 0;
	top: 0;

	z-index: 8;
}

div.audio-container span.time {
	display: inline-flex;

	font-size: 0.85rem;
	font-weight: 500;

	padding-right: 0.5rem;

	color: var(--color-dark-56);
}

div.audio-container div.bar_ {
	width: 100%;
	height: 0.5rem;

	border-radius: 1rem;

	display: inline-flex;
	align-items: center;

	background: var(--color-dark-08);

	position: relative;
}

div.audio-container div.bar_ > span.line_ {
	background: var(--color-primary);

	height: 0.5rem;

	display: inline-flex;
	align-items: center;
	justify-content: flex-end;

	border-radius: 1rem;

	position: relative;
	z-index: 8;
}

div.audio-container div.bar_ > span.load_ {
	background: var(--color-dark-16);

	height: 0.5rem;

	display: inline-flex;
	align-items: center;
	justify-content: flex-end;

	border-radius: 1rem;

	position: absolute;
	left: 0;
}

div.audio-container div.bar_ > span.line_ > span.dot_ {
	min-width: 0.9rem;
	min-height: 0.9rem;

	background: var(--color-primary);

	border-radius: 1rem;

	display: inline-flex;

	position: absolute;
	right: calc(-0.9rem / 2);
}

div.audio-container audio {
	position: absolute;
	visibility: hidden;
	opacity: 0;
}

/* select input */

div.select-input {
	position: relative;

	z-index: 8;
}

div.select-input > ul {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;

	width: 100%;

	background: var(--color-white);
	border: 1px solid var(--color-dark-16);

	border-radius: 0.5rem;

	padding: 0.25rem 0;

	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	overflow-x: clip;
	overflow-y: scroll;

	max-height: 20rem;

	opacity: 0;
	visibility: hidden;
}

div.select-input > ul.show {
	opacity: 1;
	visibility: visible;
}

div.select-input > ul > li {
	padding: 0.5rem 1rem;

	cursor: pointer;
}

div.select-input > ul > li:not(.disabled):hover {
	background: var(--color-dark-04);
}

div.select-input > input {
	display: flex;

	border: 0;
	background: transparent;
	color: var(--color-dark);

	outline: 0 !important;

	padding: 0;

	width: 100%;
}

/* table */

div.table-container {
	width: 100%;
}

div.table-container > table {
	width: 100%;
	height: 100%;

	border-spacing: 0;
}

div.table-container > table > thead > tr > td {
	padding: 0 1rem 0.75rem 1rem;

	font-weight: 600;
	font-size: 0.85rem;
}

div.table-container > table > tbody > tr > td {
	padding: 0 0 0.75rem;
}

div.table-container > table > tbody > tr:last-child > td {
	padding: 0;
}

div.table-container > table > tbody > tr > td > span {
	border: 1px solid var(--color-dark-16);
	border-width: 1px 0;

	display: flex;
	align-items: center;

	width: 100%;
	height: 100%;

	padding: 0.75rem 0.75rem 0.75rem 1rem;
}

div.table-container > table > tbody > tr > td > span span.buttons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;

	width: 100%;
}

div.table-container > table > tbody > tr > td > span span.buttons.end {
	justify-content: flex-end;
}

div.table-container > table > tbody > tr > td > span span.buttons .btn {
	padding: 0.5rem 1rem;

	font-size: 0.85rem;

	border-radius: 0.5rem;
}

div.table-container > table > tbody > tr > td:first-child > span {
	border-radius: 0.75rem 0 0 0.75rem;

	border-width: 1px 0 1px 1px;
}

div.table-container > table > tbody > tr > td:last-child > span {
	border-radius: 0 0.75rem 0.75rem 0;

	border-width: 1px 1px 1px 0;
}

@media (max-width: 991px) {
	div.table-container {
		max-width: 100%;
		overflow-x: auto;
	}
	div.table-container > table {
		min-width: 50rem;
	}
	nav.pagination {
		flex-direction: column;
		gap: 1rem;
	}
}