﻿/* Switch 1 Specific Styles Start */
input[type="checkbox"].switch {
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2.5em;
    height: 1.5em;
    background: #ddd;
    border-radius: 3em;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    /*border: 1px solid #009688;*/
}

.titulo-expediente {
    font-weight: bold;
    font-size: 20px;
}


    input[type="checkbox"].switch:checked {
        background: #007bff; /* Azul encendido */
    }


/*body {
    font-family: 'Lato', 'Arial', sans-serif;
    background: #ddd url(../img/TSJQROO.png);
    font-weight: 300;
    font-size: 15px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: hidden;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;

}*/

.multiline-input {
    width: 100%;
    word-wrap: break-word; /* Permite que el texto se divida en varias líneas */
}
.alert55 {
    background-color: #ffe6e6;
    color: #3c4b64;
    border: 1px solid #6d6d6d;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    position: relative;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .alert55::before {
        content: "¡IMPORTANTE!";
        background-color: #2d5de2;
        color: #fff;
        padding: 5px 10px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }



    input[type="checkbox"].switch:focus {
        box-shadow: #9999cc;
    }

input[type="checkbox"].switch:checked {
    box-shadow: #9999cc;
}

    input[type="checkbox"].switch:after {
        position: absolute;
        content: "";
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
        box-shadow: 0 0 .25em rgba(0,0,0,.3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    input[type="checkbox"].switch:checked:after {
        left: calc(100% - 1.5em);
    }

    input[type="checkbox"].switch.display {
        cursor: default;
    }
/* Switch 1 Specific Style End */



/* 
    Estilos para los botones del DataTable y tablas 

*/


.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.excel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1c3";
    background-color: green;
}


.buttons-excel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1c3";
}


.acortartext {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* ancho máximo del texto acortado */
    cursor: pointer;
}



.buttons-excel {
    background: none !important;
    border: none !important;
    font-size: 0;
    background-color: green !important;
    color: white !important;
}

.buttons-csv::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f6dd";
}

.buttons-csv {
    background: transparent;
    border: none !important;
    font-size: 0;
    display: none !important;
}

.buttons-pdf::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1c1";
}

.buttons-pdf {
    background: none !important;
    border: none !important;
    font-size: 0;
    background-color: darkred !important;
    color: white !important;
}

.buttons-print::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f02f";
}

.buttons-print {
    background: none !important;
    border: none !important;
    font-size: 0;
    background-color: darkgray !important;
    color: white !important;
}

.buttons-copy::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c5";
}

.buttons-copy {
    background: transparent;
    border: none !important;
    font-size: 0;
    display: none !important;
}


/*Hover table con buttons tools datatable*/
.tools {
    display: none;
}

.tbl:hover {
    background: #d0d0d0;
}

.icon:hover{
    color: white !important;
}

tbody tr:hover td div.tools {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    transform: translateX(100%) translateY(70%);
}

tbody tr:hover {
    background: #d0d0d0 !important;
    border: 2px solid #d0d0d0;
    box-shadow: 0 0 0 2px #d0d0d0;
}

/*Estilo para el input type file*/
.custom-file-label:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0c6";
}

/*Tamaño de input para mostrar el despliegue*/
div.dataTables_wrapper div.dataTables_length select{
    width: 50px !important;
}



/*Ocultar la barra horizontal del modal de jquery confirm*/
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
    overflow: hidden !important;
}


.dot {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: inline-block;
    
}

    .dot > h5 {
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        font-size: 1.6rem;
        font-weight: bold !important;
        text-align:center;
    }


#renderRange{
    border: 0;
    outline: none;
    cursor: pointer;
}

/* Colores para los row del datatable */
.colorBack {
    background-color: #ce8383 !important;
}



.colorValidar{
    background-color: #e8e973 !important;
}

.colorAutorizar {
    background-color: #ddd !important;
}

.colorCorreccion {
    background-color: #ED765D !important;
}

.colorRevision {
    background-color: #bedbe5 !important;
}

.colorPendiente {
    background-color: #eeddfc !important;
}

.colorCancelada {
    background-color: #f8be7f !important;
}


.colorAceptada {
    background-color: #91f681 !important;
}

.colorMultiple {
    background-color: #FE9CE8 !important;
}

.colorPrevencion {
    background-color: #fffc74 !important;
}

.colorPrevenido {
    background-color: #fffc74 !important;
}

.colorPendienteAcuerdo {
    background-color: cadetblue !important;
}

.colorSinFirma {
    background-color: goldenrod !important;
}

.colorOficioSeD {
    background-color: lightslategrey !important;
}

.colorReactivado {
    background-color: lightgoldenrodyellow !important;
}


.sinFirma {
      background-color:goldenrod !important;
}


.devuelto {
    color: #ce8383 !important;
}


.validar {
    color: #e8e973 !important;
}

.corregir {
    color: #ED765D !important;
}



.pendienteAcuerdo {
    color: cadetblue !important;
}


.autorizar {
    color: #ddd !important;
}

.oficioSeD {
    color: lightslategrey !important;
}


.reactivado {
    color: lightgoldenrodyellow !important;
}



/*seguimiento*/

.revision {
    color: #bedbe5 !important;
}

.pendiente {
    color: #eeddfc !important;
}

.cancelada {
    color: #f69258 !important;
}

.aceptada {
    color: #91f681 !important;
}

.prevencion {
    color: #fffc74 !important;
}


/*termina seguimiento*/


.multiple {
    color: #FE9CE8 !important;
}
/*.fa-square-full {
    color: #ce8383 !important;
}*/

/*Scroll div tabla jquery confirm*/
.tblScroll {
    height: 200px;
    border: 1px solid;
    overflow-y: auto !important;
    overflow: hidden;
}

    .tblScroll::-webkit-scrollbar {
        width: 8px; /* Tamaño del scroll en vertical */
        height: 8px; /* Tamaño del scroll en horizontal */
        display: none; /* Ocultar scroll */
    }

/*Strong*/
strong{
    font-weight: bold !important;
}

/*#timeLineExpediente {*/
   /* height: 600px;*/
    /*overflow-y: auto !important;
    overflow: hidden;
}

    #timeLineExpediente::-webkit-scrollbar {
        width: 8px;*/ /* Tamaño del scroll en vertical */
        /*height: 8px;*/ /* Tamaño del scroll en horizontal */
        /*display: none;*/ /* Ocultar scroll */
    /*}*/

.tblExpedienteNombres {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    .tblExpedienteNombres td, .tblExpedienteNombres th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .tblExpedienteNombres tr:hover {
        background-color: #ddd;
    }

    .tblExpedienteNombres th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #3c4b64;
        color: white;
    }

/*Borde de Pills*/
.nav-item {
    border: 1px solid #d0d0d0;
    border-radius: 5px;
}

/* Style to Rotativa */
.thead-rotativa {
    background-color: #75c0e0 !important;
    -webkit-print-color-adjust: exact !important;
}


/*Scroll para el div de la tabla de ubicaciones*/
.tblUbicacion {
    height: 440px;
    overflow-y: auto !important;
    overflow: hidden;
}

    .tblUbicacion::-webkit-scrollbar {
        width: 8px; /* Tamaño del scroll en vertical */
        height: 8px; /* Tamaño del scroll en horizontal */
        display: none; /* Ocultar scroll */
    }


.colorInfo {
    background-color: #D6EAF8 !important;
}

.colorSuccess {
    background-color: #85D894 !important;
}

.colorDanger {
    background-color: #F5917F !important;
}

/*Cambiar color texto seleccionado*/
::-moz-selection { /* Code for Firefox */
    color: white !important;
    background: #3c4b64 !important;
}

::selection {
    color: white !important;
    background: #3c4b64 !important;
}

/*INCIDENTES*/
.tblInci {
    width: 100%;
    color: #212529;
}

.tblInci, th, td {
    padding: 7px;
}

.tblScroll2 {
    height: 115px;
    border: 1px solid;
    overflow-y: auto !important;
    overflow: hidden;
    font-size: 75%;
}
/*INCIDENTES*/

/*Para mobile*/
/*@media (max-width: 960px) {
    .d-md-down-none {
        display: block !important;
    }

    .c-header-nav {
        display: flex !important;
        align-items: center !important;
    }
}*/


.fancybox-content {
    z-index: 2000 !important;
}

.aligprop
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.jconfirm {
    z-index: 1900 !important;
}

/*poner mayusculas todos los campos*/
/*input, textarea{
    text-transform: uppercase !important;
}
*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

::placeholder { /* Recent browsers */
    text-transform: none;
}

.table-wrapper-scroll-y {
    display: block;
    max-height: 600px;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}



/*modal de que organo escoger*/
.modal {
    display: none;
     background-color: rgba(0, 0, 0, 0.4);

}

.modal2 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}


.modal3 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal4 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}


.modal5 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}


.modal-content5 {
    background-color: #fefefe;
    width: 80%; /* Ancho del modal ajustado según tus necesidades */
    max-width: 800px; /* Ancho máximo del contenido */
    height: auto; /* Altura automática según el contenido */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: justify;
    overflow-y: auto; /* Agregar desbordamiento vertical si es necesario */
    padding: 20px; /* Agregar relleno según sea necesario */
    white-space: pre-line; /* Mantener saltos de línea del HTML */
}



.modal-content4 {
    background-color: #fefefe;
    width: 80%; /* Ancho del modal ajustado según tus necesidades */
    max-width: 800px; /* Ancho máximo del contenido */
    height: auto; /* Altura automática según el contenido */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: justify;
    overflow-y: auto; /* Agregar desbordamiento vertical si es necesario */
    padding: 20px; /* Agregar relleno según sea necesario */
    white-space: pre-line; /* Mantener saltos de línea del HTML */
}

.modal-backdrop {
    display: none;
    background-color: rgba(0, 0, 0, 0); /* Opacidad 0% cuando está cerrado */
}

.modal-content {
    /*display: none;*/
    background-color: #fefefe;
    width: 500px; /* Ancho del modal */
    height: 300px; /* Altura del modal */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*text-align: justify-all;*/
}


.modal-content2 {
  
    background-color: #fefefe;
    width: 500px; /* Ancho del modal */
    height: 410px; /* Altura del modal */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.required {
    border: 1px solid #FB9A24
}


.requiredPerson {
    border: 1px solid #FB9A24
}

.modal-content3 {
  
    background-color: #fefefe;
    width: 500px; /* Ancho del modal */
    height: 410px; /* Altura del modal */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.close2 {
    color: #aaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

    .close2:hover,
    .close2:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.close4 {
    color: #aaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

    .close4:hover,
    .close4:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.close5 {
    color: #aaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

    .close5:hover,
    .close5:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

button.close5 {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.close2 {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.close3 {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.close4 {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

close3 {
    color: #aaa;
    float: right;
    font-size: 10px;
    font-weight: bold;
}

.close3:hover,
.close3:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


td.custom-ellipsis:not(:first-child) {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.dataTable thead input[type=text] {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -18px center;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px; /* USE the same right padding in jQ! */
    border-radius: 3px;
}

    table.dataTable thead input[type=text].x {
        background-position: right 5px center;
    }

    table.dataTable thead input[type=text].onX {
        cursor: pointer;
    }


.nodos {
    height: 400px;
    overflow-y: scroll;
}

.archivosExp {
    height: 400px;
    overflow-y: scroll;
}

.split {
    display: flex;
    flex-direction: row;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

    .gutter.gutter-horizontal {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
        cursor: col-resize;
    }

a.active {
    background-color: #3c4b64;
    color: #FFF !important;
}
