@font-face {
	font-family: 'poppins', sans-serif;
	font-weight: 500;
	font-style: normal;
	src: url('path/to/poppins-medium.woff2') format('woff2'),
		url('path/to/poppins-medium.woff') format('woff');
}

* {
	font-family: 'poppins', sans-serif;
	a {
		text-decoration: none;
	}
	box-sizing: border-box;
}

body {
	background: #f0f4f8;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 100%;
	overflow-x: hidden;
	font-family: sans-serif;
}

/* SIDEBAR */
.sidebar {
	position: fixed;
	top: 0;
	left: -250px;
	height: 100%;
	width: 250px;
	background-color: #fff;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
	padding-top: 65px;
	transition: left 0.3s ease;
	z-index: 5;
}

.sidebar.active {
	left: 0;
}

.sidebar .item {
	padding: 1rem;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #333;
}

.sidebar .item:hover {
	background-color: #f1f1f1;
	cursor: pointer;
}

@media (min-width: 1380px) {
	/* NAVBAR */

	#navbar {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 65px;
		position: relative;
		z-index: 2;
	}

	#navbar-left {
		display: flex;
		align-items: center;
	}

	#navbar-right {
		display: flex;
		align-items: center;
		margin-right: 100px;
	}

	#boxContaCadastrada,
	#boxConfigEtiq {
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 10px;
	}

	#boxContaCadastrada:hover,
	#boxConfigEtiq:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#boxContaCadastrada {
		width: 245px;
	}

	#contaCadastrada {
		color: #4e6074;
		font-size: 18px;
		margin: 0;
	}

	#nav-logo {
		width: 100px;
		height: 40px;
		margin-left: 100px;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}

	/* SIDEBAR */
	.sidebar {
		position: fixed;
		top: 0;
		left: -250px;
		height: 100%;
		width: 250px;
		background-color: #fff;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
		padding-top: 65px;
		transition: left 0.3s ease;
		z-index: 5;
	}
	.sidebar.active {
		left: 0;
	}

	/* Botão de menu (só aparece no mobile) */
	.menu-toggle {
		display: none;
		background: none;
		border: none;
		font-size: 2rem;
		color: #333;
		margin-left: 20px;
	}

	/* CONTEUDO */

	#principal {
		padding: 3% 16% 3% 16%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}

	/* SEÇÃO 1: UPDATE E ALERTAS */

	#container1 {
		width: 100%;
		height: 40vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* PAINEL UPDATE */

	#painelUpdate {
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 30%;
		height: 100%;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#titleUpdate {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.updIcon {
		color: #4e6074;
		width: 50px;
		height: 50px;
	}

	.updTitle {
		margin: 0;
		font-size: 34px;
		line-height: 30px;
		color: #344253;
	}

	.updText {
		display: flex;
		width: 60%;
		height: 30%;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		color: #344253;
	}

	.updInfo {
		font-size: 30px;
		color: #4e6074;
		margin: 0;
	}

	.updInfoTime {
		font-size: 18px;
		color: #4e6074;
		margin: 0;
	}

	.horizontalBar {
		border-top: 2px solid #586b80dc;
		margin: 5px 0;
		width: 90%;
	}

	.updBoxButton {
		height: 16%;
	}

	#updButton {
		height: 60px;
		width: 200px;
		border-radius: 28px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 20px;
	}

	.ultima-atualização {
		display: flex;
    	align-items: center;
 		justify-content: center;
    	text-align: center;
	}

	.quantidade{
		display: flex;
    	align-items: center;
 		justify-content: center;
    	text-align: center;
		font-size: 18px;
	}

	.hora{
		display: flex;
    	align-items: center;
 		justify-content: center;
    	text-align: center;
		font-size: 14px;
	}

	/* PAINEL ALERTAS */

	#painel-alertas {
		background: #fff;
		width: 66%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerAlertTitle {
		width: 90%;
		height: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#containerTitle {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}

	#alertIcon {
		width: 40px;
		height: 40px;
	}

	.alertInfoText {
		color: #4e6074;
		font-size: 15px;
		margin: 0;
		line-height: 110%;
	}

	#box-title {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	.alertIcon {
		width: 24px;
		height: 24px;
	}

	#alertTitle {
		color: #344253;
		font-size: 40px;
		margin: 0;
	}

	#alertButton {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		height: 50px;
		width: 190px;
		border-radius: 25px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 20px;
	}

	#containerAlertInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 80%;
	}

	#alert1 {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: space-evenly;
	}

	.alertInfo {
		height: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #d4f3e7e7;
		border-left: 5px solid #4bc991;
		border-radius: 10px;
		padding: 5%;
	}

	.alertInfoTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 8px;
	}

	.alertSubTitle {
		color: #344253;
		font-size: 24px;
		margin: 0;
	}

	.verticalBar {
		height: 90%;
		margin: 0 20px;
		width: 2px;
		background-color: #586b80dc;
	}

	#alert2 {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: space-evenly;
	}

	.alertInfoContent {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	/* SEÇÃO 2: GRAFICOS */

	#container2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	#painel-graficos {
		background: #fff;
		border-radius: 20px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		align-items: center;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#grafBox {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}

	#containerGrafSelect {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	#containerGrafInfo {
		position: relative;
		width: 70%;
		height: 45vh;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
	}

	.grafico1 {
		z-index: 60;
		display: block;
	}

	.grafico2 {
		z-index: 50;
	}

	.grafico3 {
		z-index: 40;
	}

	.grafico4 {
		z-index: 30;
	}

	.grafico5 {
		z-index: 20;
	}

	.grafico6 {
		z-index: 10;
	}

	#grafBoxTitle {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}

	.grafIcon {
		width: 35px;
		height: 35px;
	}

	#grafTitle {
		color: #344253;
		font-size: 40px;
		margin: 0;
	}

	#grafButtons {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.grafButton {
		height: 45px;
		width: 100%;
		border-radius: 10px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: 600;
		font-size: 24px;
	}

	#btnGraf4:disabled {
		background: linear-gradient(to right, #a5a8a7, #6d6e6e);
	}

    #btnGraf5:disabled {
		background: linear-gradient(to right, #a5a8a7, #6d6e6e);
	}

    #btnGraf6:disabled {
		background: linear-gradient(to right, #a5a8a7, #6d6e6e);
	}

	/* SEÇÃO 3: HISTORICO, ETIQUETA E PLANO PREMIUM */

	#container3 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50vh;
	}

	#containerLeft {
		width: 50%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#containerRight {
		width: 48%;
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	/* PAINEL RELATORIOS */

	#painel-relatorio {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerRelatContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerRelatTitle {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#containerRelatImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#relatTitle {
		color: #344253;
		font-size: 45px;
		margin: 0;
		line-height: 100%;
	}

	#containerRelatText {
		width: 100%;
		line-height: 170%;
	}

	#relatText {
		width: 100%;
		font-size: 21px;
		margin: 0;
		color: #4e6074;
	}

	#relatIcon {
		width: 35px;
		height: 35px;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatImg {
		width: 100px;
		height: 120px;
	}

	/* PAINEL ETIQUETAS */

	#painel-etiquetas {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerEtiqContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerEtiqTitle {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#containerEtiqImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#etiqTitle {
		color: #344253;
		font-size: 45px;
		margin: 0;
		line-height: 100%;
	}

	#containerEtiqText {
		width: 100%;
		line-height: 170%;
	}

	#etiqText {
		width: 100%;
		font-size: 21px;
		margin: 0;
		color: #4e6074;
	}

	#etiqIcon {
		width: 35px;
		height: 35px;
	}

	#etiqImg {
		width: 140px;
		height: 140px;
	}

	/* PAINEL PUBLICIDADE PREMIUM */

	#painel-publicidade {
		border-radius: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background: linear-gradient(#1f8170, #8bd8ca);
		width: 95%;
		height: 45vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerPubliTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
		font-size: 30px;
	}

	#publiTitle {
		width: 81%;
		height: 90%;
		color: #282c31;
		font-size: 150%;
		line-height: 100%;
		margin: 0;
	}

	.destaque {
		color: #f5f5f5;
	}

	#containerPubliButton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 15%;
		width: 65%;
	}

	#publiButton {
		width: 255px;
		height: 60px;
		border: 2px solid #f5f5f5;
		border-radius: 25px;
		background-color: transparent;
		color: #f5f5f5;
		font-size: 30px;
		cursor: pointer;
	}

	/* SEÇÃO 4: FOOTER */

	#footer-bar {
		background-color: #489d73;
		color: azure;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	/* MODAL LOGOUT 1380 */

	#ModalConfig {
		width: 100px;
		height: 50px;
		background-color: #fff;
		display: none;
		position: absolute;
		z-index: 1000;
		right: 20px;
		top: 65px;
		border-radius: 5px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		align-items: center;
		justify-content: center;
	}

	#boxLogout {
		padding: 5px;
		width: 90%;
		display: flex;
		position: absolute;
		right: 5px;
		top: 5px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		p {
			margin: 0;
		}
	}

	#iconLogOut {
		width: 22px;
		height: 22px;
	}

	#textLogout {
		color: #4e6074;
		font-size: 18px;
	}
}

@media (min-width: 669px) and (max-width: 1379px) {
	/* NAVBAR */

	#navbar {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 65px;
	}

	#navbar-left {
		display: flex;
		align-items: center;
	}

	#navbar-right {
		display: flex;
		align-items: center;
		margin: 0 100px 0 0;
	}

	.menu-toggle {
		display: none;
	}

	#boxContaCadastrada {
		width: 20px;
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxContaCadastrada:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#contaCadastrada {
		color: #4e6074;
		-webkit-text-stroke: #344253;
		font-size: 18px;
		margin: 0;
	}

	#boxConfigEtiq {
		height: 65px;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxConfigEtiq:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#nav-logo {
		width: 100px;
		height: 40px;
		margin: 0 0 0 100px;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}

	/* CONTEUDO */

	#principal {
		padding: 3% 10% 3% 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;
	}

	/* SEÇÃO 1: UPDATE E ALERTAS */

	#container1 {
		width: 100%;
		height: 40vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px; /* Adiciona espaçamento entre os painéis */
    	flex-wrap: wrap; /* Permite quebra de linha em telas menores */
	}

	/* PAINEL UPDATE */

	#painelUpdate {
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 32%;
		min-width: 300px;
		height: 100%;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#titleUpdate {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.updIcon {
		color: #4e6074;
		width: 50px;
		height: 50px;
	}

	.updTitle {
		margin: 0;
		font-size: 220%;
		line-height: 30px;
		color: #344253;
	}

	.updText {
		display: flex;
		width: 90%;
		height: 30%;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		color: #344253;
	}

	.updInfo {
		font-size: 30px;
		color: #4e6074;
		margin: 0;
	}

	.updInfoTime {
		font-size: 18px;
		color: #4e6074;
		margin: 0;
	}

	.horizontalBar {
		border-top: 2px solid #586b80dc;
		margin: 5px 0;
		width: 70%;
	}

	.updBoxButton {
		height: 16%;
	}

	#updButton {
		height: 60px;
		width: 200px;
		border-radius: 28px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 20px;
	}

	/* PAINEL ALERTAS */

	#painel-alertas {
		background: #fff;
		width: 66%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerAlertTitle {
		width: 90%;
		height: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#containerTitle {
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}

	#alertIcon {
		width: 40px;
		height: 40px;
	}

	.alertInfoText {
		color: #4e6074;
		font-size: 100%;
		line-height: 90%;
		margin: 0;
	}

	#box-title {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	.alertIcon {
		width: 24px;
		height: 24px;
	}

	#alertTitle {
		color: #344253;
		font-size: 220%;
		margin: 0;
	}

	#alertButton {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		height: 50px;
		width: 190px;
		border-radius: 25px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 20px;
	}

	#containerAlertInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 80%;
	}

	#alert1 {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: space-evenly;
	}

	.alertInfo {
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #d4f3e7e7;
		border-left: 5px solid #4bc991;
		border-radius: 10px;
		padding: 5%;
	}

	.alertInfoTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 8px;
	}

	.alertSubTitle {
		color: #344253;
		font-size: 1.3em;
		line-height: 85%;
		margin: 0;
	}

	.verticalBar {
		height: 90%;
		margin: 0 20px;
		width: 2px;
		background-color: #586b80dc;
	}

	#alert2 {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: space-evenly;
	}

	.alertInfoContent {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	/* SEÇÃO 2: GRAFICOS */

	#container2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	#painel-graficos {
		background: #fff;
		border-radius: 20px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		align-items: center;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#grafBox {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}

	#containerGrafSelect {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.grafContent {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 72%;
		height: 90%;
		background-color: #d4f3e7e7;
		border-radius: 20px;
	}

	#grafBoxTitle {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}

	.grafIcon {
		width: 35px;
		height: 35px;
	}

	#grafTitle {
		color: #344253;
		font-size: 220%;
		margin: 0;
	}

	#grafButtons {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.grafButton {
		height: 45px;
		width: 100%;
		border-radius: 10px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: 600;
		font-size: 24px;
	}

	/* SEÇÃO 3: RELATORIO, ETIQUETA E PLANO PREMIUM */

	#container3 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 45vh;
	}

	#containerLeft {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#containerRight {
		width: 48%;
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	/* PAINEL RELATORIOS */

	#painel-relatorio {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerRelatContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerRelatTitle {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#containerRelatImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#relatTitle {
		color: #344253;
		font-size: 220%;
		margin: 0;
		line-height: 100%;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatText {
		width: 100%;
		font-size: 1.3em;
		margin: 0;
		color: #4e6074;
	}

	#relatIcon {
		width: 35px;
		height: 35px;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatImg {
		width: 6em;
		height: 6em;
	}

	/* PAINEL ETIQUETAS */

	#painel-etiquetas {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerEtiqContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerEtiqTitle {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#containerEtiqImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#etiqTitle {
		color: #344253;
		font-size: 220%;
		margin: 0;
		line-height: 100%;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqText {
		width: 100%;
		font-size: 1.3em;
		margin: 0;
		color: #4e6074;
	}

	#etiqIcon {
		width: 35px;
		height: 35px;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqImg {
		width: 7em;
		height: 7em;
	}

	/* PAINEL PUBLICIDADE PREMIUM */

	#painel-publicidade {
		border-radius: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background: linear-gradient(#1f8170, #8bd8ca);
		width: 95%;
		height: 45vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerPubliTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
		font-size: 30px;
	}

	#publiTitle {
		width: 81%;
		color: #282c31;
		font-size: 135%;
		line-height: 85%;
		margin: 0;
	}

	.destaque {
		color: #f5f5f5;
	}

	#containerPubliButton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20%;
	}

	#publiButton {
		width: 255px;
		height: 60px;
		border: 2px solid #f5f5f5;
		border-radius: 25px;
		background-color: transparent;
		color: #f5f5f5;
		font-size: 30px;
		cursor: pointer;
	}

	/* SEÇÃO 4: FOOTER */

	#footer-bar {
		background-color: #489d73;
		color: azure;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
}

@media (min-width: 361px) and (max-width: 668px) {
	/* NAVBAR */

	#navbar {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 65px;
	}

	.menu-toggle {
		display: none;
	}

	#navbar-left {
		display: flex;
		align-items: center;
	}

	#navbar-right {
		display: flex;
		align-items: center;
		margin: 0 100px 0 0;
	}

	#boxContaCadastrada {
		width: 200px;
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxContaCadastrada:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#contaCadastrada {
		color: #4e6074;
		-webkit-text-stroke: #344253;
		font-size: 18px;
		margin: 0;
	}

	#boxConfigEtiq {
		height: 65px;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxConfigEtiq:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#nav-logo {
		width: 100px;
		height: 40px;
		margin: 0 0 0 100px;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}

	/* CONTEUDO */

	#principal {
		padding: 3% 5% 3% 5%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
	}

	/* SEÇÃO 1: UPDATE E ALERTAS */

	#container1 {
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 15px;
	}

	/* PAINEL UPDATE */

	#painelUpdate {
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 80%;
		height: 50%;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#titleUpdate {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.updIcon {
		color: #4e6074;
		width: 50px;
		height: 50px;
	}

	.updTitle {
		margin: 0;
		font-size: 34px;
		line-height: 30px;
		color: #344253;
	}

	.updText {
		display: flex;
		width: 60%;
		height: 30%;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		color: #344253;
	}

	.updInfo {
		font-size: 30px;
		color: #4e6074;
		margin: 0;
	}

	.updInfoTime {
		font-size: 18px;
		color: #4e6074;
		margin: 0;
	}

	.horizontalBar {
		border-top: 2px solid #586b80dc;
		margin: 5px 0;
		width: 90%;
	}

	.updBoxButton {
		height: 16%;
	}

	#updButton {
		height: 50px;
		width: 190px;
		border-radius: 28px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 18px;
	}

	/* PAINEL ALERTAS */

	#painel-alertas {
		background: #fff;
		width: 80%;
		height: 65%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerAlertTitle {
		width: 90%;
		height: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#containerTitle {
		width: 42%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#alertIcon {
		width: 40px;
		height: 40px;
	}

	.alertInfoText {
		color: #4e6074;
		font-size: 17px;
		margin: 0;
		line-height: 90%;
	}

	#box-title {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	.alertIcon {
		width: 24px;
		height: 24px;
	}

	#alertTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
	}

	#alertButton {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		height: 42px;
		width: 130px;
		border-radius: 25px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 16px;
	}

	#containerAlertInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 70%;
	}

	#alert1 {
		width: 95%;
		height: 55%;
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: space-between;
	}

	.alertInfo {
		height: 55%;
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #d4f3e7e7;
		border-left: 5px solid #4bc991;
		border-radius: 10px;
		padding: 2%;
	}

	.alertInfoTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 8px;
	}

	.alertSubTitle {
		color: #344253;
		font-size: 20px;
		margin: 0;
		line-height: 90%;
	}

	#alert2 {
		width: 95%;
		height: 60%;
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: space-between;
	}

	.alertInfoContent {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	/* SEÇÃO 2: GRAFICOS */

	#container2 {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	#painel-graficos {
		background: #fff;
		border-radius: 20px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		align-items: center;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#grafBox {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	#containerGrafSelect {
		width: 100%;
		height: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.grafContent {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 95%;
		height: 50%;
		background-color: #d4f3e7e7;
		border-radius: 20px;
	}

	#grafBoxTitle {
		width: 90%;
		display: flex;
		justify-content: center;
		gap: 20px;
		align-items: center;
	}

	.grafIcon {
		width: 35px;
		height: 35px;
	}

	#grafTitle {
		color: #344253;
		font-size: 40px;
		margin: 0;
	}

	#grafButtons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 90%;
		flex-wrap: wrap;
	}

	.grafButton {
		height: 40px;
		width: 100px;
		border-radius: 10px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 15px;
	}

	/* SEÇÃO 3: RELATORIO, ETIQUETA E PLANO PREMIUM */

	#container3 {
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 80vh;
	}

	#containerLeft {
		width: 100%;
		height: 53%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#containerRight {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	/* PAINEL RELATORIOS */

	#painel-relatorio {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerRelatContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerRelatTitle {
		width: 80%;
		display: flex;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	#containerRelatImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#relatTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
		line-height: 100%;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatText {
		width: 100%;
		font-size: 20px;
		margin: 0;
		color: #4e6074;
	}

	#relatIcon {
		width: 30px;
		height: 30px;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatImg {
		width: 80px;
		height: 100px;
	}

	/* PAINEL ETIQUETAS */

	#painel-etiquetas {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerEtiqContent {
		width: 55%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerEtiqTitle {
		width: 80%;
		display: flex;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	#containerEtiqImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#etiqTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqText {
		width: 100%;
		font-size: 20px;
		margin: 0;
		color: #4e6074;
	}

	#etiqIcon {
		width: 30px;
		height: 30px;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqImg {
		width: 110px;
		height: 110px;
	}

	/* PAINEL PUBLICIDADE PREMIUM */

	#painel-publicidade {
		border-radius: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background: linear-gradient(#1f8170, #8bd8ca);
		width: 100%;
		height: 35vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerPubliTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
		font-size: 30px;
	}

	#publiTitle {
		width: 81%;
		color: #282c31;
		font-size: 120%;
		line-height: 90%;
		margin: 0;
	}

	.destaque {
		color: #f5f5f5;
	}

	#containerPubliButton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20%;
	}

	#publiButton {
		width: 240px;
		height: 50px;
		border: 2px solid #f5f5f5;
		border-radius: 25px;
		background-color: transparent;
		color: #f5f5f5;
		font-size: 25px;
		cursor: pointer;
	}

	/* SEÇÃO 4: FOOTER */

	#footer-bar {
		background-color: #489d73;
		color: azure;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
}

@media (max-width: 360px) {
	/* NAVBAR */

	#navbar {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 65px;
	}

	#navbar-left {
		display: flex;
		align-items: center;
	}

	#navbar-right {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.menu-toggle {
		background: none;
		border: none;
		font-size: 2rem;
		color: #333;
		margin-left: 20px;
	}

	#boxContaCadastrada {
		width: 200px;
		height: 65px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxContaCadastrada:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#contaCadastrada {
		color: #4e6074;
		-webkit-text-stroke: #344253;
		font-size: 18px;
		margin: 0;
	}

	#boxConfigEtiq {
		height: 65px;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#boxConfigEtiq:hover {
		background-color: #eaecf0;
		cursor: pointer;
	}

	#nav-logo {
		width: 100px;
		height: 40px;
		margin: 0 0 0 100px;
	}

	.nav-icon {
		width: 30px;
		height: 30px;
	}

	/* CONTEUDO */

	#principal {
		padding: 3% 4% 3% 4%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 30px;
	}

	/* SEÇÃO 1: UPDATE E ALERTAS */

	#container1 {
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 15px;
	}

	/* PAINEL UPDATE */

	#painelUpdate {
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		width: 80%;
		height: 50%;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#titleUpdate {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	.updIcon {
		color: #4e6074;
		width: 50px;
		height: 50px;
	}

	.updTitle {
		margin: 0;
		font-size: 34px;
		line-height: 30px;
		color: #344253;
	}

	.updText {
		display: flex;
		width: 60%;
		height: 30%;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		color: #344253;
	}

	.updInfo {
		font-size: 30px;
		color: #4e6074;
		margin: 0;
	}

	.updInfoTime {
		font-size: 18px;
		color: #4e6074;
		margin: 0;
	}

	.horizontalBar {
		border-top: 2px solid #586b80dc;
		margin: 5px 0;
		width: 90%;
	}

	.updBoxButton {
		height: 16%;
	}

	#updButton {
		height: 50px;
		width: 190px;
		border-radius: 28px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 18px;
	}

	/* PAINEL ALERTAS */

	#painel-alertas {
		background: #fff;
		width: 80%;
		height: 65%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerAlertTitle {
		width: 90%;
		height: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#containerTitle {
		width: 42%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#alertIcon {
		width: 40px;
		height: 40px;
	}

	.alertInfoText {
		color: #4e6074;
		font-size: 17px;
		margin: 0;
		line-height: 90%;
	}

	#box-title {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	.alertIcon {
		width: 24px;
		height: 24px;
	}

	#alertTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
	}

	#alertButton {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		height: 42px;
		width: 130px;
		border-radius: 25px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 16px;
	}

	#containerAlertInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 70%;
	}

	#alert1 {
		width: 95%;
		height: 55%;
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: space-between;
	}

	.alertInfo {
		height: 55%;
		width: 40%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #d4f3e7e7;
		border-left: 5px solid #4bc991;
		border-radius: 10px;
		padding: 2%;
	}

	.alertInfoTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 8px;
	}

	.alertSubTitle {
		color: #344253;
		font-size: 20px;
		margin: 0;
		line-height: 90%;
	}

	#alert2 {
		width: 95%;
		height: 60%;
		display: flex;
		flex-direction: row;
		align-items: start;
		justify-content: space-between;
	}

	.alertInfoContent {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}

	/* SEÇÃO 2: GRAFICOS */

	#container2 {
		width: 80%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60vh;
	}

	#painel-graficos {
		background: #fff;
		border-radius: 20px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 100%;
		align-items: center;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#grafBox {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	#containerGrafSelect {
		width: 100%;
		height: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.grafContent {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 95%;
		height: 50%;
		background-color: #d4f3e7e7;
		border-radius: 20px;
	}

	#grafBoxTitle {
		width: 90%;
		display: flex;
		justify-content: center;
		gap: 20px;
		align-items: center;
	}

	.grafIcon {
		width: 35px;
		height: 35px;
	}

	#grafTitle {
		color: #344253;
		font-size: 40px;
		margin: 0;
	}

	#grafButtons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width: 90%;
		flex-wrap: wrap;
	}

	.grafButton {
		height: 40px;
		width: 100px;
		border-radius: 10px;
		border: none;
		color: #f5f5f5;
		background: linear-gradient(to right, #68c899, #489d73);
		cursor: pointer;
		font-weight: bold;
		font-size: 15px;
	}

	/* SEÇÃO 3: RELATORIO, ETIQUETA E PLANO PREMIUM */

	#container3 {
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 80vh;
	}

	#containerLeft {
		width: 100%;
		height: 53%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#containerRight {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	/* PAINEL RELATORIOS */

	#painel-relatorio {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerRelatContent {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerRelatTitle {
		width: 80%;
		display: flex;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	#containerRelatImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#relatTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
		line-height: 100%;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatText {
		width: 100%;
		font-size: 20px;
		margin: 0;
		color: #4e6074;
	}

	#relatIcon {
		width: 30px;
		height: 30px;
	}

	#containerRelatText {
		width: 100%;
	}

	#relatImg {
		width: 80px;
		height: 100px;
	}

	/* PAINEL ETIQUETAS */

	#painel-etiquetas {
		background: #fff;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		height: 20vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerEtiqContent {
		width: 55%;
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
	}

	#containerEtiqTitle {
		width: 80%;
		display: flex;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	#containerEtiqImg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	#etiqTitle {
		color: #344253;
		font-size: 35px;
		margin: 0;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqText {
		width: 100%;
		font-size: 20px;
		margin: 0;
		color: #4e6074;
	}

	#etiqIcon {
		width: 30px;
		height: 30px;
	}

	#containerEtiqText {
		width: 100%;
	}

	#etiqImg {
		width: 110px;
		height: 110px;
	}

	/* PAINEL PUBLICIDADE PREMIUM */

	#painel-publicidade {
		border-radius: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background: linear-gradient(#1f8170, #8bd8ca);
		width: 100%;
		height: 35vh;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	#containerPubliTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
		font-size: 30px;
	}

	#publiTitle {
		width: 81%;
		color: #282c31;
		font-size: 120%;
		line-height: 90%;
		margin: 0;
	}

	.destaque {
		color: #f5f5f5;
	}

	#containerPubliButton {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20%;
	}

	#publiButton {
		width: 240px;
		height: 50px;
		border: 2px solid #f5f5f5;
		border-radius: 25px;
		background-color: transparent;
		color: #f5f5f5;
		font-size: 25px;
		cursor: pointer;
	}

	/* SEÇÃO 4: FOOTER */

	#footer-bar {
		background-color: #489d73;
		color: azure;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
}
