/* Manter o formulario flex, com flex direction row e flex-wrap-wrap
>> classe .row, define as linhas de cada item Form, usar no html fazendo as marcações
>> classe . grupo_cxs, define as configurações de bloco de itens do form
>> classe .cx_text, define as propriedades inputs
>> classe .col-1.., 5 Tamanho dos inputs
>> @media(max-width: 950px ) configura os itens do display responsivo

	example
<form id="frm_registro">
				
		<h1>Cad. Info Frete</h1>

			
			<div class="row">	
					<div class="grupo_cxs col-1" id="grupo_cx_id">
						<label for="">Id</label>
						<input class="cx_text" type="text" id="cx_id" disabled>											
					</div>	
			</div>
</form>


*/



.frm_registro{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* border:solid 1px #CFCFCF; */
	border-radius: 10px;
	margin:50px;
	padding: 30px;
	z-index: 0;
	/* background-color:white;  */
	
}


.frm_center{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin:0px;
  padding-top: 0px;
	z-index: 0;
  align-items: center;
  justify-content: center;
}



.frm_center_etapas {
  width: 100%;
}


.bloco_center {
  display: flex;
  height: 520px;
  width: 300px;
  margin-left: 30px;
  align-items: center;
  justify-content: center;
  background-color:rgb(250, 250, 250);
  border: solid 1px rgb(220, 220, 220);
  border-radius: 10px;
}

.cardPlano {
  display: block;
}


.container_grafic {
  margin-top: 30px;
}

.container_grafics {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

.cx_text{	
	outline: none;
	border-radius: 5px;
	height: 40px !important;
	width:100%;
	padding-left: 10px;
  margin-top: 10px;
  font-size: 13px;
  /* color: rgb(91, 171, 194); */
  color: white;
  background-color: transparent;
  border: solid 1px #1387c148;
}

.cx_text_file {
  /* background-color: rgb(216, 221, 221); */
  background-color: rgba(6, 15, 30, 0.237);
  cursor: pointer;
}


.cx_text_block {
  /* background-color: rgb(231, 231, 239); */
  background-color: rgba(249, 154, 154, 0.338);
  /* padding-top: 13px; */
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}

  

.cx_select{	
	outline: none;
	border:solid 1px  #cbd5db;
  /* background-color:rgb(239, 239, 239) ; */
  background-color:rgba(142, 204, 223, 0.223) ;
	border-radius: 3px;
	height:40px;
  font-size: 13px;
	width:100%;
	padding-left: 10px;
  cursor: pointer;
  margin-top: 10px;
  color: rgb(84, 83, 83);
}



.lb_text {
	font-size: 13px;
	color:#696969; 
  line-height: 20px;
}

.etiqueta-form {
  font-size: 13px;
	color:#a7a5a5; 
  background-color: rgb(248, 247, 247);
  padding: 10px;
  font-weight: bold;
  margin-top: 20px;
}

.grupo_cxs{
	display: inline-block;
	margin-top: 15px;
}

.rw-btns {
  margin-top: -20px;
}

.grupo_btns a{ 
margin-left: -40px;
}

.col-1-1,.col-1,.col-1-2, .col-1-3,  .col-2,.col-2-1, .col-2-1-1, .col-2-2, .col-3, .col-3-1, .col-3-2, .col-4, .col-5, .col-5-1, .col-5-1-2, .col-5-3, .col-6{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

}

.row{
  width:100%;
}

.row_card {
  width:110%;
  margin-left: -30px;
}

.row_card2 {
  top: -300px !important;
}

.col-1-1 {
  -ms-flex: 0 0 11.333333%;
  flex: 0 0 11.333333%;
  max-width: 11.333333%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-1-2 {
  -ms-flex: 0 0 12.333333%;
  flex: 0 0 12.333333%;
  max-width: 12.333333%;
}

.col-1-3 {
  -ms-flex: 0 0 9%;
  flex: 0 0 9%;
  max-width: 9%;
}

.col-2 {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;

}

.col-2-1 {
  -ms-flex: 0 0 23%;
  flex: 0 0 23%;
  max-width: 23%;

}

.col-2-1-1 {
  -ms-flex: 0 0 24.95%;
  flex: 0 0 24.95%;
  max-width: 24.95%;

}


.col-2-2 {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;

}

.col-3 {
  -ms-flex: 0 0 33.3%;
  flex: 0 0 33.3%;
  max-width: 33.3%; 
}

.col-3-1 {
  -ms-flex: 0 0 39.7%;
  flex: 0 0 39.7%;
  max-width: 39.7%; 
}

.col-3-2 {
  -ms-flex: 0 0 45.5%;
  flex: 0 0 45.5%;
  max-width: 45.5%; 
}

.col-4 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;

}


.col-5 {
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;

}

.col-5-1 {
  -ms-flex: 0 0 62.5%;
  flex: 0 0 62.5%;
  max-width: 62.5%;
}

.col-5-1-2 {
  -ms-flex: 0 0 66.6%;
  flex: 0 0 66.6%;
  max-width: 66.6%;
}

.col-5-2 {
  -ms-flex: 0 0 95%;
  flex: 0 0 95%;
  max-width: 95%;
}


.col-5-3 {
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}


.col-6 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}


/*
.frmt_tabela_fretes {
  /* border:solid 1px lightgray;  *
  margin-top:20px; ;
  border-radius: 30px;
  width:100%;
  
}
  
.frmt_tabela_fretes th {
  background-color:#57eaea;
  /* line-height: 30px; 
  color:#184050;
  padding:8px 40px;
  font-size: 13px;
  align-items: center;
  text-align: center;
}
  
.frmt_tabela_fretes td { 
  text-align: center;
  padding-top:10px;
  padding-bottom:10px;	
  font-size: 13px;
  cursor:pointer;
  color: rgb(103, 102, 102);
}
  

.frmt_tabela_fretes tr:hover{
  background-color:rgba(240,240,240,1);  
}


.frmt_tabela_fretes2 {
  /* border:solid 1px lightgray;  
  margin-top:20px; ;
  border-radius: 30px;
  width:100%;
  
}
  
.frmt_tabela_fretes2 th {
  background-color:white;
  /* line-height: 30px; 
  color:rgb(103, 102, 102);
  padding:8px 40px;
  font-size: 13px;
  font-weight: bold;
  border-top: none;
  align-items: center;
  text-align: center;
}
  
.frmt_tabela_fretes2 td { 
  text-align: center;
  padding-top:10px;
  padding-bottom:10px;	
  font-size: 13px;
  cursor:pointer;
  color: rgb(103, 102, 102);
}
  

.frmt_tabela_fretes2 tr:hover{
  background-color:rgba(240,240,240,1);  
}
  
  
.styline_line_table_2{
  background-color:rgb(248, 248, 248);
      
}

.container_table{
  margin: 10px 20px;	
  margin-left: 0px;
  /* margin-top: 50px; 
  display:block;
  overflow:auto;
  border-radius:5px;
  /* background-color:rgb(249, 249, 249);  
  /* border:solid 1px rgb(214, 214, 214);  
  width: 108%;
  padding: 20px;
  padding-top: 50px;
}

#tableUsers_filter {
  margin-bottom: 20px !important;
}

table.dataTable thead th {
  color: rgb(136, 132, 132);
  border-bottom: 1px solid rgb(214, 213, 213) !important;
}

table.dataTable.no-footer {
  border-bottom: 1px solid  rgb(214, 213, 213) !important;
}
  


.container_table_upl {
  background-color: rgb(250, 250, 250);
  margin-left: 0px;
  overflow-x: hidden;
} 

*/

.vlr_tit_listdf {
    padding: 10px 25px;
    /* background-color: #14325a33;  */
    color: #717070;
    background-color: rgb(235, 235, 235);
    border: solid 1px rgb(219, 217, 217);
    border-radius:5px;
    display: inline-block;
    margin-top: 10px;
}

.vlr_tit_listdf2 { 
  padding: 10px 25px;
  /* background-color: #14325a33;  */
  color: #717070;
  border-bottom: solid 1px rgb(219, 217, 217);
  box-shadow: 10px #717070;
  display: inline-block;
}

.frm_center_planos {
    margin-bottom: 150px;
    margin-top: 50px;
}


.btn-contrata {
    margin-left: 30px;
    margin-bottom: 30px;
    color: white;
    padding: 20px;
    font-weight: bold;
    border: none;
    border-radius: 30px;

  animation: fundoAnimado 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running, 
             transicaoFundo 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
  background-image: linear-gradient(45deg, #F955FF, #07FFE1, #F955FF, #07FFE1);
  background-size: 400% 200%;
}



@media(max-width: 1690px){ 

  .bloco_center {
    width: 250px;
    height: 530px;
  }

  .frm_center_planos {
    margin-bottom: 150px;
    margin-top: -20px;
  }

  .btn-contrata {
    margin-top: -30px;
  } 

  .btn-contrata-card1 {
    margin-top: 80px;
}

.btn-contrata-card3 {
    margin-top: 60px;
}
    
.btn-contrata-card4 {
    margin-top: 0px;
}

}

@media(max-width: 750px){

.grupo_cxs{
	display: block;
	margin-top: 15px;

}

.col-1-1,.col-1,.col-1-2, .col-1-3, .col-2-1, .col-2-1-1,  .col-2,.col-2-2, .col-3,.col-3-2, .col-4, .col-5,.col-5-1,.col-5-1-2, .col-6{
 -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%;
}

.btn-default {
  background-color: #14325a;
}

}


@keyframes fundoAnimado {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Transição de fundo suave */
@keyframes transicaoFundo {
  0% {
    background-image: linear-gradient(45deg, #F955FF, #07FFE1, #F955FF, #07FFE1);
  }
  100% {
    background-image: linear-gradient(45deg, #07FFE1, #F955FF, #07FFE1, #F955FF);
  }
}