/**
 * Esta folha de estilos precede as demais folhas específicas de cada página (style-pagina-inicial, style-pagina-serie, etc).
 * Qualquer configuração inserida das folhas de estilos das páginas, devem sobreescrever esta folha.
 * Portanto, esta folha deve ser usada para CSS padrões, que devam ser aplicados para o sistema como um todo.
 */


/*****                      *****
 ***** estilos mobile first *****
 *****                      *****/

/** elementos em geral  **/
body {
	margin: 0;
	padding: 0;
}

a[target="_blank"]::after {
	content: " \f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.social-media a[target="_blank"]::after { /* Exception */
	content: "";
}

select {
	/* Remove native chevron and style */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	 -o-appearance: none;
		appearance: none;
}
.select-wrapper {
	position: relative;
	display: inline-flex;
	width: 100%;
}
.select-wrapper::after {
	content: "\f0d7"; /* caret-down */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 20px;

  	position: absolute;
  	top: 10px;
	right: 20px;

  	color: #434B67;
  	pointer-events: none;
}

.desktop-only {
	display: none;
}
.mobile-only {
	display: initial;
}

/** elementos específicos **/
.barra-menu {
	list-style: none;
	padding: 0;
	/* text-align: right; */
}
.busca__label {
	color: #726263;
	font-size: x-large;
}
.busca__input{
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 5px 25px 5px 5px;
    /* padding: 0; */
    /* width: 100%; */
    width: calc(100% - 35px);
}

.cabecalho {
	display: flex;
	flex-direction: column;
    align-items: center;
    margin: 35px auto;
}
.cabecalho .cabecalho__logo,
.cabecalho .cabecalho__texto {
    flex-basis: 35%;
	flex-shrink: 0;
}
.cabecalho__logo {
    max-width: 100%;
    min-width: 315px;
	height: auto;
}
.cabecalho__logo__branco {
	display: none;
}
.contrast .cabecalho__logo__branco {
	display: initial;
}
.contrast .cabecalho__logo__colorido {
	display: none;
}

.cabecalho__texto {
	margin-left: 35px;
	margin-right: 35px;
	text-align: center;
    color: #7A6A6A;
    font-size: 1.3em;
	line-height: 1.8em;
}
.cabecalho app-pesquisa {
	width: calc(100% - 30px);
	margin-left: 15px;
	margin-right: 15px;
}

.menu {
	cursor: pointer;
}
.menu__submenu.open {
	display: block;
}

.menu-acessibilidade {
	display: flex;
	justify-content: flex-end;

	background-color: #E6E3E3;
	list-style: none;
	padding: 12px 15px;
	margin: 0;
	border-bottom: 1px solid #726263;
}
.menu-acessibilidade ul {
	padding-left: 0;
}
.menu-acessibilidade__item {
	display: inline-block;
	margin-left: 15px;
	cursor: pointer;
	border: none;
	background-color: transparent;

	text-transform: uppercase;
	text-align: left;
	font-size: 0.8em;
	font-family: OpenSansBold, Helvetica, Arial, sans-serif;
	color: #716262;
}

.content_all{
    min-height: calc(100vh - 189px);
}



/*****                 *****
 ***** estilos desktop *****
 *****                 *****/

@media (min-width: 720px) {
	.barra-menu,
	.cabecalho
	/*.rodape*/
	{
		max-width: 1366px;
		margin-left: auto;
		margin-right: auto;
	}

	.cabecalho {
		flex-direction: row;
        flex-wrap: wrap;
		justify-content: space-between;
	}
	.cabecalho__logo {
		margin-left: 35px;
	}
	.cabecalho__texto {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}

	.menu-acessibilidade {
		justify-content: space-between;
		padding: 12px 40px;
	}

	.desktop-only {
		display: initial;
	}
	.mobile-only {
		display: none;
	}
}



/*****                             *****
 ***** estilos para acessibilidade *****
 *****                             *****/

/** containers em geral **/
.contrast,
.contrast nav,
.contrast div,
.contrast ul,
.contrast li,
.contrast ol,
.contrast th,
.contrast td,
.contrast dialog,
.contrast header,
.contrast footer,
.contrast section,
.contrast main,
.contrast aside,
.contrast article {
	background: black !important;
	color: white !important;
}

/** textos em geral **/
.contrast h1,
.contrast h2,
.contrast h3,
.contrast h4,
.contrast h5,
.contrast h6,
.contrast p,
.contrast label,
.contrast strong,
.contrast small,
.contrast em,
.contrast cite,
.contrast q,
.contrast i,
.contrast b,
.contrast u,
.contrast span {
	color: white !important;
}

/** links em geral **/
.contrast a {
	color: yellow !important;
}
.contrast button,
.contrast button > span,
.contrast input[type=button],
.contrast input[type=reset],
.contrast input[type=submit] {
	background: black !important;
	color: yellow !important;
	border: none !important;
}

/** imagens em geral **/
.contrast img.on-contrast-force-gray {
	filter: grayscale(100%) contrast(120%) !important;
}
.contrast img.on-contrast-force-white {
	filter: brightness(0) invert(1) !important;
}

/** inputs em geral **/
.contrast input[type=text],
.contrast input[type=password],
.contrast input[type=url],
.contrast input[type=search],
.contrast input[type=email],
.contrast input[type=tel],
.contrast input[type=date],
.contrast input[type=month],
.contrast input[type=week],
.contrast input[type=datetime],
.contrast input[type=datetime-local],
.contrast input[type=number],
.contrast textarea,
.contrast select {
	background: black !important;
	border: 1px solid white !important;
	color: white !important;
}

/** componentes do app **/
.contrast .menu__submenu {
	border: 1px solid white !important;
}
.contrast .menu__label .fas {
	color: yellow !important
}

.contrast .titulos li {
	color: yellow !important;
}