.visualizacao {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 15px;

	background-color: #FFFFFF;
	border: solid 1px #DDDDDD;
	border-radius: 5px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.visualizacao > h1 {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 5px 10px;

	background-color: #666666;
	border-radius: 5px;

	display: flex;
	align-items: center;
	gap: 10px;

	text-align: start;
	font-weight: 700;
	font-size: 12px;
	color: #FAFAFA;
}

.visualizacao > button {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 5px 10px;

	background-color: #666666;
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	gap: 10px;

	white-space: nowrap;
	font-weight: 700;
	font-size: 12px;
	color: #FAFAFA;
}

.visualizacao > button > svg {
	font-size: 12px;
}

.visualizacao .visualizacao_ferramentas {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px 10px;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 5px;
}

.visualizacao .visualizacao_ferramentas > button {
	width: 30px;
	height: 30px;
	margin: 0px;
	padding: 0px;

	background-color: var(--preto);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	white-space: nowrap;
	font-weight: 700;
	font-size: 12px;
	color: #FFFFFF;
}

.visualizacao .visualizacao_ferramentas > button > svg {
	font-size: 12px;
}

.visualizacao .visualizacao_dados {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 10px;

	overflow: hidden;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.visualizacao .visualizacao_dados.coluna {
	flex-direction: column;
}

.visualizacao .visualizacao_dados.linha {
	flex-direction: row;
}

.visualizacao .visualizacao_dados.start {
	align-items: flex-start;
}

.visualizacao .visualizacao_dados.center {
	align-items: center;
}

.visualizacao .visualizacao_dados.end {
	align-items: flex-end;
}

.visualizacao .visualizacao_dados:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.visualizacao .visualizacao_dados:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.visualizacao .visualizacao_dados span {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.visualizacao .visualizacao_dados span.coluna {
	flex-direction: column;
}

.visualizacao .visualizacao_dados span.linha {
	flex-direction: row;
}

.visualizacao .visualizacao_dados span.start {
	align-items: flex-start;
}

.visualizacao .visualizacao_dados span.center {
	align-items: center;
}

.visualizacao .visualizacao_dados span.end {
	align-items: flex-end;
}

.visualizacao .visualizacao_dados img {
	width: 100px;
	max-width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	background-color: #FFFFFF;
	border-radius: 5px;
	float: left;
}

.visualizacao .visualizacao_dados .imagens {
	width: auto;
	height: auto;
	margin: 0px 10px 10px 0px;
	padding: 0px;

	position: relative;
}

.visualizacao .visualizacao_dados .imagens img.mini {
	width: 30px;
	max-width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	background-color: #FFFFFF;
	border: 3px solid #FFFFFF;
	border-radius: 5px;

	position: absolute;
	bottom: 0px;
	right: 0px;
}

.visualizacao .visualizacao_dados h1 {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	text-align: start;
	font-weight: 700;
	font-size: 14px;
	color: #333333;
}

.visualizacao .visualizacao_dados h2 {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	text-align: start;
	font-weight: 500;
	font-size: 12px;
	color: #333333;
}

.visualizacao .visualizacao_dados p {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	text-align: start;
	font-weight: 500;
	font-size: 12px;
	color: #333333;

	clear: both;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.visualizacao .visualizacao_dados small {
	width: auto;
	height: auto;
	margin: 2.5px 0px;
	padding: 5px 10px;

	border-radius: 5px;

	text-align: start;
	font-weight: 700;
	font-size: 12px;
	color: #333333;
}

.visualizacao .visualizacao_dados p.visualizar {
    display: block;
    -webkit-box-orient: inherit;
    -webkit-line-clamp: inherit;
    overflow: visible;
    text-overflow: clip;
}

.visualizacao .visualizacao_dados p.data {
	font-style: italic;
	font-size: 10px;
}

.visualizacao .arquivos {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.visualizacao .arquivos > span {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	background-color: #EEEEEE;
	border: 1px solid #DDDDDD;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: space-between;
}

.visualizacao .arquivos > span > a {
	flex-grow: 1;
    max-width: calc(100% - 50px);
	height: auto;
	margin: 0px;
	padding: 10px;

	display: flex;
	align-items: center;
	gap: 10px;

	text-decoration: none;
	text-align: start;
	font-weight: 500;
	font-size: 12px;
	color: #333333;
}

.visualizacao .arquivos > span > a > img {
    flex-shrink: 0;
	width: 35px;
	height: 35px;
	margin: 0px;
	padding: 0px;
}

.visualizacao .arquivos > span > a > p {
    flex-grow: 1;
    max-width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	text-align: start;
	font-weight: 500;
	font-size: 12px;
	color: #333333;

	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visualizacao .arquivos > span > button {
    flex-shrink: 0;
	width: 50px;
	height: 100%;
	margin: 0px;
	padding: 0px;

	background-color: transparent;
	border: none;
	border-radius: 0px 5px 5px 0px;

	font-size: 16px;
	color: var(--vermelho);

    display: flex;
    align-items: center;
    justify-content: center;
}

.visualizacao .arquivos .naovisualizado {
	background-color: rgba(250,208,208,1.00);
}

.visualizacao .conversas {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.visualizacao .conversas .formulario_enviarconversa {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	background-color: #FFFFFF;
	border: solid 1px #DDDDDD;
	border-radius: 5px;

	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.visualizacao .conversas .formulario_enviarconversa > textarea {
	width: 100%;
	height: 75px;
	margin: 0px;
	padding: 10px;

	resize: vertical;
	background-color: #FFFFFF;
	border: none;
	outline: none;
	border-radius: 5px;

	text-align-last: start;
	text-align: start;
	font-weight: 500;
	font-size: 14px;
	color: #333333;
}

.visualizacao .conversas .formulario_enviarconversa > button {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 5px 10px;

	border: none;
	border-radius: 5px;

	font-weight: 700;
	font-size: 12px;
}

.visualizacao .conversas div {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	display: flex;
	flex-direction: column;
	gap: 10px;
}

.visualizacao .conversas div > h1 {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;

	text-align: start;
	font-weight: 500;
	font-size: 12px;
	color: #333333;
}

.visualizacao .conversas .conversa {
	width: auto;
	min-width: 300px;
	max-width: 100%;
	height: auto;
	margin: 0px;
	padding: 10px;

	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.10);
	border-radius: 5px;

	display: flex;
	flex-direction: column;
	gap: 10px;
}

.visualizacao .conversas .conversa.remetente {
	float: right;
	background-color: #EBFFE2;
	align-items: flex-end;
}

.visualizacao .conversas .conversa.destinatario {
	float: left;
	background-color: #EEEEEE;
	align-items: flex-start;
}

.visualizacao .conversas .conversa > span {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.visualizacao .conversas .conversa > span > img {
	width: 20px;
	height: auto;
	margin: 0px;
	padding: 1px;

	border-radius: 5px;
}

.visualizacao .conversas .conversa.remetente > span > img {
	order: 2;
}

.visualizacao .conversas .conversa > span > h1 {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	font-weight: 700;
	font-size: 12px;
	color: #333333;
}

.visualizacao .conversas .conversa.remetente > span > h1 {
	text-align: end;
}

.visualizacao .conversas .conversa.destinatario > span > h1 {
	text-align: start;
}

.visualizacao .conversas .conversa > h1 {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	font-weight: 500;
	font-size: 12px;
	color: #333333;
}

.visualizacao .conversas .conversa.remetente > h1 {
	text-align: end;
}

.visualizacao .conversas .conversa.destinatario > h1 {
	text-align: start;
}

.visualizacao .conversas .conversa > p {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 0px;

	font-style: italic;
	font-weight: 500;
	font-size: 10px;
	color: #333333;
}

.visualizacao .conversas .conversa.remetente > span > p {
	text-align: end;
}

.visualizacao .conversas .conversa.destinatario > span > p {
	text-align: start;
}

@keyframes piscar {
    0%, 100% {
        background-color: rgba(246,176,176,1.00);
    }
    50% {
       	background-color: rgba(250,208,208,1.00);
    }
}

.visualizacao .piscar {
    animation: piscar 1s infinite;
}