/* topdoc
name: Botão
description:
  Botões comuns e com ícones podem ser feitos tanto a tag "button", quanto as tags "input" (com type com valores "button" ou "submit") e a tag "a" (link)
modifiers:
  :active: Clicado
  :hover: Com o cursor em cima
  :disabled: Desabilitado
markup:
  <button class='botao'>Botão</button>
 */
.botao,
.botaoIcone {
	min-height: 27px;
	/*font-size: 14px;*/
	font-size: 95%;
	color: #444;
	border-radius: 3px;
	border: 1px solid #ccc;
	padding: 3px 4px;
	background-color: #F2F2F2;
	font-family: helvetica, sans-serif;
	vertical-align: middle;
	margin: 2px;
	cursor: pointer;
}

.botao:hover,
.botaoIcone:hover {
	border: 1px solid #aaa;
}

.botao:active,
.botaoIcone:active {
	background-color: #E7E6E6;
}

/*
	<button class='botao' disabled='disabled'>Botão desabilitado</button>
 */
.botao:disabled,
.botaoIcone:disabled {
	color: #CCC;
	border: 1px solid #DDD;
	background-color: #F7F6F6;
}

/* topdoc
name: Link botão
description: Link personalizado como um botão
markup: <a class='botao'>Link botão</a>

 */
a.botao,
a.botaoIcone,
a.botao:hover,
a.botaoIcone:hover {
	text-decoration: none;
}


/* topdoc
name: Botão sem texto
description: Botão sem valor ou vazio que exibe somente o ícone
markup:
  <button class='botaoIcone botaoMais'></button>
  <input type='button' class='botaoIcone botaoMais'/>	
 */
input.botaoIcone[value=""],
input.botaoIcone:not([value]),
button.botaoIcone:empty {
	padding-left: 16px;
	background-position: center center;
	width: 28px;
}

.botaoIcone {
	background-repeat: no-repeat;
	background-position: 4px center;
	padding-left: 26px; 
}

/* topdoc
name: Botão mais
description: Botão com ícone de "mais"
markup: <button class='botaoIcone botaoMais'>Botão</button>
 */
.botaoMais {
	background-image: url(../imagens/adicionar.png);
}

/* topdoc
name: Botão limpar
description: Botão com ícone de "limpar"
markup: <button class='botaoIcone botaoLimpar'>Botão</button>
 */
.botaoLimpar {
	background-image: url(../imagens/limpar.png); 
}

/* topdoc
name: Botão buscar
description: Botão com ícone de "buscar"
markup: <button class='botaoIcone botaoBuscar'>Botão</button>
 */
.botaoBuscar {
	background-image: url(../imagens/consultar.png);
}

/* topdoc
name: Botão download
description: Botão com ícone de "download"
markup: <button class='botaoIcone botaoDownload'>Botão</button>
 */
.botaoDownload {
	background-image: url(../imagens/download.png);
}

/* topdoc
name: Botão confirmar
description: Botão com ícone de "confirmar"
markup: <button class='botaoIcone botaoConfirmar'>Botão</button>
 */
.botaoConfirmar {
	background-image: url(../imagens/confirmar.png);
}

/* topdoc
name: Botão cancelar
description: Botão com ícone de "cancelar"
markup: <button class='botaoIcone botaoCancelar'>Botão</button>
 */
.botaoCancelar {
	background-image: url(../imagens/cancelar.png);
}

/* topdoc
name: Botão apagar
description: Botão com ícone de "apagar"
markup: <button class='botaoIcone botaoApagar'>Botão</button>
 */
.botaoApagar {
	background-image: url(../imagens/apagar.png);
}

/* topdoc
name: Botão configuração
description: Botão com ícone de "configuração"
markup: <button class='botaoIcone botaoConfiguracao'>Botão</button>
 */
.botaoConfiguracao {
	background-image: url(../imagens/configuracao.png);
}

/* topdoc
name: Botão editar
description: Botão com ícone de "editar"
markup: <button class='botaoIcone botaoEditar'>Botão</button>
 */
.botaoEditar {
	background-image: url(../imagens/editar.png);
}

/* topdoc
name: Botão imprimir
description: Botão com ícone de "imprimir"
markup: <button class='botaoIcone botaoImprimir'>Botão</button>
 */
.botaoImprimir {
	background-image: url(../imagens/imprimir.png);
}

/* topdoc
name: Botão finalizado
description: Botão com ícone de "finalizado"
markup: <button class='botaoIcone botaoFinalizado'>Botão</button>
 */
.botaoFinalizado {
	background-image: url(../imagens/finalizado.png);
}

/* topdoc
name: Botão finalizado parcialmente
description: Botão com ícone de "finalizado parcialmente"
markup: <button class='botaoIcone botaoParcialmente'>Botão</button>
 */
.botaoParcialmente {
	background-image: url(../imagens/parcialmente.png);
}

/* topdoc
name: Botão calendário
description: Botão com ícone de "calendário"
markup: <button class='botaoIcone botaoCalendario'>Botão</button>
 */
.botaoCalendario {
	background-image: url(../imagens/calendario.png);
/*        background-color: transparent;
        padding: 0;
        margin: 0;
        border: 0;*/
}

/* topdoc
name: Botão informação
description: Botão com ícone de "informação"
markup: <button class='botaoIcone botaoInfo'>Botão</button>
 */
.botaoInfo {
	background-image: url(../imagens/info.png);
}

/* topdoc
name: Botão responder
description: Botão com ícone de "responder"
markup: <button class='botaoIcone botaoResponder'>Botão</button>
 */
.botaoResponder {
	background-image: url(../imagens/responder.png);
}

/* topdoc
name: Botão PDF
description: Botão com ícone de "PDF"
markup: <button class='botaoIcone botaoPDF'>Botão</button>
 */
.botaoPDF {
	background-image: url(../imagens/pdf.png);
}

/* topdoc
name: Botão documento
description: Botão com ícone de "documento"
markup: <button class='botaoIcone botaoDocumento'>Botão</button>
 */
.botaoDocumento {
	background-image: url(../imagens/documento.png);
}

/* topdoc
name: Botão planilha
description: Botão com ícone de "planilha"
markup: <button class='botaoIcone botaoPlanilha'>Botão</button>
 */
.botaoPlanilha {
	background-image: url(../imagens/planilha.png);
}

/* topdoc
name: Botão CSV
description: Botão com ícone de "CSV"
markup: <button class='botaoIcone botaoCSV'>Botão</button>
 */
.botaoCSV {
	background-image: url(../imagens/csv.png);
}

/* topdoc
name: Botão atualizar
description: Botão com ícone de "atualizar"
markup: <button class='botaoIcone botaoAtualizar'>Botão</button>
 */
.botaoAtualizar {
	background-image: url(../imagens/atualizar.png);
}

/* topdoc
name: Botão próximo
description: Botão com ícone de "próximo"
markup: <button class='botaoIcone botaoProximo'>Botão</button>
 */
.botaoProximo {
	padding-left: 4px; 
	padding-right: 26px; 
	background-position: right 4px center;
	background-image: url(../imagens/proximo.png);
}

button.botaoProximo:empty,
input.botaoProximo[value=""] {
	padding-right: 4px;
}

/* topdoc
name: Botão anterior
description: Botão com ícone de "anterior"
markup: <button class='botaoIcone botaoAnterior'>Botão</button>
 */
.botaoAnterior {
	background-image: url(../imagens/anterior.png);
}

fieldset {
	border-radius: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
}


input[type=text], input[type=password], textarea, select{
    border: 1px solid #AAA !important;
    border-radius: 3px;
    padding: 3px;
    background: #FDFDFD !important;
    margin: 1.2px;
}


select:not(.datepick-month-year) {
	border: 1px solid #CCC;
	border-radius: 3px;
	padding-left: 3px;
	background: #F2F2F2;
}

select:not(.datepick-month-year):hover {
	border: 1px solid #AAA;
}

/*
	<br><input type="text" class="campo">

	Campo normal
	<br><br>
 */
input.campo {
	font-size: 100%;
	vertical-align: middle;
}

input.campo,
input.campoPequeno,
textarea.campo {
	border-radius: 3px;
	border: 1px solid #ccc;
	padding: 2px;
	background: #F2F2F2;
}

/*
	<br><span class="obrigatorio">Campo obrigatório</span>
	<br><br>

 */
.obrigatorio:after {
	content: "*";
	margin: 0 2px;
	color: red;
}

/*
	<br><input type="text" class="campoPequeno">

	Campo pequeno
	<br><br>
 */
input.campoPequeno {
	width: 60px;
	height: 19px;
	vertical-align: middle;
}

input.campo:hover,
textarea.campo:hover,
input.campo:focus,
textarea.campo:focus,
input.campo:active,
textarea.campo:active {
	border: 1px solid #aaa;
}

	
.campoData {
	width: 95px;
}

.campoDataSemCalendario {
	width: 95px;
}

.campoHora {
	width: 55px;
}

.campoCPF {
	width: 130px;
}

.linhaFormulario {
	margin: 7px 0;
	clear: both;
	min-height: 25px;
}

.datepick-popup {
	font-size: 16px;
}

.datepick {
	font-size: auto;
	width: auto !important;
}