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

}

h1{
   font-size:30px;
	line-height:10px;
} 

h2 {
	font-size:25px;
}

a { 
 
text-decoration: none;

}

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

a {
  color: #292929;
  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);

		

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

	    background-color:cornflowerblue;
	    padding:10px 25px 2px 30px;
	    font-family:Arial, Helvetica, sans-serif;
	    font-size:13px;
	    color:aliceblue;

		}

		
		
		
		
		.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: 900px) {
		.deskrom_contato{
		width: 100%;
		}
		}

	
	
	
	
	
	
	/************Deskrom codigo de barras**************/
	
	.deskrom-CR{
		width:50%;
		height:auto;
		margin:15px 5px 15px 15px;
		box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);	
		border-radius:5px;
		text-align:center; align-items: center; justify-content: center;   flex-direction: column; display: flex; 
		
	
		
		}
		
		@media (max-width: 800px) {
		.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: cornflowerblue;
		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 cornflowerblue;
        }
        .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:60%;
		background-color: #FFF;
		border:1px #CCC solid;
		border-radius:5px;
		margin:15px 15px 15px 15px;
		padding:5px;
		height:500px;
		float:left;
		display: flex;
		flex-wrap: wrap;
		/** centralizador**/
		align-items: center;
	    justify-content: center;

		/** centralizador**/
		
		
    }
    
    	@media (max-width: 768px) {
		.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:23%;
			background-color: #FFf;
			box-shadow: 1px 1px 1px 1px rgba(12,12,12,0.2);
			border-radius:5px;
			margin:15px 10px 10px 10px; 
			padding:5px;
			height:500px;
			float:left;
			
			flex-wrap: wrap;
			
			/** centralizador**/
			align-items: center;
			justify-content: center;
			
			
			/** centralizador**/
		
		
		}
		
		@media (max-width: 800px) {
		.ecorom-cr {
		width: 100%;
		}	
		}
		
		@media only screen and (max-width: 820px) {
		.ecorom-cr {
		display: none;
		}
		}

		
		
	.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;
		margin-left: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%;
		
		
		}
		
			.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;

	
}


    .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: 90%;
		

		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;
		background-color:aliceblue;
		color:cornflowerblue;
		
	
}



    .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 cornflowerblue 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:cornflowerblue; 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 cornflowerblue solid; border-radius:5px; font-size:17px; background-color:cornflowerblue; 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;

	
}

/******Define pagina Qr code inicio********************/

	#qrcode-container{
	
	border-radius:10px;  
	
	
	text-align:center; 
	align-items: center; 
	justify-content: center; 
	align-items: center;
	
	 
	flex-direction: column; 
	
	display:flex;
	
	
	background-color:#F3F4F5; 
	height:430px; 
	width:512px; 
	padding:10px; 
	
		
	}

.qrcode{

padding:10px;   
border-radius:15px; 
width: 300px; height:300px; 

background-image:url('../img/Gerador de qr code vaiconweb.PNG'); background-size:250px; background-repeat: no-repeat; background-position:center; 
background-color:#ffffff;


align-items: center; justify-content: center;   flex-direction: column; display: flex;



}

.legenda{
display:flex; text-align:center;  align-items: center;justify-content: center; align-items:center; outline:none; display:flex; 
}


.Button{
	height:40px; width:120px; background-color:#042B55; color:aliceblue;border-radius:5px;border:2px #042B55 solid;cursor:pointer; margin-top:10px;
}


 .box-retangular-texto{
    
		width: 55%;
		height:auto;
		margin:15px;
		border-radius: 5px;
		padding:5px;
		text-align:center;
		display:inline;
		
		

	
}
 .box-retangular-img{
    
		width:40%;
		height:500px;
		background-color:#FFFFFF;
		margin: 10px;
		border-radius: 5px;
		box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2);
		padding:10px;
		text-align:center;
		display:inline;

	
}

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

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




/***********Define pagina Qr code inicio****************/



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

    .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: 780px) {
      .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-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;
      }
    }

            
/************Bloco de anuncio center page****************************/
      
 /* Estilo padrão para a div .ads-center-page */
.ads-center-page {
  height: 90px;
  width: 730px;
  display: flex;
  margin: 0 auto;
  margin-top:35px;
}

/* Estilo para dispositivos maiores ou iguais a 800px */
@media only screen and (max-width: 800px) {
  .ads-center-page {
    display: none;
  }
}

/* Estilo para dispositivos menores que 800px */
.ads-center-page-cel {
  margin-bottom:10px;
  height: 100px;
  width: 300px;
  display: none;
  margin: 0 auto;
}

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

    
    
    
/********************novas div esqueda direita e processamento******************************/

 .div-container{
        height:auto;
		/*background-color:black;*/
		display:flex;
		/*align-items: center;*/
		justify-content: center;
		
}
      	@media (max-width: 900px) {
		.div-container {
		width: 100%;
		}
		}

    /*----------------------------------------------------------------*/
    	
		.div-center {
		width:50%;
		/*background-color: brown;*/
		box-shadow: 2px 3px 4px 2px rgba(12,12,12,0.2);
		border-radius:5px;
		margin:15px 5px 15px 10px;
		padding:5px;
		height:100%;
		float:left;
		display: flex;
		flex-wrap: wrap;
		
		/** centralizador**/
		align-items: center;
		justify-content: center;
		background-color:#fff;
		
		
		}
		
		@media (max-width: 900px) {
		.div-center {
		width: 100%;
		}
		}
		
		/*----------------------------------------------------------------*/
		
		
		
		/*esquerda*/
		.div-left {
		    width:20%;
		/*	background-color: #FF6600;*/
		
			
			margin:15px 10px 10px 10px; 
			padding:1px;
			
			height:auto;
			float:left;
			
			flex-wrap: wrap;
			
			/** centralizador**/
			align-items: center;
			justify-content: center;
			
			
			/** centralizador**/
			}
		
	
		
		@media only screen and (max-width: 900px) {
	      .div-left {
	        display: none;
	      }
	    }
            
    /*----------------------------------------------------------------*/
		
		
		.div-right {
		width:20%;
		/*background-color:#0066FF;*/
		margin:15px 10px 10px 10px; 
		padding:10px;
		
		height:100%;
		float:left;
		
		flex-wrap: wrap;
		
		/** centralizador**/
		align-items: center;
		justify-content: center;
		
		
		/** centralizador**/
		
		
		}
		
		@media (max-width: 900px) {
		.div-right{
		width: 100%;
		}
		
		
		}
		
		
		@media only screen and (max-width: 900px) {
		.div-right {
		display: none;
		}
		}

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

    /***box_FM ****/
						
		
		.box-fm {
		width:100%;
		height:auto;
		background-color:#FFFFFF;
		/*margin: 10px;*/
		/*margin-top:15px;*/
		/*border-radius: 1px;*/
		/*box-shadow: 2px 2px 2px 2px rgba(12,12,12,0.2);*/
		padding:10px;
		text-align:center;
        border-top: 1px solid #ccc;
        /*background: linear-gradient(white, white) padding-box, linear-gradient(to right, #347deb, #0c13e8) border-box;*/
	
		}
		
		/***box_FM ****/





/*************Mini Bloq interno ************************/

      .div-bg{
	    width:60%; 
          height:auto; 
          padding:30px; 
          line-height:35px; 
          display:block;    
          margin:auto;
          margin-top:20px;
}


		@media (max-width: 900px) {
		.div-bg{
		width:100%;
		}
		}
		
		
/*--------------------------------------------------------------------*/
		
.div-feedback{

   width:98%; height:auto; background-color:#FFFFFF; margin:auto; margin-top:10px; border-radius: 5px; box-shadow: 1px 2px 3px 2px rgba(12,12,12,0.2); padding:20px 0px 20px 0px; text-align:center; line-height:20px;

	
}




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

        .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*********************/
		














