@media only screen and (max-device-width: 600px) {
	:root {
		--width-um-por-linha: 98%;
		--width-dois-por-linha: 98%;
		--width-tres-por-linha: 98%;
		--width-quatro-por-linha: 98%;
		--fonte-tamanho-editor: 48px;
		--fonte-tamanho-rotulo: 48px;
		--fonte-tamanho-titulo: 48px;
		--fonte-tamanho-botao: 40px;
		--cor-borda-componente: #808080;
		--raio-borda-componente: 20px;
		--espaco-interno-componente: 12px;
		--preenchimento-botao: 16;
		--largura-barra-titulo: 10px;
	}
}

@media only screen and (min-device-width: 601px) {
	:root {
		--width-um-por-linha: 98%;
		--width-dois-por-linha: 47.8%;
		--width-tres-por-linha: 31.3%;
		--width-quatro-por-linha: 23%;
		--fonte-tamanho-editor: 14px;
		--fonte-tamanho-rotulo: 14px;
		--fonte-tamanho-titulo: 14px;
		--fonte-tamanho-botao: 14px;
		--cor-borda-componente: #CFCFCF;
		--raio-borda-componente: 5px;
		--espaco-interno-componente: 4px;
		--preenchimento-botao: 8;
		--largura-barra-titulo: 4px;
	}
}

.cadastrohtml {
	padding-top: 20px;
	border-radius: 7px;	
	position: relative;
	width: 80%;
}

/*botão controle*/
.btAdicionar, .btSalvar, .btExcluir, .btPesquisa, .btProcesso, .btAtualizar, .btPConfirmar, .btRelatorio {
	position: relative;
	border-radius: 6px;
	border: none;
	font-size: 12px;
	color: #FFFFFF;
	padding: 8 11 8 11px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;  
}

.btAdicionar:hover {
	background-color: #FE9A2E;
}

.btSalvar:hover {
	background-color: #FE9A2E;
}

.btExcluir:hover {
	background-color: #FE9A2E;
}

.btPesquisa:hover {
	background-color: #FE9A2E;
}

.btProcesso:hover {
	background-color: #FE9A2E;
}

.btAtualizar:hover {
	background-color: #FE9A2E;
}

.btRelatorio:hover {
	background-color: #FE9A2E;
}

.btAdicionar {
	background-color: #008CBA;
}

.btSalvar {
	background-color: #4CAF50;
}

.btExcluir {
	background-color: #F44336;
}

.btPesquisa {
	background-color: #9370DB;
}

.btProcesso {
	background-color: #BF8040;
}

.btAtualizar {
	background-color: #01DFA5;
}

.btPConfirmar {
	background-color: #2EB82E;
}

.btRelatorio {
	background-color: #F08080;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  cursor:pointer;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/*Layout cadastro*/
.id_tabela {
	display: none;
}

.id_externo {
	display: none;
}

.um-por-linha, .dois-por-linha, .tres-por-linha, .quatro-por-linha label{
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-rotulo);
	color: #696969;
}

.um-por-linha {
	float: left;
	width: var(--width-um-por-linha);
	padding: 0 1% 10px;
	--position: relative;
	text-align: left;
}

.dois-por-linha {
	float: left;
	width: var(--width-dois-por-linha);
	padding: 0 1% 15px;
	--position: relative;
	text-align: left;
}

.tres-por-linha {
	float: left;	
	width: var(--width-tres-por-linha);
	padding: 0 1% 10px;
	--position: relative;
	text-align: left;
}

.quatro-por-linha {
	float: left;	
	width: var(--width-quatro-por-linha);
	padding: 0 1% 10px;
	--position: relative;
	text-align: left;
}

/*Componente cadastro*/
.input-cad {
    width: 100%;
	padding: var(--espaco-interno-componente);
    margin: 1px 0;
 	border: 1px solid var(--cor-borda-componente);
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.data-cad {
    width: 100%;
    padding: var(--espaco-interno-componente);
    margin: 1px 0;
	border: 1px solid var(--cor-borda-componente);
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.numero-cad {
    width: 100%;
    padding: var(--espaco-interno-componente);
    margin: 1px 0;
	border: 1px solid var(--cor-borda-componente);
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
	text-align: right;
}

.checkbox-cad {
    padding: var(--espaco-interno-componente);
	border: 1px solid var(--cor-borda-componente);
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.radio-cad {
    padding: var(--espaco-interno-componente);
	border: 1px solid var(--cor-borda-componente);
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.button-cad {
    width: 100%;
    padding: 3px 5px;
	border: 2px solid var(--cor-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.select-cad {
    width: 100%;
    padding: var(--espaco-interno-componente);
	margin: 1px;
	border: 2px solid var(--cor-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.textarea-cad {
	width: 100%;
    padding: 3px 5px;
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
    margin: 2px 0;
	border: 1px solid var(--cor-borda-componente);
	background: transparent;
	font-family: Verdana, Geneva, sans-serif;
	font-size: var(--fonte-tamanho-editor);
}

.titulo-estilo-001 {
	width: 100%;
	border-left: var(--largura-barra-titulo) solid #FA7E22;
	color: #FA7E22;
	font-size: var(--fonte-tamanho-titulo);
	font-weight: bold;
}

.titulo-estilo-002 {
	width: 100%;
	border-left: var(--largura-barra-titulo) solid #FA7E22;
	color: #FA7E22;
	font-size: var(--fonte-tamanho-titulo);
}

.botao-estilo-001 {
	position: relative;
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	border: none;
	color: #FFFFFF;
	background-color: #FFA94A;
	padding: var(--preenchimento-botao);
	text-align: center;
	text-decoration: none;
	font-size: var(--fonte-tamanho-botao);
	overflow: hidden;
	cursor: pointer;	
}

.botao-estilo-002 {
	position: relative;
	border-top-left-radius: var(--raio-borda-componente);
	border-top-right-radius: var(--raio-borda-componente);
	border-bottom-left-radius: var(--raio-borda-componente);
	border-bottom-right-radius: var(--raio-borda-componente);
	border: none;
	color: #FFFFFF;
	background-color: #2EB82E;
	padding: var(--preenchimento-botao);
	text-align: center;
	text-decoration: none;
	font-size: var(--fonte-tamanho-botao);
	overflow: hidden;
	cursor: pointer;
}