@charset "utf-8";

:root { 

	--red: #FF5869;
	--green: #3CBDC0;

	--light-green: #1FCC1f;
	--light-red: #CC1F47;

	--dark-blue:#2A3163;
	--light-blue:#02B9E3;
	
	--cinza: #B2B4B2;

	box-sizing: border-box;	
/*
	--branco: rgb(255, 255, 255);
	--branco-10: rgb(255, 255, 255, 0.1);
	--branco-sujo:#f6f6f6;
	--vermelho:rgb(231, 76,60);
	--vermelho-claro:rgb(245, 183, 177);
*/

}

 
*, *::before, *::after, *::marker { box-sizing: inherit; margin: 0; padding: 0px;  border:0;  }

a {outline:none;} /* Reset link styles */


.a_page { text-decoration: none; color: var(--light-blue);}
.a_page:visited { text-decoration: none; color: var(--light-blue);}


html, body {  height: 100%;	padding:0;    }

body {
		/*background-color:#F7F7F7;*/
	background:#FFF;
	/*background:url(bg.jpg) top no-repeat fixed #000;
	background-size:100%; width:100%; height:100%; */
	color:var(--cinza);
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-family: "DM Sans", sans-serif;
	font-size:15px; letter-spacing:1px;
	overflow-y: scroll;
	/* overflow:hidden; => Remove scroll */


}


.txt-l { font-size: 20px; }
.txt-xl { font-size: 30px; }

.txt-xl { font-size: 30px; }
.txt-l  { font-size: 20px; }
.txt-m  { font-size:15px; }
.txt-s { }


.txt-white { color:white;}
.txt-red { color:var(--red)}
.txt-green { color:var(--green);}
.txt-light-red { color:var(--light-red)}
.txt-light-green { color:var(--light-green);}

.bg-white { background-color:white;}
.bg-red { background-color:var(--red)}
.bg-green { background-color:var(--green);}

.bg-amarelo { background-color: darkgoldenrod;}



.cl-title-container {
	background-color: var(--red);
	color: white;
	padding: 5vh 5vw;
}

.cl-title {
	color: white;
	font-size: 30px;
	text-transform: uppercase;
}



.cl-filter-container {
	background-color: var(--green);
	font-size: 20px;
	color: #FFF;
	padding: 5vh 5vw;
	transition: transform linear 1s;
}

.cl-calls-container {
	padding: 5vh 5vw;
	margin-bottom: 20px;
}



.cl-call-container, .cl-topic-container {
	/*padding: 20px;*/
	margin-bottom: 20px;
}
.cl-topic-container {	border: 2px solid var(--green); }

.cl-call-header  {	background-color: var(--green);	 padding: 20px; color:#FFF;	 font-weight: bold;}
.cl-topic-header {	background-color: #FFF; 		padding: 20px; color:var(--red); font-weight: bold;}

.cl-call-content, .cl-topic-content { background-color: #FFF; display: none; transition: transform linear 1s;}
.cl-call-content { padding-top:20px;}
.cl-topic-content {padding:0 20px 20px 20px; }


.cl-topic-content p { margin-bottom: 10px; }

.cl-topic-content h3 { color: var(--dark-blue);}


/* BOXES   ----------------------------------------- */
.box-min-200px-gap {
    display: grid;
    grid-gap:  10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box-min-300px-gap {
    display: grid;
    grid-gap:  10px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.box-min-400px-gap {
    display: grid;
    grid-gap:  10px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}


/* FORM  -------------------------------------*/
.menu-form {
	background-color: var(--green);
	padding-right: 5vw;
	display: none;
}
.menu-form .btn { 
	display: block; 
	margin-right: 0;
	margin-left:auto;
	width: 50px; height: 60px; padding: 0px;
	color: #FFF; font-size: 36px; 
	cursor: pointer;  
	background-color: var(--green);
}

@media screen and (max-width: 800px) {  
	.menu-form { display: block;}
	.cl-filter-container {display: none;}


	body {	font-size:14px; }

	.txt-xl { font-size: 22px; }
	.txt-l  { font-size: 15px; }


 }

form { display:block; margin:0; 	}
	
	form input[type=text], input[type=textarea], select, label, input[type=submit], input[type=button] {
		
		box-sizing: border-box;
		padding: 10px 12px;
		margin: 8px 0;
		border-radius: 4px;
		font-size: 14px;
		width:100%;
	}
	
	form input[type=text], select {
		display: inline-block;
		box-sizing: border-box;
		background:#fff; color:#666;
		font-size: 14px;
		width:100%;

	}
	form input[type=text]:disabled, select:disabled, select option[disabled] { color:#CCC; }
	
	form input[type="checkbox"] {
		width: 30px;
		height: 30px;
		accent-color: #FFF;
	  }
	  
	
 	form label { color:#FFF; 	font-size: 20px; }
	/*
	form input[type=submit], input[type=button] {
		color: #fff;
		border: none;
		cursor: pointer;
	}
	*/
	@media screen and (max-width: 800px) {  
		form input[type="checkbox"] {
			width: 20px;
			height: 20px;
		  }
	
	 }
	
	@media screen and (max-width: 445px) {  /* CORRECT FORM INPUT WIDTH ON MOBILE */
		form input[type=text], input[type=textarea], select, input[type=submit], input[type=button] {
			width: 90vw;
		}
	 }