@charset "utf-8";

#chattr { float: left; width: 100%; outline: 2px solid rgb(90 90 90 / 20%); outline-offset: -2px; position: relative;}
#chattr .grade { position: absolute; width: 100%; height: 100%; padding: 0 0 100px;}
#chattr .rolagem { display: flex; width: 100%; height: 100%; overflow: auto;}

#chattr .barco { float: left; width: 100%; padding: 20px 20px 0;}
#chattr .barco .msg { float: left; width: 100%; margin: 2px 0;}
#chattr .barco .balao { float: left; min-width: 200px; padding: 10px; max-width: 90%; position: relative;}
#chattr .barco .balao.ele { float: left; background-color: rgb(106 117 255 / 20%); -webkit-border-radius: 15px; -webkit-border-top-left-radius: 0; -moz-border-radius: 15px; -moz-border-radius-topleft: 0; border-radius: 15px; border-top-left-radius: 0;}
#chattr .barco .balao.eu { float: right; background-color: rgb(96 181 81 / 45%); -webkit-border-radius: 15px; -webkit-border-top-right-radius: 0; -moz-border-radius: 15px; -moz-border-radius-topright: 0; border-radius: 15px; border-top-right-radius: 0;}
#chattr .barco .balao strong { position: absolute; top: 12px; left: 15px; font-size: 0.9em;}
#chattr .barco .balao b { float: left; margin: 25px 50px 5px 5px; font-weight: normal; font-size: 1em;}
#chattr .barco .balao b img { float: left; width: 200px;}
#chattr .barco .balao a:hover { text-decoration: underline;}
#chattr .barco .balao em { position: absolute; bottom: 3px; right: 8px; font-style: normal; font-size: 0.8em; opacity: 0.8;}

#chattr .barco .evita .balao strong { display: none;}
#chattr .barco .evita .balao b { margin: 0 50px 0 5px;}

#chattr .barco .botao { min-width: 200px; padding: 10px; max-width: 90%; position: relative; line-height: 2.3;}
#chattr .barco .botao.ele { background-color: rgb(106 117 255); color: rgb(250 250 250) !important;}
#chattr .barco .botao.ele:hover { float: left; background-color: rgb(75 85 221);}
#chattr .barco .botao.eu { background-color: rgb(96 181 81); color: rgb(250 250 250) !important;}
#chattr .barco .botao.eu:hover { background-color: rgb(78 156 64);}

#chattr .barco .resumo { position: absolute; width: 100%; top: 0; left: 0; z-index: 5; padding: 9px 10px 7px; background-color: rgb(200 200 200); text-align: center; font-size: 0.9em;}
#chattr .barco .informe { float: left; width: 100%; padding: 10px 0; text-transform: uppercase; text-align: center; font-size: 1em; line-height: 1; color: rgb(90 90 90);}

#chattr .barco .esptop { float: left; width: 100%; height: 35px;}
#chattr .barco .espbom { float: left; width: 100%; height: 15px;}

#chattr .interacao { position: absolute; width: 100%; min-height: 100px; bottom: 0; left: 0; border-top: 2px solid rgb(90 90 90 / 20%); background-color: rgb(255 255 255);}
#chattr .interacao .arquivo { position: absolute; width: 50px; height: 50px; bottom: 25px; left: 10px;}
#chattr .interacao .arquivo .ico { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-image: url('../global/chattr/imagens/interacao-arquivo.png'); background-position: 50%; background-repeat: no-repeat;}
#chattr .interacao .arquivo .file { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; cursor: pointer; opacity: 0; font-size: 0;}
#chattr .interacao .texto { float: left; width: 100%; padding: 0 70px; margin: 10px 0;}
#chattr .interacao .texto .digite { float: left; width: 100%; max-height: 150px; min-height: 80px; padding: 10px; background-color: rgb(90 90 90 / 15%); overflow: auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#chattr .interacao .texto .digite:focus { outline: 1px solid rgb(90 90 90 / 50%); outline-offset: -1px;}
#chattr .interacao .enviar { position: absolute; width: 50px; height: 50px; bottom: 25px; right: 10px; background-color: transparent; background-image: url('../global/chattr/imagens/interacao-enviar.png'); background-position: 50%; background-repeat: no-repeat;}
#chattr .interacao .encerrado { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(250 250 250 / 55%); z-index: 5;}

#chattr .avaliar { float: left; width: 100%; padding: 20px; margin: 11px 0; outline: 1px solid rgb(90 90 90 / 50%);}
#chattr .avaliar .convite { float: left; width: 100%; text-align: center;}
#chattr .avaliar .notas { float: left; width: 100%; margin: 11px 0 0; text-align: center;}
#chattr .avaliar .notas .nota { width: 40px; padding: 21px 0 20px; outline: 1px solid rgb(90 90 90 / 30%); outline-offset: -1px; background-color: rgb(90 90 90 / 10%); font-weight: bold; font-size: 1.1em; line-height: 0;}
#chattr .avaliar.participe .notas .nota:hover { background-color: rgb(37 131 79); color: rgb(250 250 250); outline: 0;}
#chattr .avaliar.participe .notas .nota { cursor: pointer;}
#chattr .avaliar.obrigado .notas .nota { opacity: 0.5;}
#chattr .avaliar.obrigado .notas .nota.ok { background-color: rgb(37 131 79); color: rgb(250 250 250); opacity: 1; outline: 0;}



/* TEMA */
.dark #chattr .interacao { background-color: rgb(15 15 15);}
.dark #chattr .interacao .encerrado { background-color: rgb(15 15 15);}
.dark #chattr .barco .resumo { background-color: rgb(50 50 50);}

.clear #chattr .interacao { background-color: rgb(245 245 245);}
.clear #chattr .interacao .encerrado { background-color: rgb(245 245 245);}
.clear #chattr .barco .resumo { background-color: rgb(200 200 200);}