:root {
    --bg-botao-toggle-ordenacao-cards-desabilitado: #1d1d1d;
    --bg-botao-toggle-ordenacao-cards-habilitado: #04abd7;
    --border-color-botao-toggle-ordenacao-cards: black;
    --text-color-botao-toggle-ordenacao-cards: black;
}

.bg-botao-toggle-ordenacao-cards-desabilitado {
    background-color: var(--bg-botao-toggle-ordenacao-cards-desabilitado);
}

.bg-botao-toggle-ordenacao-cards-habilitado {
    background-color: var(--bg-botao-toggle-ordenacao-cards-habilitado);
}

.border-color-botao-toggle-ordenacao-cards {
    border-color: var(--border-color-botao-toggle-ordenacao-cards);
}

.text-color-botao-toggle-ordenacao-cards {
    color: var(--text-color-botao-toggle-ordenacao-cards);
}

.bg-botao-toggle-ordenacao-cards:not(.text-color-botao-toggle-ordenacao-cards) {
    color: white;
}

.texto-link {
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

.comentario .ql-toolbar {
	display: none;
}

#id_honeypot {
    display: none;
}

.dotted-bottom {
	border-style: none none dotted none;
	border-width: 2px;
}

#nota-roda-pe {
	margin-top: 0;
	margin-left: 10px;
    margin-bottom: 15px;
}

h2 {
	margin-bottom: 0;
}

textarea {
	width: 100%;
	margin-bottom: 20px;
}

.identado {
	margin-left: 10px;
}

.formulario {
	position: absolute;
	right: 0;
	bottom: 90%;
}

footer {
	position: relative;
}


#caixa-pesquisa {
    display: none;
}

.texto-azul {
	color: blue;
	margin-top: 5px;
}

.texto-vermelho {
	color: red;
}


.caixa-azul {
	border: 2px solid blue;
	padding: 5px 15px;
	
	/*
	* Esta propriedade evita que a caixa azul seja quebrada em
	* + de uma linha
	*/
	white-space: nowrap;
}

/*esta caixa azul permite que o texto dentro dela seja quebrado em
* + de uma linha*/
.div-caixa-azul {
	border: 2px solid blue;
	padding: 5px 15px;
}

.div_caixa_roxa {
	border: 2px solid #d220fa;
	padding: 5px 15px;
}


.caixa-roxa {
	border: 2px solid #d220fa;
	padding: 5px 15px;
	white-space: nowrap;
}

.elementos-centralizados td, th {
	text-align: center;
}

.elementos-com-padding td, th {
	padding: 8px;
}

.colapsar-bordas {
	border-collapse: collapse;
}

.texto-verde {
	color: green;
}

.celulas-com-borda-inferior td, th {
	border-bottom: 1px solid black;
}

.celulas-com-borda-e-padding td, .celulas-com-borda-e-padding th {
	border: 1px solid black;
	padding: 8px;
}

/*esta regra é importante para evitar que as imagens fiquem muito largas em celulares*/
img {
	max-width: 100%;
}

.largura-100 {
	width: 100%;
}

.filhos-mesclados tr:nth-child(even) {
  background-color: #dddddd;
}

.bordas-claras td, th {
  border: 1px solid #dddddd;
}

.video {
	width: 100%;
}

.texto_centralizado_verticalmente_com_imagem {
    display: flex;
    align-items: center;
}

.texto_centralizado_verticalmente_com_imagem span {
    align-self: flex-end;
}

#conteudo {
    background-color: #f5f5f5;
    /*
    * importante para que o background não esconda as equações
    * MathJax
    */
    z-index: 0;
}

@media(max-width: 768px) {
    #caixa-pesquisa {
        display: none;
        position: fixed;
        bottom: 0;
    }
}
 

@media (min-width: 768px) {
	.video {
		width: 50%;
	}

    #container-caixa-ferramentas {
        position: fixed;

        /* estes 68% vem do fato que o conteúdo principal em telas
         * grandes ocupa 68% da tela
         *
         * Dar uma olhada no css teoria-resolucao.css, media query
         * min-width 768px -> class grid.
         *
         * O conteúdo principal ocupa 68% da tela, e os anúncios
         * ocupam os outros 32% (16% na lateral esquerda e +
         * 16% na lateral direita)*/
        width: 68%;
    }
    
    #ferramentas {
        float: right;
    }
}


.elementos_centralizados td, th {
	text-align: center;
}


.celulas_com_borda_e_padding td, .celulas_com_borda_e_padding th {
	border: 1px solid black;
	padding: 2px 16px;
}

.colapsar_bordas {
	border-collapse: collapse;
}

.background_cinza{
	background-color: rgb(190, 190, 190);
}

.divisao {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.custom_button {
	background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC  51%, #02AAB0  100%);
	margin: 10px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	box-shadow: 0 0 20px #eee;
	border-radius: 10px;
	border: none;
}

.custom_button:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
}