﻿.grid-info
{
    padding:10px 0px 10px 0px;
    vertical-align:baseline;
    text-align:center;
    border:1px solid #CCC;
    border-top:none;
}

table.grid
{
    border:1px solid #CCC;    
    width:100%;
}

table.grid .btnAcao
{
    padding-right:3px;
    padding-left:3px;

    opacity:0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

table.grid .btnAcao:hover
{
    padding-right:3px;
    padding-left:3px;

    opacity:1.0;
	-moz-opacity: 1.0;
	filter: alpha(opacity=100);
}

table.grid tr
{

}

table.grid th a
{
    font-weight:bold;
    color:#444;    
}

table.grid th a:hover
{
    color:#222;
}

table.grid th
{
    padding:3px;
    background-repeat:repeat-x;
    background-image:url('images/bg_table_th.png');
    height:20px;
    text-align:center;
    vertical-align:middle;
    color:#444;
}

table.grid.grid-simples th
{
    background-image:none;
    background-color:#DDD;
    height:16px;
}

table.grid tr.regular
{
    background-color:#F9F9F9;
}

table.grid tr.alternated
{
    background-color:#F2F2F4;    
}

table.grid tr.mouseover
{
    background-color:#DDD;    
    border:1px solid #AAA;
    
}

table.grid tr.selecionada
{
    background-color:#FCEC8B ;    
    border:1px solid #FCEC8B;
    
}

table.grid td
{
    height:18px;
    vertical-align:middle;
    padding:3px;    
    border-top:1px solid #CCC;
    border-right:1px solid #CCC;
}

table.grid tr.inactive
{
    opacity:0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

table.grid td.vamiddle
{
    vertical-align:middle;
}

table.grid td.center
{
    text-align:center;
}

table.grid td.right
{
    text-align:right;
}

table.grid td.left
{
    text-align:left;
}

/**-------------- */


table.grid-secundaria
{
    border:1px solid #CCC;    
    width:100%;
}

table.grid-secundaria .btnAcao
{
    padding-right:3px;
    padding-left:3px;

    opacity:0.7;
	-moz-opacity: 0.7;
	filter: alpha(opacity=70);
}

table.grid-secundaria .btnAcao:hover
{
    padding-right:3px;
    padding-left:3px;

    opacity:1.0;
	-moz-opacity: 1.0;
	filter: alpha(opacity=100);
}

table.grid-secundaria tr
{

}

table.grid-secundaria th a
{
    font-weight:bold;
}

table.grid-secundaria th a:hover
{
    color:#222;
}

table.grid-secundaria th
{
    padding:3px;
    background-color:#DDD;
    text-align:center;
    vertical-align:middle;
}

table.grid-secundaria tr.regular
{
    background-color:#F9F9F9;
}

table.grid-secundaria tr.alternated
{
    background-color:#F2F2F4;    
}

table.grid-secundaria tr.mouseover
{
    background-color:#DDD;    
    border:1px solid #AAA;
    
}

table.grid-secundaria td
{
    height:18px;
    vertical-align:middle;
    padding:3px;    
    border-top:1px solid #CCC;
    border-right:1px solid #CCC;
}

table.grid-secundaria td.center
{
    text-align:center;
}

table.grid-secundaria td.right
{
    text-align:right;
}

table.grid-secundaria td.left
{
    text-align:left;
}

.form-group {
    display: block;
    padding:6px;
    font-size: 9px;
    color: #696969;
}
.form-label {
    display: block;
    color: #9b9999;
}
.tags {
    border-radius: 2px;
    background: #e2e2e2;
    border: solid 1px #d6d6d6;
    padding: 2px;
    margin-left: 2px;
    color: #646464;
    position: relative;
}
.tags img {
    margin-top: -5px;
    margin-bottom: -4px;
    margin-right: 3px;
    max-height: 16px;
    max-width: 16px;
}
.tags:empty {
    display: none;
}

/* grid consulta gestão de serviço */ 
td.situacao img {
    margin: 2px auto;
    display: block;
}
.chamado-lista {
    border: solid 1px #d6d6d6;
    background: #fff;
    margin: 7.5px 0;        
}
.chamado-lista > table {
    padding: 0;    
    width: 100%;
}
.chamado-lista .chamado-coluna-destaque {
    background: #e4e4e4;
    text-align: center;
    width: 100px;
    border-right: solid 6px #CCC;
    position: relative;
    
}
.chamado-lista .chamado-coluna-destaque td {
    padding: 6px;
    border-bottom: solid 1px #d6d6d6;
    min-width: 100px;
}
.chamado-lista .chamado-coluna-destaque tr:last-child td {
    border-bottom: none;
}
.chamado-lista .chamado-coluna-destaque .codigo * {
    font-weight: normal;
    font-size: 22px;

}
.chamado-lista .chamado-conteudo {
    vertical-align: top;
}
.chamado-lista .chamado-conteudo > table {
    width: 100%;
}
.chamado-lista .chamado-conteudo .coluna-grupos {
    padding: 7px 2px;
    width: 100%;
    border-bottom: solid 1px #d6d6d6;
}
.chamado-lista .coluna-dados-cliente {    
    border-right: solid 1px #d6d6d6;
}
.chamado-lista .coluna-dados-sla {
    border-left: solid 1px #d6d6d6;   
}
.chamado-lista .coluna-dados-sla .tempo-relogio-icone, .chamado-lista .coluna-dados-sla .tempo-relogio-icone > .form-label {
    font-weight: normal;
}
.chamado-lista .coluna-dados-cliente .form-group:last-child {
    border-bottom: none;
}
.chamado-lista .coluna-dados-criacao .form-group:last-child {
    border-bottom: none;
}
.chamado-lista .form-group {
    border-bottom: solid 1px #d6d6d6;
    margin:0 5px;
}
.chamado-lista .form-group .form-label {
    margin-bottom: 2px;
}
.tempo-ultima-interacao {
    margin-top: 9px;
    padding-top: 4px;
    border-top: solid 1px #d6d6d6;
}
.tempo-relogio-icone {
    padding-left: 8px;
}
.tempo-relogio-icone .form-label {
    margin-bottom: 7px;
}
.tempo-relogio-icone .fa {
    font-size: 17px;
    float: left;
    margin-right: 8px;
}
.tempo-relogio-icone.prazo-atraso .fa {
    color: red;
}
.tempo-relogio-icone.prazo-atraso .tempo-atendimento {
    color: red;    
}

#tdColunaAcaoTempo {
    width: 20%;
    max-width: 190px;
}
.tempo-total {
    float: right;
    display: inline-block;
    margin-bottom: 8px;
    margin-left: 10px;
}
.tempo-total-atendimento {
   display: inline-block;
   text-align: left;   
   float: right;   
   margin: 5px 0 5px 0;
   border: solid 1px #d6d6d6;  
   background: #fff; 
}
.prazo-atraso-total > span {
    color: red;
}
.tempo-total-atendimento.prazo-atraso-total .tempo-progresso .progresso {
    background: red;
}
.tempo-total-atendimento.prazo-atraso-total .tempo-progresso span {
    color: red;
    font-weight: bold;
}
.prazo-atencao-total > span {
    color: #e2a348;
}
.tempo-total-atendimento.prazo-atencao-total .tempo-progresso .progresso {
    background: #e2a348;
}
.tempo-total-atendimento.prazo-atencao-total .tempo-progresso span {
    color: #e2a348;
    font-weight: bold;
}
.tempo-total-atendimento .tempo-progresso {    
    text-align: center;
}
.tempo-total-atendimento .tempo-progresso > span {
    padding: 10px;
    display: inline-block;
}
.tempo-total-atendimento .tempo-progresso .progresso {    
    background: green;
    display: inline-block;
    height: 3px;
}
.tempo-total-atendimento .tempo-progresso .barra-progresso {
    background: #ccc;
    text-align: left;
    border-top: solid 1px #d6d6d6;
}
.tempo-total-atendimento label {
    display: inline-block !important;
    padding: 10px;    
    background: #fff !important;
    color: gray !important;
    font-weight: bold;
}
.tempo-total-atendimento i {
    display: inline-block;
}
.tempo-total-atendimento > span {
    width: 131px;
    padding: 10px;
    display: inline-block;
    padding-left: 9px;
    border-left: solid 1px #d6d6d6;
    margin-left: -4px;
}
.tempo-relogio-icone .tempo-sla {
    color: #9b9999;
}

p.tempo-atendimento {
    font-size: 1.2em;
}
.tempo-relogio-icone.prazo-atraso {
    background: transparent;
}
/* Tamanho colunas */
.chamado-conteudo > table {
    
}
.coluna-dados-cliente {
    width: 36%;
    max-width: 300px;
}
.coluna-dados-criacao {
    width: 40%;
}
.coluna-dados-sla {
    width: 33%;
}

.coluna-acao {
    vertical-align: middle;
    padding: 10px;
    position: relative;
    min-width: 100px;
    background: #ECECEC;
}
.coluna-acao a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    border: none;
    text-align: center;
    padding: 33px 0;
    border-left: solid 1px #d6d6d6;
    color: #666;
}
.coluna-acao a:hover {
    color: #333;
}
.coluna-acao .fa {
    display: block;
    font-size: 2.7em;
}
.agrupador-titulo-sem-fundo .agrupador > .titulo {
    background: none;
    padding-left: 0;
    border: none;
}

.container-usuario {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 120px;
    /*background: #e4e4e4;*/
    border-right: solid 1px #d6d6d6;
}
.colunas-detalhe + .colunas-acao {
    
}
.container-usuario + .acao-usuario {
    border-top: none;
}

.container-imagem img, .container-imagem {
    width: 58px;
    height: 58px;
    border-radius: 50px;    
    margin: 0 auto;
}
.container-imagem {
    text-align: center;
    overflow: hidden;    
    background: #ccc;
    margin: 0 auto;    
    margin-bottom: 5px;
}
.container-usuario-imagem {
    position: absolute;
    top:50%;
    left: 0;
    right: 0;
    height: 90px;
    margin-top: -45px;
    text-align: center; 
    padding: 0 5px;   
}
/* Interação usuário */
.interacao-chamado {
    clear: both;
}
.interacao-usuario {
    border: solid 1px #d6d6d6;
    background: #fff;    
    margin-bottom: -1px;
    position: relative;
    min-height: 115px;
}
.interacao-usuario .acao-usuario {
    position: relative;
    margin-left: 120px;    
    vertical-align: bottom;
}
.interacao-usuario .acao-usuario:last-child tr:last-child td {
    border-bottom: none;
}
.acao-usuario > table {
    width: 100%;
    margin-top: -1px;
}
.detalhes-acao {
    
}
.detalhes-comentario {
    float: left;
}
.interacao-usuario .coluna-conteudo > table {
    width: 100%;
}
.interacao-usuario .form-group .form-label {
    margin-bottom: 4px;
}
.time {
    font-size: 1em;
}
.balao {
    background: #e4e4e4;
    border: solid 1px #d6d6d6;    
    padding: 10px 25px;
    color: #333;
    text-align: center;    
    clear: both;
    position: relative;   
    margin-left: 121px;
}
.balao:before {
    font-family: FontAwesome;    
    position: absolute;
    top: 12px;
    left: 14px;    
    color: #666;
}
.balao.interacao.sem-seta:before {
    display: none;
}
.balao strong {
    font-size: 1em;
}
.balao.interacao {
    border: none;
    position: relative;
    background: #ffd599;  
    border-radius: 0;      
}
.colunas-acao .form-group {
    padding: 0
}
.tr-coluna-acao-tempo td {
    border: solid 1px #d6d6d6;    
    border-width: 1px 0 1px 1px;
}
.colunas-acao td {
    padding: 10px;
}
.coluna-tempo-chamado {
    background: #fff;
    min-width: 150px; 
    position: relative;
    width: 13%;
}
.coluna-tempo-chamado div:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 17px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    right: -16px;
    top: 0;
    z-index: 98;
}
.coluna-tempo-chamado div:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #ccc;
    position: absolute;
    right: -17px;
    top: 1px;
    z-index: 98;
}
.colunas-acao .coluna-acao {
    padding-left: 24px;
}
.coluna-acao-tempo {
    width: 130px;
}
.balao.interacao:before {
    font-family: FontAwesome;
    content: "\f062";
    position: absolute;
    top: 14px;
    left: 15px;    
    color: #f29400;
}
.balao.criacao {
    background: #c4e6ff;
    margin-top: 14px;
}
.balao.criacao:before {    
    content: "\f069";
}
.balao.finalizado {
    background: #B9F6CA;
    border-color: #80d197;
    margin-bottom: 14px;
    margin-top: 10px;
}
.balao.finalizado:before {
    color: #5bb675;
    content: "\f00c";
}
.hide-empty:empty {    
    display: none;
}
.balao.interacao.pendente {    
    clear: both;
}
.balao.interacao.pendente:before {
    content: "\f071";
}
.detalhes-personalizados {
    padding-left: 6px;
    padding-right: 6px;
    vertical-align: top;
    border-left: solid 1px #d6d6d6;
    width: 30%;
}
.detalhes-personalizados:before {
    content: "detalhes: ";
    margin-bottom: 4px;
    display: block;
    color: #9b9999;    
}
.interacao-chamado .btn-arquivo-digital {
    float: left !important;
}
.detalhes-personalizados::before(2) {
    content: " ";
    background: #d6d6d6; 
    width: 1px;
    height: 10px;
    display: block;
    position: absolute;
    left: 0;
}
.interacao-acao-tempo {
    position: absolute;
    top: 0;
    z-index: 9;
    left: 0;
    background: #ccc;
    padding: 3px 0;
    width: 100%;
    right: 0;
    color: #989898;    
}
.interacao-acao-tempo:after {
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 9.6px;
    border-color: transparent transparent transparent #ccc;
    position: absolute;
    right: -7.6px;
    top: 0;
}
.prazo-atraso { 
    background: transparent;
    font-weight: bold;   
    color: #e85454;    
}
.prazo-atencao {
    background: transparent;
    font-weight: bold;
    color: #e2a348;    
}
.tempo-relogio-icone.prazo-atencao {
    background: transparent;
    color: #e2a348;
}
.tempo-relogio-icone.prazo-atencao .fa {
    color: #e2a348;
}
.prazo-atencao:after {
    border-left-color: #e2a348;
}

.detalhes-comentario > .form-group > p {
    max-height: 300px;
    overflow: auto;
}
.btn-navigate.aspNetDisabled + button {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}
