@charset "utf-8";

#mentorando { float: left; width: 100%; min-height: 600px; margin: 50px 0 0;}
#mentorando .topo { float: left; width: 100%; position: relative;}
#mentorando .topo .campo { float: left; width: 100%; height: 49px; padding: 1px 0 0; background-color: rgb(230, 230, 230); text-align: center; font-size: 1.2em;}
#mentorando .topo .chave { position: absolute; width: 40px; height: 50px; top: 0; right: 5px; cursor: pointer; background-position: 50%; background-repeat: no-repeat;}
#mentorando .topo .chave.abre { background-image: url('../imagens/men-busca-abre.png');}
#mentorando .topo .chave.fecha { background-image: url('../imagens/men-busca-fecha.png'); display: none;}
#mentorando .topo .sair { position: absolute; width: 40px; height: 50px; top: 0; left: 5px; cursor: pointer; background-image: url('../imagens/men-sair.png'); background-position: 50%; background-repeat: no-repeat;}

#mentorando .matriculas { float: left; width: 60%; margin: 20px 20%;}
#mentorando .matriculas .tab { float: left; width: 100%; position: relative; padding: 20px 0; background-color: rgb(255, 255, 255); border: 1px solid rgb(230, 230, 230);}
#mentorando .matriculas .tab h2 { float: left; min-width: 51%; margin: 0 120px 0 20px; font-weight: bold;}
#mentorando .matriculas .tab h3 { float: left; min-width: 51%; margin: 10px 120px 0 20px;}
#mentorando .matriculas .tab h4 { float: left; min-width: 51%; margin: 5px 120px 0 20px; color: rgb(100, 100, 100);}
#mentorando .matriculas .tab a { position: absolute; width: 100px; top: 10px; right: 10px; padding: 52px 0 48px; background-color: rgb(60, 165, 107); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(255, 255, 255); line-height: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#mentorando .matriculas .tab a:hover { background-color: rgb(33, 112, 68);}

#mentorando .mensagens { float: left; width: 60%; padding: 0 20%;}
#mentorando .mensagens .ajax { float: left; width: 100%; margin: 10px 0; display: none;}
#mentorando .mensagens .tab { width: 80%; position: relative; padding: 2%; margin: 7px 0;}
#mentorando .mensagens .tab.aluno { background-color: rgb(190, 216, 255); color: rgb(55, 55, 55);}
#mentorando .mensagens .tab.administrador { background-color: rgb(222, 220, 195); color: rgb(55, 55, 55);}
#mentorando .mensagens .tab.destinatario { float: left; -webkit-border-radius: 10px; -webkit-border-top-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topleft: 0; border-radius: 10px; border-top-left-radius: 0;}
#mentorando .mensagens .tab.destinatario .ico { left: -30px;}
#mentorando .mensagens .tab.destinatario.administrador .ico { background-image: url('../imagens/men-mensagem-a.png');}
#mentorando .mensagens .tab.destinatario.aluno .ico { background-image: url('../imagens/men-mensagem-c.png');}
#mentorando .mensagens .tab.remetente { float: right; -webkit-border-radius: 10px; -webkit-border-top-right-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topright: 0; border-radius: 10px; border-top-right-radius: 0;}
#mentorando .mensagens .tab.remetente .ico { right: -30px;}
#mentorando .mensagens .tab.remetente.administrador .ico { background-image: url('../imagens/men-mensagem-b.png');}
#mentorando .mensagens .tab.remetente.aluno .ico { background-image: url('../imagens/men-mensagem-d.png');}
#mentorando .mensagens .tab .titulo { float: left; margin: 0 40px 0 0; font-weight: bold; font-size: 1.2em;}
#mentorando .mensagens .tab .data { float: left; width: 100%; margin: 3px 0 0; font-weight: normal; font-size: 0.9em;}
#mentorando .mensagens .tab .detalhes { float: left; width: 100%; margin: 10px 0 0;}
#mentorando .mensagens .tab .detalhes .imagem { float: left; width: 100%;}
#mentorando .mensagens .tab .detalhes .imagem img { float: left; width: 96%; padding: 2%; background-color: rgb(255, 255, 255);}
#mentorando .mensagens .tab .detalhes .video { float: left; width: 96%; position: relative; padding: 2%; background-color: rgb(255, 255, 255);}
#mentorando .mensagens .tab .detalhes .video .iframe { position: relative; z-index: 1; width: 100%; padding: 0 0 55%; overflow: hidden;}
#mentorando .mensagens .tab .detalhes .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#mentorando .mensagens .tab .detalhes .texto { float: left; width: 100%; padding: 10px 0 0; border-top: 1px solid rgb(0, 0, 0, 60%); font-size: 1.2em; line-height: 1.5;}
#mentorando .mensagens .tab .detalhes .data { float: left; width: 100%; margin: 18px 0 0; text-align: right; font-size: 1em; line-height: 1;}
#mentorando .mensagens .tab .deleta { position: absolute; width: 20px; top: 22px; left: -10px; z-index: 5; padding: 9px 0 10px; background-color: rgb(0, 0, 0); text-align: center; color: rgb(255, 255, 255); font-weight: bold; line-height: 0; cursor: pointer; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#mentorando .mensagens .tab .deleta:hover { background-color: rgb(255, 0, 0)}
#mentorando .mensagens .tab .chave { position: absolute; top: 12px; right: 2%; border: 1px solid rgb(0, 0, 0, 60%); padding: 3px 4px 2px; font-weight: normal; font-style: normal; font-size: 0.8em; color: rgb(0, 0, 0, 60%); cursor: pointer;}
#mentorando .mensagens .tab .chave.abre { display: none;}
#mentorando .mensagens .tab .visto { position: absolute; width: 35px; height: 14px; top: 44px; right: 2%; cursor: pointer; background-image: url('../imagens/men-visto.png?d=1'); background-repeat: no-repeat; background-position: 50%;}
#mentorando .mensagens .tab .visto.ok { background-image: url('../imagens/men-visto-ok.png');}
#mentorando .mensagens .tab .ico { position: absolute; width: 30px; height: 30px; top: 0; background-repeat: no-repeat; background-position: 50%;}
#mentorando .mensagens .tab:hover .visto { animation: visto 0.2s; animation-iteration-count: 4;}
#mentorando .mensagens .tab.combusca .detalhes { display: none;}
#mentorando .mensagens .tab.combusca .chave.abre { display: block;}
#mentorando .mensagens .tab.combusca .chave.fecha { display: none;}

#mentorando .mensagens .zero { float: left; width: 90%; padding: 20% 5%;}
#mentorando .mensagens .zero h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-size: 2em; color: rgb(150, 150, 150);}
#mentorando .mensagens .zero h3 { float: left; width: 100%; margin: 15px 0 0; text-align: center; font-size: 1.2em; color: rgb(150, 150, 150);}

#mentorando .add { float: left; width: 100%;}
#mentorando .add .opcoes { float: left; width: 100%; position: relative; background-color: rgb(15, 35, 51);}
#mentorando .add .opcoes b { float: left; width: 33.5%; padding: 65px 0 30px;  background-position: 50% 30px; background-repeat: no-repeat; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255); cursor: pointer;}
#mentorando .add .opcoes b.video { background-image: url('../imagens/men-add-video.png');}
#mentorando .add .opcoes b.texto { background-image: url('../imagens/men-add-texto.png'); background-color: rgb(15, 35, 51); position: relative; z-index: 1; border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);}
#mentorando .add .opcoes b.imagem { background-image: url('../imagens/men-add-imagem.png'); position: absolute; top: 0; right: 0;}
#mentorando .add .opcoes b.ativo { background-color: rgb(60, 165, 107);}
#mentorando .add .opcoes b:hover { background-color: rgb(11, 24, 35);}
#mentorando .add .ajax { float: left; width: 100%; display: none;}
#mentorando .add .form { float: left; width: 40%; padding: 20px 30% 40px; background-color: rgb(255, 255, 255);}
#mentorando .add .form .c1 { float: left; width: 96%; margin: 10px 0 0 2%;}
#mentorando .add .form .campo { float: left; width: 96%; height: 60px; padding: 1px 2% 0; border: 1px solid rgb(200, 200, 200); font-size: 1.1em; color: rgb(100, 100, 100);}
#mentorando .add .form .campo:focus { border: 1px solid rgb(0, 180, 255); -webkit-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); -moz-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%);}
#mentorando .add .form .escolha { float: left; width: 100%; height: 64px; padding: 0 2%; border: 1px solid rgb(200, 200, 200); font-size: 1.1em; color: rgb(100, 100, 100);}
#mentorando .add .form .escolha:focus { border: 1px solid rgb(0, 180, 255); -webkit-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); -moz-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%);}
#mentorando .add .form .textarea { float: left; width: 96%; height: 260px; padding: 10px 2%; border: 1px solid rgb(200, 200, 200); font-size: 1.1em; color: rgb(100, 100, 100);}
#mentorando .add .form .textarea:focus { border: 1px solid rgb(0, 180, 255); -webkit-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); -moz-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%); box-shadow: 0 0 12px 0 rgb(0, 0, 0, 20%);}
#mentorando .add .form .invalido { border: 1px solid rgb(255, 0, 0);}
#mentorando .add .form .file { float: left; width: 96%; padding: 20px 2% 18px; border: 1px solid rgb(200, 200, 200); font-size: 1em; color: rgb(100, 100, 100); cursor: pointer;}
#mentorando .add .form .botao { float: left; width: 100%; padding: 20px 0 18px; background-color: rgb(60, 165, 107); cursor: pointer; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255);}
#mentorando .add .form .botao:hover { background-color: rgb(33, 112, 68);}

#mentorando .alerta { float: left; width: 100%; position: relative; display: none; background-color: rgb(255, 210, 112);}
#mentorando .alerta .msg { float: left; width: 90%; padding: 20px 5% 18px; text-align: center; font-size: 1.1em;}
#mentorando .alerta .fechar { position: absolute; width: 10px; height: 10px; top: 5px; right: 5px; font-weight: bold; line-height: 1; color: rgb(0, 0, 0, 40%); cursor: pointer;}
#mentorando .alerta .fechar:hover { color: rgb(0, 0, 0, 60%);}

@media only screen and (max-width: 1000px){
  #mentorando { margin: 0;}
  #mentorando .matriculas { width: 90%; margin: 20px 5%;}
  #mentorando .mensagens { width: 90%; padding: 0 5%;}
  #mentorando .add .form { width: 90%; padding: 20px 5% 40px;}
}
@media only screen and (max-width: 700px){
  #mentorando .mensagens .tab { padding: 5%;}
  #mentorando .mensagens .tab.destinatario .ico { left: -15px;}
  #mentorando .mensagens .tab.remetente .ico { right: -15px;}

  #mentorando .mensagens .tab .titulo { font-size: 1.1em;}
  #mentorando .mensagens .tab .ico { width: 15px; height: 15px;}
  #mentorando .mensagens .tab .chave {  right: 5%}
  #mentorando .mensagens .tab .visto {  right: 5%}
}
@keyframes visto{
  0% { margin-right: 0;}
  25% { margin-right: 4px;}
  50% { margin-right: 0;}
  75% { margin-right: -4px;}
  100% { margin-right: 0;}
}