@import url('/css/fonts.css');

body {
    background-color: #edf0f6;
    font-family: 'roboto', sans-serif;
    color: #3a3c40;
}

a {
    transition: all 0.3s ease;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

p { 
    font-size: 12px;
}

.tarjeta {
    background-color: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 20px;
}

.overflow-1 {
    height: 300px;
    overflow-y: auto;
}

.loader {
    display: block;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    margin-bottom: 60px;
    mix-blend-mode: multiply;
}

/*===================================================
COLORES DE TEXTO
===================================================*/

.texto-verde {
    color: #53c103;
}

.texto-rojo {
    color: #c1031c;
}

.texto-gris {
    color: #bfc1c5;
}

.texto-azul {
    color: #007cff;
}


/*===================================================
PILLS BADGES HORA
===================================================*/

span.pill {
    padding: 4px 5px !important;
    border-radius: 3px;
    height: 20px !important;
    min-width: 60px;
    text-align: center;
    float: left;
    margin-right: 4px;
    font-size: 12px;
}

.pill-gris {
    background-color: #343a4014;
    font-weight: 600 !important;
}

.pill-verde {
    background-color: #47c556;
    color: #fff;
}

.pill-lila {
    background-color: #cc0369;
    color: #fff;
}



/*===================================================
FULL CALENDAR
===================================================*/

.fc button {
    padding: 0px 12px;
    box-shadow: none;
    text-shadow: none;
    height: 32px !important;
    font-size: 12px !important;
    text-transform: capitalize;
}

.fc-state-default {
    border: 0px solid;
    background-color: #dadee4;
    color: #6a6e75;
    background-image: none;
}

.fc-state-default:hover {
    background-color: #ced2d8 !important;
}

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active {
    background-color: #00adb1;
    color: #fff;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
}

.fc-toolbar .fc-state-active:hover, .fc-toolbar .ui-state-active:hover {
    background-color: #09cec2 !important;
}

.fc-toolbar h2 {
    font-family: 'montserrat', sans-serif;
    font-size: 26px;
    text-transform: capitalize;
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0px;
    padding: 20px 20px 12px 20px;
}

#calendar thead th {
    background-color: #cfd7e438;
    font-family: 'montserrat', sans-serif;
    color: #a3a6ab;
    font-size: 12px;
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    text-transform: capitalize;
}

.fc-other-month {
    background-color: #eff3f780;
}

.fc button .fc-icon {
    top: -.15em;
}

.fc table {
    width: calc(100% + 1px);
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: left;
    font-family: 'montserrat', sans-serif;
    font-weight: 500;
    padding: 0px;
    border-radius: 50%;
    width: 28px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    display: block;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number:hover {
    background-color: #F4F6F9;
}

.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
    border-color: #e5e8ec;
}

.fc tr td:first-child {
    border-left: 0px;
}

.fc tr td:last-child {
    border-right: 0px;
}

.fc-widget-content {
    border-bottom: 0px !important;
}

.fc-event, .fc-event-dot {
    /*background-color: #00adb1;*/
    /*box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);*/
    background-color: #cc0369;
    box-shadow: 00px 5px 10px -3px rgba(154, 13, 78, 0.61);
}

.fc-event:hover, .fc-event-dot:hover {
    /*background-color: #0dd4c8;*/
    background-color: #ea0d7d;
}

.fc-day-grid-event {
    margin: 1px 5px 0;
}

span.fc-time {
    font-weight: 600 !important;
    margin-right: 1px;
}

span.fc-time::after {
    content: '-';
    margin-left: 4px;
}

.fc-event {
    position: relative;
    display: block;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 0px solid #3a87ad;
    color: #fff;
}

.fc-content {
    color: #fff;
    font-size: 12px;
    padding: 3px 4px;
}

.fc-content-skeleton table tbody tr:last-child .fc-event {
    margin-bottom: 5px !important;
}

.agenda-profesional {
    background-color: #cc0369;
    border-radius: 3px;
    padding: 4px 12px 4px 12px;
    position: relative;
    height: 42px;
    margin-bottom: 4px;
}

.agenda-profesional i {
    position: absolute;
    font-size: 24px;
    left: 10px;
    color: #00000057;
    top: 9px;
}

.cal-contador {
    display: inline-block;
    text-align: center;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    background-color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
}

.cal-profesional {
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    width: 100%;
    display: block;
    font-size: 13px;
    color: #fff;
    line-height: 13px;
    margin-top: 4px;
    margin-bottom: -6px;
}

.cal-cargo {
    font-size: 11px;
    color: #ffffffa3;
}

.simbologia-frame {
    max-height: 400px;
    overflow-y: scroll;
    padding: 4px;
}

.fc-title {
    text-transform: capitalize;
}

/*===================================================
CATEGORIAS, TAGS O ETIQUETAS
===================================================*/

table tbody tr td span i {
    margin-right: 4px;
    width: 12px;
}



/*===================================================
FORMULARIOS Y BOTONES
===================================================*/

button#sidebarCollapse {
    position: absolute;
    bottom: 0px;
    border-radius: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.06);
    color: #ffffff7a;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

button#sidebarCollapse:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.input-group-text {
    padding: 10px 10px;
    font-size: 12px;
    line-height: 12px;
    height: 38px;
    min-width: 38px;
    border-radius: 3px 0px 0px 3px !important;
    text-align: center;
}

.input-group-text i {
    font-size: 16px;
    color: #495057;
}

.dropdown-menu {
    box-shadow: 0px 5px 15px -1px rgba(0,0,0,0.3);
    border: 0px solid;
}

.dropdown-item {
    font-size: 13px;
    color: #3a3c40;
    transition: all 0s ease;
    padding: 5px 12px;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #0a9f97;
    text-decoration: none;
    background-color: #edf0f6;
}

.dropdown.float-right .dropdown-menu.show {
    /*min-width: 100px !important;
    transform: translate(-69px, 30px) !important;*/
}

.form-group {
    margin-bottom: 5px !important;
}

.form-control {
    /*padding-top: 5px;*/
    padding: 6px 12px;
    min-height: 38px;
    font-size: 13px;
    position: relative;
    border: 1px solid #D8DCE2;
    /*box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);*/
    transition: all 0s ease;
    margin: 0px !important;
    border-radius: 3px;
}

.form-control:hover {
    border: 2px solid #9ba0a9;
    padding: 6px 11px;
}

.form-control:focus {
    border: 2px solid #00adb1;
    padding: 6px 11px;
    /*box-shadow: 0px 4px 8px -2px rgba(0,0,0,0.3), inset 0px 0px 0px 1px #00adb1;*/
    box-shadow: 0px 4px 8px -2px rgba(0,0,0,0.0);
}

.form-control::-moz-placeholder {
  color: #a4a9b3;
}
.form-control:-ms-input-placeholder {
  color: #a4a9b3;
}
.form-control::-webkit-input-placeholder {
  color: #a4a9b3;
}

select.form-control {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;       /* remove default arrow */
    position: relative;
    background-image: url('/img/drop1.png');
    background-repeat: no-repeat;
    background-position: right 15px center;
    text-transform: capitalize;
    padding-right: 30px;
}

select.form-control:hover {
    background-image: url('/img/drop1.png');
    background-position: right 14px center;
}

select.form-control:focus {
    background-image: url('/img/drop2.png');
    background-position: right 14px center;
}


textarea.form-control:hover, textarea.form-control:focus {
    padding: 5px 11px;
}

.mensaje-masivo {
    padding-top: 45px;
}

.mensaje-masivo:hover, .mensaje-masivo:focus {
    padding-top: 44px !important;
}

.mensaje-masivo-tools {
    position: absolute;
    top: 5px;
    width: 100%;
    height: 35px;
    z-index: +1;
    border-bottom: 1px solid #4045461c;
    padding: 0px 5px;
}

th.fechahora {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

th.tipo {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

th.programas {
    width: 130px;
    min-width: 200px;
    max-width: 200px;
}

th.sector {
    width: 130px;
    min-width: 200px;
    max-width: 200px;
}

th.mensaje {
    width: 130px;
    min-width: 200px;
    max-width: 200px;
}

.llamadas {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
}

.input-buscador-small {
    padding-left: 40px;
    min-height: 42px;
    width: 40px;
    font-size: 13px;
    position: relative;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: all 0.4s ease;
    background-color: #33404c14;
    background-image: url('/img/icon_buscar.png');
    background-repeat: no-repeat;
    background-position: right 11px center;
    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.0);
}

.input-buscador-small:hover {
    border: 1px solid #33404c14;
    background-color: #fff;
}

.input-buscador-small:focus {
    padding-left: 10px;
    outline: none;
    width: 100%;
    border: 1px solid #E70441;
    background-color: #fff;
    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
}

.input-buscador-medium {
    padding-left: 12px;
    min-height: 42px;
    width: 250px;
    font-size: 13px;
    position: relative;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: all 0.2s ease;
    background-color: #fff;
    background-image: url('/img/icon_buscar.png');
    background-repeat: no-repeat;
    background-position: right 11px center;
    box-shadow: 0 4px 12px -3px rgba(0,0,0,0.2) !important;
}

.input-buscador-medium:hover {
    border: 2px solid #00adb1;
    background-color: #fff;
}

.input-buscador-medium:focus {
    outline: none;
    border: 2px solid #00adb1;
    background-image: url('/img/icon_buscar_focus.png');
    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.4);
}

.dropdown label {
    position: absolute;
    top: -20px;
}

.dropdown-toggle::after {
    margin-left: 15px;
}

.btn-small.dropdown-toggle.w-100::after {
    right: 10px;
    margin-top: 7px;
    position: absolute;
}

.btn-blanco.dropdown-toggle:hover, .btn-blanco.dropdown-toggle:active, .btn-blanco.dropdown-toggle:focus {
    color: #00adb1;
    box-shadow: inset 0 0 0 2px #00adb1, 0px 4px 12px -3px rgb(213, 217, 224) !important;
}

.btn-blanco.dropdown-toggle {
    width: 200px;
    padding-left: 15px;
    font-family: 'roboto', sans-serif;
    font-size: 12px;
    height: 42px;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 1px transparent, 0px 4px 12px -3px rgb(213, 217, 224) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn-small.dropdown-toggle.w-100 {
    text-align: left;
}

.filtros-drop .dropdown-menu.show {
    min-width: 100%;
    text-transform: capitalize;
}

.dropdown-toggle::after {
    margin-top: 8px;
    position: absolute;
    right: 12px;
}

.dropdown-toggle:empty::after {
    margin-top: 2px;
}

.dropdown-menu a i {
    display: block;
    float: left;
    width: 24px;
    font-size: 16px;
    text-align: center;
    margin-right: 8px;
}

tr#filter_global td {
    padding: 0px;
}

.drop-btn {
    display: inline-block;
    float: right;
}

.drop-btn .dropdown-menu.show {
    left: -34px;
}

.btn-invisible {
    background-color: transparent;
}

.btn-invisible:hover {
    background-color: #dadee469;
}

.btn {
    transition: all 0.2s ease;
    font-family: 'montserrat', sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 3px;
    border: 0px;
    position: relative;
}

.btn:focus {
    /* border: 2px solid red; */
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224), 0px 0px 0px 2px #00adb196;
}

.btn.disabled {
    background-color: #cecece !important;
    color: #8a8a8a;
    box-shadow: none;
    opacity: 0.5;
}

.btn.disabled:hover {
    background-color: #cecece !important;
    color: #8a8a8a;
    box-shadow: none;
    opacity: 0.5;
    cursor: not-allowed;
}


.btn-small {
    font-size: 12px;
    padding: 6px 12px;
    font-family: 'roboto', sans-serif;
    min-height: 30px;
}

.btn-small i {
    margin-right: 5px;
}

.btn-icono.btn {
    padding-left: 55px;
}

.btn-icono i {
    display: block;
    position: absolute;
    width: 40px;
    height: 41px;
    background-color: rgba(0, 0, 0, 0.07);
    padding-top: 12px;
    top: 0;
    left: 0;
    border-radius: 3px 0px 0px 3px;
    font-size: 16px;
}

.btn-primary {
    color: #fff !important;
    font-weight: 500;
    background-color: #00adb1 !important;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
}

.btn-primary:hover {
    background-color: #09cec2 !important;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
}

.btn-primary:active {
    background-color: #09cec2 !important;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
}

.btn-primary:focus {
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61), 0px 0px 0px 2px #00adb196 !important;
}

.btn-secondary {
    background-color: #dadee4;
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-secondary:hover {
    background-color: #ced2d8 !important;
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-secondary:active {
    background-color: #ced2d8 !important;
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-secondary:focus {
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224), 0px 0px 0px 2px #00adb196 !important;
    color: #6a6e75;
}

.btn-blanco {
    background-color: #fff;
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-blanco:hover {
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-blanco:active {
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224);
}

.btn-blanco:focus {
    box-shadow: 0px 4px 12px -3px rgb(213, 217, 224), 0px 0px 0px 2px #00adb196 !important;
    color: #6a6e75;
}

.btn-borde {
    background-color: #fff;
    border: 1px solid #dadee4;
    color: #6a6e75;
    box-shadow: 0px 4px 12px -3px rgba(18, 86, 156, 0);
    height: 30px;
}

.btn-borde:hover {
    border: 1px solid #6a6e75;
}

.btn-fucsia {
    background-color: #cc0369;
    box-shadow: 0px 5px 10px -3px rgba(154, 13, 78, 0.61);
    color: #fff;
}

.btn-amarillo {
    background-color: #e4bd09;
    box-shadow: 0px 5px 10px -3px rgba(154, 129, 13, 0.61);
    color: #fff;
}

.btn-naranjo {
    background-color: #ea5c0d;
    box-shadow: 0px 5px 10px -3px rgba(154, 63, 13, 0.61);
    color: #fff;
}

.btn-rojo {
    background-color: #c31134;
    box-shadow: 0px 5px 10px -3px rgba(142, 10, 42, 0.61);
    color: #fff;
}

.btn-lima {
    background-color: #afbf15;
    box-shadow: 0px 5px 10px -3px rgba(111, 134, 14, 0.61);
    color: #fff;
}

.btn-verde {
    background-color: #4cb911;
    box-shadow: 0px 5px 10px -3px rgba(38, 144, 17, 0.61);
    color: #fff;
}

.btn-turquesa {
    background-color: #058a96;
    box-shadow: 0px 5px 10px -3px rgba(13, 123, 154, 0.61);
    color: #fff;
}

.btn-morado {
    background-color: #7e2fbd;
    box-shadow: 0px 5px 10px -3px rgba(73, 17, 125, 0.61);
    color: #fff;
}

.btn-azul {
    background-color: #2437b1;
    box-shadow: 0px 5px 10px -3px rgba(17, 42, 128, 0.61);
    color: #fff;
}

.btn-celeste {
    background-color: #26a9e4;
    box-shadow: 0px 5px 10px -3px rgba(13, 84, 154, 0.61);
    color: #fff;
}

.btn-cian {
    background-color: #5bd6d4;
    box-shadow: 0px 5px 10px -3px rgba(89, 179, 187, 0.61);
    color: #fff;
}

.btn-gris {
    background-color: #b1b1b1;
    box-shadow: 0px 5px 10px -3px rgba(167, 167, 167, 0.61);
}

.btn-grafito {
    background-color: #868686;
    box-shadow: 0px 5px 10px -3px rgba(90, 90, 90, 0.61);
    color: #fff;
}

.btn-negro {
    background-color: #3c3c3c;
    box-shadow: 0px 5px 10px -3px rgba(84, 84, 84, 0.61);
    color: #fff;
}

.btn-cafe {
    background-color: #865134;
    box-shadow: 0px 5px 10px -3px rgba(130, 79, 28, 0.61);
    color: #fff;
}

.btn-mostaza {
    background-color: #af9701;
    box-shadow: 0px 5px 10px -3px rgba(115, 111, 11, 0.61);
    color: #fff;
}

.btn-burdeo {
    background-color: #9a0623;
    box-shadow: 0px 5px 10px -3px rgba(113, 27, 52, 0.61);
    color: #fff;
}

a.chosen-single.chosen-default, .chosen-container-single .chosen-single {
    padding-top: 6px;
    padding-left: 12px;
    min-height: 38px;
    font-size: 13px;
    position: relative;
    border: 1px solid #D8DCE2;
    margin-top: 1px;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    transition: all 0s ease;
}

a.chosen-single.chosen-default:hover, .chosen-container-single .chosen-single:hover {
    border: 1px solid #9ba0a9;
}

.chosen-container-active.chosen-with-drop .chosen-single {
    background-image: linear-gradient(#fff 20%,#fff 80%);
}

.chosen-container-single .chosen-single div b {
    margin-top: 4px !important;
    margin-left: 3px;
    width: 90%;
}

.cuadro-datos {
    padding: 20px;
    border: 1px solid #d8dce2;
    border-radius: 8px;
    margin: 10px 0px;
    margin-bottom: 25px;
    position: relative;
}

.cuadro-datos h1 {
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #3a3c40;
    background-color: #edf0f6;
    display: inline-block;
    position: absolute;
    top: -9px;
    left: 10px;
    padding: 0px 6px;
}

.cuadro-datos .label {
    text-align: right !important;
    width: 150px;
    font-family: 'montserrat', sans-serif;
    font-size: 11px;
    line-height: 12px;
    font-weight: 600;
    display: table-cell;
    vertical-align: middle;
    height: 38px;
}

.div-label {
    width: 150px;
    float: left;
}

.div-input {
    width: calc(100% - 150px);
    padding: 0px 15px;
    float: left;
}

.div-input p {
    margin-bottom: 0px;
    padding-top: 9px;
    font-size: 14px;
    font-weight: 300;
}

.custom-control-label {
    font-family: 'roboto';
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
}

.custom-control-label::before {
    background-color: #ffffff;
    border: 1px solid #cdd2d8;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before, .custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: #00adb1;
    border-color: #00adb1;
}

.custom-checkbox .custom-control-label::before, .custom-checkbox .custom-control-label::after {
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 3px !important;
}

.custom-checkbox label {
    font-family: 'roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 30px;
    margin-left: 5px;
    cursor: pointer;
}



/*===================================================
ALERTAS
===================================================*/

.alert {
    padding: .5rem 1rem;
    font-size: 12px;
    margin-top: 5px;
}

.alert-danger {
    color: #b93b51;
    background-color: #f5d1d6;
    border-color: transparent;
}

.alert-warning {
    color: #855e04;
    background-color: #fde0ae;
    border-color: transparent;
}



/*===================================================
MENSAJES DE ERROR
===================================================*/

.mensaje-error p {
    font-size: 16px;
    color: #a9adb7;
}

.mensaje-error h1 {
    font-family: 'montserrat', sans-serif;
    color: #929296;
}


/*===================================================
MODALES COMUNES
===================================================*/


.modal-xl {
    width: 80% !important;
    max-width: 80% !important;
}

.modal-backend .modal-header .close {
    top: 29px;
}

.modal-backend .modal-header {
    padding: 0.8rem 2rem;
    display: block;
}

.modal-content {
    border: 0px;
    box-shadow: 0px 8px 20px 2px rgba(0,0,0,0.1);
}

.modal-title {
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    color: #3a3c40;
}

.modal-title i {
    margin-right: 8px;
    color: #00adb1;
    font-size: 18px;
}

.modal-body {
    background-color: #EDF0F6;
    padding: 1rem 2rem;
}

.modal-body-0 {
    background-color: #EDF0F6;
    padding: 0px;
}

.modal-img {
    max-width: 1200px !important;
}

.modal-body-image {
    padding: 0px;
}

.modal-body-image img {
    width: 100%;
}

.modal-backend h4 {
    font-family: 'montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #3a3c40;
    margin-bottom: 14px;
    border-bottom: 1px solid #d8dce2;
    padding-bottom: 6px;
    margin-top: 10px;
}

.modal-backend h4 i {
    color: #b3b8c1;
    margin-right: 4px;
    font-size: 16px;
    width: 20px;
    vertical-align: middle;
}

label {
    font-family: 'montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #3a3c40;
    margin-bottom: 3px;
}


.submenu-modal {
    margin-top: 15px;
    margin-bottom: -12px;
}

.submenu-modal .nav-tabs {
    border: 0px solid;
}

.submenu-modal .nav-tabs .nav-link.active {
    color: #00adb1 !important;
    font-weight: 500;
}

.submenu-modal .nav-tabs .nav-item button {
    background-color: #fff;
    color: #adb0b5;
    border: 0px solid;
    cursor: pointer;
    box-shadow: none !important;
    position: relative;
    font-size: 13px;
    padding: 9px 15px;
    margin-right: 2px;
    font-family: 'montserrat';
}

.submenu-modal .nav-tabs .nav-item button:hover {
    color: #000;
}

.submenu-modal .nav-tabs .nav-item button:focus {
    color: #000;
    background-color: #edf0f65c;
    outline: none;
}

.submenu-modal .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: calc(100% - 30px);
    height: 2px;
    background-color: #00adb1;
    margin-top: 7px;
    box-shadow: 0px 4px 10px -3px rgba(175, 8, 47, 0.2);
}

span.ubicacion-user {
    font-size: 14px;
    opacity: 0.6;
}

/*===================================================
MENU LATERAL 
===================================================*/


.menu-lateral {
    display: block;
    width: 200px;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: #00adb1;
    box-shadow: 0px 0px 12px rgba(0,0,0,0.07);
    z-index: 10;
    transition: all 0.2s ease;
}

.menu-lateral.menu-lateral-chico {
    width: 70px;
}



.logo {
    text-align: center;
    padding: 22px 15px;
}

.logo img {
    width: 152px;
}

.menu-lateral-chico .logo {
    overflow: hidden;
    width: 56px;
}

.menu-lateral-chico .logo img {
    width: 130px !important;
}

.logo-custom-bg {
    padding: 15px 0px;
    background-image: url('/img/logo-custom-bg.png');
    background-position: center bottom;
    margin-bottom: 10px;
    height: 100px;
}

.logo-custom {
    text-align: center;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
    background-image: url('/img/logo-custom2.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.logo-custom img {
}

.menu-lateral-chico .logo-custom-bg {
    height: 70px;
    padding: 8px 0px;
    background-size: 100% 100%;
}

.menu-lateral-chico .logo-custom img {
}


.menu-principal ul {
    padding: 0px;
    list-style: none !important;
}

.menu-principal ul li {
    padding: 0px;
    list-style: none !important;
    overflow: hidden;
    transition: all 0.2s ease;
}

.menu-lateral-chico .menu-principal ul li {
    width: 70px;
    transition: all 0.2s ease;
}

.menu-lateral-chico .menu-principal ul li a .sprite_text  {
    opacity: 0;
}

.menu-lateral-chico .menu-principal ul li a:hover .sprite_text  {
    opacity: 1;
}

.menu-principal ul li:hover {
    width: 200px;
    background-color: #00A3A7;
    border-radius: 0px;
}

.menu-lateral-chico .menu-principal ul li:hover {
    border-radius: 0px 8px 8px 0px;
}

.menu-lateral-chico .menu-principal ul li:hover {
    box-shadow: -2px 3px 7px -1px rgba(0,0,0,0.2);
}

.menu-principal ul li a {
    width: 200px;
    height: 54px;
    display: block;
    padding: 10px 0px;
    position: relative;
}

.menu-principal ul li a.active::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #fff;
    border-radius: 10px 0px 0px 10px;
    width: 6px;
    height: 34px;
    right: 0px;
    top: 10px;
    transition: all 0.2s ease;
    /*box-shadow: 0px 4px 10px -3px rgba(175, 8, 47, 0.9);*/
}

.menu-lateral-chico .menu-principal ul li a.active::after {
    right: 130px;
}

.menu-lateral-chico .menu-principal ul li:hover a.active::after {
    right: 0px;
}

.menu-principal ul li a:hover .icono-menu {
    color: #fff;
}

.menu-principal ul li a:hover .sprite_text {
    color: #fff;
}

.icono-menu {
    background-color: rgba(0, 0, 0, 0.13);
    height: 34px;
    width: 34px;
    display: block;
    border-radius: 50%;
    float: left;
    margin-left: 18px;
    transition: all 0.2s ease;
    padding-top: 5px;
    text-align: center;
    color: rgba(255, 255, 255, 0.61);
}

.active .icono-menu {
    background-color: rgba(255, 255, 255, 0.46);
    color: #ffffff !important;
    box-shadow: 0px 4px 14px -3px rgba(0, 0, 0, 0.16);
}

.sprite_text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.61);
    font-weight: 500;
    width: calc(100% - 52px);
    height: 34px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.2s ease;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    line-height: 14px;
    padding-left: 10px;
    padding-right: 10px;
}

.active .sprite_text {
    color: #ffffff;
    font-weight: 700;
}


/*===================================================
CONTENEDOR CONTENIDO 
===================================================*/


.contenido {
    margin-left: 200px;
    width: calc(100% - 200px);
    /*max-width: 1400px;*/
    padding: 0px 40px;
    transition: all 0.2s ease;
}

 .contenido.contenido-chico {
    margin-left: 70px;
    width: calc(100% - 70px);
    /*max-width: 1530px;*/
    padding: 0px 40px;
 }



/*===================================================
ENCABEZADO Y MENU DE USUARIO
===================================================*/


.encabezado {
    height: 112px;
    padding-top: 22px;
    padding-bottom: 18px;
    background-image: url('/img/encabezado_sombra.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 18px;
}

.encabezado .dropdown-toggle::after {
    display: none;
}

.encabezado h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
    padding-top: 12px;
}

.encabezado .subtitulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(54, 55, 60, 0.5);
    padding-left: 6px;
}

.encabezado .nav-link i {
    color: #b2b7c1;
    font-size: 19px;
    transition: all 0.2s ease;
}

.encabezado .nav-link .fa-sort-down {
    font-size: 12px;
    position: absolute;
    right: 0px;
    top: 16px;
}

.icono-notificaciones {
    width: 34px;
    height: 34px;
    position: relative;
    border-radius: 50%;
    margin-top: .5rem;
    text-align: center;
    padding-top: 7px;
    transition: all 0.2s ease;
}

.icono-notificaciones:hover {
    background-color: #e1e4e8;
}

.nueva-notificacion::before {
    content: '';
    display: block;
    position: absolute;
    background-color: #e70441;
    border-radius: 50%;
    border: 2px solid #edf0f6;
    width: 10px;
    height: 10px;
    right: 3px;
    top: 5px;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: 10px;
    box-shadow: 0px 0px 0px 0px transparent;
    transition: all 0.2s ease;
}

.menu-usuario {
    font-family: 'montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-right: 0px !important;
    padding-right: 10px !important;
}

.menu-usuario:hover span, .menu-usuario:hover i::before {
    color: #00adb1 !important;
}

.menu-usuario:hover .user-avatar {
   box-shadow: 0px 0px 0px 2px #00adb1;
}

.icono-modulo {
    margin-right: 12px;
    border-radius: 5px;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
 }

 .dropdown-menu.notificaciones-drop {
    width: 420px;
    top: 8px !important;
    right: -140px !important;
    padding-bottom: 0px;
    /*left: inherit !important;*/
}

.dropdown-menu.notificaciones-drop::before {
    content: '';
    display: block;
    border: 8px solid transparent;
    border-bottom: 8px solid #f8f9fc;
    width: 0px;
    position: absolute;
    top: -16px;
    right: 9px;
}

.notif-nueva {
    background-color: #f9f7e1;
 }

.notificaciones-drop a {
    padding: 6px 12px;
    height: 48px;
    border-top: 1px solid #edf0f6;
}

.notificaciones-drop a:hover {
    color: inherit;
    text-decoration: none;
    background-color: #edf0f6;
}

.notificaciones-drop a i {
    display: block;
    width: 16px;
    color: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    padding-top: 10px;
    font-size: 15px;
    padding-left: 1px;
    float: left;
}

.notificaciones-scroll {
    max-height: 384px;
    overflow-y: auto;
}

.notif-cancelar i {
    background-color: #D81138;
}

.notif-confirmar i {
    background-color: #52B814;
}

.notificacion-texto {
    width: calc(100% - 40px);
    float: left;
    padding-left: 10px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.notificacion-texto p {
    font-size: 12px;
    line-height: 12px;
    margin-bottom: -2px;
    display: block;
    width: 100%;
    padding-top: 4px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.notificacion-texto span {
    color: #1521385c;
    font-size: 11px;
    line-height: 10px;
}

.drop-titulo {
    padding: 5px 12px;
    background-color: #f8f9fc;
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #989a9e;
    margin-top: -8px;
    border-radius: 8px 8px 0px 0px;
}

 .dropdown-menu.usuario-drop {
    width: 210px;
    /*left: inherit !important;*/
}

.dropdown-menu.usuario-drop::before {
    content: '';
    display: block;
    border: 8px solid transparent;
    border-bottom: 8px solid #fff;
    width: 0px;
    position: absolute;
    top: -16px;
    right: calc(50% - 8px);
}

.usuario-drop a {
    padding: 6px 10px;
}

.usuario-drop a:hover {
    color: inherit;
    text-decoration: none;
    background-color: #edf0f6;
}

.usuario-drop a i {
    display: block;
    color: #97989a;
    border-radius: 50%;
    font-size: 16px;
    padding-top: 1px;
    float: left;
    vertical-align: middle;
    margin-right: 10px;
}




/*===================================================
SUBMENU O NAVEGACIÓN SECUNDARIA
===================================================*/


.submenu {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

.submenu a {
    color: #b2b7c1;
    position: relative;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
}

.submenu .nav-tabs {
    border: 0px solid;
    margin-left: -15px;
}

.submenu .nav-tabs .nav-link {
    border: 0px solid;
    box-shadow: none;
}

.submenu .nav-tabs .nav-link:hover {
    color: #767b86;
}

.submenu .nav-tabs .nav-link:active {
    border: 0px solid;
    box-shadow: none;
}

.submenu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: transparent;
    border: 0px solid;
    color: #00adb1 !important;
}

.submenu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: calc(100% - 2rem);
    height: 2px;
    background-color: #00adb1;
    margin-top: 8px;
    box-shadow: 0px 4px 10px -3px rgba(175, 8, 47, 0.2);
}

.submenu .badge-light {
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
    background-color: #dee1e6;
    color: #9a9ea5;
    min-width: 18px;
    padding: 3px;
    display: inline-block;
}



/*===================================================
FILTROS Y ACCIONES
===================================================*/


.filtros-acciones {
    margin: 30px -15px;
}




/*===================================================
MODAL PANEL LATERAL
===================================================*/




/* MODAL FADE LEFT RIGHT BOTTOM */

.fade {
    opacity: 0;
    transition: opacity .15s linear;
}

.modal-backdrop.show {
    opacity: .5;
    background-color: #60656d;
}

.modal.fade.right.in .modal-dialog {
/*    -webkit-transform: translate(-600px, 0);
    transform: translate(-600px, 0);*/
}


.modal.right .modal-dialog {
    position: absolute;
    top: 0 !important;
    right: -600px;
    margin: 0;
    max-width: 600px;
    width: 600px;
    transition: all .35s ease !important;
}

.modal.right.show .modal-dialog {
    top: 0px !important;
    right: 0px !important;
}

.modal.right.fade .modal-dialog {
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -webkit-transform: translate(0,0) !important;
    transform: translate(0,0) !important;
}

.modal.right .modal-content {
    border-radius: 0px;
    background-color: #EDF0F6;
    box-shadow: -3px 0px 25px 5px rgba(86, 94, 109, 0.12);
}

.modal.left .modal-dialog {
    position:absolute;
    top:0;
    left:0;
    margin:0;
}

.modal.left .modal-content, .modal.right .modal-content {
    min-height:100vh;
    border:0;
}

.modal-header button.close {
    position: absolute;
    right: 35px;
    top: 35px;
    display: block;
    background-color: #edf0f6;
    border-radius: 50%;
    padding: 0px;
    width: 32px;
    height: 32px;
    font-size: 12px;
    color: #84878e;
    text-shadow: none;
    opacity: 1;
    transition: all 0.2s ease;
}

.modal-header button.close:hover {
    background-color: #00adb1;
    color: #fff;
}

/* Contenido ticket-panel*/

.right .modal-header {
    border-bottom: 0px;
    border-left: 10px solid;
    border-radius: 0px;
    position: relative;
    display: block;
    padding: 25px 20px;
    background-color: #fff;
}

.ticket-panel .modal-body {
    padding: 15px 30px;
}

.ticket-panel .ticket-colegio {
    width: 100%;
    font-size: 20px;
    padding-top: 0px;
    width: 100%;
    display: block;
}

.ticket-panel .ticket-rbd {
    font-size: 14px;
    margin-top: 4px;
}

.ticket-panel h4 {
    font-family: 'montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #3a3c40;
    margin-bottom: 14px;
}

.ticket-panel h4 i {
    color: #b3b8c1;
    margin-right: 4px;
    font-size: 16px;
    width: 20px;
    vertical-align: middle;
}

.ticket-panel p {
    font-size: 13px;
}

.ticket-seccion {
    margin-bottom: 30px;
}

.ticket-adjuntos {
    width: 100%;
    min-height: 80px;
    background-color: #b3b8c12e;
    border-radius: 3px;
    padding: 15px;
    position: relative;
}

.label-avatar {
    padding: 0px;
    font-size: 10px !important;
    color: #8c929c;
    line-height: 10px;
    margin: 4px 0px 1px 0px;
}

.nombre-avatar {
    margin: 0px;
    padding: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px !important;
    line-height: 10px;
    font-weight: 700;
    color: #3a3c40;
    text-transform: capitalize;
    margin-bottom: 6px;
}

.user-name {
    color: #3a3c40;
    margin-left: 4px;
    margin-right: 6px;
}

.ticket-panel .ticket-user-avatar {
    margin: 0px;
}

.user-identidad {
    padding-left: 35px;
}

.user-identidad .ticket-user-avatar {
    position: absolute;
    top: 0px;
    left: 10px;
}

.ticket-clasificacion {
    padding: 7px 0px 9px 0px;
    border-top: 1px solid #e2e6ed;
    border-bottom: 1px solid #e2e6ed;
    margin-top: -1px !important;
}

.ticket-archivo-adj-frame {
    float: left;
    width: 120px;
    height: 70px;
    margin: 2px 6px;
    box-shadow: 0px 0px 0px 1px #b3b8c1;
    transition: all 0.2s ease;
    position: relative;
}

.ticket-archivo-adj-frame:hover {
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px #E70441;
}

.ticket-archivo-adj {
    width: 120px;
    height: 70px;
}

.adj-hover {
    opacity: 0;
    transition: all 0.2s ease;
    position: absolute;
    background-color: rgba(0,0,0,0.6);
    padding-top: 19px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.adj-hover:hover {
    opacity: 1;
    padding-top: 0px;
}


.btn-imagen {
    color: #fff;
    opacity:0.5;
    transition: all 0s ease;
    background-color: transparent;
    padding: 0px;
    width: 100%;
    height: 100%;
    float: left;
    box-shadow: none !important;
}

.btn-imagen:hover {
    opacity: 1;
}

.btn-imagen p {
    font-size: 10px;
    margin: 0px;
}

.btn-imagen-cerrar {
    background-color: #e70441;
    color: #fff;
    padding: 0px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    text-align: center;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: +1;
}

.btn-imagen-cerrar:hover {
    background-color: #fd2b63;
}

.ticket-comentar {
    margin-bottom: 12px !important;
}

.ticket-comentar .form-group {
    width: calc(100% - 45px);
    margin-left: 45px;
}

.ticket-comentar .ticket-user-avatar {
    position: absolute;
    margin: 0px !important;
}

.new-comentario {
    background-color: #f1e3a1 !important;
}

.new-comentario.comentario-globo::before {
    border-bottom: 14px solid #f1e3a1;
}

.comentario-globo {
    display: block;
    width: calc(100% - 45px);
    margin-left: 45px;
    background-color: #e2e6ed;
    padding: 10px 12px;
    border-radius: 4px;
    position: relative;
}

.comentario-globo::before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border: 14px solid transparent;
    border-bottom: 14px solid #e2e6ed;
    transform: rotate(45deg);
    position: absolute;
    left: -5px;
    top: -3px;
}

.comentario-globo span {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 11px;
    color: #a1a6af;
}

.comentario-globo p {
    margin-bottom: 0px;
    margin-top: 2px;
    line-height: 15px;
}

.comentario-globo .nombre-avatar {
    margin-top: 0px;
}

.ticket-comentar .form-group {
    position: relative;
}

/*
.ticket-comentar .form-group::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #fff;
    position: absolute;
    border: 1px solid transparent;
    border-right: 0px;
    border-bottom: 0px;
    left: -6px;
    top: 12px;
    transform: skew(45deg,0deg);
}

.ticket-comentar .form-group:hover::before {
    border: 1px solid #9BA0A9;
}

.ticket-comentar .form-group:focus::before {
    border: 1px solid #CF033A;
}
*/

.btn-comentario {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 11px;
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    color: #b3b8c1;
    padding: 4px 8px;
    background-color: #fff;
}

.btn-comentario:hover {
    color: #E70441;
    background-color: #EDF0F6;
}

.btn-comentario:focus {
    box-shadow: none;
}

.btn-comentario i {
    margin-right: 6px;
    font-size: 12px;
}


.btn-adjuntar {
    position: absolute;
    bottom: 7px;
    right: 23px;
    font-size: 11px;
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    color: #b3b8c1;
    padding: 5px 7px;
    background-color: #fff;
}

.btn-adjuntar i {
    font-size: 15px;
}

.btn-adjuntar:hover {
    color: #E70441;
    background-color: #EDF0F6;
}

.ticket-adjuntos label {
    position: absolute;
    top: -20px;
    left: 0px;
}

.ticket-cambios {
    height: 40px;
}

.ticket-cambios ul {
    margin: 0px;
    padding: 5px 0px;
    list-style: none;
}

.ticket-cambios ul li {
    display: block;
    float: left;
    position: relative;
    z-index: 1;
}

.ticket-cambios ul li span {
    display: block;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #C1C4D1;
    border: 2px solid #EDF0F6;
    margin-right: 20px;
    transition: all 0.2s ease;
}

.ticket-cambios ul li span:hover {
    transform: scale(1.2);
    background-color: #E70441;
    cursor: pointer;
}

.ticket-cambios ul li.active span {
    transform: scale(1.2);
    background-color: #E70441;
}

.ticket-cambios ul li:last-child span {
    margin-right: 0px !important;
}

.ticket-cambios ul li:before {
    content: '';
    display: block;
    background-color: #c1c4d1;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 5px;
    z-index: -1;
}

.alerta-cambio::after {
    content: '!';
    color: #fff;
    background-color: #e70441;
    display: inline-block;
    height: 12px;
    width: 12px;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 4px;
    text-align: center;
    border-radius: 10px;
    margin-left: 5px;
    line-height: 8px;
}



/*===================================================
TABLAS
===================================================*/



.table {
    font-size: 12px;
}

.table td, .table th {
    padding: .5rem .75rem;
    vertical-align: middle;
    border-top: 0px solid #dee2e6;
    line-height: 14px;
}

.table thead th {
    vertical-align: middle;
    line-height: 12px;
    border-bottom: 1px solid #dee2e6;
}

.tabla-resultados {
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #d8dce2;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(84, 103, 158, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(131, 144, 185, 0.22) !important;
}

.table a.link-simple {
    color: #00adb1;
}

.table a.link-simple:hover {
    text-decoration: underline;
}

table.dataTable {
    margin-top: -1px !important;
    margin-bottom: -1px !important;
}

table.dataTable thead>tr>th:hover {
    background-color: rgba(237, 240, 246, 0.33);
    color: #0C958D;
}

table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
    padding-right: 15px !important;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 0.3em !important;
    content: "\25b2" !important;
    top: 4px;
    transform: scaleY(0.8);
    font-size: 8px;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    right: 0.3em !important;
    content: "\25bc" !important;
    top: 11px;
    transform: scaleY(0.8);
    font-size: 8px;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
    opacity: 0.2;
}

table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
    color: #00adb1;
    opacity: 1;
}

table.dataTable thead tr th:first-child, table.dataTable tbody tr td:first-child {
    padding-left: 15px;
}

table.dataTable tbody tr td span {
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
    line-height: 11px;
}

table.dataTable tbody tr td:first-child span {
    height: 30px;
    vertical-align: middle;
    display: table-cell;
    text-transform: capitalize;
}

.grupo-fam-container {
    background-color: #fff;
    max-height: 250px;
    min-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 3px;
}

div.dataTables_wrapper div.dataTables_filter {
    display: none;
}

tr.deshabilitado td {
    background-color: rgba(107, 83, 91, 0.1) !important;
    color: rgba(167, 153, 157, 0.5);
}

tr.deshabilitado td a {
    color: rgba(167, 153, 157, 0.5) !important;
}

tr.cancelada.even {
    background-color: rgba(195, 17, 52, 0.12) !important;
    color: #9e1530;
}

tr.cancelada {
    background-color: rgba(165, 20, 48, 0.16) !important;
    color: #9e1530;
}

.table-hover tbody tr.cancelada:hover {
    background-color: rgba(165, 20, 48, 0.16) !important;
}

/*PAGINACION DATATABLES===========================================*/

/*div#tabla-citas_length {*/
    /*display: none;*/
/*}*/

div.dataTables_wrapper div.dataTables_paginate {
    float: left;
    margin-top: 20px;
    margin-bottom: 10px;
}

ul.pagination {
    display: inline-block;
}

.pagination li {
    float: left;
}

.page-link {
    background-color: #f6f7fa;
    border: 0px solid #dee2e6;
    font-size: 12px;
    border-radius: 3px;
    margin: 0px 1px;
}

.page-item.active .page-link {
    background-color: #00adb1;
    box-shadow: 0px 4px 14px -3px rgba(13, 154, 146, 0.61);
}

.page-item.disabled .page-link {
    color: #c7ced4;
}


div.dataTables_wrapper div.dataTables_info {
    font-size: 12px;
    padding-right: 16px;
    padding-top: 24px;
}

div.dataTables_wrapper div.dataTables_length label {
    font-family: 'roboto', sans-serif;
    font-size: 12px;
    padding-top: 16px;
    padding-left: 16px;
}

div.dataTables_wrapper div.dataTables_length label select {
    min-width: 60px;
    margin: 0px 4px !important;
}


/*===================================================
SCROLL BAR
===================================================*/


.style-scroll::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: transparent;
}

.style-scroll::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: transparent;
}

.style-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  width: 6px;
  background-color: #cfd2da;
  transition: all 0.2s ease;
}

.style-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #8f929a;
}


/*===================================================
PROGRESS BAR, BARRA DE PROGRESO
===================================================*/

.progress-chico {
    background-color: #4d576b1f;
    width: calc(100% - 40px);
    height: 10px;
    border-radius: 12px;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}

.progress-bar {
    background-color: #00adb1;
}

.progress-bg-1 {
    background-color: #1ccc44;
}

.progress-bg-2 {
    background-color: #d9dc02;
}

.progress-bg-3 {
    background-color: #f37b00;
}

.progress-bg-4 {
    background-color: #dc0000;
}




/*===================================================
CHOSEN SELECT PLUGIN
===================================================*/

.chosen-container-multi .chosen-choices {
    font-size: 13px;
    position: relative;
    border: 1px solid #d8dce2 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
}

.chosen-container-multi .chosen-choices:hover {
    border: 1px solid #9ba0a9 !important;
    box-shadow: inset 0px 0px 0px 1px #9ba0a9;
}

.chosen-container .chosen-drop {
    font-size: 12px;
    border: 2px solid #00adb1 !important;
}

.chosen-container-multi .chosen-choices .search-choice {
    background-color: #fff;
    font-size: 12px;
    padding: .35rem 1.5rem .35rem .4rem;
}

.chosen-container-multi .chosen-choices .search-field input[type="text"] {
    height: calc(2.25rem + 0px);
}


/*===================================================
INFO CLIENTE
===================================================*/


.cliente-collapse {
    background: transparent;
    border: 0px;
    text-align: left;
    display: block;
    width: 100%;
    cursor: pointer;
    outline: none !important;
    transition: all 0.2s ease;
}

.cliente-collapse:hover p {
    color: #E70441 !important;
}

.cliente-collapse:hover img {
    box-shadow: 0px 0px 0px 2px rgb(231, 4, 65);
}

.cliente-globo {
    background-color: #fff;
    border-radius: 3px;
    padding: 10px 15px;
    margin-top: 10px;
    position: relative;
}

.cliente-globo::after {
    content: '';
    border: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    display: block;
    width: 0px;
    position: absolute;
    top: -14px;
    left: 7px;
}

.cliente-globo .label-avatar {
    margin-top: 8px;
}


/*===================================================
TICKETS ANTERIORES
===================================================*/


.tickets-anteriores-frame {
    /*border: 2px solid #dce0e6;
    background-color: #dce0e6;*/
    border-radius: 3px;
    margin-bottom: 25px;
}

.tickets-anteriores-frame:hover {
    /*border: 2px solid #E70441;*/
}

.tickets-anteriores-frame i {
    margin-right: 4px;
}

.tickets-anteriores-globo {
    background-color: #dce0e6;
    height: 250px;
    border-radius: 3px;
    padding: 0px;
    position: relative;
}

.tickets-anteriores-globo .nav-item {
    width: 50%;
    text-align: center;
}

.tickets-anteriores-globo .nav-item button {
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 10px 0px;
    border: 0px solid;
    background: transparent;
    font-size: 13px;
    color: #b3b8c1;
    outline: none !important;
    transition: all 0.2s ease;
}

.tickets-anteriores-globo .nav-item button:hover {
    color: #82868e;
}

.tickets-anteriores-globo .nav-item.show .nav-link, .tickets-anteriores-globo .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    display: block;
    width: calc(50%);
    height: 2px;
    background-color: #e70441;
    margin-top: 8px;
    box-shadow: 0px 4px 10px -3px rgba(175, 8, 47, 0.2);
}

.tickets-anteriores-scroll {
    height: 211px;
    overflow-y: auto;
}

.tickets-anteriores-globo .nav-tabs {
    background-color: #fff;
    border-radius: 3px 3px 0px 0px;
}

.mini-ticket {
    border-bottom: 1px solid #cfd2da;
    margin: 0px;
}

.mini-ticket:hover {
    cursor: pointer;
    background-color: #ffffff40;
}

.mini-ticket-estado {
    display: inline-block;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 20px;
    float: right;
    margin-top: 20px;
}

.mini-ticket .fechas {
    font-size: 11px;
    color: #9398a0;
    line-height: 14px;
}

.mini-ticket .fechas i {
    margin-right: 5px;
    width: 15px;
    text-align: center;
}

.mini-ticket .ticket-user-avatar {
    
}

.mini-ticket .columnita {
    float: left;
    position: relative;
}

.mini-ticket .ticket-categoria {
    font-size: 11px;
    width: 90px;
}

.mini-ticket .ticket-rol {
    font-size: 11px;
    color: #9398a0;
    margin: 0px;
    line-height: 12px;
}

button.tickets-nueva-pestaña {
    position: absolute;
    bottom: -17px;
    font-size: 10px;
    width: 100%;
    border: 0px solid;
    background-color: #edf0f6;
    color: #e70441;
    transition: all 0.2s ease;
    outline: none;
}

button.tickets-nueva-pestaña:hover {
    background-color: #fff;
    color: #e70441;
    cursor: pointer;
}

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}






/*===================================================
TOOLTIPS
===================================================*/

.tooltip {
    font-size: 11px;
    text-transform: capitalize;
    font-family: 'roboto', sans-serif;
    transition: opacity 0.1s ease;
}



/*===================================================
MONITOREO
===================================================*/


.tarjeta-header {
    display: block;
    background-color: #F6F7FB;
    border-radius: 3px 3px 0px 0px;
    padding: 10px 20px;
    font-size: 13px;
    font-family: 'montserrat', sans-serif;
    font-weight: 600;
}

.tarjeta-body {
    padding: 20px;
}



/*===================================================
USUARIOS
===================================================*/


.tarjeta-rrhh {
    text-align: center;
    padding: 22px 15px;
    width: 250px;
    float: left;
    margin-left: 15px;
}

.user-rrhh {
    border-radius: 50%;
    width: 80px;
    box-shadow: 0px 0px 0px 3px #00000014;
    border: 2px solid #fff;
    transition: all 0.2s ease;
}

.tarjeta-rrhh:hover .user-rrhh {
    box-shadow: 0px 0px 0px 3px #E70441;
}

.tarjeta-rrhh h4 {
    font-family: 'montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 4px;
}

.tarjeta-rrhh h6 {
    font-family: 'montserrat', sans-serif;
    font-size: 11px;
    color: #858a94;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 15px;
}

.tarjeta-rrhh a {
    font-family: 'montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 4px;
}

.tarjeta-rrhh p {
    font-family: 'montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    margin-top: 0px;
    margin-bottom: 4px;
    color: #41454e;
}

.tarjeta-rrhh p i {
    margin-right: 5px;
}

.categoria-rrhh {
    font-family: 'montserrat', sans-serif;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #0000000f;
}

.badge {
    font-size: 10px;
    font-weight: 300;
    line-height: 8px;
    padding: 3px 5px;
    border-radius: 10px;
    margin-right: 2px;
}

.badge-pill.badge-info {
    margin: 7px 2px;
}

.badge-gris {
    background-color: #0000001a;
    color: #727884;
}

.badge-permiso {
    font-size: 12px;
    font-weight: 300;
    line-height: 8px;
    padding: 3px 2px;
    text-align: center;
    border-radius: 50%;
    margin-right: 3px;
    margin-bottom: 2px;
    /*background-repeat: no-repeat;*/
    /*background-position: 6px 4px;*/
    line-height: 18px !important;
    /*display: inline-block;*/
    display: block;
    width: 24px;
    height: 24px;
    float: left;
}

.badge-permiso i {
    margin: 0px !important;
    text-align: center;
    width: 100%;
}

.badge-none {
    font-weight: 300;
    color: #fff;
    background-color: #c72a39;
    /*background-image: url('/img/badge-none.png');*/
}

.badge-see {
    font-weight: 300;
    color: #fff;
    background-color: #dcb633;
    /*background-image: url('/img/badge-see.png');*/
}

.badge-edit {
    font-weight: 300;
    color: #fff;
    background-color: #32b30f;
    /*background-image: url('/img/badge-edit.png');*/
}

.usuarios-avatar {
    border-radius: 50%;
    margin-right: 8px;
    width: 30px;
    vertical-align: middle;
    float: left;
    display: none;
}



/*===================================================
PANEL DETALLE ESTABLECIMIENTO
===================================================*/


.detalle-header {
    border-left: 0px solid !important;
}

.detalle-header h3 {
    font-size: 20px;
    padding-top: 0px;
    width: 100%;
    display: block;
    font-family: 'montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detalle-mapa {
    margin: -15px -30px;
    margin-bottom: -6px;
}

.detalle-estab-info {
    background-color: #fff;
    padding: 10px 30px;
    border-radius: 3px;
    margin: 0px -30px;
}

.detalle-estab-info i {
    display: block;
    background-color: #dddee6;
    color: #9fa2ad;
    text-align: center;
    font-size: 14px;
    padding-top: 7px;
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.detalle-estab-info p {
    padding-left: 34px;
}


/*===================================================
LOGIN
===================================================*/

.error-msg {
    border: 0px solid;
    padding: 8px 15px;
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}

.logo-login {
    margin-bottom: 30px;
    margin-left: calc(50% - 175px);
}

.bg-danger {
    background-color: #a7071dbf!important;
}

.log-user {
    padding-left: 41px;
    background-image: url('/img/icon_user1.png');
    background-repeat: no-repeat;
    background-position: 12px center;
}

.log-user:hover {
    padding-left: 40px;
    background-position: 11px center;
}

.log-user:focus {
    padding-left: 40px;
    background-image: url('/img/icon_user2.png');
    background-position: 11px center;
}

.log-pass {
    padding-left: 41px;
    background-image: url('/img/icon_pass1.png');
    background-repeat: no-repeat;
    background-position: 12px center;
}

.log-pass:hover {
    padding-left: 40px;
    background-position: 11px center;
}

.log-pass:focus {
    padding-left: 40px;
    background-image: url('/img/icon_pass2.png');
    background-position: 11px center;
}

.login-cuadro {
    /*background-color: #fff;*/
    margin-top: 20%;
    border-radius: 3px;
    /*box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2);*/
    transition: all 0.2s ease;
    position: relative;
    padding: 30px;
}

.login-box-header img{
    width: 273px;
}

.login-element{
    background-color: rgb(223, 223, 223);
    border-radius: 10px;
}

.login-pass {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 12px;
}

.login-pass:hover {
    text-decoration: underline !important;
    color: #00adb1 !important;
}



/*===================================================
FOOTER
===================================================*/

.footer {
    background-size: 100% 18px;
    padding: 24px 0px;
}

.footer i {
    display: block;
    width: 46px;
    height: 46px;
    background-color: #fdfdfd;
    color: #00adb1;
    font-size: 24px;
    text-align: center;
    padding-top: 11px;
    border-radius: 50%;
    float: left;
}

.footer-info {
    float: left;
    padding-left: 16px;
}

.footer-info p {
    font-family: 'montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 0px;
    margin-top: 6px;
    line-height: 12px;
}

.footer-info span {
    font-family: 'montserrat', sans-serif;
    font-size: 18px;
}


/*===================================================
MENU INDEX
===================================================*/

.menu-index-bloque {
    display: inline-block;
}

.menu-index {
    width: 200px;
    float: left;
    margin: 10px;
    text-align: center;
    cursor: pointer;
}

.menu-index:hover {
    background-color: #00adb1;
    color: #fff !important;
}

.menu-index:hover p {
    color: #fff !important;
}

.menu-index i {
    display: block;
    border-radius: 50%;
    background-color: #292f4e33;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 24px;
    padding-top: 13px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.menu-index p {
    font-family: 'montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #7d828c;
    margin-bottom: 0px;
    transition: all 0.2s ease;
}

.menu-index-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(54, 55, 60, 0.5);
    padding-left: 6px;
}


/*===================================================
FEEDBACK POSITIVO GUARDAR CHECK
===================================================*/

.check_mark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}

.hide{
  display:none;
}

.sa-icon {
  width: 80px;
  height: 80px;
  border: 4px solid gray;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  border-radius: 50%;
  margin: 20px auto;
  padding: 0;
  position: relative;
  box-sizing: content-box;
}

.sa-icon.sa-success {
  border-color: #4CAF50;
}

.sa-icon.sa-success::before, .sa-icon.sa-success::after {
  content: '';
  -webkit-border-radius: 40px;
  border-radius: 40px;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  background: #edf0f6;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sa-icon.sa-success::before {
  -webkit-border-radius: 120px 0 0 120px;
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
}

.sa-icon.sa-success::after {
  -webkit-border-radius: 0 120px 120px 0;
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0px 60px;
  transform-origin: 0px 60px;
}

.sa-icon.sa-success .sa-placeholder {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(76, 175, 80, .5);
  -webkit-border-radius: 40px;
  border-radius: 40px;
  border-radius: 50%;
  box-sizing: content-box;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2;
}

.sa-icon.sa-success .sa-fix {
  width: 5px;
  height: 90px;
  background-color: #edf0f6;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sa-icon.sa-success.animate::after {
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in;
}

.sa-icon.sa-success {
  border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
  -ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
  -ms-transform: rotate(-45deg) \9;
}

.animateSuccessTip {
  -webkit-animation: animateSuccessTip 0.75s;
  animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
  -webkit-animation: animateSuccessLong 0.75s;
  animation: animateSuccessLong 0.75s;
}

@-webkit-keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-webkit-keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

.sa-icon.sa-success .sa-line {
  height: 5px;
  background-color: #4CAF50;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
}

.sa-icon.sa-success .sa-line.sa-tip {
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sa-icon.sa-success .sa-line.sa-long {
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@-webkit-keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}
@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}


.texto-feedback {
    font-family: 'montserrat', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #4caf50;
    text-align: center;
}


/*===================================================
CHOSEN PLUGIN
===================================================*/

.chosen-container {
    width: 100% !important;
}

.chosen-single {
    transition: all 0.2s ease;
    font-size: 13px !important;
    font-weight: 500;
    color:  #a4aab1 !important;
    height: 38px !important;
    padding: 5px 12px !important;
    border-radius: 3px !important;
    border: 1px solid #D8DCE2;
    margin-top: 0px !important;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
    font-weight: 400;
}

.chosen-single:hover {
    border: 2px solid #9ba0a9 !important;
    padding: 4px 11px !important;
}

.chosen-single:hover div b {
    margin-top: 3px !important;
    margin-left: 4px !important;
}

.chosen-single:active, .chosen-single:focus {
    border: 2px solid #9ba0a9 !important;
    padding: 4px 11px !important;
}

.chosen-single div {
    width: 26px !important;
    font-size: 16px !important;
}

.chosen-single div b {
    font-family: "Font Awesome 5 Free";
    background: none !important;
    margin-top: 4px !important;
    margin-left: 3px;
}

.chosen-single div b::after {
    content: "\f0dd";
    display: block;
    font-size: 12px;
    color: #6a6e75;
}


.chosen-drop {
    box-shadow: none !important;
    border: 0px solid !important;
    border-radius: 0px 3px 3px 3px !important;
    background-color: transparent !important;
}

.chosen-container-single .chosen-drop {
    margin-top: -38px !important;
}

.chosen-container .chosen-results {
    margin: 0px;
    margin-top: 1px;
    padding: 8px 0px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 8px 20px 0px rgba(55, 61, 76, 0.2) !important;
    text-transform: capitalize;
}

.chosen-container .chosen-results li {
    padding: 4px 16px !important;
    line-height: 20px;
}

.chosen-container .chosen-results li:hover, .chosen-container .chosen-results li.highlighted {
}

.chosen-container-single .chosen-search {
    padding: 0px !important;
}

.chosen-container-single .chosen-search input[type="text"] {
    border: 0px solid !important;
    margin: 0px !important;
    padding: 13px 16px;
    height: 35px;
    border-radius: 22px;
    background-color: #fff;
    background-image: url('/img/icon_buscar.png') !important;
    background-position: right 12px center !important;
}

.chosen-container.chosen-container-multi {
    width: 100% !important;
}

/*
.chosen-container-multi .chosen-choices {
    transition: all 0.2s ease;
    font-family: 'montserrat', sans-serif;
    font-size: 13px !important;
    font-weight: 500;
    color:  $col_texto2 !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 22px !important;
    border: 0px !important;
    margin-top: 0px !important;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: $sombra_big rgba($col_texto4,.15);
    width: 100%;
    cursor: pointer;
    background-image: url('/img/drop.png');
    background-repeat: no-repeat;
    background-position: right center;
    transition: none;
}


.chosen-container-multi .chosen-choices:hover, .chosen-container-multi .chosen-choices:active, .chosen-container-multi .chosen-choices:focus {
    color:  $col_azuloficial !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
    border-radius: 12px;
    padding: 5px 24px 5px 8px;
    border: 0px solid;
    background-color: $col_texto5;
    margin-top: 2px;
    margin-bottom: 1px;
}
*/

.chosen-container-active .chosen-choices {
  transition: none;
  background-image: url('/img/icon_buscar.png') !important;
  background-repeat: no-repeat;
  background-position: right 12px center !important;
  cursor: text;
}


.tarjeta .chosen-container-multi .chosen-choices, .modal .chosen-container-multi .chosen-choices {
  background-color: #fff;
  font-weight: 500 !important;
  transition: all 0.1s ease;
}

.tarjeta .chosen-container-multi .chosen-choices:hover, .modal .chosen-container-multi .chosen-choices:hover {
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  padding-left: 6px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    transition: none;
    top: 4px;
    right: 3px;
    opacity: .5;
}

.chosen-container .chosen-results li.group-result {
    padding-left: 10px !important;
    padding-top: 10px !important;
    margin-top: 5px;
}

.chosen-container .chosen-results li.group-result:hover {
    color: #fff;
    cursor: pointer;
}

/* Chosen profesional ***************************/

.select-profesional .chosen-container {
    width: calc(100% - 38px) !important;
}

.select-profesional .chosen-container .chosen-results li.active-result {
    font-weight: 500;
    border-bottom: 1px solid #e5e8ef;
    border-top: 1px solid #e5e8ef;
    margin-bottom: -1px;
    padding: 5px 12px !important;
}

.select-profesional i {
    display: block;
    width: 38px;
    height: 38px;
    float: left;
    border-radius: 3px 0px 0px 3px !important;
    text-align: center;
    padding-top: 10px;
    padding-left: 3px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    font-size: 16px;
    color: #495057;
    border-right: 0px solid;
}

.select-profesional .chosen-container .chosen-results li.active-result {
    font-weight: 500;
    border-bottom: 1px solid #e5e8ef;
    border-top: 1px solid #e5e8ef;
    margin-bottom: -1px;
    padding: 5px 12px !important;
}

.select-profesional i {
    display: block;
    width: 38px;
    height: 38px;
    float: left;
    border-radius: 3px 0px 0px 3px !important;
    text-align: center;
    padding-top: 10px;
    padding-left: 3px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    font-size: 16px;
    color: #495057;
    border-right: 0px solid;
}

.select-profesional .chosen-single {
    border-radius: 0px 3px 3px 0px !important;
    border: 1px solid #D8DCE2 !important;
    background-color: #fff;
    padding: 5px 12px !important;
    cursor: text;
    box-shadow: none;
    transition: all 0s ease;
    color: #363d44 !important;
    font-weight: 400;
}

.select-profesional .chosen-single:hover {
    border: 2px solid #9ba0a9 !important;
    padding: 4px 11px !important;
}

.select-profesional .chosen-container-single .chosen-search input[type="text"] {
    border-radius: 0px 22px 22px 0px !important;
}

.select-profesional .chosen-container-single .chosen-single div {
    display: none;
}

.select-profesional .chosen-container-single .chosen-single span {
    margin-right: 0px;
}

.select-profesional .chosen-container .chosen-results .active-result {
    font-family: 'montserrat', sans-serif;
    font-weight: 600 !important;
}

.select-profesional .chosen-container .chosen-results {
    max-height: 150px;
}


/* Chosen horario ***************************/

.select-hora .chosen-container {
    width: calc(100% - 38px) !important;
}

.select-hora .chosen-container .chosen-results li.active-result {
    font-weight: 500;
    border-bottom: 1px solid #e5e8ef;
    border-top: 1px solid #e5e8ef;
    margin-bottom: -1px;
    padding: 5px 12px !important;
}

.select-hora i {
    display: block;
    width: 38px;
    height: 38px;
    float: left;
    border-radius: 3px 0px 0px 3px !important;
    text-align: center;
    padding-top: 10px;
    padding-left: 3px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    font-size: 16px;
    color: #495057;
    border-right: 0px solid;
}

.select-profesional i {
    display: block;
    width: 38px;
    height: 38px;
    float: left;
    border-radius: 3px 0px 0px 3px !important;
    text-align: center;
    padding-top: 10px;
    padding-left: 3px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    font-size: 16px;
    color: #495057;
    border-right: 0px solid;
}

.select-hora .chosen-single {
    border-radius: 0px 3px 3px 0px !important;
    border: 1px solid #D8DCE2 !important;
    background-color: #fff;
    padding: 5px 12px !important;
    cursor: text;
    box-shadow: none;
    transition: all 0s ease;
    color: #363d44 !important;
    font-weight: 400;
}

.select-hora .chosen-single:hover {
    border: 2px solid #9ba0a9 !important;
    padding: 4px 11px !important;
}

.select-hora .chosen-container-single .chosen-search input[type="text"] {
    border-radius: 0px 22px 22px 0px !important;
}

.select-hora .chosen-container-single .chosen-single div {
  display: none;
}

.select-hora .chosen-container-single .chosen-single span {
  margin-right: 0px;
}

.select-hora .chosen-container .chosen-results .active-result {
    font-family: 'montserrat', sans-serif;
    font-weight: 600 !important;
}

.select-hora .chosen-container .chosen-results {
    max-height: 150px;
}

/*===================================================
RESPONSIVO, RESPONSIVE
===================================================*/


@media screen and (max-width: 1024px) {

.modal-xl {
    width: 90% !important;
    max-width: 90% !important;
}

}

@media screen and (max-width: 1280px) {

.table {
    font-size: 10px !important;
}

span.pill {
    font-size: 10px;
}

}

@media screen and (max-width: 1366px) {

.cuadro-datos .label {
    width: 90px;
}

.div-label {
    width: 90px;
}

.div-input {
    width: calc(100% - 90px);
}

.table {
    font-size: 11px !important;
}

span.pill {
    font-size: 11px;
}

.btn-small {
    font-size: 11px;
}

}

/*===================================================
TELEMEDICINA, TELECONSULTA
===================================================*/


.cita-fecha {
    background-color: #edf0f6;
    width: 100px;
    text-align: center;
    height: fit-content;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cita-mes {
    background-color: #0cb7ad;
    color: white;
    width: 100%;
    padding: 6px;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.cita-dia {
    display: block;
    padding-top: 5px;
}

.cita-fecha h1 {
    margin-top: 0px;
    margin-bottom: 6px;
    font-weight: 600;
}

.cita-info h6 {
    font-family: 'montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
}

.cita-info p {
    color: #7e8089;
    margin:  0px;
}

.cita-hora {
    display: block;
    width: 100%;
    text-align: center;
    border: 1px solid #0cb7ad;
    padding: 2px 6px;
    border-radius: 3px;
    color: #0cb7ad;
    margin: 0px;
}