﻿@font-face {
    font-family: 'segoe-bold';
    src: url('../fonts/segoe/Segoe-UI-Bold.ttf') format('opentype');

}

ul.navbar-nav.ml-auto {
    padding: 7rem 0px 4rem;
}

.sidebar .nav-item .nav-link .img-profile,
.topbar .nav-item .nav-link .img-profile {
    width: 5rem !important;
    height: 8rem !important;
}

.table th {
    text-align: center;
}

input[name=query-submit] {
    margin-top: 25px;
}

#title-filtro {
    margin-bottom: 30px;
}

.tabla-consulta {
    margin-top: 40px;
}

.logo {
    margin-top: -20px;
}

.logo img {
    width: 170px;
    margin-top: -7px;
}

.navbar {
    height: 65px;
    padding-top: 15px
}

.tabla-consulta>tbody>tr.warning>td {
    background-color: #f2dede;
}

/*.tabla-consulta > tbody > tr.danger > td {
    background-color: #dca7a7;
}
*/
/*.danger {*/
.tabla-consulta>tbody>tr.danger>td {
    animation: myfirst 3s;
    -moz-animation: myfirst 3s infinite;
    /* Firefox */
    -webkit-animation: myfirst 3s infinite;
    /* Safari and Chrome */
}

@-moz-keyframes myfirst

/* Firefox */
    {
    0% {
        background: #dca7a7;
    }

    50% {
        background: #f2dede;
    }

    100% {
        background: #dca7a7;
    }
}

@-webkit-keyframes myfirst

/* Safari and Chrome */
    {
    0% {
        background: #dca7a7;
    }

    50% {
        background: #f2dede;
    }

    100% {
        background: #dca7a7;
    }
}

/* #btn-guardar,
.btn-filtrar {
    margin-top: 25px;
} */

.btn-filtrar {
    margin-left: 5px;
}

#btns-week {
    float: right;
    margin-top: 14px;
}

.btn-modS {
    /*margin-left: 10px;*/
    float: right;
    margin-top: -3px;
}

#modS_Modal .modal-dialog {
    top: 30%;
}

.line-T {
    text-decoration: line-through;
    background-color: #dcdcdc;
}

#accordion {
    margin-top: 10px;
}

#accordion .badge {
    float: right;
    margin-left: 5px;
}

.panel #fecha_hora {
    padding: 7px 10px 7px 10px;
}

.panel #tipo_cliente {
    padding: 7px 10px 7px 10px;
    height: 34px;
}

#accordion .badge-unasignT,
#badges .badge-unasignT {
    /*background-color: #d9534f;*/
    /*background-color: #990000;*/
    background-color: #df3838;
    /*color: #fff;*/
}

#accordion .badge-llamadaSal,
#badges .badge-llamadaSal {
    /*background-color: #d9534f;*/
    /*background-color: #990000;*/
    background-color: #df3838;
    /*color: #fff;*/
}

#accordion .badge-unasignC,
#badges .badge-unasignC {
    /*background-color: #809160;*/
    background-color: #FFA500;
    /*color: #fff;*/
}

#accordion .badge-unclosedT,
#badges .badge-unclosedT {
    /*background-color: #f0ad4e;*/
    background-color: #0099cc;
    /*color: #fff;*/
}

#accordion .badge-unclosedQ,
#badges .badge-unclosedQ {
    /*background-color: #9a7b5e;*/
    background-color: #008000;
    /*color: #fff;*/
}

#accordion .badge-leadN,
#badges .badge-leadN {
    background-color: #5cb85c;
    color: #fff;
}

#accordion .badge-leadLnA,
#badges .badge-leadLnA {
    background-color: #008080;
    color: #fff;
}

#accordion .btn-Tlist {
    background-color: #df3838;
    border-color: #da2323;
}

#accordion .btn-Clist {
    background-color: #FFA500;
    border-color: #e69500;
}

/*Para los cuadros del código de colores*/
.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 12px;
    top: 15px;
}

.color-title {
    padding-left: 10px;
}

/*.color-div {
    float: right;
}*/

/*Para el simbolo de exclamación de los contactos invalidos*/
.fa-exclamation-triangle {
    color: #337ab7;
}

/*para el simbolo de exclamación sobre el td de la llamada*/
#accordion .fa-exclamation-triangle {
    margin-left: 7px;
}

.color-title .fa {
    margin-right: 5px;
}

.ex-red {
    color: #d9534f;
}

/*para el checkbox "otros" del form*/
#llamada-form .checkbox {
    margin-top: -14px;
}

/*List Group Horizontal-------------------*/
.list-group-horizontal {
    /*text-align: center;*/
    margin-left: 5px;
}

.list-group-horizontal .list-group-item {
    display: inline-block;
    width: 106px;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left: -4px;
    margin-right: 0;
    margin-top: 10px;
}

.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
}

.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
}

#lista-horas p {
    margin: 0 0 0 5px;
}

#lista-horas a {
    color: #333;
}

.totNums {
    font-weight: bold;
}

#tot-title {
    font-weight: bold;
    width: 90px;
}

/*List Group Horizontal-------------------*/

.fecha_asign {
    font-size: 12px;
}

#llamada-form .checkbox label:nth-child(2) {
    margin-left: 10px;
}

#llamada-form .checkbox .boldText {
    font-weight: bold;
    color: #d9534f;
}

.llamadaSal .fecha_llamada,
.llamadaSal .num_llamada {
    /*background-color: #f2afaf;*/
    color: #df3838;
    font-weight: bold;
}

.llamadaSal .cont_llamada {
    color: #df3838;
}

#userLogin p {
    margin-top: 15px;
    color: #e5e5e5;
}

#userLogin li a {
    color: #337ab7;
}

#asunto_modal {
    margin: 20vh auto 0px auto;
}


.popover {

    max-width: 800px !important;

}


#ticketSugerencias {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: calc(100% - 2px);
    max-height: 300px;
    /* Ajusta la altura para más resultados */
    overflow-y: auto;
    /* Permite desplazarse si hay muchos elementos */
    z-index: 1000;
    /* Asegura que las sugerencias estén encima */
}

.sugerencia-item {
    padding: 8px;
    cursor: pointer;
}

.sugerencia-item:hover {
    background: #f0f0f0;
}

.form-control,
#fecha_hora,
#tipo_cliente {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #2168A7;
    border-radius: 6px;
}

label {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #373737;
    font-family: 'segoe-bold';
    margin-bottom: 10px;
}

#btn-guardar {
    background: transparent linear-gradient(180deg, #820707 0%, #E00000 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-size: 16px;
    font-family: 'segoe-bold';
    color: #fefefebf;
    border: none;
}

#btn-guardar:focus {
    box-shadow: transparent;
    border: transparent;
}

#btn-guardar:hover {
    color: white;
}

.btn-filtrar {
    background: transparent linear-gradient(180deg, #2168A7 0%, #113454 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-size: 16px;
    font-family: 'segoe-bold';
    color: #fefefebf;
}

.panel-heading {
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 6px !important;
    padding: 21px 20px;
}

.panel-heading .panel-title a {
    text-align: left;
    font-size: 20px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.badge-numllamada {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.btn-asignC {
    background: transparent linear-gradient(180deg, #820707 0%, #E00000 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-size: 11px;
    font-family: 'segoe-bold';
    color: #ffffffd4;
    border: none;
    box-shadow: none;
}

.btn-asignC:hover {
    color: white;
}


/**********modal filtrar Llamadas***********/
.modal-title.fLla {
    text-align: center;
    font-size: 30px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.modal-header.fLla {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 20px 20px 0px 0px;
    position: relative;
}

.close.fLla {
    float: right;
    font-size: 23px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
    transition: all .2s ease-in-out;
}

.close.fLla:hover {
    color: #ffffffc3;
}

.modal-header.fLla .close.fLla {
    position: absolute;
    line-height: 0;
    left: 91.5%;
    top: 19%;
    padding: 0;
    margin: 0;
}

.modal-content.fLla {
    border-radius: 23px 23px 20px 20px;
    border: none;
}

.modal-body.fLla {
    position: relative;
    padding: 30px;
}

/**********modal cotizar***********/
.modal-title.coti {
    text-align: left;
    font-size: 36px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.modal-header.coti {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 20px 20px 0px 0px;
}

.close.coti {
    float: right;
    font-size: 23px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 0 #fff;
    opacity: 1;
    transition: all .2s ease-in-out;
}

.close.coti:hover {
    color: #ffffffc3;
}

.modal-header.coti .close.coti {
    position: absolute;
    line-height: 0;
    left: 96.5%;
    top: 7%;
    padding: 0;
    margin: 0;
}

.modal-content.coti {
    border-radius: 23px 23px 20px 20px;
    border: none;
}

.modal-body.coti {
    position: relative;
    padding: 30px;
}

/***********modal Reasignar asunto**********/
.modal-title.reas {
    text-align: center;
    font-size: 25px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.modal-header.reas {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 20px 20px 0px 0px;
}

.modal-header.reas .close.reas {
    position: absolute;
    top: 5%;
    left: 92%;
    opacity: 1;
    color: white;
    padding: 0;
    margin: 0;
    border: none;
    line-height: 0;
}

.modal-header.reas:hover,
.close.reas:hover {
    color: rgba(255, 255, 255, 0.781);
}

.modal-content.reas {
    border-radius: 23px 23px 20px 20px;
    border: none;
}

/**************modal Seleccionar opcion**************/

.modal-title.opci {
    text-align: center;
    font-size: 30px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.modal-header.opci {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 20px 20px 0px 0px;
    position: relative;
}

.modal-content.opci {
    border-radius: 23px 23px 20px 20px;
    border: none;
    background: #EFF4F8 0% 0% no-repeat padding-box;
}

.modal-header.opci .close.opci {
    position: absolute;
    left: 95%;
    top: 20%;
    color: white;
    opacity: 1;
    padding: 0;
    margin: 0;
    line-height: 0;
}

.textOpcio {
    font-size: 20px;
    text-align: center;
    color: #464646;
}

.btnTick {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    padding: 15px 0px 15px;
}

.btnOpcion {
    background: transparent linear-gradient(180deg, #820707 0%, #E00000 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-family: 'segoe-bold';
    font-size: 16px;
    color: #fefefed6;
    border: none;
    padding: 5px 20px;
}

.btnOpcion2 {
    background: transparent linear-gradient(180deg, #2168A7 0%, #113454 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-family: 'segoe-bold';
    font-size: 16px;
    color: #fefefed6;
    border: none;
    padding: 5px 20px;
}

.btnOpcion:hover,
.btnOpcion2:hover,
.btnacpopci:hover {
    color: #FEFEFE;
}

.modal-body.opci {
    position: relative;
    padding: 0px 45px 0px;
}

.modal-footer.opci {
    padding: 0px 45px 15px;
    text-align: right;
    border-top: none;
}

.labOpc {
    margin-bottom: 0px;
}

.cuenOpc {
    margin: 15px 0px 25px;
}

.btnacpopci {
    background: transparent linear-gradient(180deg, #820707 0%, #E00000 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-size: 16px;
    font-family: 'segoe-bold';
    color: #fefefed6;
    border: none;
    padding: 5px 20px;
}

.btncanpopci {
    border: 1px solid #707070;
    border-radius: 22px;
    text-align: center;
    font-size: 16px;
    font-family: 'segoe-bold';
    color: #6b6b6bad;
    background: white;
    padding: 4px 8px;
}

.btncanpopci:hover {
    color: #6b6b6b;
}

/******************Modal agregar seguimiento******************/

.modal-title.segu {
    text-align: center;
    font-size: 25px;
    font-family: 'segoe-bold';
    color: #FFFFFF;
}

.modal-header.segu {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #2168A7 0% 0% no-repeat padding-box !important;
    border-radius: 20px 20px 0px 0px;
    position: relative;
}

.modal-content.segu {
    border-radius: 23px 23px 20px 20px;
    border: none;
    background: #EFF4F8 0% 0% no-repeat padding-box;
}

.close.segu {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 95%;
    top: 12%;
    color: white;
    line-height: 0;
    opacity: 1;
}

.comentariosSolicitud {
    text-align: left;
    font-size: 17px;
    color: #464646;
}

.titlCom {
    text-align: left;
    font-family: 'segoe-bold';
    font-size: 20px;
    color: #464646;
}

.contAgSe {
    padding: 0px 20px;
}

.modal-footer.segu {
    padding: 0px 45px 15px;
    text-align: right;
    border-top: none;
}

.btnGuSe {
    background: transparent linear-gradient(180deg, #820707 0%, #E00000 100%) 0% 0% no-repeat padding-box;
    border-radius: 22px;
    text-align: center;
    font-family: 'segoe-bold';
    font-size: 16px;
    color: #fefefed6;
    border: none;
    padding: 5px 20px;
}

.btnCaSe {
    border: 1px solid #707070;
    border-radius: 22px;
    text-align: center;
    font-size: 16px;
    font-family: 'segoe-bold';
    color: #6b6b6bad;
    background: transparent;
    padding: 4px 8px;
}

.btnGuSe:hover {
    color: white;
}

.btnCaSe:hover {
    color: #6B6B6B;
}

.panel-collapse {
    border: 1px solid #2168a7b5;
    border-radius: 10px 10px 10px 10px;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 12px;
}
.panel {
    margin-bottom: 0px;
}