.centraliza {
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: center;
	
}

/*--------------- Para os formulários de cadastro e login ----------------*/
.formulario{
	width: 300px;
	height: 300px;
	margin:15px;
	padding:0 20px 0 20px;
	
	border: 1px solid white;
	border-radius: 25px;
	box-shadow: 1px 1px 3px grey;
	
	display: flex;
    align-items: center;
    justify-content: center;
	/*Centraliza as caixas de entrada*/
}

@media only screen and (max-width: 420px) and (min-width: 381px){
	.formulario{
		height: 225px;
		padding: 15px 10px;
	}
}

@media only screen and (max-width: 380px){
	.formulario{
		width: 250px;
		height: 225px;
		margin: 5px;
		padding:15px 10px;
	}
}

.formulario-cadastro {
	width: 350px;
	height: 520px;
	margin:15px;
	padding:0 20px 0 20px;
	
	border: 1px solid white;
	border-radius: 25px;
	box-shadow: 1px 1px 3px grey;
	
	display: flex;
    align-items: center;
    justify-content: center;
	/*Centraliza as caixas de entrada*/
}

@media only screen and (max-width: 420px) and (min-width: 381px){
	.formulario-cadastro {
		width: 320px;
		height: 440px;
		padding: 15px 10px;
	}
}

@media only screen and (max-width: 380px){
	.formulario-cadastro {
		width: 280px;
		height: 450px;
		margin: 5px;
		padding:15px 10px;
	}
}

.formulario-aviso {
	height: 80px;
}

/* ------------Estilo geral das caixas de texto  ----------------*/
input[type=text], input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/*Estilo do botão de envio*/
button[type=submit] {
  /*width: 100%; Removido pois fica muito grande */
  max-width: 200px;
  background-color: #3eb7ab;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ---------------- Área de usuário ------------------ */
.coluna-dupla {
	/*Duas colunas na área de usuário: a com fundo cinza, contendo as principais opções, e a outra com configurações de dados*/
	display: flex;
	flex-wrap:wrap;
	background-color: #F3F1F1;
}

@media screen and (max-width: 900px) {
    .coluna-dupla{
		flex-wrap:nowrap;
		flex-direction: column;
		background-color: white;
	}
}

.lateral-esquerda {
	/*Coluna com as opções de escrever mensagens e deslogar*/
	display:flex;
	flex-direction:column;
	justify-content: center;
	
	width: 100%;
	height: 340px;
	background-color: #F3F1F1;
	padding: 20px;
}

/* Para telas grandes a barra esquerda fica fixa na tela*/
@media screen and (min-width: 901px) {
    .lateral-esquerda{
		width: 320px;
		height: 540px;
		
		position:sticky;
		top:0;
	}
}

@media screen and (max-width: 900px) {
    .lateral-esquerda{
		align-items: center;
		text-align: center;
		padding: 0;
	}
}

/*Lateral com o formulário de alteração e painel de controle dos moderadores*/
.lateral-direita {
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	
	background-color: white;
	padding: 20px 0 20px 0;
}

@media screen and (min-width: 901px) {
    .lateral-direita{
		width: calc(100% - (320px + 40px));
	}
}

@media screen and (max-width: 375px) {
    .lateral-direita{
		flex-wrap:nowrap;
	}
}

/* Notificações das alterações de conta */
.caixa-aviso {
	border-radius: 15px;
	padding: 20px;
	margin: 20px;
	width: 450px;
}

@media screen and (max-width: 767px) {
    .caixa-aviso{
		align-items: center;
		width: 300px;
	}
}

@media screen and (max-width: 330px) {
    .caixa-aviso{
		align-items: center;
		width: 280px;
		margin: 10px 0 10px;
	}
}

.adm {
	/*Cor salmão*/
	background-color: #ffe4c4;
}

.erro {
	/*Vermelho suave*/
	background-color: #FF6347;
}

.sucesso {
	/*Verde suave*/
	background-color: #00FF7F;
}

/* Caixas da lateral direita editadas individualmente*/
.caixa-op {
	display:flex;
	flex-direction:column;
	justify-content: center;
	
	width: 450px;
	height: 550px;
	margin:15px;
	padding:0 20px 0 20px;
	
	border: 1px solid white;
	border-radius: 25px;
	box-shadow: 1px 1px 3px grey;
}

@media screen and (max-width: 767px) {
    .caixa-op{
		align-items: center;
		width: 300px;
	}
}

@media screen and (max-width: 330px) {
    .caixa-op{
		align-items: center;
		width: 280px;
		margin: 10px 0 10px 0;
	}
}

/* Complemento de caixa-op exclusivo para os moderadores */
.lista_comandos {
	height: 645px;
}

/* Botões do painel de controle */
.botao_painel{
	border: none;
	background: none;
	color:#3eb7ab;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	letter-spacing: 1px;
	text-decoration: none;
	margin : 14px 0;
}

@media screen and (min-width: 421px) and (max-width: 900px) {
    .botao_painel{
		font-size:15px;
	}
}

@media only screen and (max-width: 420px){
	.botao_painel{
		font-size:14px;
	}
}

.botao_painel:hover{
	color:#8459A1;
	text-decoration: none;
}

/* Bloco com algumas páginas de cada categoria no painel de controle */
.bloco-controle {
	display: flex;
	align-content: flex-start;
	width: 100%;
}

/* Borda cinza do painel de controle */
.divisoria {
	border-bottom: 2px solid gray;
}

/* Distância entre os links de edições do painel de controle*/
.dist {
	margin:7px 0;
}

@media only screen and (max-width: 500px){
	.dist {
		margin:9px 0;
	}
}

.bt-cadastro {
	background-color: #3eb7ab;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
  }
  
  .bt-cadastro-disabled {
	  background-color: gray !important;
	  color: white;
	  padding: 14px 20px;
	  margin: 8px 0;
	  border: none;
	  border-radius: 4px;
	  pointer-events: none;
  }

 
/* Para mostrar os anúncios no painel de controle */
.imagem-bloco {
	width:90%;
	height:auto;
	margin: 0 0 60px 0;
	border-radius: 25px;
}