/* DefiniÃ§Ãµes de CSS */
@import url("variaveis.css");
@import url("botoes.css");
@import url("posicionamento.css");
@import url("formulario.css");
@import url("modalCotacao.css");
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Transforma o box size padrÃ£o para o border-box, levando em conta paddings e bordas */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.imagem{
	border-radius: 8%;
}

a:link {
	color: #7a7a7a;
	text-decoration: none;
	outline: none;
}

a:visited {
	color: #7a7a7a;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: none;
}

button {
	outline: none;
}

.caixaEscuraTabela {
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
}

.caixaTabela {
	margin-top: 15px;
	color: white;
	display: inline-block;
	padding: 5px;
	font-size: 14px;
	font-weight: bold;
	background-color: #2c7be5;
	border-radius: 5px 5px 0 0;
	border-bottom: 1px solid white;
}

.caixaTitulo {
	padding: 8px;
	font-size: 12px;
	color: #474644;
	font-weight: bold;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid rgba(185, 185, 185, 0.3);
	background-color: #eceff4;
	box-shadow: 0 4px 8px #b9b9b949;
}

.caixaTitulo:hover {
	background-color: #e4e7ec;
}

.caixaSubTitulo {
	padding: 2px;
	font-size: 12px;
	color: #263b8d;
	font-weight: bold;
	border: solid 1px #c3d0e1;
	margin-left: 30px;
}

.caixaTituloVisaoCinza {
	background:var(--cor-11);
	border-bottom:2px solid var(--cor-11h);
	width:auto;
	padding: 5px 20px;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
	text-align: left;
}

.caixaTituloVisaoCinza:hover{
	background: var(--cor-11h);	
}

.caixaTituloVisaoAmarelo {
	background:var(--cor-10);
	border-bottom:2px solid var(--cor-10h);
	width:auto;
	padding: 5px 20px;
	font-size: 12px;
	color: #1f1f1f;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
	text-align: left;
}
.caixaTituloVisaoAmarelo:hover {
	background: var(--cor-10h);	
}

.caixaTituloVisaoVermelho {
	background:var(--cor-9);
	border-bottom:2px solid var(--cor-9h);
	width:auto;
	padding: 5px 20px;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
	text-align: left;
}

.caixaTituloVisaoVermelho:hover {
	background: var(--cor-9h);	
}

.caixaTituloVisaoAzul{
	background:var(--cor-1);
	border-bottom:2px solid var(--cor-1h);
	width:auto;
	padding: 10px 20px;;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
	text-align: left;
}
.caixaTituloVisaoAzul:hover{
	background: var(--cor-1h);	
}

.caixaTituloVisaoAzulMaior {
	background:var(--cor-1);
	border-bottom:2px solid var(--cor-1h);
	width:auto;
	padding: 10px 20px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
	text-align: left;
}
.caixaTituloVisaoAzulMaior:hover{
	background: var(--cor-1h);	
}

.caixaTituloVisaoAzulTelaInteira{
	background:var(--cor-1);
	border-bottom:2px solid var(--cor-1h);
	width:auto;
	padding: 10px 20px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	border-radius:5px;		
	margin: 0px;
}
.caixaTituloVisaoAzulTelaInteira:hover{
	background: var(--cor-1h);	
}


.caixaEscura {
	background: #2b2b2b;
	color: #FFF;
	border: none;
}


.caixaExcluir {
	background: #C91418;
	color: #FFF;
	border: none;
}

.caixaLegenda {
	display: inline-block;
	float: none;
	height: 20px;
	font-size: 11px;
	color: #999;
}

.caixaLegenda span {
	float: left;
	margin: 4px 0 0 8px;
}

.caixaLegenda img {
	float: left;
	padding: 0 8px 0 8px;
}

.subTitulo {
	font-size: 18px;
	padding:7px;
}

.tabelaBorda td {
	border-right: rgba(218, 218, 218, 0.733) 1px solid;
	border-bottom: rgba(218, 218, 218, 0.733) 1px solid;
}

.tabelaBordaTopo {
	border-top: #d2dce9 1px solid;
}

.tabelaBordaEsquerda {
	border-left: #d2dce9 1px solid;
}

.tabelaTitulo {
	background: url(../images/webcorr/fnd_caixaTitulo.jpg);
	font-weight: bold;
	color: #002e68;
}
.tabelaTituloM {
	background: url(../images/webcorr/fnd_caixaTituloM.jpg);
	font-weight: bold;
	color: #002e68;
}

.tabelaTitulo1 {
	background: url(../images/webcorr/fnd_caixaTitulo.jpg);
	font-weight: bold;
	color: #002e68;
}

.tabelaTitulo2 {
	background-color: #F1F1F1;
	font-weight: bold;
	color: #000000;
}

.tabela {
	font-size: 11px;
	
}

.pergunta-questionario{
	color: #383737;
	margin: 15px 0 5px 0;
	font-size: 10pt;
}

.noborder {
	border:0px;
}

.content-table {
	font-weight: bold;
	border-collapse: collapse;
	font-size: 0.9em;
	min-width: 400px;
	border-radius: 0px 5px 0 0;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
  
.content-table thead tr {
background-color: #2c7be5;
color: #ffffff;
text-align: left;
font-size: 14px;
font-weight: bold;
}

.content-table th,
.content-table td {
padding: 5px 10px;
}

.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
border-bottom: 2px solid #2c7be5;
}

.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}

/* AlteraÃ§Ãµes do Diovanni*/
.tabela tr:nth-child(even) {
	background: #ffffff
}

.tabela tr:nth-child(odd) {
	background: #f9f9f9
}

.tabela tr:hover{
	background: #f1f1f1
}

.tabelaVisao {
	font-size: 9px;
}

.tabelaNoBorda td {
	border-right: none;
	border-bottom: none;
}

.tabelaPesquisa {
	color: #0d73b0;
}

.variacaoFundo {
	background: #ffffff;
}

.variacaoFundoAzul {
	background: #56a0ef;
}

.variacaoFundoVerde {
	background: #baceb7;
}

.colunaSimplesCampo {
	display: flex;
	width: 100%;
}

.colunaSimples {
	display: flex;
	width: 100%;
}

.colunaDuplaDividida {
	display: flex;
	width: 100%;
}

.colunaDuplaComplexa {
	display: flex;
	width: 100%;
}

.colunaDividida {
	display: flex;
	width: 100%;
}

.colunaDupla {
	display: flex;
	width: 100%;
}

.colunaQuatro {
	width: 100%;

}

	/*========================================== 
		 ESTILO DOS FORMULÃ�RIOS 
	========================================== */

.label{
	color: #0d73c9;
	padding: 0px 15px 10px 0px;
}

.width-1{
	width: 20%;
}

.width-2{
	width: 50%;
}

.width-3{
	width: 75%;
}

.width-4{
	width: 100%;
}

#legend{
	font-size: 12px;
	padding-bottom: 15px;
}

form {
	margin: 0;
	padding: 0;
}

input, select, textarea, button {
	outline: none;
}


select[readonly], input[readonly], textarea[readonly] {
	background-color: #ececec;
	touch-action: none;
	pointer-events: none;
	cursor: not-allowed;
}

select[disabled], input[disabled], textarea[disabled] {
	background-color: #ececec;
	touch-action: none;
	cursor: not-allowed;
}

.duasColunas {
	width: 435px !important;
}

.duasColunasSelect {
	width: 435px !important;
}

#horizontalForm{
	padding: 10px 0px;
}


#horizontalForm fieldset {
	display: block;
	padding: 0px;
    margin: 0px;
	border: none;
	width:100%;	
}

#horizontalForm .bordaForm {
	border: 1px solid #CCC;
}

#horizontalForm legend {
	font-size: 12px;
	margin-bottom: 20px;
}

#horizontalForm label {
	font-weight: bold;
	color: #0d73c9;
	padding-right: 5px;
	
}

/* #horizontalForm input {
	margin-top: 5px;
} */

/* #horizontalForm textarea {
	height: 100px;
	margin-top: 5px;
	border: 1px solid #b9b9b9;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
} */

/* #horizontalForm select {
	margin-top: 5px;
	
} */

#horizontalForm #limpaForm dt {
	float: left;
	padding: 8px 10px 0 0;
	font-weight: normal;
}

#horizontalForm #limpaForm input {
	margin-top: 5px;
	float: left;
}

#horizontalForm .textoForm {
	padding: 5px;
	color: #333;
	font-weight: normal;
}

#horizontalForm br {
	clear: both;
}

#horizontalForm .resultadoFieldset {
	display: block;
	padding: 0 5px 5px 5px;
	border: none;
	;
}

#horizontalForm .bordaForm {
	border: 1px solid #CCC;
}

#horizontalForm .resultadoLabel {
	float: left;
	display: block;
	margin: 5px;
	font-weight: bold;
	color: #0d73c9;
}

#horizontalForm .resultadoP {
	width: 220px;
	color: #333;
	font-weight: normal;
	margin: 0;
	font-size: 11px;
}

#horizontalForm .resultadoPValor {
	width: 220px;
	color: #333;
	font-weight: normal;
	margin: 0;
	font-size: 11px;
	text-align: right;
}

.resultadoCampo {
	font-weight: bold;
	color: #0d73c9;
	font-size: 11px;
}

.labelBotaoForm {
	padding: 12px 10px 0px 0px;
}

.form_botao {
	background-color:var(--cor-1);
	border:none;
	border-bottom: 2px solid var(--cor-1h);
	border-radius: 3px;
	cursor: pointer;
	color: #fff;
	padding: 3px 10px;
	text-align: center;	
	text-transform: uppercase;
	height: 25px;
	margin-top: 5px;
	box-shadow: 0 4px 8px rgb(30 60 90 / 10%);
}

.form_botao:hover,
.bt-Geral:hover,
.bt-Cor1:hover {
	background-color:var(--cor-1h);
	
}

.bt-Geral {
	cursor: pointer;
	border: 1px solid #7fa2c7;
	color: #fff;
	font-weight: normal;
	height: 25px;
	background: url(../images/webcorr/fnd_botao.jpg) repeat-x left top;
	font-size: 11px;
	padding: 0 15px 0 15px;
	margin-left: 5px;
}

.bt-Cor1 {
	cursor: pointer;
	border: 1px solid #ee330a;
	color: #fff;
	font-weight: normal;
	height: 25px;
	background: url(../images/webcorr/fnd_botao2.jpg) repeat-x left top;
	font-size: 11px;
	padding: 0 15px 0 15px;
}

.textoDesativado {
	border:1px solid #d4e1f1;
	font:11px Arial;
	padding-left:5px;
	background-color:lightgray;
	height:22px;
}

.textoValor {
	border: 1px solid #d4e1f1;
	font: 11px Arial;
	padding-left: 5px;
	background: url(../images/webcorr/fnd_inputxt.jpg) repeat-x left top;
	height: 22px;
	text-align: right;
}

.textoarea {
	border: 1px solid #d4e1f1;
	font: 11px Arial;
	padding-left: 5px;
	padding-top: 5px;
	background: url(../images/webcorr/fnd_inputxt.jpg) repeat-x left top;
	height: 100px;
}

.txtarea-Geral {
	border: 1px solid #d4e1f1;
	font: 11px Arial;
	padding-left: 5px;
	padding-top: 5px;
	background: url(../images/webcorr/fnd_inputxt.jpg) repeat-x left top;
	height: 100px;
	width: 160px;
}

.inputxt-Branco {
	border: 1px solid #a7afb8;
	background: #FFF;
}

.inputxt-Geral {
	border: 1px solid #d4e1f1;
	font: 11px Arial;
	padding-left: 5px;
	background: url(../images/webcorr/fnd_inputxt.jpg) repeat-x left top;
	height: 20px;
	width: 210px;
}

/***************** ESTILO DO RANKING *******************/
.rankingCol1 {
	background:#dae1ec;
	width:152px;
	margin-bottom:2px;
	margin-right:2px;
	font-size:10px;
	float:left;
}
.rankingBarra {
	z-index:2;
	background:#98b5e5;
	position:absolute;
}
.rankingCol1, .rankingBarra {
	height:25px;
}
.rankingNome {
	position:absolute; 
	z-index:3; 
	line-height:25px; 
	padding-left:5px;
}
.rankingCol2, .rankingCol3 {
	background:#151515; 
	margin-bottom:2px;
	margin-right:2px;
	height:25px;
	color:white; 
	font-size:10px;
	text-align:center;
	line-height:25px;
	float:left;
}
.rankingCol2 {
	width:61px;
}
.rankingCol2 a:link {
	color: white;
	text-decoration: none;
}

.rankingCol2 a:visited {
	color: white;
	text-decoration: none;
}

.rankingCol2 a:hover {
	color: #8a8a8a;
	text-decoration: none;
}

.rankingCol3 {
	background:#8a8a8a;
	width:68px; 
}

.rankingCol3 a:link {
	color: white;
	text-decoration: none;
}

.rankingCol3 a:visited {
	color: white;
	text-decoration: none;
}

.rankingCol3 a:hover {
	color: #000;
	text-decoration: none;
}


/******************************************
FOLHA DE ESTILOS DO AUTO-COMPLETE
******************************************/
div.auto_complete {
	border: 1px solid #474644;
	color: #474644;
	background: #fff;
	margin-bottom: 10px;
}

div.auto_complete ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div.auto_complete ul li {
	margin: 0;
	padding: 3px;
}

div.auto_complete ul li.selected {
	background-color: #359aff; /* #ffb */
	color: white;
}

div.auto_complete ul strong.highlight {
	color: #800;
	margin: 0;
	padding: 0;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    ; /* Full width */
    height: auto; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Loader */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loaderIcone {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    auto { transform: rotate(360deg); }
}

.limpa_float{
	clear: both;
}

.posiciona_direita{
	float:right;
}

.subtd{
	border-top:1px solid #d2dce9;
	padding: 4px 0px;
}

/* Projetos ideias */

.projetos-container{
	
}

.projetos-container h1{
	font-size: 1.5em;
	text-transform: uppercase;	
	margin: 0px;
	margin-bottom: 5px;
}

.projetos-container h1:hover{
	cursor: pointer;
	text-decoration: underline;
}

.projeto-card{
	border:1px solid  var(--cor-6);
	margin: 10px 0;
	;
}

.projeto-linha{
	display: flex;
	align-items: center;
	;
}

.projeto-col-1{
	width:30%;
	padding: 10px;
	text-align: center;

}

.projeto-col-2{	
	flex-grow: 3;
	padding: 10px;

}

.borda-superior{
	border-top:1px solid var(--cor-6);
	background-color: var(--cor-7);
}

.cl{
	clear: both;
}

.projeto-fase-container{
	display: block;
	height: 32px;
	border:1px solid var(--cor-6);
	position:relative;
	margin:5px 0;
}

.projeto-fase-barra{
	height: auto;
	background-color: var(--cor-2);
	position:absolute;
}

.projeto-fase-legenda{	
	position:absolute;
	color:#000;
	height: auto;
	padding: 10px;	
}

.projeto-botoes{
	margin:10px;
}

.projeto-botoes a{
	text-align: center;
	margin:0 10px;
}

.projeto-botoes a img{

}

/* Nova interface para planejamento */

.tabelaPlanejamento tbody tr{
	display: none;
}

.tabelaPlanejamento tbody tr:first-child{
	font-weight: bold;
	display: table-row;
}

.tabelaPlanejamento thead{
	text-align: center;
}

/* 
	Refinamentos do tabela de etapa - Diovanni 14/05
*/
.etapaContainer{
	margin:15px 0px;
}

.caixaEtapa {
	padding: 8px;
	background: #646368;	
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
}

.caixaEtapa a{
	color: #FFF;
}

.caixaEtapa a:hover{
	color: var(--cor-5);
	
}

.caixaSubEtapa{
	border:1px solid var(--cor-6);
}
/* ------------------------------- */

.caixaPlanejamento{
	margin-top: 10px;
	border-bottom: 0px;
}

.titulo{
	display: block;
	;
	padding: 5px 20px;
	border-bottom: 2px solid #1f1f1f;
	font-size: 16px;
	font-weight: bold;
	margin:0px;
}

#mensagensErro{
	padding: 10px;
	background: var(--cor-23);
	border:1px solid var(--cor-23h);
	color:#fff;
	display: none;
	margin-bottom: 10px;
}

.tr-selecionada{
	border:2px solid var(--cor-10h) !important;
	background: var(--cor-10) !important;

}

.tr-selecionada td{
	border-top:1px solid var(--cor-10h) !important;
	border-bottom:1px solid var(--cor-10h) !important;
}

/* DefiniÃ§Ãµes de tabela do planejamento de um projeto */

.iconeAjax{
	position: absolute;
	z-index: 100000;
	right:4px;
	top:50%;
	margin-top:-8px;
	display: none;
}

.tabela-planejamento, 
.tabela-planejamento-filho{
	border:1px solid var(--cor-16h);
	width:auto;
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
	font-size: 11px;
}

.tabela-planejamento input[type="text"], 
.tabela-planejamento-filho input[type="text"]{ 
	margin: 4px 0 !important;
}

.tabela-planejamento-filho{
	border:none;
}

.linha-etapa-pai{
	
}

.linha-etapa-pai:nth-of-type(even) td{
	background-color:var(--cor-29C);
	border-bottom: 1px solid rgba(0,0,0,0.05);;
}
.linha-etapa-pai:nth-of-type(odd) td{
	background-color:var(--cor-29D);
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

.linha-etapa-filho-categoria td{
	background-color:var(--cor-29B);
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

.linha-etapa-filho-insumo td{
	background-color:var(--cor-29A) ;
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

tabela-planejamento-filho{
	border:none;
	width:auto;
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
}

.tabela-planejamento-legenda{
	border:1px solid var(--cor-16h);
	border-right: none;
	border-bottom: none;
	width:auto;	
	padding: 0px;
	border-spacing: 0px;
	margin: 0px;
}

.tabela-planejamento-legenda td{
	font-size: 10px;
	color:#1f1f1f;
	background: #ffffff;
	border-bottom:1px solid var(--cor-16);
}


.tabela-planejamento-legenda td:last-of-type{	

}

.linha-selecionada{
	background: var(--cor-29E);
	
}

.linha-selecionada td{
	border-bottom:1px solid var(--cor-29F);

}

.linha-selecionada-marca td:first-of-type{
	font-weight: bold;
	text-decoration: underline;
}

.linha-selecionada-marca td{

}

.marcaEtapa{
	position: absolute;
	right: -16px;
	top:50%;
	margin-top: -5px;
	z-index: 100;
	width: 10px;
	height: 10px;
	background:var(--cor-28);
	display: none;
}


/*
.tabela-etapa-pai:nth-child(even) td{
	background-color:var(--cor-9);
}

.tabela-etapa-pai:nth-child(even) td:hover{
	background-color:var(--cor-9h);
}

.tabela-etapa-pai:nth-child(odd) td{
	background-color:var(--cor-10);
}

.tabela-etapa-pai:nth-child(odd) td:hover{
	background-color:var(--cor-10h);
}
*/

.semBorda {
	background-color: transparent !important;
	border:1px solid transparent !important;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
	-webkit-appearance: none !important;
}

input[type="text"].semBorda {
	padding-left: 6px !important;
}

.semBorda:focus{
	border: 0.1px solid #cecece !important;
}

.pad{
   padding:4px 10px;
    line-height: 1.5em;
}

.etapa-i .linha:hover,.questionario-i .linha:hover,.planoConta-i .linha:hover,.pergunta-i .linha:hover, .tipoNorma-i .linha:hover{
	background-color: #d9d9d9; 
}

.bg-hover:hover {
	background-color: rgba(185, 185, 185, 0.2);
}

.atividades-box-menu{
	padding: 10px;
	background: #ffffff;
	color:#323232;
	border-radius: 4px;
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	display:none;
	position: absolute;
	z-index: 10000;
	right: 8px;
	line-height: 1.1em;
	width: 120px;
}

.atividades-box-menu a{
	display: block;	
	padding: 4px;
}
.atividades-box-menu a:hover{
	background: #263b8d;
	color: white;
}

.atividades-box-menu span{
	display: inline-block;
	background:var(--cor-9);
	color: white;
	padding: 4px;
	font-style: oblique;
	border-radius: 4px;
	font-size: 0.8em;
	width:12px;
	height:12px;
	text-align: center;
}

/* 
 *			Estilos para o Processo Instanciado
 *				- criado em 06/05/2020
*/


.bg-verde
{
  background-color: #d4edda;
  border-bottom: 1px solid #b6ebc2;
}

.bg-vermelho
{
  background-color: #f8d7da;
  border-bottom: 1px solid #fcbcc1;
}

.bg-azul
{
  background-color: #cce5ff;
  border-bottom: 1px solid #acd2fa;
}

button{
	margin-right: 2px;
}

.bg-amarelo
{
  background-color: #fff3cd;
  border-bottom: 1px solid #fcebb6;
}

/* 
 *	ESTILOS DE ANIMATION-GIF
*/

.animation-gif::before {
    background: var(--cor-1);
    animation: gif-animation 2s infinite;
    height: 4px;
    border-radius: 8px;
}

@keyframes gif-animation {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
