@media screen and (min-width:550px){

html, body{font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 16px}
body{background-color: #ccc}
header{width:100%; height: 70px; position: fixed; top: 0; left: 0; right: 0; background-color:darkolivegreen}
.corpo{margin:0 auto; overflow: hidden; width: 90%; max-width: 1300px; height: auto;}
#logo{margin:0; width:175px; height: 70px; position: relative; float: left; display: flex; align-items: center;}
#logo img{height: 70%; width: auto; margin-right: 10px}
#logo #fontLogo{font-size: 1.2rem; color: #eee;}

#backArrow{margin:0; width:50px; height: 70px; position: relative; float: left; display: flex; align-items: center; cursor: pointer}
#backArrow img{width: 100%; height: auto}
#backArrow img:hover{opacity: 0.7}

#wrapper{margin:0; width:100%; height:calc(100vh - 70px); margin-top: 70px; position: relative; float: left; background-color: #ccc; display: flex; align-items: center; justify-content:center}
#wrapper #textInicial{margin:0 auto; width:60%; height: auto; position: relative; font-size: clamp(2.5rem, 6vw, 7rem); color: #666; text-align: center}
#wrapper #textInicial #boxMoney{margin:0; width:100%; height: auto; position: relative; float: left; text-align: center}
#wrapper #textInicial #boxMoney img{width:clamp(6rem, 10vw, 15rem); filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.4));}
.titulo{margin:0; width:100%; height: auto; position: relative; float: left; color: #666; display: grid; grid-column: span 2; margin-bottom: 40px; justify-content: center; font-size: clamp(1.5rem, 3vw, 2.5rem)}

#wrapper #textInicial .button{margin:0 auto; overflow: hidden; width:90%; height: clamp(40px, 4vw, 6rem); position: relative; margin-top: 20px; margin-bottom: 20px; font-size: clamp(1.5rem, 3vw, 5rem); background-color:darkolivegreen; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; box-shadow: 3px 4px 6px  black}
#wrapper #textInicial .button:active {box-shadow:  -3px -4px 6px black;}



#container{margin:0; width:100%; height: auto; position: relative; float: left; margin-top: 80px; background-color: #fff; border-radius: 5px; padding: 20px; box-sizing: border-box}



#navs{margin:0; width:100px; height: 70px; position: relative; float: right; text-align: center; cursor: pointer; color: #eee; display: flex; justify-content: flex-end; align-items: center;}
#navs a{text-decoration: none; color: #fff; outline:none}
#navs a:hover{color:#ccc}
#navs a img{height: 50px; width: auto}
#navs button{width:80px; height: 30px;  outline:none; border-radius: 5px}

#tituloInicial{margin:0; width:100%; height: auto; position: relative; float: left; text-align: right; color:#999; border-bottom: 3px solid #ccc; margin-bottom: 50px; font-size:clamp(1.5rem, 3vw, 2rem) }
#tituloInicial a{text-decoration: none; color:#999;}
#boxMenuInicial{margin:0; width:100%; height: auto; position: relative; float: left; display: grid; grid-template-columns: repeat(2,1fr); justify-content: space-around; gap:20px; padding: 15px; box-sizing: border-box}
.menusInicial{margin:0; width:100%; height:50px; background-color: #eee; color: #666; padding: 10px; box-sizing: border-box; font-size:clamp(1.2rem, 2vw, 1.5rem); border-radius: 5px; display: flex;  align-items: center; box-shadow: 1px 2px 3px black; cursor: pointer;}
.menusInicial img{width:clamp(1.6rem, 2vw, 2rem); height: auto; opacity: 0.5; margin-right: 5px}
.menusInicial:active{box-shadow: 0 -2px 3px black}
#pgtPendentes{margin: 0; width:100%; height: 40px; position: relative; float: left; margin-bottom: 30px; border-radius: 5px; box-shadow: 1px 2px 3px black; background: green;  color: #fff; font-size: 1.2rem; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer}
#pgtPendentes:active{box-shadow: 0 -2px 3px black}

/*ALERTAS*/
#cover{width:100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; display: none}
#msg{width:100%; max-width: 400px; height: auto; position: fixed; padding: 20px; background-color: #fff; border-radius: 5px; color:#666; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; display: none}
.fontAlerta{font-size: 1.5rem}
#msg #fechar{width: 40px; height: 40px; border-radius: 50%; background-color:red; color:#fff; position:absolute; top:0; right:0; margin-top:-50px; display: flex;justify-content: center; align-items: center; font-size: 2rem; cursor: pointer;}
#msg #fechar:hover{opacity:0.7}
#msg #span{margin:0; width:100%; height:auto; text-align: left; position: relative; float: left}
#msg input[type=tel], input[type=text], input[type=password], input[type=number]{width:100%; height:40px; border:0; border:1px solid #999; border-radius: 5px; outline: none; padding: 10px; box-sizing: border-box; color:#666; margin-top:3px; margin-bottom: 10px}
#msg .boxLabel{ margin:0; width:100%; height: auto; position: relative; float: left; margin-bottom: 20px; display: flex; justify-content: space-around }
#msg .boxLabel label{background-color: #ccc; padding: 10px; box-sizing: border-box; border-radius: 5px}
#msg textarea, select{width:100%; height:40px; border:0; border:1px solid #999; border-radius: 5px; outline: none; padding: 10px; box-sizing: border-box; color:#666; margin-top:3px; margin-bottom: 10px}
#msg #bttn{width:100%; height: 40px; border-radius:5px; background-color:darkolivegreen; color:#fff; display: flex; justify-content: center; align-items: center; box-shadow:1px 2px 3px black; cursor: pointer;}
#msg #bttn:active{box-shadow: 0 -2px 3px black}
#msg a{text-decoration: none; font-size: 1.5rem}




/*Formulário*/

.boxFormulario{margin:0; width:100%; height: auto; position: relative; float: left; display: grid; grid-template-columns: repeat(2,1fr); justify-content: space-around; gap:0 10px;}
.boxFormLogin{margin:0 auto; width:100%; max-width: 500px; height: auto; position: relative; border-radius: 5px; overflow: hidden; padding: 20px; box-sizing: border-box; background-color: #fff; box-shadow: 0px 0px 10px black}
.fontDicas{font-size: 12px; color: red}
.boxInputs{margin:0; width:100%; height:auto; position: relative; float: left;}
.boxInputs span{color:#666; font-weight: bold}
.boxInputs input[type='text'], input[type='tel'], input[type='password'], input[type='number']{width:calc(100% - 40px); height: 40px; border:none; border:1px solid #999; outline: none; color: #999; border-radius: 5px; margin-top: 3px; margin-bottom: 10px; padding: 10px; box-sizing: border-box}
.boxInputs select, textarea{width:calc(100% - 40px); height: 40px; border:none; border:1px solid #999; outline: none; color: #999; border-radius: 5px; margin-top: 3px; margin-bottom: 10px; padding: 10px; box-sizing: border-box}
	
.boxClientes{margin:0; width:100%; height: auto; position: relative; float: left; background-color: #F5F5F5; border-radius: 5px;  padding: 10px; box-sizing: border-box; display: grid; grid-template-columns:repeat(2, 1fr); justify-content: space-around; gap:10px 0}
.boxCliente{margin:0; width:100%; height: auto; position: relative; float: left; }
.boxLinks{margin:0; width:100%; height: 100%; position: relative; float: left; display: grid; align-items: center; justify-content: flex-end}
.boxLink{margin:0; width:100%; height: auto; position: relative; float: left; text-align: right; }
.boxLink a{text-decoration: none; outline:none;}
.lapis{margin:0; width: 40px; height: 40px; position: relative; float: right; font-size: 1.5rem; color: #666; display: flex; justify-content: center; align-items: center; cursor: pointer}
.inputCover{width:calc(100% - 40px); height: 50px; position: absolute; bottom: 0; left: 0}

.boxButt{margin:0 auto; width:100%; height: auto; position: relative; float: left; display: grid; grid-column: span 2}
.boxButt a{text-decoration: none; outline: none}
.botao{margin:0 auto; overflow: hidden; width:100%; height: clamp(40px, 3vw, 3.5rem); position: relative; margin-top: 20px; margin-bottom: 20px; font-size: clamp(1.2rem, 2vw, 2rem); background-color:darkolivegreen; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; box-shadow: 3px 4px 6px  black}
.botao:active {box-shadow:  -3px -4px 6px black;}
}


@media screen  and (max-width:549px){


html, body{font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 16px;}
body{background-color: #ccc}
header{width:100%; height: 60px; position: fixed; top: 0; left: 0; right: 0; background-color:darkolivegreen}
.corpo{margin:0 auto; overflow: hidden; width: 95%; height: auto;}
#logo{margin:0; width:150px; height: 60px; position: relative; float: left; display: flex; align-items: center;}
#logo img{height: 60%; width: auto; margin-right: 10px}
#logo #fontLogo{ color:#eee}
#backArrow{margin:0; width:30px; height: 60px; position: relative; float: left; display: flex; align-items: center;}
#backArrow img{width: 100%; height: auto}


#wrapper{margin:0; width:100%; height:calc(100vh - 60px); margin-top: 70px; position: relative; float: left; background-color: #ccc; display: flex; align-items: center; justify-content:center}
#wrapper #textInicial{margin:0 auto; width:250px; height: auto; position: relative; font-size: clamp(2rem, 5vw, 7rem); color: #666; text-align: center}
#wrapper #textInicial #boxMoney{margin:0; width:100%; height: auto; position: relative; float: left; text-align: center}
#wrapper #textInicial #boxMoney img{width:clamp(6rem, 10vw, 15rem); filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.4));}
.titulo{margin:0; width:100%; height: auto; position: relative; float: left; color: #666; display: grid; grid-column: span 2; margin-bottom: 40px; justify-content: center; font-size: clamp(1.5rem, 3vw, 2.5rem)}
#wrapper #textInicial .button{margin:0 auto; overflow: hidden; width:90%; height: clamp(40px, 4vw, 6rem); position: relative; margin-top: 20px; margin-bottom: 20px; font-size: clamp(1.2rem, 3vw, 5rem); background-color:darkolivegreen; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; box-shadow: 3px 4px 6px  black}
#wrapper #textInicial .button:active {box-shadow:  -3px -4px 6px black;}

#container{margin:0; width:100%; height: auto; position: relative; float: left; margin-top: 70px; background-color: #fff; border-radius: 5px; padding: 20px; box-sizing: border-box;}



#navs{margin:0; width:100px; height: 60px; position: relative; float: right; text-align: center; color: #eee; display: flex; justify-content: flex-end; align-items: center;}
#navs a{text-decoration: none; color: #fff; outline:none}
#navs img{height: 40px; width:auto;}
#navs button{width:70px; height: 30px;  outline:none; border-radius: 5px;}

#tituloInicial{margin:0; width:100%; height: auto; position: relative; float: left; text-align: right; color:#999; border-bottom: 3px solid #ccc; margin-bottom: 50px; font-size:clamp(1.2rem, 2vw, 1.5rem) }
#tituloInicial a{text-decoration: none; color:#999;}
#boxMenuInicial{margin:0; width:100%; height: auto; position: relative; float: left;}
.menusInicial{margin:0; width:100%; height:50px; background-color: #eee; color: #666; padding: 10px; box-sizing: border-box; font-size:clamp(1.2rem, 2vw, 1.5rem); border-radius: 5px; display: flex;  align-items: center; box-shadow: 1px 2px 3px black; margin-bottom: 15px}
.menusInicial img{width:clamp(1.6rem, 2vw, 2rem); height: auto; opacity: 0.5; margin-right: 5px}
.menusInicial:active{box-shadow: 0 -2px 3px black}
#pgtPendentes{margin: 0; width:100%; height: 40px; position: relative; float: left; margin-bottom: 30px; border-radius: 5px; box-shadow: 1px 2px 3px black; background: green;  color: #fff; font-size: 1rem; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
#pgtPendentes:active{box-shadow: 0 -2px 3px black}

/*ALERTAS*/
#cover{width:100%; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; display: none}
#msg{width:90%; height: auto; position: fixed; padding: 20px; box-sizing: border-box; background-color: #fff; border-radius: 5px; color:#666; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; display: none}
.fontAlerta{font-size: 1.2rem}
#msg #fechar{width: 30px; height: 30px; border-radius: 50%; background-color:red; color:#fff; position:absolute; top:0; right:0; margin-top:-40px; display: flex;justify-content: center; align-items: center; font-size: 1.5rem;}
#msg #span{margin:0; width:100%; height:auto; text-align: left; position: relative; float: left}
#msg input[type=tel], input[type=text], input[type=password], input[type=number]{width:100%; height:40px; border:0; border:1px solid #999; border-radius: 5px; outline: none; padding: 10px; box-sizing: border-box; color:#666; margin-top:3px; margin-bottom: 10px}
#msg .boxLabel{ margin:0; width:100%; height: auto; position: relative; float: left; margin-bottom: 20px; display: flex; justify-content: space-around }
#msg .boxLabel label{background-color: #ccc; padding: 10px; box-sizing: border-box; border-radius: 5px}
#msg textarea, select{width:100%; height:40px; border:0; border:1px solid #999; border-radius: 5px; outline: none; padding: 10px; box-sizing: border-box; color:#666; margin-top:3px; margin-bottom: 10px}
#msg #bttn{width:100%; height: 40px; border-radius:5px; background-color:darkolivegreen; color:#fff; display: flex; justify-content: center; align-items: center; box-shadow:1px 2px 3px black; }
#msg #bttn:active{box-shadow: 0 -2px 3px black}
#msg a{text-decoration: none; font-size: 1.5rem}




/*Formulário*/

.boxFormulario{margin:0; width:100%; height: auto; position: relative; float: left;}
.boxFormLogin{margin:0 auto; width:100%; height: auto; position: relative;  border-radius: 5px; overflow: hidden; padding: 20px; box-sizing: border-box; background-color: #fff;}
.fontDicas{font-size: 10px; color: red}

	
.boxInputs{margin:0; width:100%; height:auto; position: relative; float: left;}
.boxInputs span{color:#666; font-weight: bold}
.boxInputs input[type='text'], input[type='tel'], input[type='password'], input[type='number']{width:calc(100% - 40px); height: 40px; border:none; border:1px solid #999; outline: none; color: #999; border-radius: 5px; margin-top: 3px; margin-bottom: 10px; padding: 10px; box-sizing: border-box}
.boxInputs select, textarea{width:calc(100% - 40px); height: 40px; border:none; border:1px solid #999; outline: none; color: #999; border-radius: 5px; margin-top: 3px; margin-bottom: 10px; padding: 10px; box-sizing: border-box}
	
.boxClientes{margin:0; width:100%; height: auto; position: relative; float: left; background-color: #F5F5F5; border-radius: 5px;  padding: 10px; box-sizing: border-box; margin-bottom: 10px}
.boxCliente{margin:0; width:100%; height: auto; position: relative; float: left; }
.boxLinks{margin:0; width:100%; height: 100%; position: relative; float: left; display: grid; align-items: center; justify-content: flex-end; margin-top: 10px}
.boxLink{margin:0; width:100%; height: auto; position: relative; float: left; text-align: right; }
.boxLink a{text-decoration: none; outline:none;}
.lapis{margin:0; width: 40px; height: 40px; position: relative; float: right; font-size: 1.5rem; color: #666; display: flex; justify-content: center; align-items: center;}
.inputCover{width:calc(100% - 40px); height: 50px; position: absolute; bottom: 0; left: 0}

.boxButt{margin:0 auto; width:100%; height: auto; position: relative; float: left; display: grid; grid-column: span 2}
.boxButt a{text-decoration: none; outline: none}
.botao{margin:0 auto; overflow: hidden; width:100%; height: clamp(40px, 3vw, 3.5rem); position: relative; margin-top: 20px; margin-bottom: 20px; font-size: clamp(1.2rem, 2vw, 2rem); background-color:darkolivegreen; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 5px; box-shadow: 3px 4px 6px  black}
.botao:active {box-shadow:  -3px -4px 6px black;}
}