[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
          display: none !important;
        }
#historico-pontos-disponibilidade_wrapper {
    display: block !important;
}
.mt-comments .mt-comment {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.mt-comments .mt-comment .mt-comment-img {
    float: left;
    width: 40px;
}
.mt-comments .mt-comment .mt-comment-img > img {
    border-bottom-left-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    border-top-left-radius: 50% !important;
    border-top-right-radius: 50% !important;
}
.mt-comments .mt-comment .mt-comment-body {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 20px;
    position: relative;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-info::after, .mt-comments .mt-comment .mt-comment-body .mt-comment-info::before {
    content: " ";
    display: table;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-info::after {
    clear: both;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-info .mt-comment-author {
    color: #060606;
    display: inline-block;
    float: left;
    font-weight: 600;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-info .mt-comment-date {
    color: #bababa;
    display: inline-block;
    float: right;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-text {
    color: #999;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-status {
    float: left;
    text-transform: uppercase;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-status.mt-comment-status-pending {
    color: #b8c0f5;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-status.mt-comment-status-approved {
    color: #6bd873;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-status.mt-comment-status-rejected {
    color: red;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-actions {
    display: none;
    float: right;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-actions > li {
    float: left;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-actions > li > a {
    color: #999;
    text-transform: uppercase;
}
.mt-comments .mt-comment .mt-comment-body .mt-comment-details .mt-comment-actions > li > a:hover {
    color: #666;
    text-decoration-color: currentcolor;
    text-decoration-line: none;
    text-decoration-style: solid;
}
.mt-comments .mt-comment:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #f9f9f9;
    background-image: none;
    background-origin: padding-box;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: repeat;
    background-size: auto auto;
}
.mt-comments .mt-comment:hover .mt-comment-body .mt-comment-details .mt-comment-actions {
    display: inline-block;
}

img.listar-pontuadores-imagem {
    max-width: 100px;
    max-height: 100px;
}

.portlet.box.green-sea {
	background-color: #16a085;
	border: 1px solid #16a085;
	border-top: 0;
}

.portlet.box.belize-hole {
	background-color: #2980b9;
	border: 1px solid #2980b9;
	border-top: 0;
}

.portlet.box.green-sea > .portlet-title > .caption > i,
.portlet.box.belize-hole > .portlet-title > .caption > i {
	color: #fff;
}

.bg-asbestos { background-color: #95a5a6; }

.dashboard-stat > .visual > i {
	color: white;
	opacity: 0.3;
}

.row-gera-relatorio-pontuador { margin-bottom: 25px; }

.categoria-dados th { text-align: center; }

.text-small .details .number { font-size: 2em; }

.hidden { display: none; }

.text-center { text-align: center; }

.disabled {
	pointer-events: all !important;
	cursor: not-allowed !important;
}

body { padding: 20px 20px 20px 20px; }

#container-relatorio {
	padding-bottom: 5em;
	width: 850px;
	margin: 0 auto;
}

#container-relatorio .cabecalho,
#container-relatorio-chamadas-simultaneas-dia-hora .cabecalho { background-color: #FDE3A7 !important; }

.cabecalho h3 {
    text-align: right !important;
    margin-top: 10px;
    margin-bottom: 0px;
}

.titulo {
    font-size: 27px;
    margin-right: 15px;    
}

.cabecalho p {
    text-align: right !important;
}

#container-relatorio .numeros-unicos { background-color: #AEA8D3 !important; }
#container-relatorio .total-chamadas { background-color: #A2DED0 !important; }

#container-relatorio .chamadas-produtivas { background-color: #EB974E !important; }
#container-relatorio .chamadas-produtivas-total { background-color: #F4B350 !important; }
#container-relatorio .chamadas-produtivas-dados { background-color: #FDE3A7 !important; }

#container-relatorio .chamadas-produtivas-horario { background-color: #66ff99 !important; }
#container-relatorio .chamadas-produtivas-horario-total { background-color: #80ffaa !important; }
#container-relatorio .chamadas-produtivas-horario-dados { background-color: #99ffbb !important; }

#container-relatorio .chamadas-improdutivas { background-color: #BDC3C7 !important; }
#container-relatorio .chamadas-improdutivas-total { background-color: #ECF0F1 !important; }
#container-relatorio .chamadas-improdutivas-dados { background-color: #ececec !important; }

#container-relatorio .row.chamadas-produtivas,
#container-relatorio .row.chamadas-improdutivas { position: relative; }

#container-relatorio .vertical-middle {
	position: absolute;
	top: 50%;
	margin-top: -30px;
}

#container-relatorio div.row.chamadas-produtivas {
    margin-top: 15px;
    margin-bottom: 15px;
}

#container-relatorio .numeros-unicos h1,
#container-relatorio .total-chamadas h1 { margin-top: 10px }

#container-relatorio table,
#container-relatorio-chamadas-simultaneas-dia-hora table { line-height: 2em; }

#container-relatorio table td,
#container-relatorio-chamadas-simultaneas-dia-hora table td { border: 1px solid rgba(0,0,0,.2); }

#container-relatorio .table-assuntos td {
	padding-left: 1em;
	border-right: 0;
}

.no-padding { padding: 0; }
.no-margin { margin: 0; }

#container-relatorio table,
#container-relatorio-chamadas-simultaneas-dia-hora table { width: 100%; }

#container-relatorio table thead,
#container-relatorio-chamadas-simultaneas-dia-hora table thead {
	text-align: center;
	font-weight: bold;
}

#container-relatorio .chamada-meta { font-weight: bold; }

#container-relatorio h1.horizontal,
#container-relatorio h3.horizontal {
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

#container-relatorio .logo { width: 70% !important; }

#container-relatorio-chamadas-simultaneas-dia-hora .logo { width: 80% !important; }

#container-relatorio.periodo-mensal .logo,
#relatorio-sintetico .logo,
#relatorio-chamadas-dia-hora .logo { width: 60% !important; }

#container-relatorio #btn-imprimir,
#container-relatorio-chamadas-simultaneas-dia-hora #btn-imprimir { margin: 20px; }

.bg-white { background-color: white !important; }

.bg-opacity-4 { background-color: rgba(255,255,255,.4) !important; }
.bg-opacity-grey-1 { background-color: rgba(100,100,100,.1) !important; }

#container-relatorio #relatorio-qualidade-atendimento {
    margin-top: 15px;
    margin-bottom: 15px;
}

#container-relatorio #relatorio-qualidade-atendimento .bg-relatorio-qualidade-atendimento { background-color: #66CC99 !important; }

#container-relatorio #relatorio-qualidade-atendimento table td { border: none; }

#container-relatorio #relatorio-qualidade-atendimento table td:not(.no-border) {
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
}

#container-relatorio #relatorio-qualidade-atendimento .nome-avaliacao { padding-left: 1em; }

.color-black { color: black; }

@media print {
    * { -webkit-print-color-adjust: exact; }

    .no-print { display: none; }

	body {
		font: 10pt sans-serif;
		color: #000;
	}

	h1 { font-size: 20pt; }

	h2 { font-size: 14pt; }

	h3 { font-size: 10pt; }

	@page { margin: 1cm 1.5cm 1.5cm 1.5cm; }

	table {
		widows: 4;
		orphans: 4;
	}

	h1,
	h2,
	h3 {
		margin-top: 5px;
		margin-bottom: 5px;
        text-align: left;
	}

    #container-relatorio table { line-height: 1.5em; }
	
    #container-relatorio #titulo-site { margin-top: 20px; }

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 { float: left; }

	.col-md-12 { width: 100%; }
	.col-md-11 { width: 91.66666667%; }
	.col-md-10 { width: 83.33333333%; }
	.col-md-9 { width: 75%; }
	.col-md-8 { width: 66.66666667%; }
	.col-md-7 { width: 58.33333333%; }
	.col-md-6 { width: 50%; }
	.col-md-5 { width: 41.66666667%; }
	.col-md-4 { width: 33.33333333%; }
	.col-md-3 { width: 25%; }
	.col-md-2 { width: 16.66666667%; }
	.col-md-1 { width: 8.33333333%; }

	.col-md-offset-11 { margin-left: 91.66666667%; }
	.col-md-offset-10 { margin-left: 83.33333333%; }
	.col-md-offset-9 { margin-left: 75%; }
	.col-md-offset-8 { margin-left: 66.66666667%; }
	.col-md-offset-7 { margin-left: 58.33333333%; }
	.col-md-offset-6 { margin-left: 50%; }
	.col-md-offset-5 { margin-left: 41.66666667%; }
	.col-md-offset-4 { margin-left: 33.33333333%; }
	.col-md-offset-3 { margin-left: 25%; }
	.col-md-offset-2 { margin-left: 16.66666667%; }
	.col-md-offset-1 { margin-left: 8.33333333%; }
	
    #container-relatorio .logo,
	#container-relatorio-chamadas-simultaneas-dia-hora .logo {
    	margin-top: -10px !important;
    	width: 150px !important;
        margin-bottom: 15px;
	}
}

	
#agenda { min-height: 1220px; }

.fc-content .excluir-evento {
    float: right;
    padding: 2px;
}

.margin-bottom { margin-bottom: 15px;  }

.btn-atualizar-pontos { color: white; }

.btn-atualizar-pontos:hover,
.btn-atualizar-pontos:focus {
    color: #ecf0f1;
    text-decoration: none;
}

#container-agendamentos,
#container-presenca-dia {
	min-width: 1098px;
	overflow-y: hidden;
}

#agendamentos,
#presenca-dia { margin-top: 15px; }

#agendamentos thead td,
#presenca-dia thead td {
    vertical-align: bottom;
    font-weight: bold;
    padding: 15px 0;
}

#agendamentos thead td,
#presenca-dia thead td {
    padding: 8px;
    text-align: center;
}

#agendamentos thead span,
#presenca-dia thead span {
    display: block;
    line-height: 1.5em;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    max-width: 28px;
}

#agendamentos thead span,
#presenca-dia thead span { margin: 0 auto 10px auto; }

#presenca-dia tbody td:not(.td-fixed) {
    font-weight: bold;
    text-align: center;
}

.padding-8 { padding: 8px !important; }

.linha-historico-pontos-disponibilidade { cursor: pointer; }

.sweet-alert { top: 50px !important; }

.container-icon-calc { width: 5% !important; }

.icon-calc {
    display: block;
    margin-top: 40px;
    font-size: 4em;
    color: #7f8c8d;
    text-align: center;
    font-weight: bold;
}

.no-padding-right { padding-right: 0 !important; }
.no-padding-left { padding-left: 0 !important; }

.details-right-0 .details { right: 0 !important; }

.large-col { width: 10.7% !important; }

.desc-bold .desc { font-weight: 400 !important; }

#modalPresencaDia .table thead td:not(.td-fixed),
#agendamentos thead td { border-left: 1px solid #ddd; }

#modalPresencaDia .table { padding-right: 1em; }

#modalPresencaDia .modal-body { overflow-y: auto; }

.agendamento-atendente {
    right: 0% !important;
    left: 50% !important;
    margin-right: 0px !important;
}

.pontuacao-disponivel {
    right: 50% !important;
    left: 0% !important;
    margin-right: 0px !important;
}

.btn-relatorios {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 1em;
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    -webkit-transition: .2s ease-out;
            transition: .2s ease-out;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}

.btn-relatorios:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
            box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
}

.btn-relatorios i { font-size: 1.5em; margin: 20px; }

.btn-relatorios.acesso-relatorio.active{
    background-color: #16a085;
}

.btn-relatorios.acesso-relatorio {
    background-color: #1abc9c;
    color: white;
    height: 170px;
    text-decoration: none;
}

.btn-relatorios.acesso-relatorio:hover { background-color: #16a085; }

.bg-jordy-blue { background-color: #89C4F4 !important; }

.bg-aqua-island { background-color: #A2DED0; }

.padding-right-10 { padding-right: 10px; }

@keyframes color-animation {
    0% {
       color: rgb(200,0,0);
    }
    16.666666667% {
       color: rgb(127,127,0);
    }
    33.333333334% {
       color: rgb(0,200,0);
    }
    50.000000001% {
       color: rgb(0,127,127);
    }
    66.666666668% {
       color: rgb(0,0,200);
    }
    83.333333335% {
       color: rgb(127,0,127);
    }
 }

.custom-loading {
    -webkit-animation: color-animation 3s infinite linear alternate;
            animation: color-animation 3s infinite linear alternate;
}

#relatorio-chamadas-dia-hora table tbody,
#relatorio-chamadas-simultaneas-dia-hora table tbody { text-align: center; }

#relatorio-chamadas-dia-hora table tbody .parcial:not(.maior-valor),
#relatorio-chamadas-dia-hora table tbody .totais td:not(:first-child):not(.maior-valor) { background-color: #4ECDC4 !important; }

#relatorio-chamadas-simultaneas-dia-hora table tbody .pico:not(.maior-valor),
#relatorio-chamadas-simultaneas-dia-hora table tbody .maior-pico td:not(.maior-valor) { background-color: #59ABE3 !important; }

#relatorio-chamadas-simultaneas-dia-hora table tbody .maior-pico td:fisrt-child { background-color: #59ABE3 !important; }

#relatorio-chamadas-dia-hora table thead tr td:first-child,
#relatorio-chamadas-dia-hora table tbody td:first-child:not(.maior-valor),
.periodo-mensal #relatorio-chamadas-dia-hora table thead tr:not(:last-child) td,
#relatorio-chamadas-dia-hora table tbody tr:last-child { background-color: #86E2D5 !important; }

#relatorio-chamadas-simultaneas-dia-hora table thead tr:not(:last-child) td,
#relatorio-chamadas-simultaneas-dia-hora .periodo-mensal table thead tr:not(:last-child) td,
#relatorio-chamadas-simultaneas-dia-hora table thead tr td:first-child,
#relatorio-chamadas-simultaneas-dia-hora table tbody td:first-child:not(.maior-valor),
#relatorio-chamadas-simultaneas-dia-hora table tbody tr:last-child { background-color: #89C4F4 !important; }

#relatorio-chamadas-dia-hora table .maior-valor,
#relatorio-chamadas-dia-hora table .maior-valor span
#relatorio-chamadas-simultaneas-dia-hora table .maior-valor,
#relatorio-chamadas-simultaneas-dia-hora table .maior-valor span {
    font-weight: bold;
    color: white;
}

#relatorio-chamadas-dia-hora table .maior-valor,
#relatorio-chamadas-dia-hora table .maior-valor span { background-color: #1BA39C !important; }

#relatorio-chamadas-simultaneas-dia-hora table .maior-valor,
#relatorio-chamadas-simultaneas-dia-hora table .maior-valor span { background-color: #2574A9 !important; }

@media print {
    #relatorio-chamadas-dia-hora table .maior-valor,
    #relatorio-chamadas-simultaneas-dia-hora table .maior-valor,
    #relatorio-chamadas-dia-hora table .maior-valor span,
    #relatorio-chamadas-simultaneas-dia-hora table .maior-valor span {
        color: white !important;
    }
}

#relatorio-chamadas-simultaneas-dia-hora table .maior-valor-dia:not(.maior-valor),
#relatorio-chamadas-dia-hora table .maior-valor-dia:not(.maior-valor) {
    font-weight: bold;
    background-color: #ecf0f1 !important;
}

#relatorio-chamadas-simultaneas-dia-hora table thead .dia-semana { font-weight: normal; }

#container-relatorio-chamadas-simultaneas-dia-hora,
.periodo-mensal {
    width: 1200px !important;
    margin: 0 auto !important;
    padding-bottom: 5em;
}

.periodo-mensal.chamadas-dia-hora { width: 1400px !important; }

.page-sidebar.navbar-collapse { max-height: none !important; }

#relatorio-chamadas-simultaneas-dia-hora .hora-pico td span,
.periodo-mensal .porcentagem-dia td span {
    display: block;
    margin: 10px 0;
    transform: rotate(-90deg);
}

input[disabled],
select[disabled],
textarea[disabled] { cursor: not-allowed; }

#container-relatorio .totais-chamadas { margin-top: 15px; }

.bg-relatorio-tags-atendimento { background-color: #59C6F9; }

#relatorios-personalizados .custom-loading {
    height:100vh;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}

#relatorios-personalizados .custom-loading.hidden {
    height: 0;
    overflow: hidden;
    opacity: 0;
    display: block !important;
}

@media print {
    body,
    .portlet-body { background-color: white !important;  }

    .page-content { margin-left: 0; }

    table,
    table tr { border: 1px solid black !important; }
}

@media screen {
    #relatorios-personalizados .cabecalho-relatorio { display: none; }
}

#relatorio-personalizado .container-filtros span:not(:first-child) { margin-left: 15px; }

#relatorio-personalizado .portlet-body { overflow: hidden; }
#relatorio-personalizado .portlet-body .top .qnt-linhas { float: left; }
#relatorio-personalizado .portlet-body .top .qnt-registros { text-align: center; }
#relatorio-personalizado .portlet-body .top .input-filtro { float: right; }
#relatorio-personalizado .portlet-body .bottom .qnt-registros { float: left; }
#relatorio-personalizado .portlet-body .bottom .paginacao { float: right; }
#relatorio-personalizado .portlet-body .bottom .clear { clear: both; }

#tableRelWhatsappContainer .dataTables_wrapper .row {
    clear: both;
    width:100%;
}
/* Estilo geral da tabela */
.tableRelWhatsapp, #tableRelWhatsappContatos {
    width: 100%;
    border-collapse: collapse;
}

/* Estilo das células e linhas */
.tableRelWhatsapp td, .tableRelWhatsapp th, 
#tableRelWhatsappContatos td, #tableRelWhatsappContatos th {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Cabeçalho da tabela */
.tableRelWhatsapp th, #tableRelWhatsappContatos th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

/* Alterando a cor de fundo das linhas pares para melhor visualização */
.tableRelWhatsapp tr:nth-child(even), #tableRelWhatsappContatos tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Efeito hover nas linhas */
.tableRelWhatsapp tr:hover, #tableRelWhatsappContatos tr:hover {
    background-color: #f1f1f1;
}

/* Estilo para a sub-tabela que aparece ao clicar no usuário */
.table_sub {
    background-color: #ebebeb;
    font-size: 12px;
}

/* Ajuste de margens */
.ml-8 {
    margin-left: 8px;
}

.tableRelWhatsapp table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
    border: 1px solid #ddd !important;
}

/* Ícones de controle */
.details-control {
    cursor: pointer;
}

.totais-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.totais-cards .card {
    flex: 1 1 18%;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: rgb(0, 0, 0);
    opacity: 0.8;
    font-family: Arial, sans-serif;
}
.whatsapp-totais .card {
    flex: 1 1 15%;
}
.totais-cards .card h4 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

.totais-cards .card p {
    font-size: 1.5em;
    margin: 5px 0 0;
}

.card-contacts {background-color: #4caf50;}
.card-received {background-color: #2196f3;}
.card-sent {background-color: #ff9800;}
.card-automatic {background-color: #9c27b0;}
.card-total {background-color: #e91e63;}
.card-unique-contacts {
    background-color:#007562;
}
.whatsapp-preview-modal .label {
    border-radius: 10px !important;
}
.whatsapp-preview-modal .nome-paciente {
    background-color: #9c27b0;
}
.whatsapp-preview-modal .telefone {
    background-color: #4caf50;
}
.whatsapp-totais .card * {
    color:white;
}
.totais-cards-atividades {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center; /* Centraliza os itens caso faltem cards na linha */
}

.card-item {
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    color: #333;
    transition: transform 0.3s ease;
    flex: 1 1 calc(24% - 15px); /* 3 cards por linha */
    max-width: calc(24% - 15px); /* Limita o tamanho */
    box-sizing: border-box;
}

.card-item:hover {
    transform: scale(1.05);
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card-item h2 {
    font-size: 100%;
    margin: 10px 0 5px 0;
    text-align: center;
    font-weight: 500 !important;
}

.card-item p {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    color: #007bff;
}

.icon-card {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5em;
    opacity: 0.8;
}


/* Cores diferentes para cada card */
.card-item:nth-child(1) { background-color: #e0f7fa; }
.card-item:nth-child(2) { background-color: #f1f8e9; }
.card-item:nth-child(3) { background-color: #fff3e0; }
.card-item:nth-child(4) { background-color: #fce4ec; }
.card-item:nth-child(5) { background-color: #e8eaf6; margin-left: 30px; }
.card-item:nth-child(6) { background-color: #f3e5f5; }
.card-item:nth-child(7) { background-color: #e0f2f1; }
.card-item:nth-child(8) { background-color: #f9fbe7; }

.texto-negrito {
    font-weight: bold;
    font-size: 13pt;
}
/* Ajustes de responsividade */
@media (max-width: 992px) {
    .card-item {
        flex: 1 1 calc(33.33% - 15px);
    }
}

@media (max-width: 600px) {
    .card-item {
        flex: 1 1 100%; /* 1 card por linha em telas pequenas */
    }
}

/* Estilo para o switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    margin-right: 10px;
    vertical-align: middle;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Cor quando o checkbox está marcado */
input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Estilo do texto */
.checkbox-label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    vertical-align: middle;
}
#filtro_aprovada {
    width: 80px;
    color: #333333;
    font-weight: normal;
    line-height: 34px;
    text-align: left;
}
/* Classes para as linhas da tabela */
.pendente {
    border-color: #c3a420 !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.pendente-content {
    color: #c3a420;
}

.concluida {
    border-color: #008143 !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.concluida-content {
    color: #008143;
}

.atrasada {
    border-color: #b02027 !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.atrasada-content {
    color: #b02027;
}

.realizando {
    border-color: #0227ac !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.realizando-content {
    color: #007bff;
}

.excluido-content {
    color: #008143;
    text-align: center;
    cursor: pointer;
}

.nulo-content {
    color: #008143;
    text-align: center;
    cursor: pointer;
}

/* Classes específicas para textos */
.text-claro {
    color: #fff; /* Branco para contraste em fundos escuros */
}

.text-escuro {
    color: #000; /* Preto para contraste em fundos claros */
}

/* Classes para ícones */
.icon-default {
    color: inherit; /* Inherita a cor do texto pai */
}

.text-ellipsis {
    white-space: nowrap; 
    overflow: hidden;  
    text-overflow: ellipsis;  
    max-width: 200px;  
}

.periodo_anterior {
    opacity: 0.6 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.informada-indicador {
    font-weight: bold;
    color: lightskyblue; /* Escolha a cor que preferir */
    margin-right: 5px; /* Espaço entre o indicador e a data */
}

.criada-indicator {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 80% !important;
    background-color: rgb(252, 73, 73);
    color: rgb(207, 246, 152);
    font-weight: bold;
    margin-right: 5px;
    font-size: 12px;
}

#tableRelPainelSla tr.imediato {
    background:rgba(255, 0, 0, 0.432)
}
#tableRelPainelSla tr.para-o-mesmo-periodo {
    background:rgba(255, 166, 0, 0.596)
}
#tableRelPainelSla tr.para-o-mesmo-dia {
    background:rgba(14, 100, 212, 0.795)
}
#tableRelPainelSla tr.para-o-mesmo-dia {
    background:rgba(14, 100, 212, 0.795)
}
#tableRelPainelSla tr.para-o-dia-seguinte{
    background:rgba(14, 100, 212, 0.466)
}
#tableRelPainelSla tr.agendado{
    background:rgba(13, 63, 0, 0.534)
}
#tableRelPainelSla tr.projeto{
    background:rgba(89, 226, 55, 0.274)
}
#tableRelPainelSla tr.spam{
    background:rgba(0, 0, 0, 0.678)
}
#tableRelPainelSla {
    background:#f5f6fa;
}

#tableRelPainelSLAContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

#tableRelPainelSLAContainer .card-item {
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    color: #333;
    transition: transform 0.3s ease;
    flex: 1 1 calc(10% - 15px); 
    box-sizing: border-box;
}

#tableRelPainelSLAContainer .card-item:hover {
    transform: scale(1.05);
}

#tableRelPainelSLAContainer .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#tableRelPainelSLAContainer .card-content h2 {
    font-size: 100%;
    margin: 10px 0 5px 0;
    text-align: center;
    font-weight: 500 !important;
}

#tableRelPainelSLAContainer .icon-card {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.5em;
    opacity: 0.8;
}

#tableRelPainelSLAContainer .texto-negrito {
    font-weight: bold;
    font-size: 20pt;
}

#tableRelPainelSLAContainer .card-item:nth-child(1) { background-color: #fde4e1; } /* Tom pastel de vermelho */
#tableRelPainelSLAContainer .card-item:nth-child(2) { background-color: #fff7db; } /* Tom pastel de amarelo */
#tableRelPainelSLAContainer .card-item:nth-child(3) { background-color: #d9f5e3; color: #388E3C !important;} /* Tom pastel de verde */
#tableRelPainelSLAContainer .card-item:nth-child(4) { background-color: #e1f3fc; } /* Tom pastel de azul */
#tableRelPainelSLAContainer .card-item:nth-child(5) { background-color: #fbe7ff; } /* Tom pastel de lilás */
#tableRelPainelSLAContainer .card-item:nth-child(6) { background-color: #fcf1e1; } /* Tom pastel de laranja */
#tableRelPainelSLAContainer .card-item:nth-child(7) { background-color: #f0e7fe; } /* Tom pastel de roxo */
#tableRelPainelSLAContainer .card-item:nth-child(8) { background-color: #eafaf8; } /* Tom pastel de turquesa */

#tableRelPainelSla td.sla {
    vertical-align: middle;
    text-align: center;
}
#tableRelPainelSla td.sla .sla-icon::after{
    font: normal normal normal 18px/1 FontAwesome;
}

#tableRelPainelSla tr.imediato td.sla .sla-icon::after{
    color: rgba(255, 0, 0, 1);
    content:"\f06a";
}
#tableRelPainelSla tr.para-o-mesmo-periodo td.sla .sla-icon::after{
    color: rgba(255, 166, 0, 1);
    text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
    content:"\f017";
}
#tableRelPainelSla tr.ate-o-proximo-periodo td.sla .sla-icon::after{
    color:rgba(251, 255, 0, 0.9);
    content: "\f252";
    text-shadow: 0px 1px 1px rgba(0,0,0,0.8)
}
#tableRelPainelSla tr.para-o-mesmo-dia td.sla .sla-icon::after{
    color: rgba(14, 100, 212, 1);
    content: "\f073";
    text-shadow: 0px 1px 1px rgba(0,0,0,0.8)
}
#tableRelPainelSla tr.para-o-dia-seguinte td.sla .sla-icon::after{
    color: rgba(14, 100, 212, 1);
    content: "\f271";
    text-shadow: 1px 1px 1px black;
}
#tableRelPainelSla tr.agendado td.sla .sla-icon::after{
    color: rgba(13, 63, 0, 1);
    content: "\f274";
    text-shadow: 1px 1px 1px black;
}
#tableRelPainelSla tr.projeto td.sla .sla-icon::after{
    color: rgba(89, 226, 55, 0.671);
    content: "\f273";
    text-shadow: 1px 1px 1px black;
}
#tableRelPainelSla tr.concluido td.sla .sla-icon::after{
    color: rgb(11, 255, 11);
    content: "\f058";
}
#tableRelPainelSla tr.spam td.sla .sla-icon::after{
    color: rgb(0, 0, 0);
    content: "\f1f8";
}


#RelLigacacoesSecretarias .card {
    border-radius:0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border:none !important;
    color: black;
}

#RelLigacacoesSecretarias .total-geral .card {
    background: rgba(0, 123, 255, 0.3);
    color: black;
}

#RelLigacacoesSecretarias .card i {
    font-size: 22px;
    position: absolute;
    left: 10px;
    margin-top: -9px;
    transition: 200ms ease all;
}

#RelLigacacoesSecretarias .cards {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
}
#RelLigacacoesSecretarias .cards > div {
    padding-left:5px;
    padding-right:5px;
    transition: 0.3s ease;
    background: none !important;
    box-shadow:none !important;
}
#RelLigacacoesSecretarias .cards > div:hover {
    transform: scale(1.05);
}
#RelLigacacoesSecretarias .card.total-hibrido i.fa-phone {
    left:30px;
}

#RelLigacacoesSecretarias .card.total-comuns {
    background:#a5fbff;
}
#RelLigacacoesSecretarias .card.total-whatsapp {
    background: #25D366;
}
#RelLigacacoesSecretarias .card.total-hibrido {
    background: #a6acff;
}
#RelLigacacoesSecretarias .card.total-geral {
    background:#e0f7fa;
}
#RelLigacacoesSecretarias .card.total-secretarias {
    background:#f1f9053b;
}
#RelLigacacoesSecretarias .card-title {
    font-weight: bold !important;
    text-transform: uppercase;
}
#RelLigacacoesSecretarias .cards p {
    color:black;
}