@CHARSET "ISO-8859-1";

.botaoPortal{
	
	--local-cor-texto: var(--cor-texto-padrao-botao);
	--local-cor-texto-sobre-mouse: var(--cor-texto-padrao-botao-sobre-mouse);
	--local-cor-texto-clicado: var(--cor-texto-padrao-botao-clicado);
	
	--local-cor-fundo: var(--cor-fundo-padrao-botao);
	--local-cor-fundo-sobre-mouse: var(--cor-fundo-padrao-botao-sobre-mouse);
	--local-cor-fundo-clicado: var(--cor-fundo-padrao-botao-clicado);
	
	--local-cor-borda: var(--cor-borda-padrao-botao);
	--local-cor-borda-sobre-mouse: var(--cor-borda-padrao-botao-sobre-mouse);
	--local-cor-borda-clicado: var(--cor-borda-padrao-botao-clicado);
	
	--local-border-radius-botoes: var(--border-radius-botoes);
	--local-cor-do-efeito-do-botao: var(--cor-do-efeito-do-botao);
	--local-espaco-entre-icone-botao-e-texto: var(--espaco-entre-icone-botao-e-texto);
	
	text-decoration: none;
	color: var(--local-cor-texto);
	display: flex;
	align-items: center;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--local-cor-borda);
    border-radius: var(--local-border-radius-botoes);
    background-color: var(--local-cor-fundo);
    transition: all 0.2s;
    position: relative;
    justify-content: center;
    
}

.botaoPortal.botaoComFundoLaranja{
    --local-cor-fundo: var(--cor-laranja);
    --local-cor-fundo-sobre-mouse: var(--cor-laranja-forte);
    
    --local-cor-texto: var(--cor-texto-para-fundo-laranja);
    --local-cor-texto-sobre-mouse: var(--cor-texto-para-fundo-laranja);
    --local-cor-texto-clicado: var(--cor-laranja-forte);
    
    --local-cor-borda-sobre-mouse: var(--cor-laranja-forte);
    --local-cor-borda-clicado: var(--cor-laranja-forte);
    --local-cor-borda-focada: var(--cor-laranja-forte);
}

.botaoPortal.botaoComFundoCinza{
    --local-cor-fundo: var(--cor-cinza-3);
    --local-cor-fundo-sobre-mouse: var(--cor-cinza);
    
    --local-cor-texto: var(--cor-texto-para-fundo-cinza);
    --local-cor-texto-sobre-mouse: var(--cor-texto-para-fundo-cinza);
    --local-cor-texto-clicado: var(--cor-cinza);
    
    --local-cor-borda-sobre-mouse: var(--cor-cinza);
    --local-cor-borda-clicado: var(--cor-cinza);
    --local-cor-borda-focada: var(--cor-cinza);
}

.botaoPortal.botaoComEfeitoClique::after{
	content: '';
	position: absolute;
    border-radius: var(--local-border-radius-botoes);
	opacity: 1;
	left: 10%;
	top: 20%;
	bottom: 20%;
	right: 10%;
	transition: all 0s;
	background-color: transparent;
}	

.botaoPortal.botaoComEfeitoClique:active::after{
	background-color: var(--local-cor-do-efeito-do-botao);
	left: 0%;
	top: 0%;
	bottom: 0%;
	right: 0%;
	transition: opacity 0.2s, left  0.2s, top 0.2s, bottom 0.2s, right 0.2s;	
	z-index: 1;
	opacity: 0;
}

.botaoPortal > .iconePortal{
	background-color: var(--local-cor-texto);
}

.botaoPortal:hover > .iconePortal{
	background-color: var(--local-cor-texto-sobre-mouse);
} 

.botaoPortal:focus > .iconePortal{
	background-color: var(--local-cor-texto-focado, var(--local-cor-texto-sobre-mouse));
}

.botaoPortal:active > .iconePortal{
	background-color: var(--local-cor-texto-clicado);
}

.botaoPortal.comTexto > .iconePortal{
	margin-right: var(--local-espaco-entre-icone-botao-e-texto);
}

.botaoPortal > .iconePortal.iconeGrande{
	margin-right: calc(var(--local-espaco-entre-icone-botao-e-texto) + 0.2rem);
}

.botaoPortal__texto{
    font-size: 1.1em;
    font-weight: normal;
    border-bottom: 1px solid transparent;
    text-shadow: none;
}

.ui-widget-header a.botaoPortal:hover, .ui-widget-content a.botaoPortal:hover, a.botaoPortal:hover{
	color: var(--local-cor-texto-sobre-mouse);
	border: 1px solid var(--local-cor-borda-sobre-mouse); 
	outline: none;
	background-color: var(--local-cor-fundo-sobre-mouse);
}

.ui-widget-header a.botaoPortal:focus, a.botaoPortal:focus{
	color: var(--local-cor-texto-focado, var(--local-cor-texto-sobre-mouse));
	border: 1px solid var(--local-cor-borda-focada, var(--local-cor-borda-clicado)); 
	outline: none;
}

.ui-widget-header a.botaoPortal.botaoComBorda:focus > .botaoPortal__texto, a.botaoPortal.botaoComBorda:focus > .botaoPortal__texto {
	/*border-bottom: 1px solid var(--local-cor-texto-sobre-mouse);*/
}

.ui-widget-header a.botaoPortal:active, .ui-widget-content a.botaoPortal:active, a.botaoPortal:active{
	color: var(--local-cor-texto-clicado);
	border: 1px solid var(--local-cor-borda-clicado);
	background-color: var(--local-cor-fundo-clicado); 
}

.botaoPortal.textoMaiusculo{
	text-transform: uppercase;
}

.ui-widget-header a.botaoPortal, 
.ui-widget-content a.botaoPortal{
	color: var(--local-cor-texto);
}

.botaoPortal__texto{
	font-weight: normal;
}

.botaoPortal.botaoComEfeitoSobreMouse, .botaoPortal.botaoComEfeitoSobreMouse.corTextoConteudoPagina{
	--local-cor-fundo-sobre-mouse: var(--cor-fundo-padrao-botao-com-efeito-sobre-mouse);
	--local-cor-borda-sobre-mouse: var(--cor-borda-padrao-botao-com-efeito-sobre-mouse);
	--local-cor-fundo-clicado: var(--cor-fundo-padrao-botao-com-efeito-sobre-mouse-clicado);
	--local-cor-borda-clicado: var(--cor-borda-padrao-botao-com-efeito-sobre-mouse-clicado);
}

.botaoPortal.corTextoConteudoPagina {
	--local-cor-texto: var(--cor-padrao-texto);
	--local-cor-texto-sobre-mouse: var(--cor-padrao-texto-sobre-mouse);
	--local-cor-texto-clicado: var(--cor-padrao-texto-sobre-mouse);
	--local-cor-borda-sobre-mouse: var(--cor-padrao-texto-sobre-mouse);
}

.botaoPortal.corConteudoPagina {
	--local-cor-texto: var(--cor-padrao-conteudos-pagina);
	--local-cor-texto-sobre-mouse: var(--cor-padrao-conteudos-pagina);
	--local-cor-texto-clicado: var(--cor-padrao-conteudos-pagina);
	--local-cor-borda-sobre-mouse: var(--cor-padrao-conteudos-pagina);
}

.botaoPortal.botaoComEfeitoSobreMouse, .botaoPortal.botaoComEfeitoSobreMouse.corConteudoPagina{
	--local-cor-fundo-sobre-mouse: var(--cor-branca-fraca-transparente);
	--local-cor-borda-sobre-mouse: var(--cor-branca-fraca-transparente);
	--local-cor-fundo-clicado: var(--cor-fundo-padrao-botao-com-efeito-sobre-mouse-clicado);
	--local-cor-borda-clicado: var(--cor-branca-fraca-transparente-3);
}

.botaoPortal.botaoComEfeitoSobreMouse, .botaoPortal.botaoComEfeitoSobreMouse.corTextoDataTable{
	--local-cor-fundo-sobre-mouse: var(--cor-fundo-padrao-botao-com-efeito-sobre-mouse);
	--local-cor-borda-sobre-mouse: var(--cor-borda-padrao-botao-com-efeito-sobre-mouse);
	--local-cor-fundo-clicado: var(--cor-fundo-padrao-botao-com-efeito-sobre-mouse-clicado);
	--local-cor-borda-clicado: var(--cor-borda-padrao-botao-com-efeito-sobre-mouse-clicado);
}

.botaoPortal.corTextoDataTable {
	--local-cor-texto: var(--cor-padrao-texto);
	--local-cor-texto-sobre-mouse: var(--cor-padrao-texto-sobre-mouse);
	--local-cor-texto-clicado: var(--cor-padrao-texto-sobre-mouse);
	--local-cor-borda-sobre-mouse: var(--cor-padrao-texto-sobre-mouse);
}

.botaoPortal.botaoComFundoDeConteudo {
	--local-cor-fundo: var(--cor-padrao-conteudos-pagina);
	--local-cor-fundo-sobre-mouse: var(--cor-padrao-conteudos-sobre-mouse);
	--local-cor-fundo-clicado: var(--cor-padrao-conteudos-sobre-mouse);
	
	--local-cor-borda: var(--cor-padrao-conteudos-sobre-mouse);
}

.botaoPortal.botaoComFundoPrimario {
	--local-cor-fundo: var(--cor-primaria);
	--local-cor-fundo-sobre-mouse: var(--cor-secundaria);
	--local-cor-fundo-clicado: transparent;
	
	--local-cor-texto: var(--cor-texto-para-fundo-com-cor-primaria);
	--local-cor-texto-sobre-mouse: var(--cor-texto-para-fundo-com-cor-primaria);
	--local-cor-texto-clicado: var(--cor-secundaria);
	
	--local-cor-borda: transparent;
	--local-cor-borda-sobre-mouse: var(--cor-secundaria);
	--local-cor-borda-clicada: var(--cor-secundaria);
	--local-cor-borda-focada: var(--cor-borda-do-botao-primario-focado);
}

.botaoLimparInputPortal {
    width: 0.rem;
    padding: 0.3rem 0.3rem;
}

.botaoPortal.corVermelha {
	--local-cor-texto: var(--cor-vermelha-forte);
	--local-cor-texto-sobre-mouse: var(--cor-vermelha-forte);
	--local-cor-texto-clicado: var(--cor-vermelha-forte);
}

.botaoPortal.botaoComBorda{
	--local-cor-borda: var(--local-cor-texto);
	--local-cor-borda-sobre-mouse: var(--local-cor-texto-sobre-mouse);
	/*--local-cor-borda-clicado: var(--local-cor-texto-clicado);*/
}

.botaoPortal.inverterCorFundoTextoSobreMouse{
	--local-cor-fundo-sobre-mouse: var(--local-cor-texto);
	--local-cor-texto-sobre-mouse: var(--local-cor-fundo);
	--local-cor-borda-sobre-mouse: var(--local-cor-borda);
	--local-cor-fundo-clicado: var(--local-cor-fundo);
	--local-cor-texto-clicado: var(--local-cor-texto);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:focus > .botaoPortal__texto{
	color: var(--local-cor-texto);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:focus:hover > .botaoPortal__texto{
	color: var(--local-cor-fundo);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:hover:active > .botaoPortal__texto{
	color: var(--local-cor-texto);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:focus > .iconePortal{
	background-color: var(--local-cor-texto);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:hover > .iconePortal{
	background-color: var(--local-cor-fundo);
}

.botaoPortal.inverterCorFundoTextoSobreMouse:active > .iconePortal{
	background-color: var(--local-cor-texto);
}

.botaoPortal > .btnImagem{ 
    margin-right: 0.3rem;
}

.botaoSemBorda{
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.2rem 0;
}

.botaoSemBorda::after {
    content: '';
    position: relative;
    position: absolute;
    background-color: var(--cor-vermelha);
    width: 100%;
    height: 2px;
    top: 125%;
    opacity: 0;
    transition: 0.1s;
    pointer-events: none;
}

.botaoSemBorda:hover::after {
    top: 100%;
    opacity: 0.8;
}