html{
	background-color: #dfe3ee;
	font-family: helvetica, arial, sans-serif;
	line height: 1.4;
	font-size: 18px;
	}

/*formatacao CSS de cores e texto para formularios de entrada de dados, criado 2022-06-17*/

@media screen and (min-width: 300px){
	html{
		font-size: 8px
	}
}

@media screen and (min-width: 600px){
	html{
		font-size:10px
	}
}


@media screen and (min-width: 900px){
	html{
		font-size:14px
	}
}

@media screen and (min-width: 1500px){
	html{
		font-size:16px
	}
}

@media screen and (min-width: 1900px){
	html{
		font-size:22px
	}
}

@media screen and (min-width: 2400px){
	html{
		font-size:28px
	}
}


body {
	background-color: #f2f2f2; 
	padding: 0px;
	margin: 0px;
	}


#buttonholder1{
	width: 15%;
	height: 6%;
	float: left;
	background-color: #4080bf;
	text-align:center;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}


#heading{
	width: 70%;
	height: 6%;
	background-color: #4080bf;
	float: left;
	text-align:center;
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}

#bucket1{
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 30px;
	background-color: #091d34;
	opacity: 1;
	float: left;
	text-align:center;
	color: black;	
	vertical-align:middle;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box; 
	display: flex;
	}


#instructions{
	width: 100%;
	height: auto;
	margin-left: 0%;
	margin-right:0%;
	padding: 20px;
	/*background-color: #f0f0f5;*/
	background-color: default;
	float: left;	
	box-sizing: border-box;
	border-style: solid;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */	
	}


#subheading{
	width: 80%;
	height: auto;
	margin-top: 0px;
	margin-right: 10%;
	margin-left: 10%;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 4px;
	padding-top: 4px;
	/*background-color: #ff944d;*/
	background-color: white;
	float: left;
		font-size:1vw;
		line-height: 110%;
		font-family: Montserrat-SemiBold, Arial, 'sans-serif';
		color: #202020;
	text-align:left;
	box-sizing: border-box;
	border-style: solid;
	border-color: #4080bf;
	border-radius: 6px;
	border-width: 3px 3px 3px 3px; /* top, right, bottom, left */
	}



#showaudiences{
	width: 90%;
	height: auto;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 20px;
	background-color: white;
	opacity: 1;
	float: left;
	text-align:center;
	color: blue;
	vertical-align:middle;
		
	border-style: solid;
	border-color: blue;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}


#formes{
	width: 90%;
	height: auto;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 20px;
	padding: 20px;
	background-color: white;
	opacity: 1;
	float: left;
	text-align:center;
	color: grey;
	vertical-align:middle;
		
	border-style: solid;
	border-color: blue;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}


	
#formholder{
	width: 900px;
	height: auto;
	max-width: 100%;
	/*background-color: #a4a4c1;*/
	background-color: #c0c0c0;
	padding: 4px;
	margin-top: 2px;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 2px;

	
	opacity: 1;
	float: left;
	text-align:center;
	color: blue;
	vertical-align:middle;
		
	border-style: solid;
	border-color: blue;
	border-width: 0px 0px 0px 0px; /* top, right, bottom, left */
	box-sizing: border-box;
	}


#resultscreen{
	background-color: #f5f5f7; 
	width: 100%;
	height: auto;
	min-height: 400px;
	margin: 12px 20px;
	float: left;
	padding: 10px;
	margin-left: 0%;
	margin-top: 1%;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: black;
		text-align:left;
		vertical-align:middle;
	border-style: solid;
	border-radius: 6px;
	border-color: grey;
	border-width: 1px 1px 1px 1px; /*top-right-bottom-left */
	box-sizing: border-box;
	}

.tableaudience{
	width: 100%;
	background-color: #f2f2f2;
	color: #505050;
	}


#iframeresults{
	width: 100%;
	height: auto;
	min-height: 1000px;
	margin: 4px;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: black;
		text-align:left;
		vertical-align:middle;
	float: left;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: black;	
		text-align:left;
		vertical-align:middle;
	box-sizing: border-box;
	}



#textinput{
	background-color: green;
	padding: 0px 0px;
	font-size:18px;
	color:black;
		height:80%;
		width: 80%;
	border-radius: 0px;
	border: 0px solid;
	width: 0%;
	margin-left: 10px;
	margin-right: 10px;
	}

#audienceform{
	width: 900px;
	height: auto;
	max-width: 100%;
	background-color: #c0c0c0;
	padding: 12px;
	margin-top: 2px;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 2px;
	float: left;
	font-size: 0.8em;
	font-family: arial, sans-serif;
	color: #505050;
	text-align:left;
	vertical-align:middle;
	border-style: solid;
	border-radius: 6px;
	border-color: white;
	border-width: 0px 0px 0px 0px; /* 0px top, 4px right, 0px bottom and 0px left */
	box-sizing: border-box;
	}


#buttons{
	width: 100%;
	height: auto;
	background-color: #c0c0c0;
	padding: 12px;
	margin-top: 2px;
	margin-bottom: 2px;
	float: left;
	font-size: 0.8em;
	font-family: arial, sans-serif;
	color: #505050;
	text-align:left;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	box-sizing: border-box;
	}


#footer{
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	padding: 15px;
	background-color: #4080bf;
	opacity: 1;
	float: left;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;	
	box-sizing: border-box;
	}


// ********************************** NEW FORM FORMATING WITHOUT USING TABLE *************

.formbox{
	background-color: #f2f2f2;
	border-radius: 5px;
	padding: 20px;
	}

label{
	background-color: default;
	font-size: 0.9em;
	font-family: arial, sans-serif;
	color: black;
	margin-top: 8px;
	margin-bottom: 2px;
	display: block;
	padding:6px;
	display: block;
	}


/* this is the css working for new text input on form */

input[type=text], select{
	width: 100%;
	padding: 12px 20px;
	/* margin: 8px 0; */
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 8px;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: grey;
	background-color:white;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}

input[text#audience],select{
	width: 100%;
	padding: 8px 30px;
	margin: 24px 0;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: grey;
	background-color:yellow;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}

textarea#notes{
	width: 100%;
	height: 60px;
	padding: 12px 20px;
	margin 8px 0;
	background-color: #f8f8f8;
		font-size: 0.8em;
		font-family: arial, sans-serif;
		color: grey;
	border: 2px solid #ccc;
	border-radius: 4px;
	resize: none;
	box-sizing: border-box;
	}

input[type=submit]{
	width: 180px;
	display: block;
	background-color: #4CAF50;
	font-size: 1em;
	font-family: arial, sans-serif;
	color: white;
	padding: 14px 20px;
	margin: 20px 10px;
	border: none;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	}


#buttonform{
	background-color: default;
	padding: 4px;
	margin: 2px;

	}



/*  ************ BUTTONS ************************** */


#close{
	height:auto;
	width: auto;
	border-radius:3px;
	background-color: #606060;
	opacity: 1;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	font-size:1.4em;
	font-family: 'Arial' 'sans-serif';
	color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 2px solid white;
	border-radius: 3px;
	margin-top: 0%;
	box-sizing: border-box;
	}

#close:hover{
	background-color: #18da8d;
	color: black;
	}

#close:active{
	border: 1px solid black;
	background-color:grey;
	color: white;
	}



#send{
	height:60%;
	width: auto;
	border-radius:3px;
	background-color: default;
	padding: 10px;
	opacity: 1;
	font-size:1.3em;
	font-family: 'Arial' 'sans-serif';
	color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	border: 1px solid #00bfff;
	margin-top: 0%;
	}

#send:hover{
	background-color: #18da8d;
	color: black;
	}

#send:active{
	border: 1px solid black;
	background-color:grey;
	color: white;
	} 



#new{
	width: auto;
	display: block;
	background-color: #a6ff4d;
	font-size: 1em;
	font-family: arial, sans-serif;
	color: black;
	padding: 10px 20px;
	margin: 4px 4px;
		display: flex;
		justify-content: center;
		align-items: center;
	border: none;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
	display: block;
	}


#new:hover{
	background-color: #18da8d;
	color: black;
	}



/* for td for long descriptions */
#smallfont{
	text-align: left;
	font-size: 0.7em;
	max-width: 330px;
	}

/* for changing color of rows over background*/
#stripes{
	background-color: white;
	}


/* ********************  BUTTON FORMATING ***************** */

/* see also Submit styling in style on html page */

#buttonedit{
	height:30px;
	width: 80px;
	/*background-color: #DFE3E5;*/
	background-color: #a6ff4d;
	font-size:0.9em;
	font-family: 'Arial' 'sans-serif';
	text-decoration: none;
	color: black;
	border: 0px solid grey;
	border-radius: 2px;
	padding: 1px;
	/* padding: 10px 10px; */
        /*margin: 10px 10px;*/
	margin: auto;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	cursor: pointer;
	}

#buttonedit:hover{
	background-color: #18da8d;
	color: black;
	}

#buttonedit:active{
	border: 1px solid black;
	background-color:grey;
	color: white;
	}



#buttondelete{
	height:30px;
	width: 80px;
	background-color: #505050;
	font-size:0.9em;
	font-family: 'Arial' 'sans-serif';
	text-decoration: none;
	color: white;
	border: 0px solid #ff471a;
	border-radius: 2px;
	padding: 1px;
	/* padding: 10px 10px; */
        /*margin: 10px 10px;*/
	margin: auto;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	cursor: pointer;
	}

#buttondelete:hover{
	background-color: black;
	color: white;
	}

#buttondelete:active{
	border: 1px solid red;
	background-color:grey;
	color: white;
	}


#buttonatualizar{
	height:40px;
	width: auto;
	background-color: #3385ff;
	font-size:1em;
	font-family: 'Arial' 'sans-serif';
	text-decoration: none;
	color: white;
	border: 0px solid grey;
	border-radius: 4px;
	padding: 4px;
	padding-left: 12px;
	padding-right: 12px;
	/* padding: 10px 10px; */
        /*margin: 10px 10px;*/
	margin: auto;
	text-align:center;
	vertical-align:middle;
		display: flex;
		justify-content: center;
		align-items: center;
	cursor: pointer;
	}

#buttonatualizar:hover{
	background-color: #0066ff;
	color: white;
	}

#buttonatualizar:active{
	border: 1px solid black;
	background-color:grey;
	color: white;
	}



th{
	text-align: center;
	padding: 8px;
	background-color: default;
	}


td{
	width: auto;
	height: 1em;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
	text-align: left;
	font-size: 0.9em;
	font-family: Montserrat, Helvetica, sans-serif;
	/*line-height: 1.0em;*/
	color: #505050;
	/*background-color:#c0c0c0;*/
	}


tr{
	padding: 0px;
	line-height: 1em;
	}


#centered{
	text-align: center;
	}


#thcentered{
	text-align: center;
	}

#urgent{
	text-align: center;
	background-color:#ff5c33;
	color: white;
	}




/* **************** TABLE FORMATING BORDER ********************* */


/*
table, th, td {
	width: auto:
	margin-left: auto;
	margin-right: auto;
	border: 0px solid black;
	border-spacing: 10px;
	}
*/


/*
#tdlist {
	border: 0px solid black;
	border-radius: 6px;
	vertical-align: bottom;
	height: 30px;
	padding: 6px;
	text-align: center;
	}
*/