body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 25.8px;
  color: #444;
  text-align: left;

}

figcaption{

color:#fff;
font-size:13px;
line-height:20px;
margin-top:5px;
	
}

.clear{
	height:15px; width:100%;
	margin-top:15px;
}


h1{
	line-height:35px;
}

a { 
 
text-decoration: none;

}

a:visited {
  color:#FFCC00; /* ou a cor desejada */
}

a {
  color: #FFCC00;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #b38f00;
  text-decoration: underline;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}





.link-tb {
color:aliceblue;
text-decoration: none;
	
}




hr{
height:1px;
background-color:#99CCFF;

}

* {
box-sizing: border-box;
}


.container_p {
height:100%;  
margin: 0 auto;


}


@media (max-width: 768px) {
.container_p{
width: 100%;
}
}




.corpo {
height:auto;
display: flex;
flex-wrap: wrap;
}
		
		
.header2 {

            height:90px; 
			margin: 0 auto;	
			margin-top:-5px;		
			color:#292929;
			width:100%;
        	box-shadow: 2px 2px 2px   rgba(12,12,12,0.2);



}

.header {


width:100%;
height:150px;
padding:15px;
margin-top:15px;
}
		
      


.div3 {

width:100%;
height:px;
margin:15px 5px 15px 15px;

display: flex;
flex-wrap: wrap;

/** centralizador**/
align-items: center;
justify-content: center;
/** centralizador**/

}

.deskrom {
width:35%;

height:auto;
margin:15px 5px 15px 15px;
/*box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);	*/
border:1px #CCC solid;
border-radius:5px;
display: flex;
flex-wrap: wrap;

/** centralizador 
align-items: center;
justify-content: center;
/** centralizador**/

}
		
@media (max-width: 768px) {
.deskrom {
width: 100%;
}
}

/*******/
.deskrom_contato {
width:35%;

height:250px;
margin:5px 5px 15px 15px;
/*box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);	*/
display: flex;
flex-wrap: wrap;

/** centralizador 
align-items: center;
justify-content: center;
/** centralizador**/

}

@media (max-width: 768px) {
.deskrom_contato{
width: 100%;
}
}


	
	
	
	
	
/************Deskrom codigo de barras**************/

.deskrom-CR{
width:56%;
height:auto;
margin:15px 5px 15px 15px;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);	
border-radius:5px;

display: flex;
flex-wrap: wrap;

align-items: center;
justify-content: center;


}

@media (max-width: 768px) {
.deskrom-CR {
width: 100%;
}
}



/**************************/


/***input  volume e speed page narrador de teste****/

#ranger-narrador{

border:1px #ccc solid; border-radius:25px; height:40px; width:250px; padding:5px;background: rgb(204,204,204);
background: linear-gradient(279deg, rgba(204,204,204,1) 0%, rgba(225,225,225,1) 10%, rgba(233,233,233,1) 85%, rgba(204,204,204,1) 100%);
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;




}

		
	

.inputFile {
position: relative;
display: inline-block;
cursor: pointer;
height: 1.5rem;
}

.inputFile input {
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
}

.inputFile-custom {
text-align: left;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 5;
height: 2.8rem;
width:330px;
padding: .5rem 1rem;
line-height: 1.5;
color: #444;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: inset 0 .5px .5px rgba(0, 0, 0, .05);
user-select: none;
}
		
.inputFile-custom:before {
position: absolute;
top: 1px;
right: -1px;
bottom: -1px;
z-index: 6;
display: block;
content: "Procurar";
height: 1.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #f1f1f1;
background-color: #042B55;
border: 1px solid;
border-radius: 0 3px 3px 0;
}

.inputFile-custom:after {
content: "Selecionar Imagem...";
}



/********/


   
.div4 {
background-color: #FFEB3B;
border: 1px solid black;
margin-left:15px;
margin:15px 15px 15px 15px;
width:500px;
height:500px;
float:left;
}

/***efeito contador de palavras**/
.ecorom-contp {
width:100%;
background-color: #FFf;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);

border-radius:5px;
margin:15px 15px 15px 15px;
padding:5px;
height:auto;

text-align:center;
flex-wrap: wrap;

/** centralizador**/
align-items: center;
justify-content: center;

}

textarea {
width:80%;
height:400px;
margin-bottom: 10px;
transition: box-shadow 0.8s ease-in-out;
outline: none;
}

textarea:hover {
box-shadow: 0 0 15px rgba(255, 255, 0, 0.7);
}

textarea:focus {
border: 2px solid #042B55;
.result {
margin-bottom: 10px;
}
}
/***efeito contador de palavras fim**/ 



/****Efeito narrador*****/
    
    
.ecorom-narrador {
width:60%;
background-color: #FFf;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);

border-radius:5px;
margin:15px 15px 15px 15px;
padding:5px;
height:auto;

text-align:center;
flex-wrap: wrap;

/** centralizador**/
align-items: center;
justify-content: center;

}

@media (max-width: 768px) {
.ecorom-narrador{
width: 100%;
}
}





/****Efeito narrador*****/

    
    

.ecorom {
width:90%;
background-color: #FFF;
border-radius:5px;
margin:0 auto;
padding:5px;
height:300px;

display: flex;
flex-wrap: wrap;
/** centralizador**/
align-items: center;
justify-content: center;

/** centralizador**/


}

@media (max-width: 900px) {
.ecorom {
width: 100%;
}
}

/************************************************************/

.ecorom_contato {
width:50%;
background-color: #FFF;

border-radius:5px;
margin:15px 15px 15px 15px;
padding:5px;
height:auto;
float:left;
display: flex;
flex-wrap: wrap;
/** centralizador**/
align-items: center;
justify-content: center;

/** centralizador**/


}

@media (max-width: 768px) {
.ecorom_contato {
width: 100%;
}
}




/************************************************************/		
.ecorom-cr {
width:20%;
background-color: #FFf;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
border-radius:5px;
margin:15px 10px 10px 10px; 
padding:5px;

height:auto;
float:left;
			
flex-wrap: wrap;

/** centralizador**/
align-items: center;
justify-content: center;


/** centralizador**/


}

@media (max-width: 768px) {
.ecorom-cr {
width: 100%;
}

		
}
.printimg{
border:2px #ccc dashed;
max-width:250px;
max-height:250px;




}

.ecoimg{

max-width: 100%;
max-height: 100%;
object-fit: contain;
align-items: center;
justify-content: center;
flex-wrap: wrap;


}


#div-eco-img{
top: 0;
left: 0;
width: 100%;
height: 100%;


}




.Rodape1 {

width: 100%;
height:150px;
margin-top:5px;
padding:20px 20px 10px 20px;
background-color:#292929;
display: block;
min-height: 100px;
bottom:0;
left:0;
color:#FFFFFF;    

}

@media (max-width: 768px) {
.div2, .div3, .div4 {
width: 100%;
}
}




.box_logo {
width: 150px;
height: 60px;
background-color:#FFFFFF;

text-align:center;
float:left;
margin-top:15px;
}

.m-0 {
margin: 0 ;
font-family: 'good-times-regular', sans-serif;
font-size:30px;
}
.text-uppercase {
text-transform: capitalize; 
}
.text-primary {
color: #FFCC00;
text-decoration: none;

}
.text-white {
color: #999 ;
}
.font-weight-normal {
font-weight: 400 !important;
}
.text-segundo {
color:#999;
text-decoration: none;
font-family:
}



.img-adp{
margin:0 auto;
height:100%;
margin-left:20px;


}

.logo-mobile {
font-size: 30px

}


/*************/
#menuContainer{
color:aliceblue;


}	

@media (max-width: 600px) {
#menuContainer {
width: 100%;
}
}




/***box ****/


@media (max-width: 600px) {
.box {
width: 100%;
}
}

.box {
width: 300px;
height: 300px;
background-color:#FFFFFF;
margin: 10px;
border-radius: 5px;
box-shadow: 2px 2px 2px 2px rgba(12,12,12,0.2);
padding:20px;
text-align:center;


border: 3px solid transparent;
background: linear-gradient(white, white) padding-box, linear-gradient(to right, #347deb, #0c13e8) border-box;


}

.box-text{

width: 100%;
height:auto;
background-color:#FFFFFF;
margin: 10px;
border-radius: 2px;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
padding:20px 20px 20px 50px;
text-align:left;


}

.container-heard{
display: flex;
flex-wrap: wrap;
width:100%;
margin-top:20px;


/** centralizador**/
align-items: center;
justify-content: center;
/** centralizador**/
padding:20px;


}
.barra-inf{
width: 100%; font-size:30px; height:auto; background-color:#FFF; margin: 10px; border-radius: 5px; box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2); padding:20px; text-align:center; line-height:25px; color:#042B55;"


}

.div-feedback{

width:98%; height:auto; background-color:#FFFFFF; margin:auto; margin-top:10px; padding:20px 0px 20px 0px; text-align:center; line-height:20px; font-size:15px;


}

.header1 {
margin: 0 auto;
color:black;
width:100%;
height:50px;

background-color:#042B55;
padding:10px 25px 2px 30px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:aliceblue;
box-shadow: 2px 1px 2px 2px rgba(12,12,12,0.2);



}




.box-text{

width: 100%;

background-color:#FFFFFF;
margin: 5px;
border-radius: 5px;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
padding:10px;
text-align:center;
line-height:30px;


}


.box-text_2{

width: 100%;


margin: 5px;
border-radius: 5px;
/*box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);*/
padding:10px;
text-align:center;
line-height:30px;
color:aliceblue;
margin-bottom:20px;
font-weight:600;


}



.box-retangular{

width: 300px;
height: 250px;
background-color:#FFFFFF;
margin: 10px;
border-radius: 5px;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
padding:20px;
text-align:center;

}

.box-retangular-rodape{

width: 300px;
height: 250px;
margin: 10px;
border-radius: 5px;
padding:20px;
text-align:center;
color:aliceblue;

}




box-retangular-rodape

/***grupo formulario**/


.form-control{
border:1px #042B55 solid ;
height:40px;
padding:10px;
width:450px;
box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
display: flex;



}

@media (max-width: 600px) {
.form-control{
width: 100%;
}
}


.bt-envia{
height:40px; width:120px; background-color:#042B55; color:aliceblue; font-size:15px;  border: none;  cursor:pointer; font-weight: bold;
}


#code-box{
width:100%; border:1px #ccc solid; border-radius:5px; line-height:30px; color:black; font-size:18px; color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; padding:10px;background-color:#f2f2f2; text-align-last:center;
}



/****botões****/

.button-standard{
border:2px #042B55 solid; border-radius:5px; font-size:17px; background-color:#042B55; color:aliceblue; width: 80px; height: 40px; cursor:pointer;

}

.button-houve{
border:3px #FF0000 solid; border-radius:15px; font-size:17px; background-color:#FF5E62; color:aliceblue; width: 120px; height: 40px; margin-top:20px; cursor:pointer;

}


.button-houve:hover {
background-color: crimson;
}


.button-standard:hover{
background-color:dodgerblue;


}

#div1 {
clear: both;
width:100%;
}


		.div-center {
		width:50%;
		/*background-color: brown;*/


		margin:15px 5px 15px 10px;
		padding:5px;
		height:100%;
		float:left;
		text-align: center;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		
		
		}
		
		@media (max-width: 900px) {
		.div-center {
		width: 100%;
		}
		}
		
		/*----------------------------------------------------------------*/
		
		       .div-container{
        height:auto;
		/*background-color:black;*/
		display:flex;
		/*align-items: center;*/
		justify-content: center;
		margin:0 auto;
		
		
}
      	@media (max-width: 900px) {
		.div-container {
		width: 100%;
		}
		}
		
    /*----------------------------------------------------------------*/
		
		
		.div-right {
width:23%;
			background-color: #FFf;
			margin:15px 10px 10px 10px; 
			padding:1px;
			
			height:auto;
			float:left;
			
			flex-wrap: wrap;
			
			/** centralizador**/
			align-items: center;
			justify-content: center;
		
		
		}
		
		
				
		
		@media only screen and (max-width: 900px) {
		.div-right {
		display: none;
		}
		}

		
		
/*----------------------------------------------------------------*/

		/*esquerda*/
		.div-left {
		width:23%;
			background-color: #FFf;
			margin:15px 10px 10px 10px; 
			padding:1px;
			
			height:auto;
			float:left;
			
			flex-wrap: wrap;
			
			/** centralizador**/
			align-items: center;
			justify-content: center;
			}
		
	
		
		@media only screen and (max-width: 900px) {
	      .div-left {
	        display: none;
	      }
	    }
            
    /*----------------------------------------------------------------*/

		  .div-bg-n{
			width:80%; 
			height:100%; 
			background-color:#FFFFFF;
			margin: 10px; 
			border-radius: 5px;
		/*	box-shadow: 1px 2px 2px 2px rgba(12,12,12,0.2); */
			padding:20px; 
			line-height:35px;
			margin-right: auto; 
			margin-left: auto;
			flex-wrap: wrap;  
			display: flex;

			justify-content: center;

          
	
}

		@media (max-width: 1000px) {
		.div-bg-n{
		width:98%;
		}
		}
		



		.div-coluna-bg {
		width:35%;
		border-radius:5px;
		margin: 0 auto;
		/*margin:15px 10px 10px 10px; 
		padding:5px 25px 5px 25px;
		height:98%;
		display: inline-block;  
		/** centralizador**/
		align-items: center;
		justify-content: center;
		/** centralizador**/
		font-size:18px;
		font-family:Arial, Helvetica, sans-serif;
		 
		
		
		}
		
		@media (max-width: 900px) {
		.div-coluna-bg {
		width:98%;
		}
		}
		
		/*---------------------------*/



/*********************************************************/

    .box-ads-top{
    
		width: 80%;		
		margin: 5px;
		border-radius: 5px;
	/*	box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);*/
		padding:5px;
		text-align:center;
		height:100px;
		display:flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top:15px;
		
}


 /* Estilo para dispositivos móveis */
    @media only screen and (max-width: 800px) {
      .box-ads-top {
        display: none;
      }
    }

/**************************************************/


/*********************************************************/

    .box-ads-top-cel{
    
        display: none;
		width:330px;
		height:70px;		
		margin: 5px;
		border-radius: 5px;
	/*	box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);*/
		padding:5px;
		text-align:center;
		
		
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top:15px;
		
}


 @media (max-width: 800px) {
      .box-ads-top-cel {
        display: block; /* Tornar a div visível em dispositivos com largura máxima de 800 pixels */
        /* Adicione outros estilos aqui, se necessário */
      }
    }
/**************************************************/



    
        .box_menu_bg {
		width:80px;
		height: 60px;
		text-align:center;
		float:right;
		margin-top:15px;
			}
/*************menu lateral*********************/


		   .image-button {
            border: none;
            background: none;
            cursor: pointer;
        }
        .image-button img {
            width: 50px;
            transition: transform 0.2s ease;
        }
        .image-button:active img {
            transform: scale(0.95);
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: -230px;
            width: 230px;
            height: 100%;
            background: rgb(4,43,85);
            background: linear-gradient(0deg, rgba(4,43,85,1) 0%, rgba(10,63,197,1) 100%);
            
            color: white;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.5);
            transition: left 0.3s ease;
            border-radius:0px 15px 15px 0px;
            z-index:9999;
             overflow-y: auto;
             text-decoration:none;
        }
        
         .sidebar a {
            color: white;
            text-decoration: none;
        }
        .sidebar a:visited {
            color: white;
        }
        .sidebar.active {
            left: 0;
        }
    .sidebar::-webkit-scrollbar {
            width: 12px;
        }
        .sidebar::-webkit-scrollbar-track {
            background: #001f3f; /* Azul escuro */
            border-radius:2px;
        }
        .sidebar::-webkit-scrollbar-thumb {
            background: #fff; /* Rosa */
            border-radius:3px;
        }

		
/*************menu lateral*********************/