/* uteis */
$xsmall: 360px;
$small: 780px;
$medium: 980px;
$large: 1200px;

.aui {
	/* container para o efeito de cor de fundo */
	.cn-cmo-composicao-container {
	    width: 100%;
    	background-color: #F1F1F1;
    	@media screen and (max-width: 767px) {
		}
		@media screen and (min-width: 768px) and (max-width: 979px) {
			margin-left: calc((724px - 100vw) / 2);
    		padding: 10px calc((100vw - 724px) / 2);
		}
    	@media screen and (min-width: $medium) {
			margin-left: calc((940px - 100vw) / 2);
    		padding: 10px calc((100vw - 940px) / 2);
		}
	   	@media screen and (min-width: $large) {
			margin-left: calc((1170px - 100vw) / 2);
    		padding: 10px calc((100vw - 1170px) / 2);
		}
    }

	a.cn-cmo-composicao--link {
		color: #333;
		&:focus,&:hover {
			color: #111;
		}
	}

    /* form de escolha do ano */
	.cn-cmo-composicao-form-ano {
		margin: 10px 2px;
	}

	/* botões de navegação */
	ul.nav-pills.cn-cmo-composicao-navegacao {
		display: flex;
		justify-content: space-around;
		flex-flow: column nowrap;
		@media screen and (min-width: $medium) {
			flex-flow: row nowrap;
		}
		@media screen and (min-width: $small) {
			flex-flow: row wrap;
		}
		> li {
			flex-grow: 1;
			flex-flow: column nowrap;
			@media screen and (min-width: $medium) {
				margin-left: 73px;
			}
			&:first-child {
				margin-left: 0px;
			}
			>a {
				color: white;
				background-color: #6B8AA0;
				text-align: center;
				border-radius: 0;
				line-height: 27px;
				&:focus,&:hover {
					background-color: #888888;
				}
			}
			&.active {
				>a {
					background-color: #1F1AFF;
					&:focus,&:hover {
						background-color: #1F1AFF;
					}
				}
			}
		}
	}
	
	/* quadro de composicao */
	.cn-cmo-quadro-composicao {
		padding: 10px;
		background-color: white;
		border: 1px solid #707070;
	}
	.cn-cmo-quadro-composicao--print {
	}

	/* lista de membros */
	.cn-cmo-lista-membros {
		margin: 36px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: stretch;
		>.cn-cmo-membro {
			align-self: flex-start;
		}
		&.cn-cmo-lista-membros--comite {
			margin: 10px 0;
		}
	}
	.cn-cmo-lista-membros--lideres {
		justify-content: flex-start;
	}

	/* membro da comissao */
	.cn-cmo-membro {
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		margin: 5px 20px 15px 20px;
		&.cn-cmo-membro--lider {
			margin: 5px 15px 15px 15px;
		}
		width: 112px;
		page-break-inside:avoid;
		.cn-cmo-membro__titulo {
			font-weight: bold;
			font-size: 23px;
			line-height: 30px;
		}
		.cn-cmo-membro__foto {
			width: 90px;
			margin: 10px;
		}
		.cn-cmo-membro__barra-links {
			display: flex;
			justify-content: space-evenly;
			width: 110px;
			@media print {
				display: none !important;
			}
		}
		a {
			color: #333333;
		}
	}

	.cn-cmo-membro.cn-cmo-membro--destaque {
		width: 245px;
	}

	/* filtro de casa */
	.cn-cmo-membros-filtro-casa {
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		@media print {
			display: none !important;
		}
		.cn-cmo-membros-filtro-casa__filtro-sf {
		    background-color: #00afed;
		    padding: 2px 10px;
		    color: white;
		}
		.cn-cmo-membros-filtro-casa__filtro-cd {
		    background-color: #4db848;
		    padding: 2px 10px;
		    color: white;
		}
		form {
			input[type='checkbox'] {
				margin-bottom: 5px;
			}
		}
	}

	/* bloco de membros da comissão */
	.cn-cmo-bloco {
		page-break-inside:avoid;
		padding: 5px 20px;
	}
	.cn-cmo-lista-blocos-comite {
	    display: flex;
	    align-items: start;
	    justify-content: center;
	    flex-wrap: wrap;
	}
	.cn-cmo-bloco--comite {
		max-width: 45%;
		box-sizing: border-box;
		@media screen and (max-width: $small) {
			max-width: 100%;
		}
		&.cn-cmo-bloco--comite--print {
			width: 48%;
			max-width: 48%
		}
	} 
	.cn-cmo-bloco--lideranca {
		min-width: 33%;
		display: inline-block;
		box-sizing: border-box;
		@media screen and (max-width: $medium) {
			width: 100%;
		}
	}
	.cn-cmo-bloco__titulo {
		text-align: center;
		border: thin solid #F1F1F1;
	}
	.cn-cmo-bloco--comite {
		.cn-cmo-bloco__titulo {
			font-size: 1.5em;
			line-height: 1.5em;
			padding: 5px 20px;
		}
	}
	.cn-cmo-bloco--cn .cn-cmo-bloco__titulo {
		border-color: #304f9f;
	}
	.cn-cmo-bloco--sf .cn-cmo-bloco__titulo {
		border-color: #00AAFC;
	}
	.cn-cmo-bloco--cd  .cn-cmo-bloco__titulo {
		border-color: #4DB848;
	}	

	/* titulo do tipo da vaga */
	.cn-cmo-titulo-tipo-vaga {
		text-align: center;
		font-size: 23px;
		font-weight: bold;
	    padding-bottom: 10px;
		border-bottom: 2px solid #F1F1F1;
	}
	.cn-cmo-bloco--sf .cn-cmo-titulo-tipo-vaga {
		border-bottom-color: #00AAFC;
	}
	.cn-cmo-bloco--cd  .cn-cmo-titulo-tipo-vaga {
		border-bottom-color: #4DB848;
	}	

	/* lista de relatores */
    .cn-cmo-lista-relatores {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
    }
	.cn-cmo-relator {
		align-self: flex-start;
		width: 215px;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;
		margin: 5px 20px 20px 20px;
		.cn-cmo-relator__titulo {
			font-weight: bold;
			text-align: center;
			font-size: 23px;
		    padding-bottom: 10px;
		}
		.cn-cmo-relator__foto {
			width: 90px;
			margin: 10px;
		}
		a {
			color: #333333;
		}
		.cn-cmo-relator__barra-links {
			display: flex;
			justify-content: space-evenly;
			width: 110px;
			@media print {
				display: none !important;
			}
		}
	}

	/* historico de relatores / membros */
	.cn-cmo-historico-membro {
		position: absolute;
		display: block;
		margin-top: 20px;
		z-index: 1090;
		left: calc(50% - 125px);
		max-width: 80%;
		.cn-cmo-historico-membro__body {
			background-color: white;
			border: thin solid gray;
		}
	}

	/* popover */
	.cn-cmo-quadro-composicao .popover {
		overflow: auto;
		width: 90%;
		left: 5% !important;
		max-width: 90%;
		@media screen and (min-width: $medium) {
			margin: 20px;
			width: 80%;
			left: 10% !important;
		}
		&.fade {
			-webkit-transition: opacity 0.5s linear;
			-moz-transition: opacity 0.5s linear;
			-o-transition: opacity 0.5s linear;
			transition: opacity 0.5s linear;
		}
		.arrow {
			display: none;
		}
	}

	/* accordion de composicao da CMO */
	.accordion.cn-cmo-accordion-composicao,{
		margin: 30px;
		.accordion-group {
			.accordion-heading {
				color: white;
				background-color: #00AAFC;
				font-weight: bold;
				font-size: 23px;
				.accordion-toggle {
					padding: 15px;
				}
			}
			.accordion-body {
				background-color: #F1F1F1;
			}
			.accordion-inner {
				border-top: none;
				padding: 30px;
			}
		}
	}
	.cn-cmo-text-medium {
		font-size: 1.2em;
		line-height: 1.5em;
	}
	.cn-cmo-text-center, table tr th.cn-cmo-text-center, table tr td.cn-cmo-text-center {
		text-align: center;
	}
	.cn-cmo-border-bottom--medium, table tr th.cn-cmo-border-bottom--medium, table tr th.cn-cmo-border-bottom--medium {
		border-bottom: medium solid #ccc;
	} 
	.cn-cmo-border-bottom--thin-black, table tr th.cn-cmo-border-bottom--thin-black, table tr th.cn-cmo-border-bottom--thin-black {
		border-bottom: thin solid black;
	} 
	.cn-cmo-pt-1, table tr th.cn-cmo-pt-1, table tr td.cn-cmo-pt-1 {
		padding-top: .25rem;
	}
	.cn-cmo-pt-2, table tr th.cn-cmo-pt-2, table tr td.cn-cmo-pt-2 {
		padding-top: .5rem;
	}
	.cn-cmo-pt-3, table tr th.cn-cmo-pt-3, table tr td.cn-cmo-pt-3 {
		padding-top: 1rem;
	}
}