:root {
	--cbb-btn-border-radius: 6px;
}

.cbb-dialog {
	font-size: .875rem;
}

.cbb-dropdown {
	border-color: #e5e7eb;
	border-radius: .5rem;
}

.cbb-dropdown .cbb-dropdown-pointer {
	border-bottom-color: #e5e7eb;
}

.cbb-menu {
	padding: .4rem;
}

.cbb-menu li a {
	border-radius: .5rem;
	font-size: .75rem;
	padding: .5rem;
}

.cbb-menu li a:hover,
.cbb-menu li a.active {
	background-color: rgba(var(--color-primary), .08);
	color: rgba(var(--color-text), 1);
}

.cbb-btn,
a.cbb-btn,
.cbb-label,
.rtl .cbb-btn {
	background-color: #f3f3f3;
	border-radius: 6px;
	line-height: 28px;
}

.cbb-btn:not(:disabled):hover,
a.cbb-btn:not(:disabled):hover {
	background: rgba(var(--color-primary), .08);
	border-color: rgba(var(--color-primary), .08);
    color: rgba(var(--color-text), 1) !important;
}

.cbb-inputbox,
.cbb-dialog .cbb-inputbox {
	font-size: 0.7rem;
}

.cbb-inputbox:focus {
	box-shadow: none;
}

select.cbb-inputbox {
	width: auto;
}

.chat.editor-counter > span {
	font-size: 0.7em;
}
/* Dark Theme */
------------------------------ */
.dark-theme {
	--cbb-btn-border-radius: 6px;
	--color-primary: #111d39; /* Exemplo de cor primária (verde) */
	--color-text: #ffffff; /* Texto claro para o tema escuro */
	--color-border: #02061733; /* Cor de borda mais escura para o tema escuro */
	--color-background: #2154c4; /* Cor de fundo escura */
}

.dark-theme .cbb-dialog {
	font-size: .875rem;
	color: rgb(var(--color-text)); /* Cor do texto em diálogos */
}

.dark-theme .cbb-dropdown {
	border-color: rgb(var(--color-border)); /* Bordas mais escuras para o dropdown */
	border-radius: .5rem;
}

.dark-theme .cbb-dropdown .cbb-dropdown-pointer {
	border-bottom-color: rgb(var(--color-border)); /* Borda de ponteiro com cor escura */
}

.dark-theme .cbb-menu {
	padding: .4rem;
}

.dark-theme .cbb-menu li a {
	border-radius: .5rem;
	font-size: .75rem;
	padding: .5rem;
	color: rgb(var(--color-text)); /* Cor do texto no menu */
}

.dark-theme .cbb-menu li a:hover,
.dark-theme .cbb-menu li a.active {
	background-color: rgba(var(--color-primary), .12); /* Efeito hover mais suave no tema escuro */
	color: rgb(var(--color-text)); /* Cor do texto no hover */
}

.dark-theme .cbb-btn,
.dark-theme a.cbb-btn,
.dark-theme .cbb-label,
.dark-theme .rtl .cbb-btn {
	background-color: rgb(var(--color-background)); /* Fundo escuro para botões */
	border-radius: 6px;
	line-height: 28px;
	color: rgb(var(--color-text)); /* Cor do texto do botão */
}

.dark-theme .cbb-btn:not(:disabled):hover,
.dark-theme a.cbb-btn:not(:disabled):hover {
	background: rgba(var(--color-primary), .12); /* Hover com cor primária mais suave */
	border-color: rgba(var(--color-primary), .12);
    color: rgb(var(--color-text)) !important;
}

.dark-theme .cbb-inputbox,
.dark-theme .cbb-dialog .cbb-inputbox {
	font-size: 0.7rem;
	color: rgb(var(--color-text)); /* Cor do texto nos inputs */
	background-color: rgb(var(--color-background)); /* Fundo escuro no input */
	border-color: rgb(var(--color-border)); /* Borda escura */
}

.dark-theme .cbb-inputbox:focus {
	box-shadow: none;
	border-color: rgb(var(--color-border)); /* Borda escura ao focar */
}

.dark-theme select.cbb-inputbox {
	width: auto;
	color: rgb(var(--color-text)); /* Cor do texto nos selects */
	background-color: rgb(var(--color-background)); /* Fundo escuro no select */
}

.dark-theme .chat.editor-counter > span {
	font-size: 0.7em;
	color: rgb(var(--color-text)); /* Cor do texto no contador */
}