:root {

	/* primary */

	--color-primary: #293BFF;
	--color-primary-hover: #1324E6;
	--color-primary-text: #161C62;
	--color-primary-bg: #E3E5FF;

	/* badges */

	--green-primary: #68BD6E;
	--green-hover: #4CB051;
	--green-text: #2C6A2E;
	--green-bg: #EDF8ED;

	--yellow-primary: #FDCD30;
	--yellow-hover: #FEC106;
	--yellow-text: #9B7703;
	--yellow-bg: #FFF9E7;

	--red-primary: #F6635A;
	--red-hover: #F54336;
	--red-text: #982724;
	--red-bg: #FEECEB;

	--blue-primary: #5361FC;
	--blue-hover: #3341FF;
	--blue-text: #20289D;
	--blue-bg: #EAECFF;

	--neutral-primary: #7B939D;
	--neutral-hover: #5F7D8C;
	--neutral-text: #3A4D56;
	--neutral-bg: #EEF2F3;

	--purple-primary: #8B5CF6;
	--purple-hover: #7C3AED;
	--purple-text: #4C1D95;
	--purple-bg: #F3EDFF;

	--orange-primary: #ff6a00;
	--orange-hover: #ff6a00;
	--orange-text: #ff6a00;
	--orange-bg: #ff6a00;

	/* sizes text */

	--text-size-h1: 19pt;
	--text-size-h2: 18pt;
	--text-size-h3: 16pt;
	--text-size-h4: 14pt;
	--text-size-h5: 13pt;

	--text-size-subtitle: 11pt;
	--text-size-caption: 10pt;
	--text-size-paragraph: 10pt;

	--text-color-1: #2C2C2C;
	--text-color-2: #4B4B4B;
	--text-color-3: #6E6E6E;

	--text-color-body: #3A4D56;
	--text-color-muted: #7B939D;
	--text-color-secondary: #5F7D8C;
	--text-color-placeholder: #8E8E8E;
	--text-color-disabled: #B3B3B3;

	--color-border: #FAFBFC;
	--color-border-hover: #D1D0D6;


	/* background */

	--background: #fcfcfc;
	--background-white: #FFFFFF;
	--background-disabled: #B3B4B9;
	--background-body: #F9FAFB;

	--shadow: 0px 0px 150px #343a4010;

	/* radius */

	--radius-inside: 30px;
	--radius-outside: 46px;

	/* nav and header */

	--nav-width: 260px;
	--header-height: 130px;
	--main-padding: 40px;
	
}

/* background */

body {
	background: var(--background);
	font-family: Poppins;
}

/* main auth */

main#auth-main section#content {
	position: fixed;
	height: calc(100vh - var(--header-height));
	width: 100%;
	top: var(--header-height);
	padding: 0 var(--main-padding) 50px var(--main-padding);
	overflow-y: auto !important;
	overflow-x: visible !important;
}

/* backdrop and badges */

/* == badges */

#badges {
	transition: all 500ms ease !important;
	padding: 33px 40px 0 40px;
	position: fixed;
	z-index: 99999;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
}

#badges:empty {
	display: none !important;
}

/* == toast */

.inToast {
	position: relative;
	top: 0px;
	background: #343a40;
	padding: 0 20px;
	height: 50px;
	transition: all 500ms ease;
	box-shadow: 0px 15px 20px -5px #00000030;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
	color: #ffffff;
	z-index: 1000000;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: .8rem;

	transform-origin: center;
}

.inToast[data-color="green"] {
	background: var(--green-bg);
	color: var(--green-text);
	box-shadow: 0px 15px 20px -5px #00000015;	
}

.inToast[data-color="red"] {
	background: var(--red-bg);
	color: var(--red-text);
}

.inToast[data-color="black"] {
	background: #343a40;
	color: #ffffff;
}

.inToast[data-color="yellow"] {
	background: var(--yellow-bg);
	color: var(--yellow-text);
}

.inToast.open {
	animation: start-toast 500ms ease forwards;
}

.inToast.closing {
	transition: all 500ms ease;
	scale: .8;
	top: -100px;
}

@keyframes start-toast {
	0% {
		scale: .5;
		top: -100px;
	}
	100% {
		scale: 1;
		top: 0px;
    }
}

/* == backdrop */

#backdrop {
	position: relative;
	top: 0px;
	background: #343a40;
	padding: 0 20px;
	height: 50px;
	transition: all 500ms ease;
	box-shadow: 0px 15px 20px -5px #00000030;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
	color: #ffffff;
	z-index: 1000000;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: .8rem;

	transform-origin: center;
}

#backdrop.open {
	animation: start-backdrop 500ms ease forwards;
}

#backdrop.closing {
	transition: all 500ms ease;
	scale: .8;
	top: -100px;
}

@keyframes start-backdrop {
	0% {
		scale: .5;
		top: -100px;
	}
	100% {
		scale: 1;
		top: 0px;
    }
}

#backdrop::before {
	content: ''; 
	width: 20px;
	height: 20px;
	border: 3px solid #ffffff;
	border-top-color: transparent;
	border-radius: 20px;
	animation: rotation 2s infinite linear !important;
}

#backdrop::after {
	content: 'Carregando...'; 
}

/* == timer */

#timer {
	transition: all 500ms ease !important;
	position: relative;
	top: 0px;
	background: #343a40;
	padding: 0 20px;
	height: 50px;
	transition: all 500ms ease;
	box-shadow: 0px 15px 20px -5px #00000030;
	border-radius: 1.5rem;
	font-size: 10pt;
	font-weight: 500;
	z-index: 1000000;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .8rem;
	transform-origin: center;
}

#timer.open {
	animation: start-timer 500ms ease forwards;
}

#timer.closing {
	transition: all 500ms ease;
	scale: .8;
	top: -100px;
}

@keyframes start-timer {
	0% {
		scale: .5;
		top: -100px;
	}
	100% {
		scale: 1;
		top: 0px;
    }
}

#timer::before {
	content: ''; 
	width: 15px;
	height: 15px;
	border: 3px solid #ffffff;
	border-top-color: transparent;
	border-radius: 15px;
	animation: rotation 2s infinite linear !important;
}

/* article.module */

section.title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 8px;
}

section.title h1 {
	font-size: var(--text-size-h4);
	font-weight: 400 !important;
	color: var(--text-color-1);
	letter-spacing: -.3px;
	margin-bottom: 0px;
}

section.title p {
	font-size: var(--text-size-subtitle);
	font-weight: 300 !important;
	color: var(--text-color-3);
	margin-bottom: 0px;
}

/* article.module */

article.module {
	padding: 1rem;
	background: #ffffff;
	border-radius: var(--radius-outside);
	box-shadow: var(--shadow);
}

article.module section.title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	font-size: var(--text-size-h5) !important;
	gap: 5px;
}

article.module section.title h1 {
	font-size: .9em;
	color: var(--text-color-1) !important;
	margin-bottom: 0px !important;
}

article.module section.title h2 {
	font-size: var(--text-size-h2);
	color: var(--text-color-1) !important;
	margin-bottom: 0px !important;
}

article.module section.title p {
	font-size: .8em;
	color: var(--text-color-2) !important;
	font-weight: 300 !important;
	margin-bottom: 0px !important;
}

/* article.top-module */

article.top-module {
    background: #ffffff;
    border-radius: var(--radius-inside);
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px #00000005;
    border: 1px solid var(--color-border);
    gap: .5rem;
    transition: all 400ms ease;
}

article.top-module .title {
    font-size: 10pt;
    font-weight: 500;
    color: var(--text-color-3);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

article.top-module .value {
    font-size: 20pt;
    font-weight: 600;
    color: var(--text-color-1);
    line-height: 1.2;
    margin: 0;
}

/* shimmer */

.shimmer {
	position: relative;
	color: transparent !important;
	background: transparent !important;
	border-radius: var(--s-radius, .5rem);
}

.shimmer * {
	color: transparent !important;
	background: transparent !important;
	border-color: transparent !important;
	cursor: default !important;
	opacity: 0 !important;
}

.shimmer::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		120deg,
		rgba(var(--s-color, 220),var(--s-color, 220),var(--s-color, 220),.25) 25%,
		rgba(var(--s-color, 220),var(--s-color, 220),var(--s-color, 220),.45) 37%,
		rgba(var(--s-color, 220),var(--s-color, 220),var(--s-color, 220),.25) 63%
	);
	background-size: 400% 100%;
	animation: shimmer 1.2s ease infinite;
	pointer-events: none;
}

/* empty */

.empty {
	padding: 35px 0;
	border-radius: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.empty img {
	width: 200px;
	margin-bottom: 24px;
}

.empty h1 {
	font-size: 16pt;
	margin-bottom: 0px;
	text-align: center;
}

.empty p {
	font-size: 10pt;
	font-weight: 400;
	color: var(--text-color-3);
	margin-bottom: 16px;
	text-align: center;
}

.empty button {
	padding: 0 20px;
	height: 40px;
	border-radius: 24px;
	background: var(--color-primary);
	font-size: 10pt;
	color: #ffffff;
	font-weight: 400;
	border: none;
}

/* animations */

@keyframes rotation {
	0% {
        transform: rotate(0deg);
	}
	100% {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0 0;
	}
}

@keyframes fade-in-up {
	0% {
		transform: translateY(50px) scale(0.8);
	}
	100% {
		transform: translateY(0px) scale(1);
	}
}

@keyframes fade-in-down {
	0% {
		transform: translateY(20px) scale(0.99);
	}
	100% {
		transform: translateY(0px) scale(1);
	}
}

@keyframes fade-in-zoom {
	0% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}

.fade-out-down { animation: fade-out-down 400ms ease !important; opacity: 0; }

@keyframes fade-out-down {
	0% {
		transform: translateY(0px) scale(1);
	}
	100% {
		transform: translateY(20px) scale(0.90);
		display: none;
	}
}