@charset "iso-8859-1";
/* CSS Document */

/* cores principais: 
topo:  #115E74
titulos:  #3D9AA8*/


/* -------------------- Style de Textos -------------------- */
@font-face { /* link para a fonte */
    font-family: rubik;
    src: url(font/Rubik-Regular.ttf);
}
table i {
	color:white;
	}

* { /* regra para todos os tipos de texto - h1| h2| h3....*/
    font-family: rubik; /* definir fonte*/
	color: #303030; /* definir cor base*/
}

.utilizador p { color:#3D9AA8;
}
.utilizador b { color:#115E74;
}

td h4{
	font-size:12px;
}

input[type="text"]
{
    font-size:14px;
}


u {
	color:#3D9AA8;
	}
	
.botao2 u {
	color:#FFF;
	}
	
p {
	font-size:13px;
	line-height:1.7;
}

h1{
	color:#3D9AA8;
	text-align: center;
	
}

h2{
	color:#fff;	
}

h3{
	color:#115E74;	
}

h4{
	color:#3D9AA8;	
}


body, html {
  height: 100%;
  	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
 }

/* -------------------- Elementos do topo - banner -------------------- */

.moradaaep{
	margin: 1px auto;
  	width: 60%;
	position: sticky;
    text-align: center;
	}
	
	
.moradaaep p{
color: #3D9AA8;
	}
	
.moradaaep a{
color:  #115E74;
	}

.topo{
	background-color:#115E74;
	width: 100%;
	height: auto;
	display: table;
}

#logo{ /* logotipo AEP IMAGEM*/
	padding: 1% 4%;
	width: 8%;
}

#diag{ /* Auto - diagonóstico IMAGEM*/
	width: 13%;
	padding:1% 4%;
	float: right;
	right: 5px;
	margin: 1.3% auto;
}

.topo nav{ /* menu PRINCIPAL*/
	float:right;
	padding:1% 4%;
	margin: 2.2% auto;
}

.topo nav a{ /* menu PRINCIPAL texto*/
	text-decoration:none;
	padding-left:9px;
	color: white;
}

.topo nav a:hover{/* menu texto HOVER*/
	color: #3D9AA8;
}

/* -------------------- Elementos do Body ------------------- */



.container{ /* DIV PRINCIPAL DO BODY - no caso da página "PAGES" é onde o formulário se insere */
	width: 60%;
	margin: 1rem auto 4rem auto;
	position: sticky;
}


.utilizador{
background-color: #EEEEEE;
margin-left: 4rem;
padding-top: 1px;
}

.autodiag{
margin: 0 auto;
padding-bottom: 1rem; 
background-color: #EEEEEE; 
background: cover;
}

section{
padding-bottom: 10px; 
margin: 0 auto; 
display: table;
}


.segmenu li {
	display:inline-block;
	text-align: center;
	vertical-align: text-top;
	font-size:14px;
}

.segmenu a{ /* Menu - Página "Pages"*/
	text-decoration: none;
	padding:0 7px;
	color: #115E74;
}

.segmenu a:hover{
	color: #3D9AA8;
}

.sema{ /* espaçamento dos semaforos */
	padding-top: 0.8rem;	
}

.login input{ /* Página "LOGIN" -  formulário de inicio de sessão*/
    width: 39rem;
    padding: 0.1rem;
    margin: 0.5rem 0 0 0.5rem;
    box-sizing: border-box;
}


.login{
	margin: 1px auto;
}


.resultado{ /* Tabela de Resultados */
	width: 100%;
	margin: 1rem auto 5rem auto;
	padding: 2rem 0 7rem 0;
	background-color: #115E74;
	text-align: center;
	height: auto;
}


.tabelaper{ /*tabela da página "PAGES" - forma de aparecer - alinhamento*/
	display:table-row-group;
}

.resultado table{
width: 90%;
margin: 3rem auto 0;
text-align: left;
}

.resultado td{ /*espaçamento das colunas da tabela*/
	padding:0.5em 0.5rem;

}

.resultado p{
	color: white;

}

.numper{
	background-image: url(images/oval.png); /* circulo da percentagem - PAGINA "PAGES"*/
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: contain;
}

.form-texto{ /* alinhar texto das páginas REGISTO.html  | RECUPERAR.HTML ao centro*/
	text-align: center;
}

.td-nome p{ /* formulario pagina REGISTO.html - titulos*/
	color: white;
}

.td-nome{
	background-color:#115E74;
	padding: 0 1rem;
	}
	
.n-password{ /* Pagina REGISTO - password - mensagem de erro oculta até que o erro seja sinalizado*/
	display:none;
	}
	
.n-confirmado{ /* Pagina REGISTO - email - mensagem de erro oculta até que o erro seja sinalizado*/
	display:none;
	}
	
/* ------------- BOTOES ----------- */


.btn{ /* div de botoes - Body*/
	display: flex;	
	margin: auto;
	justify-content: center;
}

.btn a{ /* div de botoes/links - espaçamento dos links - Body*/
	padding:0 2rem;
}


button{ /* style dos botoes*/
	color: #04A4B7;
    background-color: white;
	width: 40%;
    border: 2px solid #04A4B7;
	margin: 1px auto;
	padding: 1em 2em;
	border-radius: 30px;
	max-width: 250px;
	min-width: 200px;

}

button:hover{ /* style dos botoes com hover*/
    border: 2px solid #04A4B7;
	margin: 1px auto;
	cursor: pointer;
	color: #fff;
	background-image: linear-gradient(to right,#04A4B7, #8AD1DB);
}
button:active{ /* style dos botoes quando ativos*/
    border: 2px solid #04A4B7;
	margin: 1px auto;
	cursor: pointer;
	color: #fff;
	background-image: linear-gradient(to right,#04A4B7, #8AD1DB);
}
.botao2{ /* Botão azul escuro - página login e pages*/
	color: #fff;
    background-color: #115E74; 
	border: 2px solid #115E74;
}


td button{ /*botao página "PAGES" zona dos resultados - alinhar á direita*/
	float: right;
	
}
/* -------------------- Style de todos os elementos do footer -------------------- */

footer{	
	background-color: white;
	bottom:0;
	width:100%;	
	position: fixed;
}


.linha-footer{ /* linha*/
	border: none;
	height: 2px;
	color: blue;
	background: linear-gradient(to right,#04A4B7, #8AD1DB);
	width: 80%;	
	margin: 1px auto;
	display: block;

}

#confidenciados{ /* imagem footer*/
	margin: 1px auto;
	display: block;
	width: 50%;
}


/* RESPONSIVO */


@media screen and (min-device-width: 701px) and (max-device-width: 1020px) {
	
.container{ /* DIV PRINCIPAL DO BODY - no caso da página "PAGES" é onde o formulário se insere */
	width: 75%;
}
#logo{ /* logotipo AEP IMAGEM*/
	padding: 1% 4%;
	width: 13%;
}

#diag{ /* Auto - diagonóstico IMAGEM*/
	width: 25%;
	margin: 1.8% auto;
}
	
	#confidenciados{ /* imagem footer*/
	margin: 1px auto;
	width: 85%;
}
	
button{ /* style dos botoes*/
	width: 40%;
	margin: 1px auto;
	border-radius: 30px;
	font-size: 15px;
}
	
	p {
	font-size:18px;
	line-height:1.7;
}
	
	.resultado table{
	overflow-x:auto;
	width: 90%;
	}
	
	
	table p{
	font-size:14px;
	
	}
	
	table tr{
	vertical-align: text-top;
	}
	
}


@media screen and (min-device-width: 321px) and (max-device-width: 700px) {
	
.container{ /* DIV PRINCIPAL DO BODY - no caso da página "PAGES" é onde o formulário se insere */
	width: 80%;
	min-height: 500px;
	padding-bottom: 5rem;
}
	

#logo{ /* logotipo AEP IMAGEM*/
	padding: 1% 4%;
	width: 13%;
}

#diag{ /* Auto - diagonóstico IMAGEM*/
	width: 25%;
	margin: 1.8% auto;
}
	
#confidenciados{ /* imagem footer*/
	margin: 1px auto;
	width: 85%;
}
	
	
button{ /* style dos botoes*/
	width: 45%;
	margin: 1px auto;
	border-radius: 30px;
	max-width: 250px;
	min-width: 200px;

}
	
p {
	font-size:18px;
	line-height:1.7;
}
	
	.resultado table{
	overflow-x:auto;
	width: 90%;
	}
	
	
	table p{
	font-size:14px;
	
	}
	
	table tr{
	vertical-align: text-top;
	}
	
	
}


@media screen and (max-device-width: 320px) {	
	
.container{ /* DIV PRINCIPAL DO BODY - no caso da página "PAGES" é onde o formulário se insere */
	width: 70%;
	min-height: 500px;
	padding-bottom: 10rem;
}
	

#logo{ /* logotipo AEP IMAGEM*/
	padding: 1% 4%;
	width: 13%;
}

#diag{ /* Auto - diagonóstico IMAGEM*/
	width: 25%;
	margin: 1.8% auto;
}
	
#confidenciados{ /* imagem footer*/
	margin: 1px auto;
	width: 85%;
}
	
	
button{ /* style dos botoes*/ 
	margin: 1px auto;
	border-radius: 45px;
	max-width: 300px;
	font-size: 22px;
	}
	
p {
	font-size:19px;
	line-height:1.7;
}
	.resultado table{
	width: 90%;
	overflow-x:auto;
	}
	
	
	table p{
		font-size:13px;
	
	}
	
	table tr{
		vertical-align: text-top;
	}
	
}