body { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: #888; line-height: 30px; text-align: center; }

strong { font-weight: 500; }

h1, h2 { margin-top: 10px; font-size: 38px; font-weight: 100; color: #555; line-height: 50px; }
h3 { font-size: 22px; font-weight: 300; color: #555; line-height: 30px; }
h4 { font-size: 18px; font-weight: 300; color: #cccccc; line-height: 26px; }
h5 { color: #ab2234; }

img { max-width: 100%; }

.medium-paragraph { font-size: 18px; line-height: 34px; }

::-moz-selection { background: #f35b3f; color: #fff; text-shadow: none; }
::selection { background: #f35b3f; color: #fff; text-shadow: none; }


/***** Wrapper *****/

.wrapper { display: block; }


/***** Sidebar *****/

.sidebar {
	width: 360px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: -365px;
	z-index: 999;
	background: #333;
	color: #fff;
	transition: all .3s; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.5);
	text-align: left;
}

.sidebar.active { left: 0; }

.dismiss {
	width: 35px;
	height: 35px;
	position: absolute;
	top: 10px;
	right: 10px;
	transition: all .3s;
	background: #444;
	border-radius: 4px;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
}

.dismiss:hover, .dismiss:focus { background: #555; color: #fff; }

.sidebar .logo { padding: 40px 20px; border-bottom: 1px solid #444; transition: all .3s; }

.sidebar .logo a {
	display: inline-block;
	width: 300px;
	height: 168px;
	background-size: 300px 168px !important;
	background: url("../img/logocmcj.png") left top no-repeat;
	border: 0;
	text-indent: -999999px;
}

.sidebar ul.menu-elements { padding: 10px 0; border-bottom: 1px solid #444; transition: all .3s; }

.sidebar ul li a {
	display: block; padding: 10px 20px;
	text-decoration: none;
	border: 0; color: #fff;
}
.sidebar ul li a:hover,
.sidebar ul li a:focus,
.sidebar ul li.active > a:hover,
.sidebar ul li.active > a:focus {
	outline: 0;
	background: #555;
	color: #fff;
}

.sidebar ul li a i { margin-right: 5px; }

.sidebar ul li.active > a, a[aria-expanded="true"] {
	background: #444;
	color: #fff;
}

.sidebar ul ul a { background: #444; padding-left: 30px; font-size: 14px; }

.sidebar ul ul li.active > a { background: #555; }

.sidebar a[data-toggle="collapse"] {
    position: relative;
}

.sidebar .dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.sidebar .to-top { padding: 20px; text-align: center; }

.sidebar .dark-light-buttons { padding: 10px 20px 30px 20px; text-align: center; }

/* sidebar light */

.sidebar.light { background: #fff; color: #888; }

.sidebar.light .dismiss { background: #ddd; color: #888; }

.sidebar.light .dismiss:hover, 
.sidebar.light .dismiss:focus { background: #ccc; color: #888; }

.sidebar.light .logo { border-color: #eee; }
.sidebar.light .logo a { background-image: url(../img/logocmcj.png); }

.sidebar.light ul.menu-elements { border-color: #eee; }

.sidebar.light ul li a { color: #888; }

.sidebar.light ul li a:hover,
.sidebar.light ul li a:focus,
.sidebar.light ul li.active > a:hover,
.sidebar.light ul li.active > a:focus { background: #ccc; color: #888; }

.sidebar.light ul li.active > a, .sidebar.light a[aria-expanded="true"] {
	background: #ddd;
	color: #888;
}

.sidebar.light ul ul a { background: #ddd; }

.sidebar.light ul ul li.active > a { background: #ccc; }

.sidebar.light a.btn-customized-3 { background: #ddd; color: #888; }

.sidebar.light a.btn-customized-3:hover, 
.sidebar.light a.btn-customized-3:active, 
.sidebar.light a.btn-customized-3:focus, 
.sidebar.light a.btn-customized-3:active:focus, 
.sidebar.light a.btn-customized-3.active:focus,
.sidebar.light a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active,
.sidebar.light a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	background: #ccc; color: #888;
}

.sidebar.light a.btn-customized-4.btn-customized-dark { background: #555; }
.sidebar.light a.btn-customized-4.btn-customized-light { background: #eee; }

.sidebar.light a.btn-customized-4.btn-customized-dark:hover, 
.sidebar.light a.btn-customized-4.btn-customized-dark:active, 
.sidebar.light a.btn-customized-4.btn-customized-dark:focus, 
.sidebar.light a.btn-customized-4.btn-customized-dark:active:focus, 
.sidebar.light a.btn-customized-4.btn-customized-dark.active:focus,
.sidebar.light a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active,
.sidebar.light a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	background: #ccc; color: #fff;
}

.sidebar.light a.btn-customized-4.btn-customized-light:hover, 
.sidebar.light a.btn-customized-4.btn-customized-light:active, 
.sidebar.light a.btn-customized-4.btn-customized-light:focus, 
.sidebar.light a.btn-customized-4.btn-customized-light:active:focus, 
.sidebar.light a.btn-customized-4.btn-customized-light.active:focus,
.sidebar.light a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active,
.sidebar.light a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	background: #ccc; color: #fff;
}
.modecolor.light {
	background: #fff;
	color: black;
}
.modecolor.light h2 p i { color: #555555; }

/***** Dark overlay *****/

.overlay {
    display: none; position: fixed; width: 100vw; height: 100vh; 
    background: rgba(51, 51, 51, 0.7); z-index: 998; opacity: 0; transition: all .5s ease-in-out;
}

.overlay.active { display: block; opacity: 1; }


/***** Content *****/

.modecolor {
	width: 100%;
	transition: all 0.3s;
	background: #333333 ;
	color: #ffffff;
}
.modecolor h2 p { color: #ffffff; }
.modecolor i { color: #ab2234; }

.open-menu { z-index: 997; }

.open-menu.btn-customized,
.open-menu.btn-customized:hover, 
.open-menu.btn-customized:active, 
.open-menu.btn-customized:focus, 
.open-menu.btn-customized:active:focus, 
.open-menu.btn-customized.active:focus,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
.open-menu.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2);
}

.calendario { position: fixed; top: 20px; left: 280px; z-index: 996; box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2); }

.calendario.btn-customized,
.calendario.btn-customized:hover,
.calendario.btn-customized:active,
.calendario.btn-customized:focus,
.calendario.btn-customized:active:focus,
.calendario.btn-customized.active:focus,
.calendario.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
.calendario.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2);
}

/***** Buttons *****/

a.btn-customized {
	margin-left: 5px; margin-right: 5px; padding: .75rem 1.5rem; 
	background: #f35b3f; border: 0; border-radius: 4px; 
	font-size: 16px; font-weight: 300; color: #fff; box-shadow: none;
}

a.btn-customized:hover, 
a.btn-customized:active, 
a.btn-customized:focus, 
a.btn-customized:active:focus, 
a.btn-customized.active:focus,
a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #cd533d; background: rgba(243, 91, 63, 0.7); border: 0; color: #fff; box-shadow: none;
}

a.btn-customized-2 {
	margin-left: 5px; margin-right: 5px; padding: .75rem 1.5rem; 
	background: #fff; border: 0; border-radius: 4px; 
	font-size: 16px; font-weight: 300; color: #555; box-shadow: none;
}

a.btn-customized-2:hover, 
a.btn-customized-2:active, 
a.btn-customized-2:focus, 
a.btn-customized-2:active:focus, 
a.btn-customized-2.active:focus,
a.btn-customized-2.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-2.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #ccc; background: rgba(255, 255, 255, 0.5); border: 0; color: #555; box-shadow: none;
}

a.btn-customized-3 {
	display: inline-block; width: 100%; margin: 0; padding: .75rem 1.5rem; 
	background: #444; border: 0; border-radius: 4px; 
	font-size: 16px; font-weight: 300; color: #fff; box-shadow: none;
}

a.btn-customized-3:hover, 
a.btn-customized-3:active, 
a.btn-customized-3:focus, 
a.btn-customized-3:active:focus, 
a.btn-customized-3.active:focus,
a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-3.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #555; border: 0; color: #fff; box-shadow: none;
}

a.btn-customized i, 
a.btn-customized-2 i,
a.btn-customized-3 i { margin-right: 5px; }


a.btn-customized-4 {
	display: inline-block; width: 28px; height: 28px; margin: 0 3px; padding: 0; 
	background: #444; border: 0; border-radius: 50%; 
	font-size: 16px; font-weight: 300; color: #fff; box-shadow: none; text-indent: -999999px;
}

a.btn-customized-4.btn-customized-dark { background: #222; }
a.btn-customized-4.btn-customized-light { background: #fff; }

a.btn-customized-4.btn-customized-dark:hover, 
a.btn-customized-4.btn-customized-dark:active, 
a.btn-customized-4.btn-customized-dark:focus, 
a.btn-customized-4.btn-customized-dark:active:focus, 
a.btn-customized-4.btn-customized-dark.active:focus,
a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-4.btn-customized-dark.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #555; border: 0; color: #fff; box-shadow: none;
}

a.btn-customized-4.btn-customized-light:hover, 
a.btn-customized-4.btn-customized-light:active, 
a.btn-customized-4.btn-customized-light:focus, 
a.btn-customized-4.btn-customized-light:active:focus, 
a.btn-customized-4.btn-customized-light.active:focus,
a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active,
a.btn-customized-4.btn-customized-light.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #555; border: 0; color: #fff; box-shadow: none;
}


/***** General style, all sections *****/

.section-container { margin: 0 auto; padding-bottom: 80px; }

.section-container-gray-bg { background: #f8f8f8; }

.section-container-image-bg, 
.section-container-image-bg h2, 
.section-container-image-bg h3 { color: #fff; }

.section-container-image-bg .divider-1 span { border-color: #fff; border-color: rgba(255, 255, 255, 0.8); }

.section-description { margin-top: 20px; padding-bottom: 10px; }

.section-description p { margin-top: 20px; padding: 0 120px; }
.section-container-image-bg .section-description p { opacity: 0.8; }

.section-bottom-button { padding-top: 20px; }


/***** Divider *****/

.divider-1 span { display: inline-block; width: 200px; border-bottom: 1px dotted #aaa; }


/***** Top content *****/

.top-content { width: 100%; padding: 60px 0 120px 0; }

.top-content h1 { padding-top: 60px; color: #fff; }
.top-content .description { margin: 30px 0 0 0; padding-bottom: 30px; }
.top-content .description p { color: #fff; color: rgba(255, 255, 255, 0.8); }
.top-content .description a { color: #fff; color: rgba(255, 255, 255, 0.8); border-color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.top-content .description a:hover,
.top-content .description a:focus { color: #fff; color: rgba(255, 255, 255, 0.8); }


/***** Section 1 *****/

.section-1-box { padding-top: 30px; text-align: left; }

.section-1-box .section-1-box-icon {
	width: 80px; height: 80px; margin: 0 auto;
	border: 1px solid #f35b3f;
    font-size: 40px; color: #f35b3f; line-height: 78px; text-align: center;
    border-radius: 50%;
}

.section-1-box h3 { margin-top: 0; padding: 0 0 10px 0; }


/***** Section 2 *****/

.section-2-box { margin-top: 30px; text-align: left; }
.section-2-box h3 { margin-top: 0; }
.section-2-box-text .medium-paragraph { margin-top: 20px; margin-bottom: 20px; }
.section-2-box img { border-radius: 6px; }


/***** Section 3 *****/

.section-3-box { margin-top: 30px; text-align: left; }

.section-3-box .section-3-box-icon {
	width: 60px; height: 60px; margin: 0 auto;
	background: #f35b3f;
    font-size: 28px; color: #fff; line-height: 60px; text-align: center;
    border-radius: 50%;
}

.section-3-box h3 { margin-top: 0; padding: 0 0 10px 0; }


/***** Section 5 *****/

.section-5-box { padding-top: 30px; text-align: left; }

.section-5-box-image { overflow: hidden; border-radius: 6px; }
.section-5-box-image img { transition: all .8s; }
.section-5-box-image:hover img { transform: scale(1.25); }

.section-5-box h3 { margin-top: 30px; }
.section-5-box h3 a { color: #555; border: 0; }
.section-5-box h3 a:hover, .section-5-box h3 a:focus { color: #f35b3f; }

.section-5-box h3 i { padding-left: 10px; color: #ccc; transition: all .3s; }
.section-5-box h3:hover i { padding-left: 15px; }

.section-5-box-date { padding-bottom: 10px; font-size: 14px; color: #aaa; text-transform: uppercase; }

.section-5-box-date i { padding-right: 5px; color: #ddd; }

.section-5-container .section-bottom-button { padding-top: 40px; }


/***** Section 6 *****/

.section-6-box { padding-top: 30px; text-align: left; }

.section-6-box h3 { margin-top: 0; }

/* contact form */
.section-6-form { padding-top: 20px; text-align: left; }

.section-6-form input[type="text"],
.section-6-form textarea {
    background: none; border: 1px solid #fff; 
    font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; color: #fff; 
    box-shadow: none;
    transition: all .3s;
}

.section-6-form textarea { height: 90px; }

.section-6-form input[type="text"]:focus,
.section-6-form textarea:focus { outline: 0; background: #fff; border: 1px solid #fff; color: #888; box-shadow: none; }

.section-6-form input[type="text"].input-error, 
.section-6-form textarea.input-error { border-color: #f35b3f; }

.section-6-form input[type="text"]::-moz-placeholder,
.section-6-form textarea::-moz-placeholder { color: #ccc; font-style: italic; }

.section-6-form input[type="text"]:-ms-input-placeholder,
.section-6-form textarea:-ms-input-placeholder { color: #ccc; font-style: italic; }

.section-6-form input[type="text"]::-webkit-input-placeholder,
.section-6-form textarea::-webkit-input-placeholder { color: #ccc; font-style: italic; }

.section-6-form button.btn-customized {
	padding: .75rem 1.5rem; 
	background: #f35b3f; border: 0; border-radius: 4px; 
	font-family: 'Roboto', sans-serif;
	font-size: 16px; font-weight: 300; color: #fff; box-shadow: none;
}

.section-6-form button.btn-customized:hover, 
.section-6-form button.btn-customized:active, 
.section-6-form button.btn-customized:focus, 
.section-6-form button.btn-customized:active:focus, 
.section-6-form button.btn-customized.active:focus,
.section-6-form button.btn.btn-primary:not(:disabled):not(.disabled):active,
.section-6-form button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
	outline: 0; background: #cd533d; background: rgba(243, 91, 63, 0.7); border: 0; color: #fff; box-shadow: none;
}

.section-6-form button.btn-customized i { margin-right: 5px; }
/* end contact form */

.section-6-social { padding-top: 20px; }

.section-6-social a {
	display: inline-block; width: 46px; height: 46px; margin: 0 10px 10px 0; 
	background: #fff; border: 0; border-radius: 50%; color: #555; text-align: center; line-height: 46px;
}
.section-6-social a:hover, 
.section-6-social a:focus { background: #ccc; background: rgba(255, 255, 255, 0.5); border: 0; color: #555; }


/***** Footer *****/

footer { padding: 40px 0; }

.bd-border {
	position: relative;
	padding: 2rem;
	margin: 1rem -15px 0;
}

.about {
	color: #333333;
	text-align: left;
	text-decoration: none;
}

.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.letra-menor1 {
	font-size: smaller;
}

.hl-table-center {
	text-align: center;
}

.hl-table {
	width: 50%;
	border-collapse: collapse;
	margin: auto;
	word-wrap: break-word; /* Allow long words to be broken and wrapped onto the next line */
	word-break: break-all;

}
@media (max-width: 700px) {
	.hl-table {
		width: 100%;
		overflow-x: hidden;
		/*margin-left: 20px;*/
	}
}

.hl-table td, .hl-table th {
	background-color: #76ad9c !important;
	color: #ffffff;
}

.rounded-table {
	border-radius: 15px; /* Custom border radius for the entire table */
	overflow: hidden; /* Ensure rounded corners are respected */
}
.rounded-table th,
.rounded-table td {
	border: 1px solid #ddd; /* Border for table cells */
}

.hl-subs-request {
	background-color: #ffffff;
	width: 50%;
	margin: auto;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;

	overflow: hidden; /* Ensure rounded corners are respected */
	/*border: 1px solid #000000;*/
}

@media (max-width: 700px) {
	.hl-subs-request {
		width: 100%;
		/*margin-left: 20px;*/
	}
}

/*@media only screen and (max-width: 768px) {*/
/*	#subs_price_updt {*/
/*		appearance: none; !* Remove a estilização padrão do navegador *!*/
/*		-webkit-appearance: none; !* Remove a estilização padrão do navegador no iOS *!*/
/*	}*/
/*}*/
.hl-subs-request-txt-container {
	/*max-width: 100%;*/
	color: #000000;
	background-color: #eeddd2;
	border-radius: 15px; /* Custom border radius for the entire table */
	overflow: hidden; /* Ensure rounded corners are respected */
}

#subs_price_updt {
	width: 100%; /* Faça o select ocupar 100% da largura do seu container */
	box-sizing: border-box; /* Inclua padding e border na largura do elemento */
	color: black;
	position: relative;
}

#plan_id {
	width: 100%; /* Faça o select ocupar 100% da largura do seu container */
	box-sizing: border-box; /* Inclua padding e border na largura do elemento */
	color: black;
}

.audio-player-fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1000; /* Ensure it is above other content */
}

.audio-player-fixed audio {
	flex: 1;
}

.audio-player-fixed .close-audio-player {
	margin-left: 10px;
}

.container-area {
	display: flex;
	flex-direction: column;
	height: 60vh;               /* Define a altura total da viewport */
}

/* Container da área de mensagens */
.message-area {
	display: flex;
	flex-direction: column;
	align-items: flex-start;  /* Mensagens do bot à esquerda */
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px;
	flex: 1;
	overflow-y: auto;
	font-family: Arial, sans-serif;
	font-size: 0.9rem;
	margin-bottom: 10px;
}


/* Estilo das mensagens do usuário */
.message-area .message-user {
	color: #333;                        /* Texto escuro */
	background-color: #d1e7dd;          /* Fundo verde claro */
	padding: 8px 12px;                  /* Espaçamento interno */
	border-radius: 12px 12px 0 12px;    /* Bordas arredondadas */
	margin: 4px 0;                      /* Espaçamento entre mensagens */
	max-width: 75%;                     /* Limita a largura */
	align-self: flex-end;               /* Alinha o balão à direita */
}

/* Estilo das mensagens do bot */
.message-area .message-bot {
	text-align: left;               /* Alinha as mensagens do bot à esquerda */
	color: #333;                    /* Texto escuro */
	background-color: #e2e3e5;      /* Fundo cinza claro */
	padding: 8px 12px;              /* Espaçamento interno */
	border-radius: 12px 12px 12px 0; /* Bordas arredondadas, destacando o balão */
	margin: 4px 0;                  /* Espaçamento entre mensagens */
	max-width: 95%;                 /* Limita a largura para um layout organizado */
	display: inline-block;
}

#message-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	resize: none;
	box-sizing: border-box;
	font-size: 0.9rem;
	background-color: #f9f9f9;
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;

}

#message-input:focus {
	border-color: #bbb;        /* Borda levemente destacada ao focar */
}

#message-input::placeholder {
	color: #999;               /* Placeholder sutil */
}

.input-area {
	position: sticky;
	bottom: 0;                   /* Fixa o input no rodapé */
	background-color: #ffffff;
	padding: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
    width: 100%;
    max-width: 100vw; /* Limita à largura da viewport */
    box-sizing: border-box;}

.btn-send {
	background-color: #00796b; /* Azul-petróleo */
	color: #fff;               /* Texto branco */
	border: none;              /* Remove borda padrão */
	font-weight: 500;          /* Fonte um pouco mais forte */
	cursor: pointer;           /* Cursor de botão */
	transition: background-color 0.3s ease, transform 0.1s ease; /* Suavidade na interação */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leve sombra para destaque */
	padding: 8px 16px;        /* Tamanho adequado do botão */
	font-size: 0.9rem;
	border-radius: 6px;
}

.btn-send:hover {

	background-color: #00695c;
	transform: translateY(-2px); /* Leve elevação no hover */
}

.btn-send:active {
	transform: translateY(1px); /* Pressionado, retorna ao nível */
	background-color: #004494;  /* Tom ainda mais escuro ao clicar */
}

/* Estilos gerais para o tema dark */
body.theme-dark {
	background-color: #121212;
	color: #e0e0e0;
}

/* Container da área de mensagens no tema dark */
body.theme-dark .message-area {
	background-color: #1e1e1e;
	border: 1px solid #333;
}

body.theme-dark .message-user {
	background-color: #2e7d32; /* Fundo verde escuro */
	color: #e0e0e0;
}

body.theme-dark .message-bot {
	background-color: #333;
	color: #e0e0e0;
}

body.theme-dark #message-input {
	background-color: #2b2b2b;
	color: #e0e0e0;
	border-color: #444;
}

body.theme-dark #message-input::placeholder {
	color: #888;
}

body.theme-dark .input-area {
	background-color: #1e1e1e;
	border-top: 1px solid #333;
}

body.theme-dark .btn-send {
	background-color: #005a4e; /* Azul escuro */
	color: #e0e0e0;
}

body.theme-dark .btn-send:hover {
	background-color: #00796b;
}

body.theme-dark .btn-send:active {
	background-color: #00494d;
}

/* Estilos para o tema claro */
.about-container a {
	color: #007bff; /* Azul para o tema claro */
}

.about-container p, .about-container ul {
	color: #333; /* Texto escuro padrão */
}

/* Estilos para o tema dark */
body.theme-dark .about-container a {
	color: #66ccff; /* Azul claro para o tema dark */
}

body.theme-dark .about-container p,
body.theme-dark .about-container h4,
body.theme-dark .about-container ul {
	color: #e0e0e0; /* Texto claro no tema dark */
}

.message-loading {
    color: #666;
    background-color: #f1f1f1;
    padding: 8px 12px;
    border-radius: 12px 12px 12px 0;
    margin: 4px 0;
    max-width: 75%;
    align-self: flex-start;
    display: inline-block;
}

.loading-dots {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
}

.loading-dots span {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #666;
    animation: loading-dots 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    left: 8px;
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    left: 16px;
    animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
    left: 24px;
    animation-delay: 0;
}

@keyframes loading-dots {
    0%, 80%, 100% {
        transform: translateY(-50%) scale(0);
    }
    40% {
        transform: translateY(-50%) scale(1);
    }
}