/*  */

* {
    margin: 0px;
    padding: 0px;
}

.backg {
    background-image: 
        linear-gradient(90deg, rgba(25, 91, 133, .7) 0%, rgba(18, 65, 140, .8) 50%, rgba(51, 94, 226, .7) 100%),
        url(../img/fondo.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    /* height: 100% !important; */
}


html {
    background-color: #f2eeee;
    /* background: #335ee2; */
    overflow-y: auto;
    overflow-x: hidden !important;
}

select.select-fundamento {
    width: 98%!important;
    height: 100px!important;
    overflow-x: hidden!important;
    white-space: normal!important;
    text-overflow: ellipsis!important;
    text-align: justify !important;
    padding: 0px;
    font-family: "Regular";
    font-size: 16px;
}

select.select-fundamento option {
    width: 98%!important;
    overflow-x: hidden!important;
    white-space: normal!important;
    text-overflow: ellipsis!important;
    text-align: justify !important;
    padding: 0px;
    font-family: "Regular";
    font-size: 16px;
}

::placeholder {
    color: #333 !important;
}

::-webkit-input-placeholder {
    color: blue;
}

::-moz-placeholder {
    color: blue;
}

header {
    width: 100%;
    height: 80px;
    background-color: #fff;
    box-shadow: 0px 2px #cdcdcd;
    /* background-image: url("../img/rayas.png"); */
    background-size: contain;
}

header img {
    width: 80px;
    height: 80px;
    margin-left: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;


}

header h1 {
    color: #ccc;
    font-family: "Regular";
    font-size: 60px;
    display: inline-block;
    vertical-align: middle;
}


#titulo-sis {
    width: 300px;
    height: 80px;
    margin-left: 0px;
}

.text-form {
    font-family: "Regular";
}

.tmn-1 {
    font-size: 15px;
}

.tmn-2 {
    font-size: 18px;
    color: #777;
}

#titulo-mobile {
    display: none;
}

/*TTOOLTIP*/

.tooltip {
    position: relative;
    /* z-index:9; */
}

.tooltip .tooltiptext {
    display: none;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 5px 0;
    font-family: "Ligth";
    /* Position the tooltip */
    position: absolute;
    left: -120px;
    top: 7px;
    pointer-events: none !important;
    z-index: 103 !important;
}

.tooltip .tooltiptext-dos {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px 0;
    font-family: "Ligth";
    /* Position the tooltip */
    position: absolute;
    z-index: 99;
    left: 0px;
    top: 55px;
    padding: 10px;
}

.tooltip .tooltiptext-dos {
    visibility: hidden;
    width: 250px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 5px 0;
    font-family: "Ligth";
    /* Position the tooltip */
    position: absolute;
    z-index: 99;
    left: 0px;
    top: 55px;
    padding: 10px;
}

.tooltip:hover .tooltiptext-dos {
    visibility: visible;
}

footer {
    width: 100%;
    height: 200px;
    background-color: #777;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
}

footer .line-text {
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
}

footer .line-text h4 {
    text-align: center;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
}

footer .line-text a {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-family: "Bold";
    color: #195B85;
    text-decoration: none;
}

footer .line-text a:hover {
    transition: .3s;
    text-decoration: none;
    color: #f7941e;
    font-family: "Bold";
}

#line {
    width: 100%;
    height: 7px;
    background-color: #195B85;
}

.colaboracion {
    width: 200px;
    height: 50px;
    margin: 0 auto;
    background-image: url(../img/desarrollado.png);
    background-size: contain;
}

.formulario-accesso {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    height: auto;
    min-height: 550px;
    background-color: rgba(255, 255, 255, 1) !important;
    /* backdrop-filter: blur(10px); */
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 50px;
}

.formulario-accesso h1 {
    color: #195B85;
    font-family: "Regular";
    font-size: 25px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    width: 80%;
    margin: 0 auto;
}

.formulario-accesso label {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    padding-left: 25%;
    margin-bottom: 5px;
}

.formulario-accesso input[type=text] {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    width: 50%;
    height: 30px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    outline: none;
    text-align: center;
}

.formulario-accesso select {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    width: 52%;
    height: 30px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    outline: none;
    text-align: center;
    /* padding: 15px; */
}

.formulario-accesso input[type=email] {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 3px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
}

.subir-label {
    margin-top: -15px !important;
    padding-bottom: 10px;
}

.formulario-accesso input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    width: 50%;
    height: 30px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    margin-bottom: 5px;
    margin-top: -10px;
    outline: none;
}

.formulario-accesso input[type=submit] {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    height: 40px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 20px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 24% !important;
    transition: .3s;
    outline: none;
}

.formulario-accesso input[type=submit]:hover {
    transition: .3s;
    background-color: #777;
}

.formulario-accesso .acceso-rapido {
    display: none;
}

.formulario-accesso a {
    font-family: "Bold";
    color: #333;
    display: block;
    text-decoration: none;
    padding-left: 0;
    margin-top: 10px;
    transition: .3s;
    text-align: center;
}

.formulario-accesso a:hover {
    color: #195B85;
    transition: .3s;
    text-decoration: underline;
}

.division-acceso {
    margin: 0 auto;
    background-color: #ccc;
    width: 80%;
    height: 1px;
    margin-top: 30px;
    margin-bottom: 10px;
}

/*------NOTIFICACIONES-------*/

.error-campos {
    font-size: 19px;
    font-family: "Regular";
    width: auto;
    font-size: 25px;
    color: #e41c1c;
}

.error+label {
    border: 0px solid #ccc !important;
}

.error {
    border: 2px solid red !important;
}

.error-noti {
    width: 100%;
    background-color: #C70039;
    min-height: 50px;
    height: auto;
    display: none;
    position: absolute;
}

.error-noti h1 {
    color: #fff;
    font-family: "Regular";
    font-size: 18px;
    padding-top: 15px;
    display: inline-block;
    vertical-align: middle;
}

.error-noti img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-left: 30px;
    margin-top: 10px;
}

.error-notis {
    width: 100%;
    background-color: #C70039;
    min-height: 50px;
    height: auto;
    display: none;
    position: absolute;
}

.error-notis h1 {
    color: #fff;
    font-family: "Regular";
    font-size: 18px;
    padding-top: 15px;
    display: inline-block;
    vertical-align: middle;
}

.error-notis img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-left: 30px;
    margin-top: 10px;
}

/* Correcto actualizar */

.correcto-ac {
    width: 100%;
    background-color: #1CC854;
    min-height: 50px;
    height: auto;
    display: none;
    position: relative;
}

.correcto-ac h1 {
    color: #fff;
    font-family: "Regular";
    font-size: 18px;
    padding-top: 15px;
    display: inline-block;
    vertical-align: bottom !important;
}

.correcto-ac img {
    display: inline-block;
    vertical-align: middle !important;
    width: 25px;
    height: 25px;
    margin-left: 30px;
}

/* Correcto insertado */

.correcto {
    width: 100%;
    background-color: #1CC854;
    min-height: 50px;
    height: auto;
    display: none;
    position: relative;
}

.correcto h1 {
    color: #fff;
    font-family: "Regular";
    font-size: 18px;
    padding-top: 15px;
    display: inline-block;
    vertical-align: bottom !important;
}

.correcto img {
    display: inline-block;
    vertical-align: middle !important;
    width: 25px;
    height: 25px;
    margin-left: 30px;
}

.division-recupera {
    margin: 0 auto;
    background-color: #ccc;
    width: 80%;
    height: 1px;
    margin-top: 30px;
    margin-bottom: 10px;
    display: none;
}

.division-recupera h1 {
    font-size: 16px;
    color: #F82E2E;
    margin-bottom: 40px;
}

.bienvenida {
    width: 100%;
    background-color: #195B85;
    background-image: linear-gradient(19deg, #195B85 0%, #335ee2 100%);
    min-height: 30px;
    height: auto;
}

.bienvenida-reporte {
    width: 100%;
    background-color: #195B85;
    background-image: linear-gradient(19deg, #74d56d 0%, #51ac4b 100%);
    min-height: 30px;
    height: auto;
}

.bienvenida h1 {
    color: #fff;
    font-family: "Regular";
    font-size: 18px;
    padding-top: 5px;
    display: inline-block;
    vertical-align: middle;
    text-align: justify;
    margin: 0 auto !important;
}

.bienvenida img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-left: 30px;
}

.cerrar {
    padding-top: 2px;
    cursor: pointer;
    position: absolute;
    margin-left: 100px;
    width: 20px;
    height: 20px;
    right: 20px;
    display: inline-block;
    vertical-align: middle;
    opacity: .7;
    transition: .3s;
}

.cerrar:hover {
    opacity: 1;
    transition: .3s;
}

.formulario-registro {
    width: 50%;
    min-height: 450px;
    height: auto;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 50px;
    /* box-shadow: 0px 0px 8px 1px #cdcdcd; */
    padding-bottom: 50px;
    margin-bottom: 30px;
}

.formulario-registro label {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    padding-left: 25%;
    margin-bottom: 5px;
}

.formulario-registro input[type=text] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    outline: none;
}

.formulario-registro input[type=tel] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    outline: none;
}

.formulario-registro input[type=email] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    outline: none;
}

.formulario-registro input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    margin-bottom: 5px;
    outline: none;
}

.formulario-registro input[type=date] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    outline: none;
}

.formulario-registro textarea {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 100px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    overflow: hidden;
    outline: none;
    resize: none;
}

#direccion {
    background-color: #fff;
}

.formulario-registro select {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 51.2%;
    height: 25px;
    border: 0px;
    font-size: 16px;
    border-radius: 15px;
    padding-left: 10px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    outline: none;
}

.formulario-registro h1 {
    color: #195B85;
    font-family: "Regular";
    font-size: 25px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

/*FORMULARIOS DE TRAMITES*/

.formulario {
    margin: 0 auto;
    width: 90%;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 5px;
    margin-bottom: 40px;
    display: block;
}

.formulario #titulo {
    width: 400px;
    margin: 0 auto;
    display: block;
}

.formulario #titulo h1 {
    color: #777;
    font-family: "Regular";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-top: -90px;
    margin-left: 50px;
    font-size: 20px;
}

.formulario #titulo img {
    color: #fff;
    font-family: "Regular";
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    height: 70px;
    opacity: 1;
    margin-top: 20px;
}

.formulario form {
    padding: 10px 30px;
    text-align: left !important;
}

.formulario form label {
    color: #333;
    text-align: center;
    font-size: 18px;
    font-family: "Regular";
    /* font-weight: 800; */
    display: inline-block;
    vertical-align: middle;
}

.formulario form input[type=text] {
    width: 200px;
    text-align: left !important;
    padding-left: 20px;
}

.formulario form input[type=date] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    text-align: left !important;
    padding-left: 20px;
}

.formulario form input[type=number] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    text-align: left !important;
    padding-left: 20px;
    vertical-align: middle;
}

.formulario form input[type=checkbox] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    display: inline-block;
    vertical-align: bottom;
    width: 15px;
    height: 15px;
}

.formulario form input[type=radio] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border-radius: 5px;
    background-color: #e6e6e6;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border: 0;
    height: 20px;
    width: 20px;
}

.formulario form input[type=radio]:checked {
    height: 20px;
    width: 20px;
    display: inline-block;
    text-align: center;
    color: red;
    background-color: blue;
}

.formulario form h2 {
    color: #333;
    text-align: left;
    font-size: 20px;
    font-family: "Regular";
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.5;
}

.texto-izquierda {
    text-align: left !important;
}

.texto-centro {
    text-align: center !important;
}

.recuadro {
    border: 2px solid #777;
    padding: 5px 10px;
    color: #fff !important;
    background-color: #777;
    font-size: 18px !important;
    border-radius: 7px;
}

.dos-columnas {
    display: block;
    margin: 0 auto;
    text-align: center;
    margin: 10px 0px;
}

.columna-uno {
    text-align: left;
    position: relative;
    left: 0px;
    display: inline-block;
    float: left;
    width: 50%;
    margin-bottom: 10px;
    margin-top: 10px;
}

.columna-dos {
    text-align: left;
    position: relative;
    left: 0px;
    display: inline-block;
    float: right;
    width: 50%;
    margin-bottom: 10px;
    margin-top: 10px;
}

textarea {
    margin-top: 10px;
    width: 100%;
    border-radius: 5px;
    height: 90px;
    border: 0;
    background-color: #e6e6e6;
    padding-left: 5px;
    font-size: 16px;
    font-family: "Regular";
}

.formulario form input[type=text] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    display: inline-block;
    /* vertical-align: middle; */
}

.formulario form input[type=tel] {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    display: inline-block;
    vertical-align: middle;
    text-align: left !important;
    padding-left: 20px;
}

.formulario select {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-family: "Regular";
    font-weight: 800;
    border: 0px;
    border-radius: 5px;
    background-color: #e6e6e6;
    display: inline-block;
    vertical-align: middle;
}

.bloque {
    display: block;
    margin: 10px 0px;
    padding: 10px 0px;
}
.bloque input {
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
}

.bloque img {
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    width: 15px;
    height: 15px;
}

/* TAMAÑO DEL ARTERISCO */

.obligado{
    border: 1px solid rgba(255,0,0,.3) !important;
}

#grande {
    width: 80%;
    padding: 0px 10px;
}

/*FIN DE FORMULARIO TRAMITES*/

#ingresar-clave {
    text-align: center;
    margin: 0 auto;
    outline: 0;
}

#correo-registro {
    margin-bottom: 5px;
}

#tel-registro {
    margin-bottom: 5px;
}

#resultado {
    font-size: 16px;
    color: #C70039;
}

#primer-paso {
    display: inline;
}

#segundo-paso {
    display: none;
}

#tercer-paso {
    display: none;
}

#tabla2 {
    display: none;
}

.botones-registro #continuar {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 30px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: calc( 24% - 40px);
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 15px 0px;
}

.botones-registro #continuar:hover {
    transition: .3s;
    background-color: #777;
}

.desabilitado {
    background-color: #ccc !important;
    pointer-events: none !important;
    cursor: pointer;
}

.desabilitados {
    background-color: #777 !important;
    pointer-events: none !important;
    cursor: pointer;
}

#notificacion-existe {
    margin: 0 auto;
    display: none;
}

#notificacion-existe h1 {
    color: #E31821;
    font-size: 15px !important;
}

#notificacion-existe a {
    color: #195B85;
    font-size: 15px !important;
}

#animacion {
    width: 40px;
    height: 40px;
    background-image: url("../img/advertencia-img.png");
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
}

#circulo {
    margin: 0 auto;
    animation: example .5s linear infinite;
    position: relative;
    background-color: #FF5733;
    opacity: .5;
}

#linea {
    width: 80%;
    height: 1px;
    background-color: #777;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: .5;
}

.boton-tramites {
    padding-top: 10px;
    width: 80%;
    height: 40px;
    border-radius: 30px;
    background-color: #195B85;
    margin: 0 auto;
    color: #fff;
    font-family: "Regular";
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 20px;
    transition: .3s;
}

.boton-tramites:hover {
    transition: .3s;
    background-color: #777;
}

.ver-flujo {
    width: fit-content;
    height: 20px;
    background-color: #0487d4;
    position: absolute;
    right: 100px;
    top: 35px;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: 900;
    font-family: "Regular";
    text-align: center;
    padding: 10px;
    display: flex;
}

.ver-flujo span img {
    width: 25px;
    height: 25px;
}

.ver-flujo:hover {
    transition: .3s;
    background-color: #0447d4;
    cursor: pointer;
}

.ver-flujo img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;

}


@keyframes example {
    from {
        width: 0px;
        height: 0px;
        top: 50%;
        border-radius: 100%;
    }
    to {
        background-color: #C70039;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        top: 0%;
    }
}

.botones-registro #cancelar {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    text-decoration: none;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 30px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 24%;
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 15px 0px;
}

.botones-registro #cancelar:hover {
    transition: .3s;
    background-color: #777;
}

.botones-registro #continuar-paso {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 30px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: calc( 24% - 40px);
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 15px 0px;
    padding-left:20px;
}

.botones-registro #continuar-paso:hover {
    transition: .3s;
    background-color: #777;
}

.botones-registro #atras {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    text-decoration: none;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 30px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 24%;
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 15px 0px;
}

.botones-registro #atras:hover {
    transition: .3s;
    background-color: #777;
}

.numero-pasos {
    display: block;
    margin-top: 50px;
}

.numero-pasos li {
    display: inline-block;
    text-decoration: none;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: relative;
    left: calc( 46.8% - 55px);
    margin: 0px 10px;
    text-align: center;
    font-family: "Bold";
}

.paso-activo {
    color: #fff;
    background-color: #195B85;
    border: 2px solid #195B85;
}

.paso-desactivo {
    color: #fff;
    background-color: #777;
    border: 2px solid #777;
}

.campo-vacio {
    border: 2px solid red !important;
}

.verificar-contraseña {
    position: relative;
    /* Esta clase tiene que tener posicion relativa */
    color: #ff8c00;
    /* Color del texto */
    width: 25px;
    height: 25px;
    background: url('../img/correcto.png') center no-repeat;
    border-radius: 100%;
    transition: 0s;
    top: -50px;
    left: calc(65% + 100px);
}

.incorrecta-contraseña {
    position: relative;
    /* Esta clase tiene que tener posicion relativa */
    color: #ff8c00;
    /* Color del texto */
    width: 25px;
    height: 25px;
    background: url('../img/error.png') center no-repeat;
    border-radius: 100%;
    top: -50px;
    left: calc(65% + 100px);
}

/* Clase que tendra el tooltip */

.cssToolTip {
    position: relative;
    /* Esta clase tiene que tener posicion relativa */
    color: #ff8c00;
    /* Color del texto */
    width: 25px;
    height: 25px;
    background: url('../img/tool-tip.png') center no-repeat;
    border-radius: 100%;
    cursor: pointer;
    transition: .3s;
    top: -44px;
    left: calc(65% + 70px);
}

.cssToolTip:hover {
    transition: .3s;
    background: url('../img/tool-tip-hover.png') center no-repeat;
}

.bajar-tool {
    margin-top: 15px;
}

.abajo-tool {
    margin-top: 18px;
    margin-left: 15px;
}

.cssToolTip span {
    background-color: #777;
    border-radius: 3px;
    color: #fff;
    display: none;
    /* El tooltip por defecto estara oculto */
    font-size: 13px;
    padding: 10px;
    width: 200px;
    max-width: 350px;
    position: absolute;
    /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
    top: 0px;
    /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
    left: 30px;
    /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
    z-index: 100;
    /* Poner un z-index alto para que aparezca por encima del resto de elementos */
    font-family: "Regular";
}

.cssToolTip:hover span {
    display: inline;
}

/*TOOLTIP*/

.cssToolTip-pass {
    position: relative;
    /* Esta clase tiene que tener posicion relativa */
    color: #ff8c00;
    /* Color del texto */
    width: 25px;
    height: 25px;
    background: url('../img/tool-tip.png') center no-repeat;
    border-radius: 100%;
    cursor: pointer;
    transition: .3s;
    top: -35px;
    left: calc(65% + 78px);
}

.cssToolTip-pass:hover {
    transition: .3s;
    background: url('../img/tool-tip-hover.png') center no-repeat;
}

.cssToolTip-pass span {
    background-color: #777;
    border-radius: 3px;
    color: #fff;
    display: none;
    /* El tooltip por defecto estara oculto */
    font-size: 13px;
    padding: 10px;
    width: 250px;
    max-width: 300px;
    position: absolute;
    /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
    top: 30px;
    /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
    left: -250px;
    /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
    z-index: 100;
    /* Poner un z-index alto para que aparezca por encima del resto de elementos */
    font-family: "Regular";
}

.arriba-campo {
    margin-top: -25px !important;
}

.cssToolTip-pass:hover span {
    display: inline;
}

.alinear-tooltip {
    display: inline-block;
    vertical-align: middle;
}

#boton-verificar {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 100px;
    text-decoration: none;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 25px;
    background-color: #31b573;
    cursor: pointer;
    margin-top: -150px;
    margin-bottom: 20px;
    margin-left: 24%;
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 10px 0px;
}

#boton-verificar:hover {
    transition: .3s;
    background-color: #777;
}

#load {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    opacity: 0;
    margin-top: -5px !important;
}

.load{
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: "Bold";
    font-size: 30px;
    background-image: url(../img/load.gif);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    display: none;

}

#boton-recuperar {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 100px;
    text-decoration: none;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 3px;
    background-color: #31b573;
    cursor: pointer;
    margin-bottom: 20px;
    margin-left: 24%;
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 10px 0px;
}

#boton-recuperar:hover {
    transition: .3s;
    background-color: #777;
}

.notificacion-cedula {
    margin-left: 24%;
    margin-bottom: 15px;
}

.notificacion-cedula h1 {
    font-size: 15px;
    color: #E31821;
    padding: 0px;
    padding-bottom: 10px;
    display: inline-block;
}

.notificacion-cedula img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

#imprimir {
    background-color: #fff;
    margin: 0 auto;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0px 0px 38px -5px rgba(0, 0, 0, 0.3);
    padding-bottom: 20px;
    height: auto;
    padding-top: 0px !important;
}

.dinamica {
    margin: 0 auto;
    border-collapse: collapse;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.dinamica th, td, tr {
    width: 40px;
    text-align: center;
    vertical-align: top;
    font-size: 16px;
    font-family: "Bold";
    padding: 10px;
    border: none;
}

#titulo-tabla {
    background-color: #195B85;
    color: #fff;
    border: none;
}

#contenido-tabla {
    background-color: #fff;
    border: none;
}

#descargar-clave {
    margin: 0 auto;
    text-align: center;
    margin-top: 10px;
}

#descargar-clave a {
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    background-color: #195B85;
    padding: 15px;
    color: #fff;
    border-radius: 30px;
    font-size: 14px;
    font-family: "Regular";
    transition: .3s;
}

#descargar-clave a:hover {
    transition: .3s;
    background-color: #777;
}

#descargar-clave a img {
    vertical-align: middle;
    width: 15px;
    height: 15px;
}

#su-clave {
    font-size: 16px;
    color: #333;
    text-align: left;
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
}

#su-clave img {
    vertical-align: middle;
    width: 25px;
    height: 25px;
}

#encabezado-seguridad td {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    border-radius: 10px;
    padding-top: 10px;
}

#iniciar-sesion {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 3px;
    background-color: #31b573;
    cursor: pointer;
    margin-top: 15px;
    margin-left: calc( 62% - 40px);
    transition: .3s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    display: inline-block;
    padding: 20px 10px;
    text-decoration: none;
    margin-top: 50px;
    border-radius: 30px;
}

#iniciar-sesion:hover {
    transition: .3s;
    background-color: #777;
}

.logout {
    position: absolute;
    left: calc(100% - 70px);
    top: 20px;
    background-color: #f3b850;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: .3s;
    border-radius: 100%;
}

.logout input[type=submit] {
    border-radius: 5px;
    border: none;
    background-image: url("../img/exit.png");
    background-color: #C70039;
    width: 40px;
    height: 40px;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: .3s;
    border-radius: 100%;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.logout input[type=submit]:hover {
    background-color: #777;
    transition: .3s;
}

.datos-clave {
    width: 35%;
    height: 400px;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 100px;
    /* box-shadow: 0px 0px 5px 1px #cdcdcd; */
    display: none;
}

.datos-clave h1 {
    color: #195B85;
    font-family: "Regular";
    font-size: 25px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.datos-clave label {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    text-align: center;
    font-size: 25px;
    margin-bottom: -15px;
    padding-bottom: 0px;
}

.datos-clave input[type=text] {
    font-family: "Bold";
    color: #777;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 0px;
    font-size: 20px;
    border-radius: 30px;
    margin: 0px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    outline: none;
}

.datos-clave input[type=submit] {
    font-family: "Bold";
    color: #fff;
    display: block;
    width: 120px;
    height: 50px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 30px;
    background-color: #195B85;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 24%;
    transition: .3s;
}

.datos-clave input[type=submit]:hover {
    transition: .3s;
    background-color: #777;
}

.datos-clave a {
    font-family: "Bold";
    color: #777;
    display: block;
    text-decoration: none;
    padding-left: 0;
    margin-top: 10px;
    transition: .3s;
    text-align: center;
}

.datos-clave a:hover {
    color: #195B85;
    transition: .3s;
    text-decoration: underline;
}

.clave {
    margin: 0 auto;
}

.carpeta {
    width: 95%;
    min-height: 500px;
    height: auto;
    background: #fff;
    border-radius: 30px;
    position: absolute;
    left: 2.5%;
    top: 130px;
    z-index: 2;
    display: none;
}

.cerrar-carpeta {
    width: 30px !important;
    height: 30px !important;
    padding: 0px !important;
    border-radius: 100% !important;
    top: 5px;
    right: 10px;
    transition: .3s;
    background-image: url(../img/cerrar.png) !important;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    background-color: #C70039 !important;
}

.cerrar-carpeta:hover {
    transition: .3s;
    background-color: #777 !important;
}

.elemento-tramite {
    display: flex;
    height: auto;
    align-items: center;
    width: fit-content;
    margin: 20px;
    transition: .5s;
    border-radius: 30px;
    text-decoration: none;
}

.elemento-tramite:hover {
    transition: .5s;
    background: #ccc;
}

.elemento-tramite h1 {
    font-family: "Regular";
    color: #777;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding-right: 20px;
    text-wrap: pretty;
    font-size: 24px;
}

.elemento-tramite h2 {
    font-family: "Regular";
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding-right: 0px;
    font-size: 14px;
    background-color: #df0024;
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 8px;
}

.elemento-tramite img {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    border-radius: 30px;
}



.lista-tramites {
    width: 95%;
    height: auto;
    margin: 0 auto;
    margin-top: 15px;
}

.lista-tramites a {
    text-decoration: none;
}

.lista-tramites div {
    width: 23%;
    height: 200px;
    margin: 0 auto;
    background-color: #195B85;
    background-image: linear-gradient(19deg, #195B85 0%, #335ee2 100%);
    border-radius: 20px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    padding-top: 50px;
    margin: 10px;
    border-radius: 15px;
    
    /* background: #335ee2; */
    /* box-shadow:  -20px 20px 60px #2b50c0,
             20px -20px 60px #3b6cff; */
    box-shadow: 0px 3px 10px rgba(0, 0, 0, .3);
    /*float: left;*/
}

.color-menu-reporte {
    background-image: linear-gradient(19deg, #51ac4b 0%, #74d56d 100%) !important;
}

.lista-tramites div h1 {
    color: #fff;
    font-family: "Bold";
    font-size: 16px;
    text-align: left;
    padding: 0px 30px;
    font-weight: 400;
}

.lista-tramites div h2 {
    color: #e6e6e6;
    font-family: "Ligth";
    font-size: 14px;
    text-align: left;
    padding: 5px 30px;
}

.lista-tramites div img {
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.boton-notificaciones {
    position: absolute;
    /* left: calc(100% - 190px); */
    right: 90px;
    top: 20px;
    background-color: #f7941e;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: .3s;
    background-image: url("../img/notification.png");
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 8;
    border-radius: 100%;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    animation: campana 2s ease-in-out infinite;
}

@keyframes campana {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
}

@keyframes no-campana {
    0% {
        background-position: center;
    }
    100% {
        background-position: center;
    }
}

.boton-notificaciones:focus {
    outline: none;
}

.boton-notificaciones:hover {
    transition: .3s;
    background: #777;
    width: 40px;
    height: 40px;
    transition: .3s;
    background-image: url("../img/notification.png");
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    outline: 0;
    animation: none;
}

.notificaciones-contenedor-eventos {
    width: 300px;
    height: 90vh;
    position: absolute;
    z-index: 99;
    border-radius: 10px;
    /* left: calc(100% - 360px); */
    right: 0px;
    display: none;
}

.notificacion-triangulo-eventos {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-top: 0px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid #fff;
    position: absolute;
    top: -10px;
    left: calc(100% - 220px);
}

/* .boton-notificaciones img{
width: 40px;
height: 40px;
margin: 0 auto;
cursor: pointer;
} */

.notificaciones-contenedor {
    width: 300px;
    height: 90vh;
    position: absolute;
    z-index: 99;
    border-radius: 10px;
    left: calc(100% - 300px);
    display: none;
}

.notificacion-triangulo {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-top: 0px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid #fff;
    position: absolute;
    top: -10px;
    left: calc(100% - 160px);
}

.notificacion-observacion {
    width: 0;
    height: 0;
    border-right: 0px solid transparent;
    border-top: 0px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 50px solid #fff;
    position: absolute;
    top: 70px;
    left: -25px;
    z-index: 1;
}

.notificaciones-tramites {
    width: 300px;
    min-height: 85vh;
    height: auto;
    max-height: 500px;
    background-color: #fff;
    position: absolute;
    z-index: 999 !important;
    border-radius: 10px;
    left: calc(100% - 320px);
    margin-top: 10px;
}

.notificaciones-tramites h1 {
    font-size: 18px;
    color: #777;
    margin: 10px;
    text-align: center !important;
    vertical-align: middle;
    display: inline-block;
}

.notificaciones-tramites h1 img {
    vertical-align: middle;
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-left: 0px;
    margin-top: -3px;
}

.borrar-todo-noti {
    vertical-align: middle;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: 105px;
    cursor: pointer;
    background-image: url(../img/borrar-todo.png);
    background-size: contain;
}

.nueva-notificacion {
    width: 95%;
    height: 60px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    cursor: pointer;
    position: relative;
    transition: .3s;
    text-decoration: none;
    border-bottom: 1px solid #e6e6e6;
}

.notificacion-seleccionada {
    animation: seleccionada 3s;
    animation-iteration-count: 1;
}

@keyframes seleccionada {
    0% {
        box-shadow: inset 0 0 0 4px #6c8dc4;
    }
    60% {
        box-shadow: inset 0 0 0 3px #77bae8;
    }
    80% {
        box-shadow: inset 0 0 0 2px #ccc;
    }
    90% {
        box-shadow: inset 0 0 0 1px #ccc;
    }
    100% {
        box-shadow: inset 0 0 0 0px #ccc;
    }
}

/*  FAV*/

.nueva-notificacion:hover {
    background-color: #ededed;
    transition: .3s;
    border-radius: 7px;
}

.abierta {
    background-color: #e6e6e6;
    opacity: .7;
    border-radius: 7px;
    /* DESABILITA LAS ACCIONES SOBRE LAS NOTIFICACIONES VISTAS */
    /* pointer-events: none !important; */
}

.abierta:hover {
    background-color: #e6e6e6;
    opacity: .9;
    /* DESABILITA LAS ACCIONES SOBRE LAS NOTIFICACIONES VISTAS */
    /* pointer-events: none !important; */
}

.nueva-notificacion img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    /* background-color: red; */
    display: inline-block;
    vertical-align: middle;
    margin-top: 12px;
    margin-left: 5px;
}

.nueva-notificacion h1 {
    color: #545454;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: left !important;
    margin-left: 0px;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 7px;
}

.nueva-notificacion h2 {
    color: #ccc;
    font-size: 16px;
    display: block;
    vertical-align: top;
    font-family: "Regular";
    margin-left: 50px;
    margin-top: -18px;
}

.nueva-notificacion h3 {
    color: #999;
    font-size: 14px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-left: -10px;
    margin-top: 10px;
    font-weight: 800;
}

.nueva-notificacion .hora-notificaciones {
    color: #333;
    font-size: 14px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: top;
    text-align: right;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 30px;
    left: 215px;
}

.nueva-notificacion .dia-evento {
    color: #999;
    font-size: 18px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: top;
    text-align: right;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 10px;
    left: 215px;
}

.nueva-notificacion .mes-evento {
    color: #333;
    font-size: 18px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: top;
    text-align: right;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 30px;
    left: 215px;
}

.nueva-notificacion .datos-notificacion {
    color: #fff;
    font-size: 14px;
    font-family: "Ligth";
    display: inline-block;
    vertical-align: top;
    text-align: center !important;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 28px;
    left: 50px;
    background-color: #195B85;
    border-radius: 30px;
    padding: 3px 5px;
    width: auto;
}

.nueva-notificacion .datos-notificacion-eventos {
    color: #fff;
    font-size: 16px;
    font-family: "Ligth";
    display: inline-block;
    vertical-align: top;
    text-align: center !important;
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 28px;
    left: 50px;
    background-color: #335ee2;
    border-radius: 30px;
    padding: 3px 7px;
    width: auto;
}

#id-tramite {
    opacity: 0;
    font-size: 0px;
}

.contador {
    padding-top: 3px;
    width: 30px;
    height: 27px;
    background-color: red;
    border-radius: 100%;
    font-family: "Bold";
    position: absolute;
    text-align: center;
    /* left: calc(100% - 170px); */
    right:75px;
    top: 10px;
    color: #fff;
    animation: alerta-contador 3s infinite;
    z-index: 99;
}

@keyframes alerta-contador {
    0% {
        background-color: #333;
    }
    30% {
        background-color: #f2541b;
    }
    100% {
        background-color: #f22d1b;
    }
}

@keyframes alerta-tra {
    0% {
        background-color: rgba(247, 148, 30, 1);
        width: 0px;
        height: 0px;
        right: 50px;
        bottom: 50px;
    }
    50% {
        background-color: rgba(247, 148, 30, .5);
    }
    100% {
        background-color: rgba(63, 188, 239, 0);
    }
}

.boton-perfil {
    position: absolute;
    right: 210px;
    top: 20px;
    background-color: #55a8dd;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: .3s;
    border-radius: 100%;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.boton-perfil:hover {
    transition: .3s;
    background: #777;
}

.boton-perfil img {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    cursor: pointer;
}


.boton-evento {
    position: absolute;
    right: 150px;
    top: 20px;
    background-color: #335ee2;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: .3s;
    border-radius: 100%;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 1;
}

.boton-evento:hover {
    transition: .3s;
    background: #777;
}

.boton-evento img {
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 4px;
    margin-left: 4px;
    cursor: pointer;
    position: absolute;
    z-index: 98;
}

.boton-evento h1 {
    width: 26px;
    height: 26px;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 7px;
    margin-left: 7px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    color: #777;
    position: absolute;
    z-index: 99;
    padding-top: 4px;
}

.boton-pass {
    position: absolute;
    left: calc(100% - 130px);
    top: 20px;
    background-color: #195B85;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    transition: .3s;
    display: none;
}

.boton-pass:hover {
    transition: .3s;
    background: #777;
}

.boton-pass img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.menu-perfil {
    background-color: #ddd;
    position: absolute;
    width: 300px;
    left: calc(100% - 0px);
    z-index: 99;
    height: 1000px;
    display: block;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.menu-perfil h1 {
    color: #333;
    font-size: 25px;
    text-align: center !important;
    padding-left: 10%;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-top: 10px;
    font-family: "Regular";
}

.menu-perfil img {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.menu-perfil form {}

.menu-perfil form label {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    padding-left: 10%;
    margin-bottom: 0px;
}

.menu-perfil form input[type=text] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.menu-perfil form input[type=date] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.menu-perfil form input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.menu-perfil form select {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #b4b4b4;
    margin-bottom: 10px;
    cursor: pointer;
}

.menu-perfil form option {
    background-color: #ccc;
    margin-bottom: 10px;
    cursor: pointer;
    color: #777;
}

.menu-perfil .contra-pass {
    text-align: left !important;
    margin-left: 8%;
    color: #fff !important;
    width: 240px;
    font-size: 18px;
    padding: 10px;
    border-radius: 5px;
    background-color: #666;
    display: none;
}

.menu-perfil form label {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    padding-left: 10%;
    margin-bottom: 0px;
}

.menu-perfil form input[type=text] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.menu-perfil form input[type=date] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.menu-perfil form input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 80%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

/* datos-personales */

.cambio-contraseña form label {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    padding-left: 30%;
    margin-bottom: 0px;
    font-size: 18px;
}

.cambio-contraseña form input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 40%;
    height: 27px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    border: 1px solid #777;
}

.datos-personales {
    display: none;
}

.datos-personales img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    background-color: #09f;
    padding: 10px;
    border-radius: 100%;
}

.datos-personales form label {
    margin: 0 auto;
    font-family: "Bold";
    color: #333;
    display: block;
    padding-left: 25%;
    margin-bottom: 0px;
    font-size: 18px;
}

.datos-personales form input[type=text] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.datos-personales form input[type=date] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.datos-personales form input[type=password] {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #ccc;
    margin-bottom: 10px;
}

.datos-personales form select {
    margin: 0 auto;
    font-family: "Bold";
    color: #777;
    display: block;
    width: 50%;
    height: 23px;
    border: 0px;
    font-size: 16px;
    border-radius: 10px;
    padding-left: 10px;
    background-color: #b4b4b4;
    margin-bottom: 10px;
    cursor: pointer;
}

.datos-personales form option {
    background-color: #ccc;
    margin-bottom: 10px;
    cursor: pointer;
    color: #777;
}

.mover-campos-gestionar {
    margin-left: 25% !important;
}

.campos-cambio-pass {
    background-color: #fff !important;
}

.boton-editar {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 110px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    padding-top: 8px;
    margin-left: 8%;
    cursor: pointer;
    transition: .3s;
}

.boton-editar:hover {
    transition: .3s;
    background-color: #777;
}

.boton {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin-left: 0px;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
}

.boton:hover {
    transition: .3s;
    background-color: #777;
}

.boton-validar {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin: 0 auto;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
}

.boton-validar:hover {
    transition: .3s;
    background-color: #777;
}

.boton-contraseña {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 110px;
    height: 40px;
    border-radius: 30px;
    text-align: center;
    padding-top: 0px;
    margin-left: 9%;
    cursor: pointer;
    transition: .3s;
    border: 0px;
    cursor: pointer;
}

.boton-contraseña:hover {
    transition: .3s;
    background-color: #777;
}

.boton-editar-guardar {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 110px;
    height: 30px;
    border-radius: 20px;
    text-align: center;
    padding-top: 8px;
    margin-left: 8%;
    cursor: pointer;
    transition: .3s;
    display: none;
}

.boton-editar-guardar:hover {
    transition: .3s;
    background-color: #777;
}

.boton-cambio-pass {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #f7941e;
    width: 200px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    padding-top: 8px;
    margin-left: 8%;
    cursor: pointer;
    transition: .3s;
    margin-bottom: 30px;
}

.boton-cambio-pass:hover {
    transition: .3s;
    background-color: #777;
}

.boton-cambio-seguridad {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #d6df23;
    width: 220px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    padding-top: 8px;
    margin-left: 8%;
    cursor: pointer;
    transition: .3s;
    margin-top: 20px;
}

.boton-cambio-seguridad:hover {
    transition: .3s;
    background-color: #777;
}

.relleno {
    background-color: #777 !important;
    color: #fff !important;
    border: 1px solid #333;
    padding-left: 5px !important;
}

.oculto {
    display: none;
}

.bar {
    margin-top: 50px;
    width: 80%;
    height: 10px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #ccc;
}

#barra {
    width: 0;
    height: 100%;
    background: #195B85;
    animation: progreso 5s linear 1;
    border-radius: 10px;
}

#busqueda {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    background-color: #fff;
    border-radius: 30px;
    margin-left: 50px;
    padding-right: 10px;
    margin-top: 35px;
}

#busqueda img {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: bottom;
    padding-top: 8px;
    padding-left: 7px;
}

#busqueda input[type=text] {
    width: 250px;
    height: 25px;
    display: inline-block;
    vertical-align: bottom;
    border: 0px;
    outline: none;
    font-size: 24px;
    font-family: "Bold";
    color: #ccc;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #c1c1c1;
    opacity: .5;
    /* Firefox */
}

.contenido-tramites {
    width: 96%;
    min-height: 600px;
    height: calc( 100vh - 200px);
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;

}

.contenido-tramites h1 {
    font-family: "Regular";
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
}

.contenido-tramites img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    margin-left: 1%;
}

.contenido-tabla {
    width: 98%;
    min-height: 500px;
    height: calc( 100vh - 300px);
    background: #f2eeee;
    /* background-color: #09f; */
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 20px;
    overflow-x: auto;
    /* border-top: 1px solid #ccc; */
    overflow-y: hidden;
}

.contenido-tabla-s {
    width: 98%;
    min-height: 500px;
    height: calc( 100vh - 300px);
    background: #f2eeee;
    /* background-color: #09f; */
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 20px;
    overflow-x: auto;
    /* border-top: 1px solid #ccc; */
    overflow-y: hidden;
}

.contenido-tabla-ex {
    width: 98%;
    min-height: 500px;
    height: calc( 100vh - 300px);
    background: #f2eeee;
    /* background-color: #09f; */
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 20px;
    overflow-x: auto;
    /* border-top: 1px solid #ccc; */
    overflow-y: hidden;
}


.elementos {
    padding-left: 17px;
    width: calc( 100% - 21px);
    height: auto;
    min-height: 80px;
    background: #e0e0e0;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: .5s;
    border-radius: 15px;
    position: relative;
    margin-bottom: 5px;
}

.elementos h1 {
    color: #000;
    font-family: "Ligth";
    font-size: 16px;
    display: block;
}

.elementos h3 {
    color: #999;
    font-family: "Regular";
    font-size: 20px;
    display: block;
    margin-top: 5px;
}

.titular {
    color: #195B85;
    font-family: "Bold";
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    border-radius: 100%;
    margin-left: 0px !important;
    margin-bottom: 5px;
    transition: .3s;
    padding: 0px;
    position: relative;
    z-index: 0;
}

.elementos:hover {
    height: auto;
    min-height: 80px;
    background: #b0dfe1;
    /* border-bottom: 1px solid #ccc; */
    transition: .3s;
    cursor: default;
}

.campo-busca {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 28px;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 5px;
    margin-left: 10px;
    border: 1px solid #09f;
}

.campo-busca img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.campo-busca input {
    display: inline-block;
    vertical-align: middle;
    border: 0px;
    height: 25px;
    color: #195B85;
    font-family: "Regular";
    font-size: 18px;
    outline: none;
    width: 160px;
}

.campo-busca-archivos {
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    height: 50px;
    border-radius: 30px;
    background-color: #fff;
    margin-top: 5px;
    margin-left: 10px;
}

.campo-busca-archivos img {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    margin-left: 10px;
}

.campo-busca-archivos input {
    display: inline-block;
    vertical-align: middle;
    border: 0px;
    height: 50px;
    color: #195B85;
    font-family: "Regular";
    font-size: 25px;
    outline: none;
    width: 400px;
}

.boton-buscar-archivos {
    display: inline;
    background-color: #335ee2;
    padding: 9px 20px;
    border-radius: 30px;
    color: #fff;
    font-size: 25px;
    vertical-align: middle;
    font-family: "Regular";
    cursor: pointer;
}

.boton-buscar-archivos:hover {
    transition: .3s;
    background-color: #09f;
}

.no-registro {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    margin-top: 30px;
}

.no-registro img {
    width: 200px;
    height: 200px;
    display: block;
    margin: auto;
}

.no-registro h1 {
    color: #777;
    font-size: 25px;
    text-align: center !important;
    font-family: "Regular";
}

.contenido-opciones {
    width: 50px;
    height: auto;
    position: relative;
    float: right;
    right: 10px;
    top: -90px;
    z-index: 9;
}

.prioridad {
    width: 40px;
    height: 40px;
    background-image: url(../img/prioridad-1.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
    cursor: pointer;
    position: absolute;
    right: 90px;
    background-color: #ccc;
    border-radius: 100%;
}

.prioridad:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/prioridad-2.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
}

.texto-prioridad {
    font-size: 16px !important;
    text-align: left;
    width: 100px;
    position: absolute;
    top: -10px;
    left: 30px;
    cursor: default;
}

.notas {
    width: 40px;
    height: 40px;
    background-image: url(../img/notas.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 100%;
}

.notas:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/notas-s.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
}

.animacion-notas {
    animation: myalert 2s infinite;
}

@keyframes myalert {
    0% {
        background-color: #9b9b9b;
    }
    50% {
        background-color: #ffde04;
    }
    100% {
        background-color: #9b9b9b;
    }
}

.gestionar {
    width: 60px;
    height: 60px;
    background-image: url(../img/gestion.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #ccc;
    position: absolute;
    right: 0px;
    top: 40px;
    border-radius: 100%;
}

.gestionar:hover {
    background-image: url(../img/gestions.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
}

#prioridad-alta {
    width: 40px;
    height: 40px;
    background-image: url(../img/prioridad-3.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    margin-bottom: 10px;
}

.ocultar {
    width: 40px;
    height: 40px;
    background-image: url(../img/ocultar-1.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
    position: absolute;
    right: 90px;
    top: 50px;
    background-color: #ccc;
    border-radius: 100%;
}

.ocultar:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/ocultar.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
}

.no-vista {
    width: 40px;
    height: 40px;
    background-image: url(../img/oculto.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
    position: absolute;
    right: 90px;
    top: 100px;
    background-color: #ccc !important;
    border-radius: 100%;
}

.no-vista:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/ocultos.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
}

.eliminar {
    width: 40px;
    height: 40px;
    background-image: url(../img/borrar.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
}

.eliminar:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/borrar-1.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
}

.ver {
    width: 40px;
    height: 40px;
    background-image: url(../img/vista.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
}

.ver:hover {
    width: 40px;
    height: 40px;
    background-image: url(../img/vista-1.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
}

.ver-g {
    width: 120px;
    height: 28px;
    background-color: #195B85;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-family: "Regular";
    font-weight: bolder;
    padding-top: 10px;
}

.ver-g:hover {
    background-color: #212121;
    transition: .3s;
    color: #fff;
}

.editar {
    width: 35px;
    height: 35px;
    background-image: url(../img/editar.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    cursor: pointer;
    background-color: #009f3c;
    border-radius: 100%;
}

.editar:hover {
    width: 35px;
    height: 35px;
    background-image: url(../img/editar.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    transition: .3s;
    background-color: #777;
}

.data {
    font-size: 0px !important;
    position: absolute;
}

.confirmacion {
    position: fixed;
    width: 400px;
    height: 200px;
    background: #ccc;
    left: calc(50% - 200px);
    border-radius: 5px;
    top: 200px;
    display: none;
    z-index: 99;
}

.confirmacion h1 {
    text-align: left;
    margin-top: 20px;
    padding: 15px;
}

.confirmacion-ubicacion {
    position: fixed;
    width: 400px;
    height: 200px;
    background: #ccc;
    left: calc(50% - 200px);
    border-radius: 5px;
    top: 80px;
    display: none;
    z-index: 999;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .3);
}

.confirmacion-ubicacion h1 {
    text-align: left;
    margin-top: 20px;
    padding: 15px;
}

.confirmacion-estado {
    position: fixed;
    width: 400px;
    height: 200px;
    background: #ccc;
    left: calc(50% - 200px);
    border-radius: 5px;
    top: 80px;
    display: none;
    z-index: 999;
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, .3);
}

.confirmacion-estado h1 {
    text-align: left;
    margin-top: 20px;
    padding: 15px;
}

.boton-c {
    width: 100px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-color: red;
    margin: 0 auto;
    border-radius: 5px;
    font-family: "Regular";
    padding-top: 10px;
    text-align: center;
    cursor: pointer;
    margin-top: 50px;
    transition: .3s;
}

.boton-c:hover {
    background-color: #777;
    transition: .3s;
    color: #fff;
}

.aceptar {
    position: relative;
    margin-left: 45px;
    background-color: #195B85;
}

.aceptar-estado {
    position: relative;
    margin-left: 45px;
    background-color: #195B85;
}

.aceptar2 {
    position: relative;
    margin-left: 45px;
    background-color: #195B85;
}

.cancelar {
    position: relative;
    left: 100px;
    background-color: #f3b850;
}

.contenido-notas {
    position: absolute;
    left: -420px;
    width: 400px;
    height: 90px;
    background: #ccc;
    border-radius: 5px;
    top: 10px;
    transition: .3s;
    display: none;
    z-index: 10 !important;
}

.contenido-notas:hover~.triangulo {
    transition: .3s;
    background: #bab9b9;
}

.contenido-notas h3 {
    color: #777;
    text-align: left;
    padding: 5px 10px;
    font-family: "Ligth";
}

.contenido-notas img {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    margin-top: 10px;
}

#notas-center {
    text-align: center;
    padding: 0px 0px;
    font-size: 16px;
}

.triangulo {
    width: 0;
    height: 0;
    border-left: 30px solid #ccc;
    border-top: 0px solid transparent;
    border-bottom: 60px solid transparent;
    position: absolute;
    left: 390px;
}

/* ESTILO DE ESTADOS */

#espera-t {
    background: #777;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#archivo-t {
    background: #df0024;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#requisitos-t {
    background: #f2811d;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#proceso-t {
    background: #ad30ae;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#finalizado-t {
    background: #009045;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#rechazado-t {
    background: #ef8f1e;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#aprobacion-t {
    background: #eec154;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#aprobacion-t-t{
    background: #6c8dc4;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

#fiscalizacion-t {
    background: #ad30ae;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Bold";
    padding: 5px;
}

.text-center {
    display: inline-block !important;
    vertical-align: middle !important;
}

.text-numero-tramite {
    background: #195B85;
    width: 170px;
    height: 23px;
    border-radius: 30px;
    text-align: center;
    color: #fff !important;
    font-size: 15px !important;
    font-family: "Ligth";
    padding: 5px;
}

.reload {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #0BAC40;
    cursor: pointer;
    margin-left: 15px;
    background-image: url(../img/reload.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: .3s;
}

.reload:hover {
    background-color: #0D8735;
    transition: .3s;
    /* transform: rotate(180deg); */
}

.ordenar {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #09f;
    cursor: pointer;
    margin-left: 15px;
    background-image: url(../img/ordenar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: .3s;
}

.ordenar:hover {
    background-color: #09a;
    transition: .3s;
    /* transform: rotate(180deg); */
}

.ordenar-ex {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #09f;
    cursor: pointer;
    margin-left: 15px;
    background-image: url(../img/ordenar.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: .3s;
}

.ordenar-ex:hover {
    background-color: #09a;
    transition: .3s;
    /* transform: rotate(180deg); */
}



.contenido-filtro-dos {
    width: 250px;
    height: auto;
    min-height: 200px;
    background: #ccc;
    margin: 0 auto;
    position: absolute;
    border-radius: 10px;
    left: -125px;
    margin-top: 40px;
    margin-bottom: 20px;
    display: none;
    z-index: 99;
}

.triangulo_sup_dos {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #ccc;
    top: -10px;
    position: relative;
    left: 90px;
}

.filtro {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #0D7987;
    cursor: pointer;
    margin-left: 15px;
    background-image: url(../img/filtro.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: .3s;
}

.filtro:hover {
    background-color: #08454d;
    transition: .3s;
}

.contenido-filtro {
    width: 250px;
    height: auto;
    min-height: 200px;
    background: #ccc;
    margin: 0 auto;
    position: relative;
    border-radius: 10px;
    left: -125px;
    margin-top: 40px;
    margin-bottom: 20px;
    display: none;
    z-index: 99;
}

.triangulo_sup {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #ccc;
    top: -10px;
    position: relative;
    left: 90px;
}

.elementos-filtro {
    font-family: "Regular";
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #999;
    width: 80%;
    margin: 0 auto;
    transition: .3s;
    border-radius: 5px;
}

.elementos-filtro:hover {
    transition: .3s;
    background-color: #999;
}

.boton-flotante {
    width: 220px;
    height: 50px;
    border-radius: 30px;
    background: #f7941e;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 10;
    transition: .3s;
    text-decoration: none;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
}

.boton-flotante:hover {
    background: #999;
    transition: .3s;
}

.boton-flotante img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 10px;
    vertical-align: middle;
    display: inline-block;
}

.boton-flotante h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-sugerencia {
    width: 180px;
    height: 40px;
    border-radius: 30px;
    background: #ffdd00;
    position: fixed;
    right: 30px;
    bottom: 100px;
    z-index: 10;
    transition: .3s;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
}

.boton-sugerencia:hover {
    background: #999;
    transition: .3s;
}

.boton-sugerencia img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
    padding-left: 15px;
}

.boton-sugerencia h1 {
    font-family: "Regular";
    font-size: 14px;
    color: #333;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

/* boton sugerencia gestionar */

.sugerencias-ges {
    background-color: #ffdd00 !important;
    display: none;
}

.boton-sugerencia-ges {
    width: 180px;
    height: 40px;
    border-radius: 30px;
    background: #ffdd00;
    z-index: 10;
    transition: .3s;
    text-decoration: none;
    cursor: pointer;
}

.boton-sugerencia-ges:hover {
    /* background:#999; */
    transition: .3s;
}

.boton-sugerencia-ges img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
    padding-left: 15px;
}

.boton-sugerencia-ges h1 {
    font-family: "Regular";
    font-size: 14px;
    color: #333;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.alerta-tramite {
    width: 240px;
    height: 95px;
    background-color: #09f;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    position: fixed;
    border-radius: 50px;
    animation: alerta-tra 1s;
    animation-iteration-count: 5;
    background-color: rgba(63, 188, 239, 0);
}

.opciones-tramites {
    width: 100%;
    height: auto;
    min-height: 50px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 30px;
}

.opciones-tramites a {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    background: #195B85;
    font-family: "Regular";
    color: #fff;
    text-decoration: none;
    padding-left: 35px;
    padding-top: 15px;
    transition: .3s;
    cursor: pointer !important;
}

.opciones-tramites a:hover {
    background: #777;
    transition: .3s;
    cursor: pointer;
}

.enviar-pdf {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    background: #195B85;
    font-family: "Regular";
    color: #fff;
    text-decoration: none;
    padding-left: 35px;
    padding-top: 15px;
    transition: .3s;
    cursor: pointer !important;
}

.enviar-pdf:hover {
    background: #777;
    transition: .3s;
    cursor: pointer;
}

.generar-pdf {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    background: #195B85;
    font-family: "Regular";
    color: #fff;
    text-decoration: none;
    transition: .3s;
    cursor: pointer !important;
    border: none;
}

.generar-pdf:hover {
    background: #777;
    transition: .3s;
    cursor: pointer;
}

.espacio-blanco {
    width: 100%;
    height: 250px;
}

.campo-vacio {
    border: 1px solid red;
}

.list-trami {
    color: #777;
    font-size: 25px;
    font-family: "Bold";
    padding-left: 20px;
    padding-top: 20px;
}

.sin-notificaciones {
    display: none;
    margin: 0 auto;
}

.sin-notificaciones img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    opacity: .9;
}

.sin-notificaciones h1 {
    text-align: center !important;
    margin: 0 auto;
    display: block;
    background-color: #eee;
    color: #777;
    width: 130px;
    height: 20px;
    padding: 3px 5px;
    padding-top: 3px;
    border-radius: 30px;
    font-size: 15px;
    font-family: "Regular";
    vertical-align: middle;
}

.no-gestion {
    display: none;
    margin: 0 auto;
}

.no-gestion img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
}

.no-gestion h1 {
    text-align: center !important;
    margin: 0 auto;
    display: block;
    background-color: #777;
    color: #fff;
    width: 180px;
    height: 30px;
    padding: 10px 20px;
    padding-top: 15px;
    border-radius: 30px;
    font-size: 16px;
    font-family: "Regular";
}

.opciones-admin {
    width: 100%;
    height: auto;
    min-height: 250px;
    padding-bottom: 40px;
    background-color: #85ceed;
    box-shadow: 0px 5px #ccc;
}

.opciones-admin h1 {
    text-align: left;
    margin: 0 auto;
    display: block;
    color: #333;
    padding-top: 10px;
    font-size: 20px;
    font-family: "Bold";
    padding-left: 30px;
}

.combo-admin {
    display: inline-block;
    margin-left: 30px;
}

.combo-admin label {
    display: block;
    font-size: 16px;
    font-family: "Regular";
    color: #333;
}

.combo-admin select {
    display: block;
    font-size: 16px;
    font-family: "Regular";
    color: #333;
    border-radius: 10px;
    border: 0px;
    margin-top: 5px;
    width: 160px;
    outline: none;
    padding-left: 4px;
    cursor: pointer;
}

.combo-admin option {
    display: block;
    font-size: 16px;
    font-family: "Regular";
    color: #333;
    border-radius: 10px;
    border: 0px;
    margin-top: 5px;
    width: 160px;
}

.observacion-admin {
    border-radius: 10px;
    /* background-image: url(../img/notas.png); */
    position: relative;
    top: 35px;
    cursor: pointer;
    left: 404px;
}

.notas-admin {
    border-radius: 10px;
    /* background-image: url(../img/notas.png); */
    position: relative;
    top: -45px;
    cursor: pointer;
    left: -20px;
}

.notas-admin:hover {
    /* background-image: url(../img/notas-2.png); */
}

.notas-admin h6 {
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    background-color: #777;
    color: #fff;
    border-radius: 20px;
    font-family: "Regular";
    position: relative;
    top: 50px;
}

.text-notas {
    display: block;
}

.text-notas textarea {
    width: 300px;
    text-align: left;
    font-size: 14px;
    padding: 10px;
    position: absolute;
    top: 30px;
    left: 30px;
    outline: none;
    height: 50px;
}

/* .triangulo-admin {
width: 0;
height: 0;
border-right: 30px solid #e6e6e6;
border-top: 0px solid transparent;
border-bottom: 60px solid transparent;
position: absolute;
left: 50px;
} */

.cerrar-nota {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 365px;
    top: 7px;
    z-index: 99;
    border-radius: 10px;
    background-image: url(../img/error.png);
    background-position: center;
    background-size: 100%;
}

.save-admin {
    position: absolute;
    top: 70px;
    left: 360px;
    background-color: #09f;
    padding: 10px;
    border-radius: 5px;
    font-family: "Regular";
    color: #fff;
    transition: .3s;
    height: 20px;
}

.save-admin:hover {
    transition: .3s;
    background-color: #777;
}

.save-admin-ex {
    position: absolute;
    top: 70px;
    left: 360px;
    background-color: #09f;
    padding: 10px;
    border-radius: 5px;
    font-family: "Regular";
    color: #fff;
    transition: .3s;
    height: 20px;
}

.save-admin-ex:hover {
    transition: .3s;
    background-color: #777;
}

.save-admin-admin {
    position: absolute;
    top: 70px;
    left: 360px;
    background-color: #09f;
    padding: 10px;
    border-radius: 5px;
    font-family: "Regular";
    color: #fff;
    transition: .3s;
    height: 20px;
}

.save-admin-admin:hover {
    transition: .3s;
    background-color: #777;
}

/* NOTIFICACION DE INSERCION DE DATOS CORRECTOS EN CASO DE CONTRIBUYENTE; */

.correcto-admin {
    width: 25px;
    height: 25px;
    border-radius: 20px;
    position: absolute;
    left: 330px;
    top: 30px;
    background-image: url(../img/correct.png);
    background-position: center;
    display: none;
}

/* NOTIFICACION DE INSERCION DE DATOS CORRECTOS EN CASO DE ADMINISTRADOR; */

.correcto-admin-admin {
    width: 25px;
    height: 25px;
    border-radius: 20px;
    position: absolute;
    left: 330px;
    top: 30px;
    background-image: url(../img/correct.png);
    background-position: center;
    display: none;
}

.divison-admin {
    width: 2px;
    height: 260px;
    background-color: #777;
    position: absolute;
    top: 120px;
    left: 855px;
}

.divison-admin-dos {
    width: 2px;
    height: 220px;
    background-color: #777;
    position: absolute;
    top: 120px;
    left: 410px;
}

.division-info-admin {
    width: 500px;
    height: 100px;
    color: #999;
    position: absolute;
    top: 110px;
    left: 840px;
    z-index: 999;
}

.adjuntos-user {
    width: 500px;
    height: 100px;
    position: absolute;
    top: 110px;
    left: 30px;
}

.adjuntos-admin {
    width: 500px;
    height: 100px;
    position: absolute;
    top: 110px;
    left: 840px;
}

.adjuntos-admin h1 {
    text-align: left !important;
    margin-bottom: 10px;
}

.lista-archivos {
    margin-left: 30px;
    display: block;
    margin-bottom: 5px;
}

.lista-archivos img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}

.lista-archivos a {
    display: inline-block;
    vertical-align: middle;
    font-family: "Bold";
    color: #333;
    transition: .3s;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.lista-archivos a:hover {
    color: #ee9b07;
    transition: .3s;
    border-bottom: 1px solid #ee9b07;
}

.alado {
    margin-left: 280px;
    display: block;
    margin-top: -70px;
    margin-bottom: 0px;
}

.alado img {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}

.alado a {
    display: inline-block;
    vertical-align: middle;
    font-family: "Bold";
    color: #333;
    transition: .3s;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.alado a:hover {
    color: #ee9b07;
    transition: .3s;
    border-bottom: 1px solid #ee9b07;
}

.adjunto {
    width: calc( 100% - 15px);
    height: auto;
    border-radius: 5px;
    background-color: #87c9f4;
    margin: 0 auto;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-top: 20px;
    background-image: url(../img/adjunto-re.png);
    background-repeat: no-repeat;
    background-position: right center;
}

.recuadro-adjunto {
    border: 0px;
    font-size: 22px !important;
    color: #777 !important;
    text-align: left !important;
    border-bottom: 2px solid #777 !important;
    width: 90%;
    padding-bottom: 7px;
}

.adjunto h1 {
    font-family: "Regular";
    color: #777;
    margin-left: 35px;
    font-size: 15px !important;
}

.adjunto img {
    width: 20px;
    height: 20px;
}

.adjunto-boton {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    background-color: #bdd106;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    transition: .3s;
    /* overflow: hidden; */
}

.certificacion-boton {
    background-color: #f7941e !important;
    display: inline-block;
    vertical-align: middle;
    width: 88px;
    top: 5px;
}

.certificacion-boton:hover {
    background-color: #777 !important;
}

.boton-generar {
    display: inline-block;
    vertical-align: middle;
    width: 88px;
    height: 30px;
    background-color: #bdd106;
    border-radius: 5px;
    transition: .3s;
    margin-right: 25px;
    font-family: "Bold";
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

.boton-generar:hover {
    transition: .3s;
    background-color: #777;
}

.adjunto-boton input {
    border: 2px solid red;
    width: 150px;
    background-color: #09f;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    margin-top: 0px;
    opacity: 0;
}

.adjunto-boton h1 {
    position: absolute;
    cursor: pointer;
    text-align: center;
    left: -28px;
}

.archivo-mensaje {
    display: inline-block;
    vertical-align: middle;
}

.obligatorio-requisito {
    margin-top: -10px;
}

.alerta-adjunto {
    margin-top: -2px;
    margin-left: 160px;
    min-width: 300px;
    width: auto;
    height: 35px;
    font-family: "Regular";
    border-radius: 5px;
    background-color: #09f;
    padding-left: 10px;
    padding-top: 10px;
    display: none;
}

.adjunto-boton:hover {
    transition: .3s;
    background-color: #888;
}

.adjunto-boton h1 {
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

.obligadatorios {
    text-align: right;
    display: block;
    border-top: 2px solid #777;
    width: 98%;
}

.obligadatorios img {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    padding-top: 15px;
}

.obligadatorios h1 {
    text-align: right;
    padding-right: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    padding-top: 10px;
}

/* .file-input{
cursor: pointer;
width: 100%;
height: 40px;
position: relative;
border: none;
font-size: 0px;
appearance: none !important;
vertical-align: middle;
top: -30px;
} */

#sin-adjuntos {
    font-size: 20px;
    color: #888;
    color: #fff;
}

.required {
    border-radius: 5px !important;
}

.input-file-vacio {
    background-image: url("../img/error.png");
    background-position: center;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: relative;
    left: 180px;
    top: -22px;
    border-radius: 30px;
    display: block;
}

.online {
    display: none;
}

.offline {
    display: none;
}

.ia {
    width: 40%;
    height: 300px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: -60px;
    position: relative;
}

.monigote {
    width: 60px;
    height: 60px;
    background-color: #74a7da;
    border-radius: 100%;
    position: absolute;
    bottom: 0px;
    background-image: url(../img/moni.png);
    background-size: contain;
    box-shadow: 0px 0px 8px 1px #cdcdcd;
}

.cajon-ia {
    width: 95%;
    height: 230px;
    background-color: #74a7da;
    border-radius: 5px;
    margin: 0 auto;
    box-shadow: 0px 0px 8px 1px #cdcdcd;
}

.cajon-ia ul {
    position: relative;
}

.cajon-ia ul li {
    list-style: none;
    width: 100%;
    height: 230px;
    background-color: #74a7da;
    margin: 0 auto;
    position: absolute;
    border-radius: 5px;
}

.cajon-ia ul .mostrar-caja {
    display: block;
}

.triangulo_top_left {
    width: 0;
    height: 0;
    border-top: 30px solid #74a7da;
    border-right: 30px solid transparent;
    position: absolute;
    left: 50px;
    bottom: 50px;
}

.contenido-ia h1 {
    padding: 10px;
    text-align: center;
    font-family: "Bold";
    color: #fff;
}

.contenido-ia p {
    text-align: center;
    font-family: "Bold";
    color: #ededed;
    padding: 0px 10px;
}

.contenido-ia img {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
}

.indicador {
    width: 55px;
    height: 30px;
    margin: 0 auto;
    margin-top: -20px;
    position: absolute;
    left: calc(50% - 50px);
    margin-top: -10px;
}

.indicador img {
    width: 100px;
    height: 20px;
}

.ia-next {
    position: absolute;
    right: 0px;
    z-index: 99;
    height: 100px;
    width: 30px;
    background-image: url(../img/next.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 60px;
    cursor: pointer;
}

.ia-prev {
    position: absolute;
    left: 0px;
    z-index: 99;
    height: 100px;
    width: 30px;
    background-image: url(../img/prev.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 60px;
    cursor: pointer;
}

.establecer-prioridad {
    width: 250px;
    height: 40px;
    position: absolute;
    left: 30px;
    top: 200px;
    border-radius: 5px;
}

.tributarios-municipal {
    width: 200px;
    height: 60px;
    position: absolute;
    left: 230px;
    top: 200px;
    border-radius: 5px;
    /* z-index:-1; */
}

.requisitos-tramites {
    width: 90%;
    margin: 0 auto;
    background-color: #87c9f4;
    height: auto;
    min-height: 280px;
    margin-top: 20px;
    border-radius: 5px;
    background-image: url(../img/requisito.png);
    background-repeat: no-repeat;
    background-position: right center;
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, .1);
}

.requisitos-tramites h1 {
    text-align: center;
    font-size: 28px;
    padding: 20px;
    font-family: "Bold";
    font-weight: bold;
    color: #333;
    padding-bottom: 10px;
}

.requisitos-tramites ul li {
    text-align: left;
    font-size: 18px;
    font-family: "Bold";
    font-weight: bold;
    color: #666;
    padding: 5px 20px;
    list-style-type: decimal;
    list-style-position: inside;
}

.adjunto h3 {
    display: inline-block !important;
    vertical-align: middle;
}

/* FAV */

.contenido-observacion {
    display: inline-block;
    position: absolute;
    width: 300px;
    height: 140px;
    background-color: #fff;
    top: -85px;
    left: 80px;
    border-radius: 5px;
    display: none;
    z-index: 12;
}

.contenido-observacion-icon {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 95px;
    left: 430px;
    border-radius: 100%;
    transition: .3s;
    cursor: pointer;
    background-image: url(../img/notas-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}

.contenido-observacion-icon:hover {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    transition: .3s;
    background-image: url(../img/notas.png);
}

.contenido-observacion-icon h1 {
    padding: 10px;
}

.sin-observacion {
    width: 100px;
    height: 100px;
    display: flex;
    margin-left: 85px;
    margin-top: 20px;
}

.sin-observacion img {
    width: 50px;
    height: 50px;
    display: block;
    margin: auto;
}

.sin-observacion h1 {
    display: block;
    margin: auto;
}

.datos-propietario input[type=radio] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 10px;
}

.email-enviado {
    width: 40%;
    height: 300px;
    border-radius: 15px;
    background: #195B85;
    position: fixed;
    display: none;
    margin-left: 30%;
    top: 150px;
}

.email-enviado h1 {
    font-size: 35px;
    color: #fff;
    font-family: "Regular";
    text-align: center;
    margin-top: 40px;
}

.email-enviado img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

.mail-send {
    position: relative;
    width: 100%;
    height: 70px;
}

.busqueda-cedula {
    width: 90%;
    min-height: 650px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    margin: 30px auto;
    padding-top: 30px;
}

.caja-busqueda {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    margin-top: 10px;
}

.caja-busquedas {
    width: 2px;
    height: 2px;
    margin: 0 auto;
    margin-top: 10px;
    /* background-color: red; */
    display: none;
}

.campo-busqueda {
    width: 50%;
    display: block;
    margin: 0 auto;
    background-color: #eee;
    border-radius: 30px;
    /* background-color: red; */
}

.campo-busqueda img {
    font-family: "Bold";
    color: #333;
    text-align: center;
    margin: 0 auto;
    display: block;
    font-size: 18px;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.campo-busqueda input {
    font-family: "Bold";
    color: #333;
    border-radius: 5px;
    padding: 3px;
    border: 0px;
    background-color: #eee;
    font-size: 20px;
    margin: 0 auto;
    display: block;
    height: 50px;
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    outline: none;
}

.datos-cedula {
    width: 98%;
    height: 180px;
    background-color: #eee;
    margin: 0 auto;
    border-radius: 5px;
}

.datos-cedula h1 {
    font-family: "Bold";
    color: #333;
    font-size: 25px;
    padding: 20px;
}

.datos-cedula h2 {
    font-family: "Ligth";
    color: #333;
    font-size: 18px;
    padding-left: 20px;
    margin-top: -15px;
}

.datos-cedula label {
    font-family: "Bold";
    padding: 3px;
    font-size: 16px;
    display: block;
}

.datos-cedula select {
    font-family: "Bold";
    border-radius: 5px;
    padding: 3px;
    background-color: #195B85;
    font-size: 16px;
    margin: 0 auto;
    border: 0px;
}

.aliniado {
    margin-top: 30px;
    display: inline-block;
    vertical-align: middle;
}

.boton-atras {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #f7941e;
    border-radius: 100%;
    left: calc(100% - 190px);
    top: 20px;
    transition: .3s;
    background-image: url(../img/atras.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}

.boton-atras:hover {
    transition: .3s;
    background-color: #777;
}

.lista-inactivos {
    display: block;
    border-bottom: 1px solid #333;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 10px;
}

.lista-inactivos h1 {
    font-size: 25px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: middle;
}

.lista-inactivos img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

.tramites-inactivos {
    width: 95%;
    height: auto;
    border-bottom: 1px solid #ccc;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    padding-bottom: 20px;
}

.tramites-inactivos:hover {
    background-color: #eee;
    transition: .3s;
    border-radius: 5px;
}

.tramites-inactivos h1 {
    font-family: "Bold";
    font-size: 20px;
    color: #777;
    padding-top: 0px;
    padding-left: 10px;
}

.estado-tramite {
    position: relative;
    top: 0px;
    left: 10px;
}

.nume-exp {
    background: #195B85;
    width: 120px;
    height: 20px;
    border-radius: 30px;
    text-align: center;
    color: #fff !important;
    font-size: 12px !important;
    font-family: "Bold";
    padding: 5px;
    margin-left: 20px;
    padding-top: 10px !important;
}

.texto-movimientos {
    font-family: "Bold";
    font-size: 12px !important;
    color: #777;
    padding-top: 10px;
    padding-left: 10px;
    border-left: 2px solid #ccc;
    position: relative;
    left: 400px;
    top: 10px;
}

.observaciones {
    width: 400px;
    position: relative;
    font-size: 12px !important;
    left: 350px;
    top: 12px;
}

.observaciones h1 {
    font-size: 14px !important;
    color: #f7941e;
    /* border-left: solid 1px #f7941e; */
}

.observaciones-dep {
    width: 300px;
    font-size: 12px !important;
    left: 30px;
    position: relative;
    top: -15px;
    margin-top: 10px;
}

.observaciones-dep h1 {
    font-size: 14px !important;
    color: #f7941e;
    border-right: solid 1px #f7941e;
}

.tips {
    background-color: #195B85;
    border-radius: 20px;
    width: 650px;
    height: 420px;
    position: absolute;
    left: calc( 50% - 325px);
    z-index: 999;
    top: 150px;
}

.img-tips {
    position: absolute;
    left: 330px;
    top: 10px;
    width: 300px;
}

.tips h1 {
    font-size: 40px;
    padding-left: 20px;
    color: #fff;
    font-family: "Bold";
    padding-top: 20px;
    padding-bottom: 10px;
}

.tips textarea {
    font-size: 20px;
    color: #333;
    font-family: "Ligth";
    padding: 10px 20px;
    width: 85%;
    margin: 0 auto;
    display: block;
}

.tips h2 {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    font-family: "Ligth";
    padding: 0px 20px;
}

.tips h3 {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
    font-family: "Ligth";
}

.todo-tips {
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    z-index: 998;
}

.todo-tips-sugerencia {
    width: 100%;
    background-color: rgba(0, 0, 0, .7);
    position: absolute;
    z-index: 998;
    top: 0px;
    /* height: 100%; */
    display: none;
}

.boton-entendido-s {
    margin-top: 20px;
    width: 180px;
    height: 40px;
    border-radius: 5px;
    border: 3px solid #fff;
    text-align: center;
    position: absolute;
    font-size: 20px;
    color: #fff;
    font-family: "Regular";
    padding-top: 15px;
    margin-right: 0px;
    right: 5%;
    transition: .3s;
    cursor: pointer;
    /* background-color: #ff8700; */
}

.boton-entendido-s:hover {
    background-color: #777;
    transition: .3s;
    border: 3px solid #777;
}

.boton-entendido {
    margin-top: 20px;
    width: 180px;
    height: 40px;
    border-radius: 5px;
    border: 3px solid #fff;
    text-align: center;
    position: absolute;
    font-size: 20px;
    color: #195B85;
    font-family: "Regular";
    padding-top: 15px;
    margin-right: 50px;
    left: 5%;
    /* right: 0px; */
    transition: .3s;
    cursor: pointer;
    background-color: #fff;
}

.boton-entendido:hover {
    background-color: #777;
    transition: .3s;
    border: 3px solid #777;
}


.boton-entendido-decla {
    width: 180px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    color: #195B85;
    font-family: "Regular";
    transition: .3s;
    cursor: pointer;
    background-color: #fff;
    padding: 10px;
    text-decoration: none;
}

.boton-entendido-decla:hover {
    background-color: #333;
    transition: .3s;
    color: #fff;
    /* border: 3px solid #777; */
}

.puede-editar {
    position: absolute;
    left: 30px;
    top: 360px;
    display: none;
}

.puede-adjuntar-formulario {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
}

.boton-slider {
    width: 80px;
    height: 40px;
    background-color: #777;
    border-radius: 40px;
    margin-top: 5px;
    position: relative;
    cursor: pointer;
}

.boton-slider div {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    position: absolute;
}

.cir-editar {
    position: absolute;
}

.puede-adjuntar {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-rechazo-cobros {
    position: absolute;
    left: 30px;
    top: 280px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-finalizado-cobro{
    position: absolute;
    left: 30px;
    top: 280px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}


.puede-adjuntar-reca-ges {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}


.puede-adjuntar-reca-ges-finalizado {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: rgba(192, 210, 22, .5);
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-depu-ac {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-doc-dec-valo {
    position: absolute;
    left: 30px;
    top: 260px;
    display: block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

/* ACTUALIZAR LOS ARCHIVOS DECLARACIONES  */

.puede-adjuntar-doc-dec-valo {
    position: absolute;
    left: 432px;
    top: 360px;
    display: block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}


.puede-adjuntar-doc-dec-ins {
    position: absolute;
    left: 30px;
    top: 260px;
    display: block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
  
}

.puede-adjuntar-retiro-patente-finalizado {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-retiro-patente-rechazado{
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #ffdd00;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}


.puede-adjuntar-tres {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-cuatro {
    position: absolute;
    left: 30px;
    top: 350px;
    display: none;
    background-color: #eb6531;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-oficio {
    position: absolute;
    left: 30px;
    top: 260px;
    display: block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-rechazo {
    position: absolute;
    left: 30px;
    top: 260px;
    display: block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.puede-adjuntar-dos {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
}

.puede-adjuntar-nota {
    /* position: absolute;
	left: 30px;
	top:260px; */
    /* display: none; */
}

.muestra-form {
    display: none;
}

.oculto-form {}

.rol {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: none;
}

.encabezado-certificado {
    margin: 0 auto;
    width: 400px;
}

.encabezado-certificado h1 {
    font-size: 20px;
    text-align: center !important;
    font-family: "Regular";
    display: block;
    vertical-align: middle;
}

.encabezado-certificado h2 {
    font-family: "Regular";
    display: block;
    font-size: 16px;
    text-align: center;
}

.logo-encabezado {
    position: relative;
    top: -10px;
    left: -100px;
}

.logo-encabezado img {
    width: 80px;
    height: 80px;
    position: absolute;
}

.form-certificado {
    width: 80%;
    position: relative;
    margin: 0 auto;
    /* background-color: red; */
}

.form-certificado input {
    text-align: left;
    padding-left: 5px !important;
    vertical-align: middle;
}

.form-certificado label {
    vertical-align: middle;
}

.form-certificado h1 {
    font-family: "Regular";
    font-size: 23px;
    text-align: center;
    text-decoration: underline;
}

.form-certificado h2 {
    font-family: "Regular";
    font-size: 15px;
    text-align: center !important;
    color: #195B85 !important;
}

.form-certificado h3 {
    font-family: "Regular";
    font-size: 15px;
    text-align: left;
}

.form-certificado span {
    font-family: "Regular";
    font-size: 15px;
    text-align: left;
    color: #f7941e;
}

.form-certificado input[type=submit] {
    border: 0px;
    color: #fff;
    width: 150px;
    height: 50px;
    background-color: #0BAC40;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    font-family: "Regular";
    transition: .3s;
    margin-bottom: 30px;
    cursor: pointer;
}

.form-certificado input[type=submit]:hover {
    transition: .3s;
    background-color: #777;
}

.sello {
    position: relative;
    left: 700px;
    top: 10px;
}

.sello img {
    width: 150px;
    height: 150px;
}

.mis-resolucion {
    padding: 10px;
    position: absolute;
    top: 90px;
    right: 50px;
    width: 150px;
    z-index: 9;
}

.mis-resolucion img {
    width: 30px;
    height: 30px;
    margin-top: -5px;
}

.mis-resolucion a {
    text-decoration: none;
    font-family: "Regular";
    width: 200px;
    text-align: center;
    padding: 7px;
    border-radius: 20px;
    color: #fff;
    transition: .3s;
    background: rgba(35, 171, 225, 1);
    background: -moz-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35, 171, 225, 1)), color-stop(100%, rgba(13, 33, 255, 0.61)));
    background: -webkit-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
    background: -o-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
    background: -ms-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
    background: linear-gradient(to right, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#23abe1', endColorstr='#0d21ff', GradientType=1);
}

.mis-resolucion a:hover {
    background-color: #777;
    transition: .3s;
}

.certificacion {
    padding: 10px;
    position: absolute;
    top: 90px;
    right: 200px;
    width: 140px;
    z-index: 9;
}

.certificacion img {
    width: 30px;
    height: 30px;
    margin-top: -5px;
}

.certificacion a {
    text-decoration: none;
    font-family: "Regular";
    background-color: #195B85;
    width: 200px;
    text-align: center;
    padding: 7px;
    border-radius: 20px;
    color: #fff;
    transition: .3s;
    background: rgba(35, 171, 225, 1);
    background: -moz-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35, 171, 225, 1)), color-stop(100%, rgba(75, 0, 150, 0.61)));
    background: -webkit-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
    background: -o-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
    background: -ms-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
    background: linear-gradient(to right, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#23abe1', endColorstr='#4b0096', GradientType=1);
}

.certificacion a:hover {
    background-color: #777;
    transition: .3s;
}

.terminos {
    /* background:#ccc; */
    width: 70%;
    margin: 0 auto;
    /* background-color: #ccc; */
}

.terminos h1 {
    text-align: left;
    font-size: 15px;
    color: #777;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    width: 80%;
    padding-top: 10px;
}

.terminos input[type="checkbox"] {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 10px;
}

.terminos a {
    text-align: left;
    display: block;
    font-size: 16px;
    color: #195B85;
    font-family: "Bold";
    padding-bottom: 10px;
    padding-top: 10px;
    transition: .3s;
}

.terminos a:hover {
    transition: .3s;
    color: #777;
}

.cabecera-tramite h1 {
    font-size: 18px;
    color: #777;
    font-family: "Regular";
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: -10px;
    text-align: center;
}

.cabecera-tramite h2 {
    font-size: 15px;
    color: #777;
    font-family: "Regular";
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: -10px;
    text-align: center;
}

.cabecera-tramite label {
    font-size: 16px;
    color: #777;
    font-family: "Regular";
    margin: 0 auto;
    text-align: center;
}

.cabecera-tramite select {
    font-size: 16px;
    color: #777;
    font-family: "Regular";
    margin: 0 auto;
    text-align: center;
}

.tradicional {
    display: block;
}

.simplificada {
    display: none;
}

.ley-num {
    f;
    display: none;
}

.especial {
    display: none;
}

.tradic-simpl {
    display: block;
}

.declaracion-informativa {
    width: 100%;
    height: auto;
    min-height: 120px;
    background-color: #fff;
    border-radius: 5px;
    padding: 0px 0px;
    margin: 10px;
    margin-left: -10px;
    /* margin:0 auto; */
}

.declaracion-informativa h1 {
    padding: 10px 10px;
    margin-left: 0px;
}

.declaracion-informativa h2 {
    padding: 10px 10px;
}

.info-informativa {
    width: 80%;
    height: auto;
    min-height: 50px;
    background-color: #777;
    margin-top: 10px;
    border-radius: 5px;
}

.info-informativa h1 {
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cargando {
    display: block;
    margin: 0px auto;
    width: 120px;
    height: auto;
    display: none;
}

.cargando h2 {
    font-size: 14px;
    color: #777;
    font-family: "Regular";
    display: block;
    text-align: center;
    margin-top: -10px;
}

.cargando img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0px auto;
}

.nota-rectificativa {
    display: block;
    width: 90%;
    height: auto;
    background: #777;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 15px;
    /* background-image: url(../img/informa.png); */
    background-size: 5%;
    background-repeat: no-repeat;
    background-position: center 10px;
}

.nota-rectificativa h1 {
    color: #fff;
    font-size: 16px;
    font-family: "Ligth";
    padding: 20px;
}

.nota-rectificativa input[type=submit] {
    margin-left: 20px;
    border: 0px;
    border-radius: 30px;
    height: 40px;
    width: 150px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 22px;
    background-color: #195B85;
}



.nota-rectificativa input[type=submit]:hover {
    transition: .3s;
    background-color: #777;
}

.observacion-numero {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #09f;
    cursor: pointer;
    border-radius: 100%;
    background-image: url(../img/exclama.png);
    background-position: center;
    background-size: 90%;
}

.espacio-declaracion {
    width: 90%;
    height: auto;
    min-height: 100px;
    background-color: #eee;
    display: block;
    margin: 0 auto;
}

.espacio-declaracion h1, h2 {
    font-family: "Regular";
    padding: 15px;
}

.borrar-notifi {
    display: inline-block;
    vertical-align: middle;
    padding: 5px !important;
    margin: 0px !important;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 125px !important;
}

.borrar-notifi h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    text-align: left;
    padding: 0px !important;
    margin: 0px !important;
}

.borrar-notifi img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 0px !important;
    margin: 0px !important;
}

.lista-buscar {
    width: 80%;
    /* background-color:#09f; */
    height: 200px;
    margin-left: 30px;
    margin-top: 0px;
    display: none;
}

.lista-buscar h1 {
    font-size: 16px;
    color: #195B85;
}

.boton-imprimir {
    width: 70px;
    height: 70px;
    background-color: #ee9b07;
    border-radius: 100%;
    background-image: url(../img/impresora.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: .3s;
    cursor: pointer;
    box-shadow: 0px 10px 20px #333;
}

.boton-imprimir:hover {
    background-color: #333;
    transition: .3s;
}

.boton-manual {
    text-decoration: none;
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 150px;
    height: 40px;
    background-color: #195B85;
    background-image: linear-gradient(19deg, #195B85 0%, #335ee2 100%);
    border-radius: 20px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: .3s;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
    padding-left: 5px;
    z-index: 999;
}

.boton-manual h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-manual img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    display: inline-block;
}

.boton-manual:hover {
    transition: .3s;
    background-color: #f7941e;
    background-image: linear-gradient(19deg, #f7941e 0%, #da7702 100%);
}

/* BOTON MANUAL GESTIONAR */

.boton-manual-ges {
    text-decoration: none;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: .3s;
    padding-left: 5px;
    z-index: 999;
}

.boton-manual-ges h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
    color: #fff;
}

.boton-manual-ges img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-manual-ges:hover {
    transition: .3s;
}

.boton-video-ges {
    text-decoration: none;
    width: 200px;
    height: 40px;
    background-size: cover;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 5px;
    transition: .3s;
    z-index: 999;
}

.boton-video-ges h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-video-ges img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-video-ges:hover {
    transition: .3s;
}

.separar {
    color: #fff;
    margin-left: 30px;
}

/* FIN BOTON MANUAL GESTIONAR */

.boton-busqueda {
    text-decoration: none;
    position: fixed;
    bottom: 150px;
    left: 30px;
    width: 150px;
    height: 40px;
    background-color: #f7941e;
    background-image: linear-gradient(19deg, #f7941e 0%, #da7702 100%);
    background-size: cover;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
    padding-left: 5px;
    transition: .3s;
}

.boton-busqueda h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-busqueda img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-busqueda:hover {
    transition: .3s;
    background-color: #777;
    background-image: linear-gradient(19deg, #777 0%, #555 100%);
}

.boton-video {
    text-decoration: none;
    position: fixed;
    bottom: 90px;
    left: 30px;
    width: 150px;
    height: 40px;
    background-color: #195B85;
    background-image: linear-gradient(19deg, #195B85 0%, #335ee2 100%);
    background-size: cover;
    border-radius: 20px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
    padding-left: 5px;
    transition: .3s;
    z-index: 999;
}

.boton-video h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-video img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-video:hover {
    transition: .3s;
    background-color: #f7941e;
    background-image: linear-gradient(19deg, #f7941e 0%, #da7702 100%);
}

.tutorial-manual {
    background-color: #09f !important;
    display: none;
}

/* BOTONES VIDEO SLIDER */

.boton-video-sli {
    text-decoration: none;
    width: 150px;
    height: 40px;
    background-color: #f7941e;
    border-radius: 20px;
    padding: 8px;
    transition: .3s;
    margin: 10px;
}

.boton-video-sli h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-video-sli img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-video-sli:hover {
    transition: .3s;
    background-color: #dd7c15;
}

/* BOTON DE  VIDEO TUTORIAL SLICE */

.boton-manual-sli {
    text-decoration: none;
    width: 150px;
    height: 40px;
    background-color: #f7941e;
    border-radius: 20px;
    padding: 10px;
    transition: .3s;
}

.boton-manual-sli h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-manual-sli img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-manual-sli:hover {
    transition: .3s;
    background-color: #dd7c15;
}

/* BOTON QR SLI */

.boton-qr-sli {
    text-decoration: none;
    width: 150px;
    height: 40px;
    background-color: rgba(245, 198, 12, 1);
    border-radius: 20px;
    padding: 8px;
    transition: .3s;
}

.boton-qr-sli h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-qr-sli img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-qr-sli:hover {
    transition: .3s;
    background-color: rgba(245, 198, 12, .7);
    cursor: pointer;
}

/* BOTON CONSUNTAL PATENTADO SLI */

.boton-consul-sli {
    text-decoration: none;
    width: 150px;
    height: 40px;
    background-color: rgba(192, 210, 22, 1);
    border-radius: 20px;
    padding: 8px;
    transition: .3s;
}

.boton-consul-sli h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-consul-sli img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-consul-sli:hover {
    transition: .3s;
    background-color: rgba(192, 210, 22, .7);
    cursor: pointer;
}

/* boton consulta comercio */

.boton-consul-comercio {
    text-decoration: none;
    width: 150px;
    height: 40px;
    background-color: #777;
    border-radius: 20px;
    padding: 8px;
    transition: .3s;
    margin: 10px;
}

.boton-consul-comercio h1 {
    font-family: "Regular";
    font-size: 15px;
    color: #fff;
    margin: 0 auto;
    vertical-align: middle;
    display: inline-block;
}

.boton-consul-comercio img {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    display: block;
    padding: 5px;
    vertical-align: middle;
    display: inline-block;
}

.boton-consul-comercio:hover {
    transition: .3s;
    background-color: #999;
}

/* FIN DE BOTONES CONSULTA comercio */

.boton-web {
    text-decoration: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 90px;
    height: 90px;
    background-color: rgba(255, 255, 255, .8);
    background-image: url(../img/logo.png);
    background-size: contain;
    border-radius: 100%;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .3);
    transition: .3s;
    transform: scale(1);
    display: none;
}

.boton-web:hover {
    transition: .3s;
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.acepta-montos {
    width: 90%;
    background-color: #195B85;
    min-height: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.acepta-montos h1 {
    color: #fff;
    font-size: 18px;
    font-family: "Ligth";
    text-align: left;
    padding: 20px;
}

.boton-acepta-valor {
    width: 100px;
    height: 34px;
    background: red;
    border-radius: 5px;
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-family: "Regular";
    color: #fff;
    padding-top: 6px;
    transition: .3s;
    cursor: pointer;
}

.boton-acepta-valor:hover {
    background-color: #333;
    transition: .3s;
}

.acep {
    background-color: #009f3c;
}

.rech {
    background-color: #df0024;
}

.alerta-error {
    background-color: #ee9b07;
    border-radius: 5px;
    width: 90%;
    margin: 0 auto;
    display: block;
    /* margin-bottom: 1px !important; */
    text-align: center !important;
    color: #fff;
    font-family: "Regular";
    margin-top: 20px;
    font-size: 16px;
    padding: 10px 0px;
}

.asigna-usuario {
    display: inline-block;
}

.asigna-usuario label {
    color: #333;
    font-size: 16px;
    font-family: "Regular";
    vertical-align: middle;
}

.asigna-usuario select {
    border-radius: 16px;
    border: 0px;
}

.asigna-usuario div {
    display: inline-block;
    width: 2px;
    height: 40px;
    background-color: #333;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

.asigna {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ccc;
    position: relative;
    left: 120px;
    top: -15px;
    border-radius: 100%;
    background-image: url(../img/asigna.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: .3s;
    border: 0px;
}

.asinga-dos {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #333;
    position: relative;
    left: 120px;
    top: -15px;
    border-radius: 100%;
    background-image: url(../img/asigna-dos.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: .3s;
}

.asigna:hover {
    background-color: #333; 
    transition: .3s;
}

.link-des {
    color: #fff;
    font-size: 16px;
    font-family: "Ligth";
    text-decoration: none;
    background-color: #f7941e;
    padding: 4px 10px;
    margin: 4px;
    border-radius: 30px;
    transition: .3s;
}

.link-des:hover {
    color: #fff;
    transition: .3s;
    background-color: #333;
}

.seleccionado {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    border-top-left-radius: 3px;
    background-image: url(../img/seleccionado.png);
    border: 0px;
}

.modificado {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-top-left-radius: 3px;
    background-image: url(../img/modificado.png);
    border: 0px;
}


.tramite-vum{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    right: 0px;
    /* left: 0px; */
    z-index: 1;
    border-top-left-radius: 3px;
    background-image: url(../img/VUM.png);
    border: 10px;
}

.firmado {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-top-left-radius: 3px;
    background-image: url(../img/FIRMA.png);
    border: 0px;
}

.desabilitar-botones {
    pointer-events: none;
    cursor: default;
    background-color: #777;
}

.msj-no-acep {
    font-size: 16px;
    color: #fff;
    background-color: #777;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    font-family: "Regular";
}

.contenido-genera {
    width: 350px;
    height: auto;
    background-color: #09f;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 20px;
    display: none;
    margin-bottom: 20px;
}

.contenido-genera label {
    color: #333;
    font-size: 16px;
    font-family: "Bold";
    padding: 0px 20px;
    margin-top: 5px;
    display: block;
}

.contenido-genera input {
    color: #333;
    font-size: 16px;
    font-family: "Regular";
    padding: 0px 3px;
    display: block;
    margin-top: 5px;
    border-radius: 3px;
    border: 0px;
    margin-left: 20px;
    width: 300px;
    outline: none;
}

.contenido-genera h1 {
    color: #333;
    font-size: 25px;
    font-family: "Regular";
    padding: 5px 20px;
}

.contenido-genera h2 {
    color: #555;
    font-size: 18px;
    font-family: "Regular";
    padding: 5px 20px;
}

#get-monto {
    background: #f7941e;
    width: 150px;
    height: 30px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    padding-top: 15px;
    margin: 20px;
    cursor: pointer;
    font-family: "Regular";
    transition: .3s;
}

#get-monto:hover {
    transition: .3s;
    background-color: #777;
}

.notificacion-generado-montos {
    width: 90%;
    height: auto;
    background-color: #f7941e;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 20px;
    display: none;
}

.notificacion-generado-montos h1 {
    color: #fff;
    font-size: 18px;
    padding: 10px;
    font-family: "Regular";
}

.link-des-dos {
    list-style: none;
    text-decoration: none !important;
    color: #fff;
    margin-bottom: 20px;
}

.link-des-dos a {
    list-style: none;
    text-decoration: none !important;
    background-color: #f7941e;
    color: #fff;
    border-radius: 15px;
    padding: 5px 10px;
    width: 150px;
    font-family: "Regular";
    margin-left: 20px;
    transition: .3s;
}

.link-des-dos a:hover {
    transition: .3s;
    background-color: #333;
}

.motivos-rechazo {
    width: 90%;
    display: none;
    margin: 0 auto;
    background-color: #333;
    border-radius: 5px;
}

.motivos-rechazo label {
    font-size: 18px;
    color: #fff;
    font-family: "Regular";
    padding: 20px;
    margin-bottom: 10px;
}

.motivos-rechazo textarea {
    width: 96%;
    display: block;
    margin: 0 auto;
    font-family: "Regular";
    margin-top: 10px;
}

.enviar-motivo {
    width: 50px;
    height: 20px;
    background-color: #f7941e;
    border-radius: 5px;
    margin-left: 20px;
    margin-top: 10px;
    color: #fff;
    font-family: "Regular";
    padding: 10px 20px;
    cursor: pointer;
    transition: .3s;
}

.enviar-motivo:hover {
    transition: .3s;
    background-color: #777;
}

.mejora-sugerencias h1 {
    font-size: 15px;
    margin-top: 80px;
    color: #e6e6e6;
}

.mejora-sugerencias img {
    margin: 0 auto;
    display: block;
}

.check-decorado {
    display: inline-block;
    vertical-align: top;
}

.check-decorado input[type="checkbox"] {
    display: none !important;
}

.check-decorado input[type="checkbox"]+label span {
    display: inline-block;
    width: 50px;
    height: 20px;
    /* margin: -1px 4px 0 0; */
    vertical-align: middle;
    background: url(../img/uncheck.png);
    background-size: contain;
    cursor: pointer;
    background-repeat: no-repeat;
}

.check-decorado input[type="checkbox"]:checked+label span {
    background: url(../img/check.png);
    background-size: contain;
    cursor: pointer;
    background-repeat: no-repeat;
}

.radio-decora input[type="checkbox"] {
    display: none !important;
}

.radio-decora input[type="checkbox"]+label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(../img/radio.png);
    background-size: cover;
    cursor: pointer;
}

.radio-decora input[type="checkbox"]:checked+label span {
    background: url(../img/radio-ac.png);
    background-size: cover;
}

.notificacion-panel {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, .111);
    cursor: pointer;
    background: rgba(245, 194, 66, 1);
    background: -moz-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245, 194, 66, 1)), color-stop(100%, rgba(255, 221, 0, 1)));
    background: -webkit-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -o-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -ms-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: linear-gradient(to right, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5c242', endColorstr='#ffdd00', GradientType=1);
    transition: .3s;
}

.notificacion-panel:hover {
    transition: .3s;
    transform: scale(1.01, 1.01);
}

.notificacion-panel h1 {
    font-size: 20px;
    color: #fff;
    font-family: "Regular";
    display: inline-block;
    vertical-align: top;
}

.notificacion-panel h1 span {
    font-size: 14px;
    color: #fff;
    font-family: "Ligth";
    display: block;
    vertical-align: top;
    background-color: #195B85;
    padding: 5px;
    border-radius: 20px;
    width: 200px;
    margin-top: 0px;
    text-align: center;
}

.icono-notificacion {
    width: 60px;
    height: 60px;
    background-image: url(../img/campañilla.png);
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
}

.estado-color {
    background-color: #f7941e;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 5px;
}

.texto-notificacion {
    display: inline-block;
    vertical-align: top;
}

.mensaje-tramite {
    width: 100%;
    height: auto;
    padding: 10px 0px;
    background: rgba(245, 194, 66, 1);
    background: -moz-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245, 194, 66, 1)), color-stop(100%, rgba(255, 221, 0, 1)));
    background: -webkit-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -o-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: -ms-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    background: linear-gradient(to right, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5c242', endColorstr='#ffdd00', GradientType=1);
}

.mensaje-tramite h2 {
    font-size: 26px;
    font-family: "Regular";
    color: #333;
    display: inline-block;
    vertical-align: middle;
    margin-top: 5px;
}

.mensaje-tramite h1 {
    font-size: 16px;
    font-family: "Regular";
    color: #333;
    display: block;
    margin-left: 30px;
}

.mensaje-tramite img {
    vertical-align: middle;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-left: 30px;
}

.doc-resolucion {
    padding: 10px;
    position: absolute;
    top: 90px;
    right: 220px;
    width: 200px;
    z-index: 9;
}

.doc-exoneracion {
    padding: 10px;
    position: absolute;
    top: 90px;
    right: 220px;
    width: 220px;
    z-index: 9;
}

.datos-contra-sobre {
    position: relative;
}

.datos-contra-sobre div {
    width: 250px;
    height: 200px;
    background-color: #09f;
    display: none;
    position: absolute;
    top: 30px;
    left: 25%;
    border-radius: 5px;
}

.datos-contra-sobre div h3 {
    font-size: 14px;
    color: #fff;
    font-family: "Bold";
    padding: 10px;
}

.delgada {
    font-size: 14px;
    color: #eee;
    font-family: "Ligth";
    padding: 10px;
}

.texto-centrado {
    text-align: center !important;
    padding-left: 0px !important;
    padding: 0px 10px;
}

.contra-input {
    display: block;
    height: 32px;
    position: relative;
}

.contra-input input {
    vertical-align: middle;
    display: inline-block;
}

.contra-input div {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 5px;
    left: 70%;
    cursor: pointer;
    border-radius: 100%;
    background-image: url(../img/ver-pass.png);
    background-size: cover;
}

.contra-input div:hover {
    background-image: url(../img/ver-pass-hover.png);
}

.logo-muni {
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, .0);
    border-radius: 100%;
    position: fixed;
    bottom: 50%;
    right: calc( 50% - 100px);
    z-index: 999;
    /* overflow: hidden; */
    /* transform : scale(.5); */
}

.logo-muni .img-logo-1 {
    width: 30px;
    height: 87px;
    margin: 0 auto;
    animation: scales-dos 3s;
    animation-iteration-count: 1;
    position: absolute;
    background-image: url(../img/img-logo-1.png);
    background-size: cover;
    margin-top: 30px;
    margin-left: 37px;
}

.logo-muni .img-logo-2 {
    width: 30px;
    height: 87px;
    margin: 0 auto;
    animation: scales-dos 2s;
    animation-iteration-count: 1;
    animation-delay: .5s;
    position: absolute;
    background-image: url(../img/img-logo-2.png);
    background-size: cover;
    margin-top: 30px;
    margin-left: 67px;
}

.logo-muni .img-logo-3 {
    width: 28px;
    height: 87px;
    margin: 0 auto;
    animation: scales-dos 1.5s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    position: absolute;
    background-image: url(../img/img-logo-3.png);
    background-size: cover;
    margin-top: 30px;
    margin-left: 100px;
}

.logo-muni .img-logo-4 {
    width: 28px;
    height: 87px;
    margin: 0 auto;
    animation: scales-dos 1s;
    animation-iteration-count: 1;
    animation-delay: 1.5s;
    position: absolute;
    background-image: url(../img/img-logo-4.png);
    background-size: cover;
    margin-top: 30px;
    margin-left: 130px;
}

.logo-muni .img-muni {
    width: 130px;
    height: 24px;
    margin: 0 auto;
    animation: subir 2s;
    animation-iteration-count: 1;
    /* animation-delay: .5s; */
    position: absolute;
    background-image: url(../img/img-muni.png);
    background-size: cover;
    margin-top: 115px;
    margin-left: 34px;
}

.logo-muni .img-siqui {
    width: 220px;
    height: 37px;
    margin: 0 auto;
    animation: subir-dos 2s;
    animation-iteration-count: 1;
    /* animation-delay: .7s; */
    position: absolute;
    background-image: url(../img/img-siqui.png);
    background-size: cover;
    margin-top: 140px;
    margin-left: -10px;
}

.load-screen {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, .9);
    position: absolute;
    z-index: 1000;
    top: 0px;
    display: none;
}

.load-icons {
    width: 70px;
    height: 70px;
    background-image: url(../img/load.gif);
    background-size: cover;
    position: fixed;
    top: calc( 50% - 35px);
    left: calc( 50% - 35px);
}

#pswd_info {
    position: absolute;
    bottom: -190px;
    left: -200px;
    top: -80px;
    /* bottom: -115px\9; /* IE Specific */
    */
    /* left: 100px; */
    width: 250px;
    height: 150px;
    padding: 15px;
    background: rgba(255, 255, 255, .8);
    font-size: .875em;
    border-radius: 10px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
    font-family: "Regular";
    display: none;
}

#pswd_info ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#pswd_info h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
    color: #777;
}

.invalid {
    background: url(../img/cross.png) no-repeat 0 50%;
    padding-left: 22px;
    line-height: 24px;
    color: #ec3f41;
}

.valid {
    background: url(../img/tick.png) no-repeat 0 50%;
    padding-left: 22px;
    line-height: 24px;
    color: #000;
    background-color: #e6e6e6;
}

.campo-validacion {
    position: relative;
}

.qr {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

.boton-qr {
    text-decoration: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 180px;
    height: 60px;
    background-color: #fff;
    border-radius: 30px;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
    /* background-image: url(../img/qr.png); */
    cursor: pointer;
    transition: .3s;
    z-index: 1;
}

.boton-qr img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}

.boton-qr h1 {
    padding-top: 3px;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    color: #777;
    font-size: 14px;
    margin-top: 10px;
}

.boton-qr:hover {
    transform: scale(1.1);
}

/* .sobre-boton-qr:after {
border: 15px solid transparent;
border-top-color: #fff;
bottom: 0px;
content: '';
height: 0px;
right: 0px;
margin: 0 auto;
position: absolute;
right: 0px;
width: 0px;
} */

.sobre-boton-qr {
    width: 200px;
    height: 25px;
    background-color: #fff;
    opacity: 0;
    visibility: visible;
    border-radius: 10px;
    transition: .3s;
    position: relative;
    margin-left: -250px;
    margin-top: 10px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, .2);
    color: #777;
    text-align: center;
    font-size: 15px;
    font-family: "Regular";
    padding-top: 20px;
    padding: 15px;
    display: inline-block;
    vertical-align: middle;
}

.boton-qr:hover .sobre-boton-qr {
    transition: .3s;
    transform: scale(1.1);
    opacity: 1;
    visibility: visible;
    transition: all 0.25s;
}

.qr-contenido {
    width: 600px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    position: absolute;
    z-index: 99;
    left: calc( 50% - 300px);
    top: 200px;
    padding: 20px;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .1);
    display: none;
}

.qr-text {
    display: inline-block;
    vertical-align: top;
    width: 370px;
    margin-left: 20px;
}

.qr-text h1 {
    font-family: "Bold";
    color: #a7a7a7;
    font-size: 30px;
    padding-bottom: 10px;
}

.qr-text h2 {
    font-family: "Ligth";
    padding-left: 20px;
    color: #212121;
    font-size: 16px;
    padding: 0px;
    padding-bottom: 5px;
    vertical-align: middle;
}

.qr-text h2 img {
    width: 20px;
    height: 20px;
    vertical-align: top;
}

.entiendo-qr {
    width: 100px;
    height: 32px;
    border-radius: 30px;
    border: 2px solid #777;
    color: #777;
    font-size: 16px;
    font-family: "Bold";
    text-align: center;
    padding-top: 10px;
    margin-top: 30px;
    margin-left: 240px;
    transition: .3s;
}

.entiendo-qr:hover {
    transition: .3s;
    background-color: #777;
    color: #fff;
    cursor: pointer;
}

/* CODIFO QR */

#main {
    margin: 0px auto;
    background: white;
    overflow: auto;
    width: 100%;
}

#v {
    margin-top: 15px;
    width: 250px;
    border-radius: 15px !important;
    position: relative;
    z-index: 1;
}

#qr-canvas {
    display: none;
}

#qrfile {
    width: 300px;
    height: 300px;
}

#mp1 {
    text-align: center;
    font-size: 49px;
}

#outdiv {
    width: 250px;
    height: 200px;
    margin-top: -30px;
    position: relative;
}

#texto-caja-qr {
    font-size: 16px;
    text-align: left;
    color: #999;
}

#result {
    width: 0px;
    font-size: 0px;
    margin: 0 auto;
}

/* QR TRAMITES */

#main-qr {
    margin: 0px auto;
    background: white;
    overflow: auto;
    width: 100%;
}

#v-qr {
    width: 250px;
    height: 300px;
    border-radius: 10px !important;
}

#qr-canvas-qr {
    display: none;
}

#qrfile-qr {
    width: 300px;
    height: 300px;
}

#mp1-qr {
    text-align: center;
    font-size: 49px;
}

#outdiv-qr {
    width: 250px;
    height: 300px;
    margin-top: -30px;
}

#result-qr {
    width: 0px;
    font-size: 0px;
    margin: 0 auto;
}

.close {
    position: relative;
    left: 220px;
    top: 5px;
}

.close img {
    width: 50px;
}

.content-popup {
    margin: 0px auto;
    margin-top: 50px;
    padding: 10px;
    width: 500px;
    min-height: 250px;
    border-radius: 4px;
    background-color: #FFFFFF;
    box-shadow: 3px 5px 8px #666666;
}

.content-cam {
    margin: 0px auto;
    margin-top: 160px;
    margin-bottom: 20px;
    padding: 10px;
    width: 300px;
    min-height: 200px;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 15px #888888;
    display: block;
}

#cam {
    left: 0%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1000;
}

#camqr {
    left: 0%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1000;
}

.escanea-qr {
    font-size: 20px;
    color: #777;
    font-family: "Regular";
    text-align: center;
    margin-top: 30px;
}

.cancelar-qr {
    font-family: "Bold";
    color: #777;
    display: block;
    width: 120px;
    height: 28px;
    border: 1px solid #777;
    font-size: 16px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .0);
    cursor: pointer;
    margin-top: 30px;
    transition: .3s;
    display: inline-block;
    vertical-align: middle;
    margin-left: 90px !important;
    padding-top: 9px;
    text-align: center;
    margin-top: -50px;
}

.cancelar-qr:hover {
    transition: .3s;
    background-color: #777;
    color: #fff;
}

.cancelar-qr-qr {
    font-family: "Bold";
    color: #777;
    display: block;
    width: 120px;
    height: 28px;
    border: 1px solid #777;
    font-size: 16px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .0);
    cursor: pointer;
    margin-top: 30px;
    transition: .3s;
    display: inline-block;
    vertical-align: middle;
    margin-left: 140px !important;
    padding-top: 9px;
    text-align: center;
    margin-top: -50px;
}

.cancelar-qr-qr:hover {
    transition: .3s;
    background-color: #777;
    color: #fff;
}

.sobre-notificacion {
    background: #f7961f;
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: 99;
    border-radius: 7px;
    display: none;
}

.sobre-notificacion img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
}

.sobre-notificacion h1 {
    display: block;
    margin: 0 auto;
    width: 60px;
    font-size: 12px;
    color: #f7961f;
    background: #f2eeee;
    border-radius: 20px;
    padding: 1px 3px;
    text-align: center !important;
    vertical-align: middle;
    margin-top: 5px;
}

.observacion-usuario {
    width: 90%;
    height: 150px;
    background-color: #ffdd00;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 7px;
}

.observacion-usuario h1 {
    color: #fff;
    font-family: "Regular";
    padding: 10px 20px;
    font-size: 18px;
}

.info-noti {
    width: 300px;
    height: 200px;
    margin-top: 0px;
    text-align: center !important;
    display: none;
    margin-bottom: 5px;
    /* background-color: #09f; */
}

.info-noti li {
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    width: 250px;
    height: 200px;
    margin: 0 auto;
    font-family: "Regular";
}

.info-noti li h1 {
    font-family: "Regular";
    text-align: center !important;
    font-size: 22px;
    padding: 0px;
    margin: 0px;
    color: #333;
    padding-top: 10px;
}

.info-noti li h2 {
    font-family: "Regular";
    text-align: center !important;
    font-size: 15px;
    padding: 0px;
    margin: 0px;
    color: #999;
}

.info-noti li img {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
}

.indicador-noti {
    display: block;
    margin: 0 auto;
    width: 100px !important;
    height: 30px !important;
}

.boton-nota {
    width: 150px;
    background-color: #d4dd23;
    height: 35px;
    cursor: pointer;
    margin-top: 0px;
    margin-left: 30px;
    border-radius: 7px;
    font-size: 18px;
    font-family: "Regular";
    color: #111;
    text-align: center;
    padding-top: 10px;
    transition: .3s;
}

.boton-nota:hover {
    transition: .3s;
    background-color: #777;
}

.adjunto-boton-nota {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    background-color: #bdd106;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    transition: .3s;
    /* overflow: hidden; */
}

.adjunto-boton-nota input {
    width: 150px;
    background-color: #09f;
    height: 50px;
    cursor: pointer;
    position: absolute;
    margin-top: 0px;
    opacity: 0;
    top: 0px;
    left: 0px;
}

.adjunto-boton-notas h1 {
    left: -100px;
    cursor: pointer;
    text-align: center;
    background: red !important;
}

.catpcha-consultas {
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
    margin-top: -20px;
}

.catpcha-consultas h1 {
    font-size: 17px;
    padding: 0px;
    margin-bottom: 10px;
}

.catpcha-consultas img {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 50px;
    background-color: rgba(230, 230, 230, 1);
    border-radius: 10px;
}

.no-encuentro {
    margin: 0 auto;
    display: block;
    width: 90%;
    height: 400px;
    margin-top: 30px;
}

.no-encuentro h1 {
    font-size: 25px;
    font-family: "Regular";
    color: #777;
    text-align: center;
}

.no-encuentro img {
    margin: 0 auto;
    display: block;
    width: 200px;
    height: 200px;
}

.boton-nueva {
    width: 140px;
    height: 30px;
    background-color: #195B85;
    font-size: 15px;
    font-family: "Bold";
    color: #fff;
    padding-top: 10px;
    border-radius: 50px;
    padding-left: 10px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    transition: .3s;
}

.boton-nueva:hover {
    transition: .3s;
    background-color: #777;
}

.boton-nueva img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.info-patente {
    display: block;
    margin: 0 auto;
    width: 80%;
    margin-top: 50px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.info-patente div {
    margin-top: 8px;
}

.info-patente div h1 {
    font-size: 16px;
    font-family: "Regular";
    color: #777;
    display: inline-block;
    vertical-align: middle;
}

.info-patente h2 {
    font-size: 30px;
    font-family: "Regular";
    color: #777;
    padding: 0px;
}

.info-patente div a {
    font-size: 15px;
    font-family: "Regular";
    color: #FFF;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    background-color: #335ee2;
    border-radius: 25px;
    transition: .3s;
    padding: 7px 12px;
}

.info-patente div a:hover {
    cursor: pointer;
    background-color: #777;
    transition: .3s;
}

.info-patente div img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
}

/* CARGAR ARCHIVO DE PATENTES */

.cargar-data {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 30px;
    border-radius: 25px;
    background-color: #195B85;
    color: #fff;
    text-align: center;
    padding-top: 5px;
    font-family: "Regular";
    font-size: 20px;
    cursor: pointer;
    position: relative;
    left: calc( 70% - 100px);
    transition: .3s;
    display: none;
}

.cargar-data:hover {
    transition: .3s;
    background-color: #777;
}

.contenido-cargar {
    display: none;
    margin: 0 auto;
    width: 300px;
    height: 300px;
    background-color: #fff;
    position: absolute;
    z-index: 999;
    border-radius: 10px;
    padding: 15px;
    left: calc( 50% - 150px);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .3);
}

.contenido-cargar h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}

.contenido-cargar h1 img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

.botones-carga-cancela {
    position: absolute;
    bottom: 30px;
}

.botones-carga-cancela div {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    border-radius: 30px;
}

.boton-cancelar {
    margin-right: 90px;
    color: #777;
    border: 2px solid #777;
    background-color: #fff;
    transition: .3s;
    font-family: "Regular";
    height: 30px;
    text-align: center;
    padding-top: 8px;
    cursor: pointer;
}

.boton-cancelar:hover {
    margin-right: 90px;
    color: #fff;
    border: 2px solid #777;
    background-color: #777;
    transition: .3s;
}

.boton-cargar {
    color: #195B85;
    border: 2px solid #195B85;
    background-color: #fff;
    transition: .3s;
    font-family: "Regular";
    height: 30px;
    text-align: center;
    padding-top: 8px;
    cursor: pointer;
}

.boton-cargar:hover {
    color: #fff;
    border: 2px solid #777;
    background-color: #777;
    transition: .3s;
}

.load-data {
    display: none;
    margin: 0 auto;
    width: 100px;
    height: 100px;
}

.load-data img {
    margin-top: -30px;
    width: 100px;
    height: 100px;
}

.loaded-texto {
    display: none;
}

.usuario-bloqueado {
    display: block;
    margin: 0 auto;
    width: 35%;
    background-color: rgba(247, 148, 30, .90);
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: -30px;
}

.usuario-bloqueado h1 {
    color: #fff;
    font-family: "Regular";
    text-align: center;
    padding: 10px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}

.usuario-bloqueado img {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
}

.usuario-bloqueado h1 a {
    color: #000;
    font-family: "Regular";
    text-align: center;
    padding: 10px;
    font-size: 18px;
    transition: .3s;
}

.usuario-bloqueado h1 a:hover {
    color: #555;
    font-family: "Regular";
    text-align: center;
    padding: 10px;
    font-size: 18px;
    transition: .3s;
}

.obs-contri {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #333;
    margin: 10px 0px;
}

.obs-contri h1 {
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    width: calc( 100% - 85px);
    text-align: right;
}

.obs-contri img {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin: 10px 0px;
}

/* lol */

.obs-admin {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #333;
    margin: 10px 0px;
}

.obs-admin h1 {
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    padding-left: 10px;
    width: calc( 100% - 85px);
}

.obs-admin img {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 10px 0px;
    margin-left: 30px;
}

.mensaje-box {
    display: block;
    width: 300px;
    margin-left: 30px;
}

.mensaje-box textarea {
    border: none;
    height: 30px;
    padding: 5px;
    border-radius: 10px;
    outline: none;
    resize: none;
    font-family: "Regular";
    font-size: 15px;
}

.mensaje-box button {
    border: none;
    height: 30px;
    padding: 5px 10px;
    padding-top: 3px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    background-color: #195B85;
    font-family: "Regular";
    color: #fff;
    font-size: 20px;
    transition: .5s;
}

.mensaje-box button:hover {
    transition: .5s;
    background-color: #335ee2;
}

.mensaje-box h1 {
    margin: 0px;
    padding: 0px;
}

.con-obs {
    background-color: rgba(255, 221, 0, .2);
}

.con-obs:hover {
    background-color: rgba(255, 221, 0, .3);
}

.gestion-user {
    display: block;
    margin: 0px auto;
    width: 50%;
    background-color: #fff;
    border-radius: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    /* box-shadow: 0px 1px 1px rgba(0,0,0,.3); */
    border: 1px solid rgba(0, 0, 0, .1);
    ;
}

.gestion-user div {
    display: block;
    margin: 5px auto;
    width: 87%;
}

.gestion-user div label {
    font-size: 18px;
    font-family: "Regular";
}

.gestion-user div input {
    font-size: 16px;
    font-family: "Regular";
    border-radius: 20px;
    border: none;
    outline: none;
    background-color: #eee;
    padding-left: 10px;
    width: 250px;
}

.gestion-user div select {
    font-size: 16px;
    font-family: "Regular";
    border-radius: 20px;
    border: none;
    outline: none;
    background-color: #eee;
    padding-left: 10px;
    width: 200px;
}

.gestion-user div option {
    font-size: 16px;
    font-family: "Regular";
    border-radius: 20px;
    border: none;
    outline: none;
    padding-left: 10px;
    width: 200px;
}

.gestion-user input[type=submit] {
    width: 120px;
    height: 40px;
    border: 0px solid #ccc;
    font-size: 18px;
    margin-left: 6% !important;
    margin-top: 10px !important;
    outline: none;
    cursor: pointer;
    border-radius: 30px;
    font-family: "Regular";
    background-color: #195B85;
    color: #fff;
    transition: .3s;
}

.gestion-user input[type=submit]:hover {
    transition: .3s;
    background-color: #335ee2;
}

.contenido-gest {
    display: block;
    margin: 0 auto;
    width: 50%;
}

.contenido-gest img {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background-color: #195B85;
    border-radius: 100%;
    padding: 20px;
}

.contenido-gest h1 {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 25px;
    font-family: "Regular";
    color: #333;
}

.contenido-gest h2 {
    display: block;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    font-size: 18px;
    font-family: "Regular";
    color: #777;
}

.gestion-user .boton-actualizar {
    background-color: #00b034 !important;
    color: #fff;
    transition: .3s;
}

.gestion-user .boton-actualizar:hover {
    transition: .3s;
    background-color: #009f3c !important;
}

.titulo {
    width: 460px;
    display: block;
    margin: auto;
}

.titulo img {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
    margin-left: -30px;
}

.titulo h1 {
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    font-family: "Regular";
    padding: 0px;
    margin-left: 0px;
}

.sub-titulo {
    width: 90%;
    display: block;
    margin: auto;
}

.sub-titulo h2 {
    margin: 0 auto;
    display: block;
    text-align: center !important;
    font-size: 18px !important;
    font-family: "Regular";
    margin-top: -10px;
}

.sub-titulo h3 {
    margin: 0 auto;
    display: block;
    text-align: center;
    font-size: 14px;
    font-family: "Regular";
    margin-top: -10px;
}

#map {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
}

#coords {
    width: 500px;
}

#coordenadas {
    font-size: 12px;
    font-family: "Regular";
    color: #195B85;
    display: inline-block;
    vertical-align: middle;
    display: none;
}

.notificacion {
    display: none;
    background-color: #333;
    width: 70%;
    margin: 0 auto;
    border-radius: 15px;
    margin-top: 40px;
    padding-top: 15px;
    position: relative;
    z-index: 1;
}

.notificacion h1 {
    font-size: 20px;
    font-family: "Regular";
    color: #fff;
    display: block;
    text-align: center;
    padding: 10px;
}

.notificacion img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.cerrar-not {
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    position: absolute;
    background-image: url(../img/equis.png);
    background-position: center;
    background-size: 80%;
    top: calc( 50% - 20px);
    right: 20px;
    cursor: pointer;
    transition: .3s;
    opacity: .7;
    outline: none;
}

.cerrar-not:hover {
    transition: .3s;
    opacity: 1;
}

.errores {
    background-color: #f83848;
}

.exito {
    background-color: #53ea6c;
}

.exito-control{
    background-color: rgb(18, 157, 212);
}

.alerta {
    background-color: #3dadf8;
}

.slider {
    margin-top: 10px;
    width: 80px;
    height: 40px;
    /* background-color:#333; */
    position: relative;
    border-radius: 40px;
    cursor: pointer;
}

.circulo {
    width: 100px;
    height: 25px;
    background-color: #777;
    position: absolute;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
    font-family: "Regular";
    text-align: center;
    padding-top: 3px;
    color: #fff;
}

.aliniado {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-top: 0px;
    margin-left: 90px;
}

.aliniado h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

.aliniado div {
    /* display: inline-block; */
    vertical-align: middle;
    margin-top: 5px;
}

.certificacion-plano {
    width: 100%;
    height: 1700px;
    background-color: #eee;
    position: absolute;
    left: 0px;
    top: 500px;
    z-index: 99;
    display: none;
}

.certificacion-rechazo {
    width: 100%;
    height: 1700px;
    background-color: #eee;
    position: absolute;
    left: 0px;
    top: 500px;
    z-index: 99;
    display: none;
}

.titulo-texto-imagen {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.titulo-certificado {
    display: inline-block;
    margin: auto;
}

.titulo-imagen {
    display: inline-block;
    margin: auto;
}

.titulo-certificado h2 {
    margin: 0 auto;
    display: block;
    font-size: 16px !important;
    font-family: "Regular";
    text-align: left !important;
    padding: 0px;
}

.titulo-certificado h3 {
    margin: 0 auto;
    display: block;
    font-size: 16px !important;
    font-family: "Regular";
    text-align: left !important;
}

.titulo-certificado img {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    display: block;
}

.tabla-cer-plano {
    width: 100%;
    border: 1px solid #ccc;
    padding: 0px;
    margin: 0px;
}

.tabla-cer-plano th {
    border: 1px solid #ccc;
    font-size: 18px;
    padding: 0px;
    margin: 0px;
}

.tabla-cer-plano td {
    border: 1px solid #ccc;
    font-size: 16px;
    padding: 0px;
    margin: 0px;
    font-weight: 100px;
    padding: 10px;
}

.contenido-compartir {
    width: 40px;
    height: 40px;
    position: relative;
    /* background-color: blue; */
    z-index: 90;
}

.contenido-compartir .circulo-compartir {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    background-image: url(../img/compartir-s.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    transition: .5s;
    margin-top: 3px;
}

.contenido-compartir .circulo-compartir:hover {
    transition: .5s;
    background-color: #fff;
    border: 1px solid #fff;
}

.contenido-compartir a {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    display: block;
    top: 1px;
    left: 1px;
    transition: .3s;
    margin-top: 3px;
}

.contenido-compartir a:hover {
    transition: .3s;
    background-color: #333;
}

.whats {
    background-color: #1ebea5;
    background-image: url(../img/whats.png);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
}

.mail {
    background-color: #1ebea5;
    background-image: url(../img/mails.png);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
}

.down {
    background-color: #1ebea5;
    background-image: url(../img/downs.png);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
}

.seleccionar-ing {
    width: 100%;
    height: 80px;
    background-color: #335ee2;
    position: relative;
}

.titulo-visado-doc-rec {
    width: 100%;
    height: 70px;
    background-color: #f7941e;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
}

.titulo-visado-doc-rec h1 {
    font-size: 40px;
    color: #fff;
}

.titulo-visado-doc-acep {
    width: 100%;
    height: 70px;
    background-color: #0487d4;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
}

.titulo-visado-doc-acep h1 {
    font-size: 40px;
    color: #fff;
}

.cerrar-generar-cer-visado {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 100%;
    background-image: url(../img/cerrar.png);
    transition: .5s;
    cursor: pointer;
}

.cerrar-generar-cer-visado:hover {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, .7);
    background-image: url(../img/cerrar.png);
    transition: .5s;
}

.seleccionar-ing h1 {
    color: #fff;
}

.seleccionar-ing select {
    margin-left: 30px;
    margin-top: 10px;
    width: 280px;
}

.boton-agregar img {
    width: 20px !important;
    height: 20px !important;
    margin-top: -5px;
}

.boton-quitar img {
    width: 20px !important;
    height: 20px !important;
    margin-top: -5px;
}

.firma-ing {
    margin-left: 50px;
    position: relative;
    margin-bottom: -85px;
}

.firma-ing-pdf {
    margin-left: 20px;
    position: relative;
    margin-bottom: -80px;
}

.final-visado {
    background-color: #0487d4;
}

.rechazado-visado {
    background-color: #f7941e;
}

.adjuntar-visado {
    border: 1px solid #fff;
}

.observacion-rechazo-visado {
    background-color: #195B85;
    cursor: pointer;
    padding: 10px;
    color: #fff;
    font-family: "Regular";
    width: 100px;
    text-align: center;
    border-radius: 5px;
    transition: .3s;
}

.observacion-rechazo-visado:hover {
    background-color: #777;
}

.boton-fundamento-juridico {
    background-color: #195B85;
    cursor: pointer;
    padding: 10px;
    color: #fff;
    font-family: "Regular";
    width: 100px;
    text-align: center;
    border-radius: 5px;
    transition: .3s;
}

.boton-fundamento-juridico:hover {
    background-color: #777;
}

.rechazado-visado-des a {
    background: linear-gradient(to right, rgba(248, 120, 8, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
}

.barra-carga {
    width: 210px;
    height: 10px;
    /* background-color: #fff; */
    border-radius: 20px;
    position: relative;
    border: 1px solid #fff;
    display: none;
    overflow: hidden;
}

.barra-carga div {
    position: absolute;
    background: #5bad3c;
    width: 210px;
    height: 10px;
    border-radius: 20px;
    left: 0px;
    margin-left: -210px;
    overflow: hidden;
}

.qr-t {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: block;
    position: fixed;
    left: 500px !important;
    top: 120px;
    float: left;
}

.contenido-consulta {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    top: 110px;
    z-index: 999;
}

.acceso-rapido-m {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 7px;
    right: 30px;
    border-radius: 15px;
    border: 5px solid #3333;
    cursor: pointer;
    background-image: url(../img/marco-qr.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}

.barra-qr {
    width: 35px;
    height: 6px;
    border-radius: 5px;
    background-color: #195B85;
    margin: 0 auto;
    animation: sube-baja 2s steps(120) infinite;
    margin-top: 5px;
}

.contenido-resultado-consulta {
    display: block;
    margin: 0 auto;
    width: 50%;
    height: auto;
    min-height: 300px;
    background-color: #eee;
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
    /*box-shadow: 2px 2px 2px 1px #777;*/
    
}

.contenido-resultado-consulta h2 {
    text-align: center;
    font-size: 24px;
    color: #777;
    font-family: "Regular";
    padding-top: 10px;
}

.contenido-resultado-consulta hr{
    width: 50%;
    display: block;
    margin: 0 auto;
    opacity: .5;
}

.contenido-resultado-consulta h3 {
    text-align: center !important;
    font-size: 20px;
    color: #195B85;
    font-family: "Regular";
    padding-top: 10px;
    display:block;
}

.contenido-resultado-consulta h3 a{
    text-align: center !important;
    font-size: 20px;
    color: #ef8f1e;
    font-family: "Regular";
    padding-top: 10px;
}

.contenido-resultado-consulta h1 {
 
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    color: #777;
    font-family: "Regular";
    margin-bottom: 7px;
}

.contenido-resultado-consulta img {
     margin: 0 auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #195B85;
    margin-bottom: 7px;
    padding: 2px;
}

.contenido-resultado-consulta  .logo-consulta{
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: transparent;
}

.login-boton {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 20px;
}

.contenido-consulta-resultado{
    display: block;
    margin: 0 auto;
}

.contenido-consulta-resultado img{
    display: inline-flex;
    vertical-align: middle;
    margin-right: 10px;
}

.contenido-consulta-resultado h1{
    display: flexbox;
}

.info-qr-scan {
    width: 50%;
    background-color: #eee;
    min-height: 50px;
    height: auto;
    border-radius: 10px;
    position: absolute;
    top: 8px;
    right: 100px;
    display: none;
}

.info-qr-scan h1 {
    font-size: 20px;
    color: #777;
    padding: 15px;
    margin: 0 auto;
    display: block;
    text-align: center !important;
}

.nuevo-control-tramite {
    width: 95%;
    height: auto;
    min-height: 500px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    margin-top: 20px;
    box-shadow: 0px 1px 7px rgba(0, 0, 0, .05);
    margin-bottom: 20px;
    margin-bottom: 50px;
}

.nuevo-control-tramite form {
    width: 38%;
    display: inline-block;
    vertical-align: top;
    margin-left: 30px;
}

.nuevo-control-tramite article {
    width: 98%;
    display: inline-block;
    /* background-color: rgba(85, 168, 221, .3); */
    border-radius: 10px;
    margin-top: 10px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px !important;
    padding-bottom: 10px;
    background-color: #fff !important;

    /* padding: 10px 5px; */
}

.tramites-del-dia {
    /* background-color: #0D8735; */
    max-height: 700px;
    overflow-x: scroll;
    overflow-x: hidden;
    /* background-color: #3a7d34; */

}

.nuevo-control-tramite h1 {
    font-size: 30px;
    text-align: center;
    color: #333;
    font-family: "Bold";
}

.control-icono {
    width: 60px;
    height: 60px;
    margin-top: 20px;
    background-color: #195B85;
    background-image: linear-gradient(
19deg, #195B85 0%, #335ee2 100%);
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    animation-name: example;
    animation-duration: 2s;
}

.control-icono img {
    width: 35px;
    height: 35px;
    margin: 0 auto;
    display: block;
    padding: 10px;
}

.control-icono-r {
    width: 60px;
    height: 60px;
    margin-top: 20px;
    background-color: #eee;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    background-image: url(../img/reporte-icono.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    animation-name: example;
    animation-duration: 2s;
}

.flujo-tramite{
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-left: 10px;
}

.datos-tramite{
    width: 200px;
    height: 100px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    /* margin-left:-70px; */
    position: relative;
    /* display: none; */
}

.texto-tramite{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #eee;
    display: block;
    margin-bottom: 30px;
    text-align: center;
    font-family: "Bold";
    font-size: 15px;
    padding: 10px;
    box-shadow: 0px 5px  10px  #777;
    
}

.texto-tramite h1{
    font-size: 16px;
    font-weight:bold;
    font-family: "Bold";
}

.ciculo-tramite{
    width: 70px;
    height: 50px;
    border-radius: 10%;
    background-color: #195B85;
    margin-left:-10px;
    margin-bottom: 30px;
    border-radius: 100%;
    margin-top: 30px;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-family: "Bold";
    font-size: 12px;
    padding: 10px;
    padding-top: 30px;
}

.barrita{
    width: 10px;
    height: 15px;
    /* background-color: #195B85; */
    position: relative;
    margin-top: 300px;

}

.linea-tiempo{
    width: 280px;
    background-color: #195B85;
    height: 10px;
    position:absolute;
    left: -100px;
}

@keyframes example {
    from {
        transform: scale(1.5,1.5) rotate(180deg);
        /* transform:rotate(180deg); */
    }
    to {
        transform: scale(1,1) rotate(0deg);
        /* transform:; */
    }
        
  }



.borde-control {
    border-bottom: 1px solid #f2eeee;
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.titulo-control {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.titulo-control h1 {
    font-size: 20px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.titulo-control img {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-color: #eee;
    border-radius: 100%;
}

.formulario-control {
    width: 90%;
    display: block;
    margin: 0 auto;
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 20px;
}

.formulario-control select {
    width: 250px;
    height: 30px;
    font-size: 16px;
    border: 0px;
    border-radius: 15px;
    background-color: #eee;
    outline: none;
    text-align: center;
    padding-left: 10px;
    font-family: "Regular";
    border: 1px solid #777;
}

.formulario-control input {
    width: 230px;
    height: 30px;
    font-size: 16px;
    border: 0px;
    border-radius: 15px;
    background-color: #eee;
    outline: none;
    text-align: left;
    padding: 0px 10px;
    font-family: "Regular";
    display: block;
    margin-top: 10px;
    border: 1px solid #777;
}

.formulario-control textarea {
  
    border: 1px solid #777;
}

.formulario-control label {
    font-size: 18px;
    border: 0px;
    outline: none;
    text-align: center;
    padding-left: 10px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: bottom;
}

.formulario-control input[type=radio] {
    width: 20px;
    height: 20px;
    font-size: 16px;
    border: 0px;
    border-radius: 15px;
    background-color: #eee;
    outline: none;
    text-align: left;
    padding: 0px 10px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
}

.formulario-control input[type=submit] {
    width: 150px;
    height: 50px;
    font-size: 20px;
    border: 0px;
    border-radius: 25px;
    background-color: #0487d4;
    outline: none;
    text-align: center;
    padding: 0px 10px;
    font-family: "Regular";
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: .3s;
    color:#fff;
}

.formulario-control input[type=submit]:hover {
    transition: .3s;
    background-color: #777;
    color: #fff;
}

.grande-control {
    width: 350px !important;
    
}

.comprobante {
    width: 96%;
    height: 230px;
    background-color: #fff;
    border-radius: 15px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.comprobante h2 {
    color: #333 !important;
    font-family: "Regular";
    padding-left: 15px;
    display: inline-block;
    font-size: 22px;
}

.comprobante h3 {
    color: #777 !important;
    font-family: "Regular";
    padding-left: 15px;
    display: inline-block;
    margin-bottom: 20px;
}

.barra-control-alto {
    background-image: url(../img/color.png);
    background-position: top;
    width: 100%;
    height: 10px;
    background-repeat: no-repeat;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    opacity: .8;
    background-size: cover;
}

.barra-control-bajo {
    background-image: url(../img/color2.png);
    background-position: bottom;
    width: 100%;
    height: 10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: absolute;
    bottom: 0px;
    opacity: .8;
    background-repeat: no-repeat;
    background-size: cover;
}

.logo-comprobante {
    background-image: url(../img/logo-cir.png);
    background-size: contain;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 999;
}

.botones-control {
    display: block;
    margin-left: 20px;
}

.botones-control div {
    vertical-align: middle;
    display: inline-block;
    width: 160px;
    height: 40px;
    background-color: #0487d4;
    border-radius: 25px;
    margin-right: 20px;
    color: #fff;
    font-size: 20px;
    font-family: "Regular";
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
    transition: .3s;
    font-weight: bold;
}

.botones-control div:hover {
    transition: .3s;
    background-color: #777;
}

.fondo-comprobante {
    background-image: url(../img/fondo-comprobante.png);
    background-size: contain;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 40px;
    right: 40px;
}

.linea-recorte {
    width: 780px;
    height: 20px;
    background-image: url(../img/linea-recorte.png);
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: top;
    margin-bottom: 10px !important;
}

#consulta-pago div:hover {
    position: relative;
    z-index: 100;
}

.contenido-historial {
    width: 94%;
    height: auto;
    background-color: #fff;
    display: block;
    border-radius: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
    padding-bottom: 10px;
}

.titulo-historial {
    display: block;
    padding: 20px;
}

.titulo-historial h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 25px;
    font-family: "Regular";
}

.titulo-historial img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

.titulo-historial h2 {
    display: block;
    font-size: 18px;
    font-family: "Ligth";
    color: #777;
    padding: 5px;
}

.titulo-historial h4 {
    display: block;
    font-size: 16px;
    font-family: "Bold";
    color: #777;
    padding: 5px;
}

.titulo-historial h4 #verde {
  width: 20px;
  height: 20px;
  background-color:#3EB900;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}

.titulo-historial h4 #azul {
  width: 20px;
  height: 20px;
  background-color:#195B85;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}

.linea-separa {
    width: 70%;
    height: 1px;
    background-color: #ccc;
    display: block;
    margin-left: 20px;
}

.tramite-historial-menor {
    width: 100%;
    min-height: 100px;
    /* background-color: rgba(255,255,255,.3); */
    background-color: lightskyblue;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    height: auto;
    margin-bottom: 2px;
    text-decoration: none;
    color: #333;
    transition: .3s;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    position: relative;
    z-index: 2;
    margin-bottom: 5px;
}

.tramites-menor-menor{
    width: 100%; 
}

.tramite-historial-menor:hover {
    transition: .3s;
    background-color: #6fbff5;
}

.tramite-historial-menor .circulo-historial-menor {
    width: 35px;
    height: 30px;
    background-color: #195B85;
    border-radius: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 12px;
    top: 20px;
    padding-top: 5px;
    font-size: 20px;
    font-family: "Bold";
    color: #eee;
}

.tramite-historial-menor h2 {
    position: absolute;
    font-family: "Bold";
    left: 40px;
    font-size: 18px;
    font-weight: bold;
}

.h2-bold {
    font-family: "Bold";
}

.tramite-historial-menor h3 {
    font-family: "Bold";
    font-size: 14px;
    position: relative;
    left: 58px;
    top: 35px;
    line-height: 1.3;
    color: #333;
}

.tramite-historial {
    width: 97%;
    min-height: 78px;
    background-color: #eeee;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    height: auto;
    margin-bottom: 2px;
}

.tramite-historial .circulo-historial {
    width: 50px;
    height: 45px;
    background-color: #195B85;
    border-radius: 100%;
    display: block;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 15px;
    top: 15px;
    padding-top: 5px;
    font-size: 30px;
    font-family: "Bold";
    color: #eee;
}

.tramite-historial h2 {
    position: absolute;
    font-family: "Ligth";
    left: 80px;
    font-size: 20px;
}

.h2-bold {
    font-family: "Bold";
}

.tramite-historial h3 {
    font-family: "Ligth";
    font-size: 18px;
    position: relative;
    left: 95px;
    top: 40px;
    line-height: 1.3;
    color: #333;
}

.contenido-login-slider {
    display: block;
}

.contenido-slider-inicio {
    /* background-color: rgba(255,255,255,1); */
    display: inline-block;
    vertical-align: top;
    width: 60%;
    height: 500px;
    border-radius: 20px;
    margin-right: 30px;
    margin-top: 50px;
    margin-bottom: 30px;
    /* display: block; */
}

.indicadores-slider {
    display: block;
    width: 100px;
    /* background: red; */
    height: 20px;
    margin: 0 auto;
    margin-bottom: 0px;
    position: absolute;
    bottom: 20px;
    left: calc( 50% - 50px);
}

.normal {
    width: 10px;
    height: 10px;
    background-color: #999;
}

.indicadores-slider ul li {
    width: 10px;
    height: 10px;
    background-color: #999;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
}

.indica {
    width: 15px !important;
    height: 15px !important;
    background-color: #195B85 !important;
}

.titulo-qr {
    display: block;
}

.titulo-qr h1 {
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    margin: 0 auto;
}

.titulo-qr img {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    padding: 0px;
    margin: 0 auto;
}

.recuadro-qr {
    width: 250px;
    height: 188px;
    background-color: rgba(245, 198, 12, .3);
    position: absolute;
    z-index: 999;
    margin-top: -15px;
    border-radius: 15px;
    background-image: url(../img/cuadro-qr.png);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
}

.tramites-del-dia #titular {
    font-size: 20px;
    text-align: left;
    padding: 7px;
    font-family: "Bold";
}

.tramites-salientes {
    width: 100% !important;
    display: block;
    background-color: #fff;
    border-radius: 15px;
    margin: 0 auto !important;
    margin-top: 10px;
    padding: 0px 0px !important;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    /* height: 800px !important; */
}

.tramites-salientes h2 {
    font-size: 22px;

}

.tramites-salientes h3 {
    font-size: 18px;
    color: #777;

}


.tramites-salientes h3 span{
    font-size: 18px;
    color: #777;
    background-color: rgba(0, 0, 0, .1);
    padding: 8px 10px;
    border-radius: 15px;
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 1;
}


.tramites-salientes .tramite-historial-menor {
    overflow: hidden;
}

.tramites-salientes .tramite-historial-menor:hover {
    /* background-color: rgba(0, 0, 0, .1) !important; */
    cursor: default;
}

.gestionar-plataforma {
    width: 50px;
    height: 50px;
    background-color: #195B85;
    position: absolute;
    right: 30px;
    top: 25px;
    border-radius: 100%;
}

.gestionar-plataforma:hover {
    transition: .3s;
    background-color: #09f;
    cursor: pointer;
}

.gestionar-plataforma img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
}

.gestionar-plataforma-entra {
    width: 50px;
    height: 50px;
    background-color: #f7941e;
    position: absolute;
    right: 30px;
    top: 25px;
    border-radius: 100%;
}

.gestionar-plataforma-entra:hover {
    transition: .3s;
    background-color: #e27c39;
    cursor: pointer;
}

.gestionar-plataforma-entra img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    vertical-align: middle;
}

.ver-flujo {
    width: fit-content;
    height: 20px;
    background-color: #0487d4;
    position: absolute;
    right: 100px;
    top: 35px;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: 900;
    font-family: "Regular";
    text-align: center;
    padding:10px;
}

.ver-flujo:hover {
    transition: .3s;
    background-color: #0447d4;
    cursor: pointer;
}

.ver-flujo img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
  
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-dos {
    100% {
        transform: rotate(360deg);
    }
}

.opciones-plataforma {
    display: none;
    border-radius: 10px;
    background-color: rgba(86, 168, 221, .5);
    margin: 10px;
    margin-top: 50px;
    transition: .3s;
    margin-top: 60px;
}

.opciones-plataforma h1 {
    text-align: left;
    margin-left: 10px;
    font-size: 18px;
    font-family: "Ligth";
    padding: 10px;
}

.opciones-plataforma-dentro {
    display: inline-block;
    vertical-align: top;
    padding: 5px 20px;
}

.opciones-plataforma-dentro label {
    display: block;
    font-size: 18px;
    font-family: "Bold";
    padding-bottom: 5px;
}

.opciones-plataforma-dentro select {
    display: block;
    font-size: 16px;
    font-family: "Regular";
    border: 0px;
    border-radius: 10px;
    outline: none;
    margin-bottom: 10px;
    width: 200px;
}

.opciones-plataforma-dentro textarea {
    margin-top: -10px;
    width: 300px;
    height: 50px;
    border-radius: 5px;
    padding: 5px;
    outline: none;
    resize: none;
    font-family: "Bold";
}

.guarda-cambios-control {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin-left: 0px;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
    border-radius: 30px;
    margin: 5px 15px;
    background-color: #23b3a8;
    margin-top: -50px;
}

.guarda-cambios-control:hover {
    transition: .3s;
    background-color: #777;
}

.guarda-cambios-control-entra {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin-left: 0px;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
    border-radius: 30px;
    margin: 5px 15px;
    background-color: #f7b15d;
    margin-top: -50px;
}

.guarda-cambios-control-entra:hover {
    transition: .3s;
    background-color: #777;
}

/* guardar tramites entreda */
.guarda-cambios-control-entrega {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin-left: 0px;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
    border-radius: 30px;
    margin: 5px 15px;
    background-color: #f7b15d;
    margin-top: -50px;
}

.guarda-cambios-control-entrega:hover {
    transition: .3s;
    background-color: #777;
}

.guarda-cambios-control-departamento {
    font-size: 18px;
    font-family: "Regular";
    color: #fff;
    background-color: #195B85;
    width: 200px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    padding-top: 12px;
    margin-left: 0px;
    cursor: pointer;
    transition: .3s;
    margin-top: 0px;
    border-radius: 30px;
    margin: 5px 15px;
    margin-top: -45px;
    /* background-color: #f7b15d; */
}

.guarda-cambios-control-departamento:hover {
    transition: .3s;
    background-color: #777;
}

.tramites-colaborador {
    width: 97%;
    height: 60px;
    /* border-bottom: 1px solid #195B85; */
    display: block;
    margin: 0 auto;
}

.tramites-colaborador img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
}

.tramites-colaborador h1 {
    vertical-align: middle;
    display: inline-block;
}

.tramites-departamento {
    width: 97%;
    height: 60px;
    /* border-bottom: 1px solid #f7941e; */
    display: none;
    margin: 0 auto;
}

.tramites-departamento img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
}

.tramites-departamento h1 {
    vertical-align: middle;
    display: inline-block;
}

.tramites-departamento-gestion {
    width: 97%;
    height: 60px;
    /* border-bottom: 1px solid #195B85; */
    display: block;
    margin: 0 auto;
}

.tramites-departamento-gestion img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
    
}

.tramites-departamento-gestion h1 {
    vertical-align: middle;
    display: inline-block;
}

.tramites-entrega-s {
    width: 100%;
    height: 60px;
    /* border-bottom: 1px solid #f7941e; */
    display: block;
    margin: 0 auto;
}

.tramites-entrega-s img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
}

.tramites-entrega-s h1 {
    vertical-align: middle;
    display: inline-block;
}

/* FIN ENTREGA TRAMITES */

.tramites-departamento-gestion {
    width: 97%;
    height: 60px;
    /* border-bottom: 1px solid #195B85; */
    display: block;
    margin: 0 auto;
}

.tramites-departamento-gestion img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
    
}

.tramites-departamento-gestion h1 {
    vertical-align: middle;
    display: inline-block;
}




.buscar-tramites-colaborador {
    display: inline-block;
    margin-left: 20px;
    width: fit-content;
    background-color: #ddd;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 0px 5px;
}

.buscar-tramites-colaborador img {
    width: 30px;
    height: 30px;
}

.buscar-tramites-colaborador input {
    border: 0px;
    height: 40px;
    width: 250px;
    font-size: 20px;
    font-family: "Bold";
    display: inline-block;
    vertical-align: middle;
    background-color: #ddd;
    outline: 0px;
    color: #777;
}

.buscar-tramites-colaborador select {
    font-size: 20px;
    font-family: "Bold";
    background-color: #eee;
    border: 0;
    display: inline-block;
    vertical-align: middle;
    outline: none;
    padding: 5px 8px;
    font-size: 16px;
    color: #777;
}

.cambiar-datos {
    display: inline-block;
    vertical-align: middle;
    background-color: #09f;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s;
    margin-left: 30px;
    width: 120px;
}

.cambiar-datos:hover {
    background-color: #777;
    transition: .5s;
}

.cambiar-datos img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

.cambiar-datos h3 {
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    color: #fff;
}

/*boton buscando */

.buscando-datos {
    display: inline-block;
    vertical-align: middle;
    background-color: #195B85;
    padding: 9px 5px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    cursor: pointer;
    transition: .5s;
    margin-left: -5px;
    width: 100px;
    /* height: 40px; */
}

.buscando-datos:hover {
    background-color: #777;
    transition: .5s;
}

.buscando-datos img {
    display: inline-block;
    vertical-align: middle;
    width: 0px;
    height: 0px;
}

.buscando-datos h3 {
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    color: #fff;
}

.cola-boton {
    background-color: #195B85;
}

.depa-boton {
    background-color: #FF5733;
}

.reporte-plata {
    display: inline-block;
    vertical-align: middle;
    background-color: #ddd;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s;
    margin-left: 30px;
    width: auto;
    text-decoration: none;
}

.reporte-plata:hover {
    background-color: #bbb;
    transition: .5s;
}

.reporte-plata img {
    display: inline-block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
}

.reporte-plata h3 {
    display: inline-block;
    vertical-align: middle; 
    font-family: "Regular";
    color: #777;
    font-size: 16px;
}


.control-tra {
    display: inline-block;
    vertical-align: middle;
    background-color: #ddd;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s;
    margin-left: 30px;
    width: auto;
    padding: 5px 15px;
    text-decoration: none;
}

.control-tra:hover {
    background-color: #bbb;
    transition: .5s;
}

.control-tra img {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
}

.control-tra h3 {
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    color: #777;
    font-size: 16px;
}

.menu-reporte {
    width: 98% !important;
    height: 250px;
    display: block !important;
    margin: 0px auto !important;
    background-color: #fff !important;
}

.menu-reporte div {
    width: 23%;
    height: 300px;
    background: rgb(46,173,20);
    background: linear-gradient(180deg, rgba(85,168,221,1) 0%, rgba(51,94,226,1) 100%);
    display: inline-block;
    float: left;
    margin: 11px;
    border-radius: 15px;
    cursor: pointer;
    transition: .3s;
}

.menu-reporte div:hover {
    transition: .3s;
    background-color: #09f;
    transform: scale(1.05,1.05);
}

.menu-reporte div img {
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
}

.menu-reporte div h3 {
    color: #fff;
    font-size: 22px;
    font-family: "Regular";
    text-align: center !important;
    display: block;
    padding:15px;
}


.menu-reporte div h2 {
    color: #fff;
    font-size: 16px;
    font-family: "Regular";
    text-align: center !important;
    display: block;
    padding:15px;
    padding-top: 0px;
}

.tabla-reporte {
    width: 100%;
}

.tabla-reporte th {
    text-align: left;
    padding: 5px;
    background-color: #195B85;
    font-size: 18px;
}

.tabla-reporte td {
    text-align: left;
    padding: 2px;
    padding-left: 5px;
    margin: 0px;
    border-top: 1px solid #777;
    font-size: 16px;
}

.vacio {
    width: 50%;
    height: 200px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
}

.vacio h3 {
    
    font-family: "Regular";
    color: #333;
    font-size: 22px;
    text-align: center !important;
    display: block;
}

.vacio h2 {
    text-align: center;
    font-family: "Regular";
    color: #777;
    font-size: 18px;
    display: block;
}

.vacio img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
}

.boton-generar-excel {
    width: 160px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background-color: #195B85;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 40px;
    padding-left: 10px;
}

.boton-generar-excel:hover {
    background-color: #777;
}

.boton-generar-excel img, h3 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-family: "Regular";
}

.fecha-reporte {
    width: 230px;
}

.fecha-reporte input {
    width: 190px;
}

.select-lista-tramites {
    width: 250px;
}

.select-lista-tramites option {
    font-size: 15px;
}

.contador-tramites {
    width: 50px;
    height: 20px;
    background-color: #195B85;
    border-radius: 5px;
    display: block;
    margin: 2px;
    text-align: center;
}

.contador-tramites h3 {
    font-size: 16px;
    padding: 2px;
    padding-bottom: 4px;
    color: #fff;
}

#plataforma:hover {
    position: relative;
    z-index: 100;
}

.contenido-tutorial {
    width: 90%;
    height: auto;
    padding-bottom: 30px;
    padding-top: 20px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 15px;
    clear: both;
    overflow: hidden;
    margin-bottom: 50px;
}

.contenido-tutorial #ico-tuto {
    width: 120px;
    height: 120px;
    background-image: url("../img/video.png");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    background-color: #335ee2;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
}

.contenido-tutorial #ico-cookies {
    width: 120px;
    height: 120px;
    background-image: url("../img/cookies_icon.png");
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    background-color: #ffdd00;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
}

.contenido-tutorial h2 {
    text-align: center;
    font-size: 25px;
}

.contenido-tutorial p {
    text-align: center;
    font-size: 18px;
    font-family: "Regular";
    padding: 10px;
    color: #333;
    width: 80%;
    display: block;
    margin: 0 auto;
}

.contenido-tutorial .video-principal {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.contenido-tutorial .video-principal h2 {
    font-size: 20px;
    font-weight: bold;
}

.contenido-tutorial .video-principal iframe {
    width: 70%;
    height: 350px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

.videos-secundario {
    width: 80%;
    height: 100px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
}

.videos-secundario .cada-video {
    width: 50%;
    height: auto;
    float: left;
}

.videos-secundario div h2 {
    font-size: 20px;
    font-weight: bold;
}

.videos-secundario div iframe {
    border-radius: 10px;
    width: 70%;
    height: 200px;
    display: block;
    margin: 0 auto;
}

.tutorial-guia {
    width: 90%;
    height: 40px;
    background-color: #335ee2;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 5px;
    padding-top: 20px;
}

.tutorial-guia a {
    text-decoration: none;
    padding-left: 20px;
    color: #fff;
    font-family: "Regular";
}

.tutorial-guia a img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.tutorial-guia a:hover {
    text-decoration: underline;
    transition: .5s;
}

.barra {
    width: 215px;
    height: 20px;
    background-color: #85ceed;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.barra .contenido-barra {
    background-color: #335ee2;
    width: 215px;
    height: 100px;
    position: absolute;
    left: -215px;
}

.politicas-cookies {
    width: 93%;
    height: 250px;
    background-color: #fff;
    display: block;
    margin: 0 auto;
    position: fixed;
    left: 3.5%;
    bottom: 20px;
    border-radius: 20px;
    z-index: 999;
    box-shadow: 0px 0px 4px 1px #ccc;
}

.politicas-cookies h3 {
    font-size: 25px;
    color: #777;
    text-align: center !important;
    padding-top: 20px;
    display: block;
    vertical-align: middle;
}

.politicas-cookies img {
    font-size: 25px;
    color: #777;
    text-align: center !important;
    width: 30px;
    height: 30px;
    display: inline-flex;
    vertical-align: middle;
    margin-top: -5px;
}

.politicas-cookies p {
    font-size: 18px;
    color: #777;
    text-align: center !important;
    padding-top: 20px;
    display: block;
    padding: 10px 20px;
    font-family: "Regular";
}

.politicas-cookies p a {
    font-size: 18px;
    color: #777;
    text-align: center !important;
    padding: 10px 0px;
    font-family: "Regular";
    font-weight: bold;
}

.politicas-cookies p a:hover {
    font-size: 18px;
    color: #195B85;
    text-align: center !important;
    padding: 10px 0px;
    font-family: "Regular";
    font-weight: bold;
}

.boton-aceptar-politica {
    width: 180px;
    height: 38px;
    background-color: #335ee2;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    font-family: "Regular";
    text-align: center;
    padding-top: 12px;
    font-weight: bold;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

.boton-aceptar-politica:hover {
    background-color: #333;
}

.boton-saber-mas {
    width: 178px;
    height: 36px;
    /* background-color:#335ee2; */
    border-radius: 30px;
    cursor: pointer;
    color: #335ee2;
    font-size: 20px;
    font-family: "Regular";
    text-align: center;
    padding-top: 12px;
    font-weight: bold;
    border: 2px solid #335ee2;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.boton-saber-mas:hover {
    background-color: #333;
    border: 2px solid #333;
    color: #fff;
}

.contenido-saber-mas {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    padding-bottom: 30px;
    overflow-y: auto;
}

.contenido-saber-mas {
    display: none;
}

.cerrar-poli-cook {
    width: 40px;
    height: 40px;
    background-color: rgba(216, 24, 40, .5);
    border-radius: 100%;
    position: absolute;
    right: 0px;
    margin: 10px;
    background-image: url(../img/equi-dos.png);
    background-position: center;
    background-size: contain;
    cursor: pointer;
    display: none;
}

.cerrar-poli-cook:hover {
    background-color: rgba(216, 24, 40, .8);
}

.formulario-actualizar {
    position: absolute;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 50rem;
}

.formulario-actualizar .actualizar-datos-div {
    height: 600px !important;
}

.formulario-actualizar h3 {
    font-size: 14px;
    color: #777;
    padding: 20px;
    text-align: justify;
}

.texto-oculto {
    text-align: center;
    width: 180px;
    font-size: 14px;
    position: absolute;
    right: 50px;
    padding: 10px 5px;
    background-color: #ccc;
    border-radius: 20px;
    top: 3px;
}

.lectura-exito {
    position: relative;
    display: none;
}

.lectura-exito #analizando-qr {
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 9999;
    left: calc( 50% - 50px);
    top: 70px;
}

.lectura-exito #cargando-qr {
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 9999;
    left: calc( 50% - 30px);
    top: 140px;
}

.boton-lectura {
    display: none;
}

.select-metodo-acceso {
    width: 150px;
    height: 50px;
    /* background-color: red; */
    display: block;
    margin: 0 auto;
}

.select-metodo-acceso div {
    width: 50px;
    height: 50px;
    background-color: #195B85;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    cursor: pointer;
    transition: .3s;
}

#web-qr-acceso {
    background-image: URL(../img/qr-blanco.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

#web-pass-acceso {
    background-image: URL(../img/key.png);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.select-metodo-acceso div:hover {
    transform: scale(1.2, 1.2);
    transition: .3s;
}

.select-metodo-acceso h2 {
    /* color:#335ee2; */
    color: #777;
    /* background-color: #ccc; */
    padding: 0px 10px;
    border-radius: 20px;
    text-align: center;
    margin-top: 5px;
    font-size: 14px;
    cursor: default;
}

#cont-qr {
    display: none;
}

.con-pass {
    display: none;
}

.con-qr {
    display: block;
}

.text-qr-acc {
    color: #777;
    font-weight: bold;
    font-size: 15px;
    cursor: default;
}

.text-qr-acc:hover {
    color: #777 !important;
    text-decoration: none !important;
}

.text-qr-acc img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

#como-pagar {
    background-color: #09f;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

#como-pagar:hover {
    background-color: #777;
    transition: .3s;
}

#como-pagar img {
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

.pop-metodos-pago {
    width: 60%;
    height: auto;
    position: absolute;
    left: 20%;
    background-color: #09f;
    border-radius: 15px;
    top: 290px;
    display: none;
    box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .2);
}

.pop-metodos-pago h1 {
    font-size: 30px;
    color: #fff;
    text-align: center;
    font-family: "Regular";
    padding: 30px;
}

.pop-metodos-pago ul li {
    text-align: center;
    font-family: "Regular";
    font-size: 18px;
    padding: 3px;
    font-weight: 800;
}

.pop-metodos-pago h2 {
    font-size: 22px;
    color: #fff;
    text-align: center;
    font-family: "Regular";
    padding: 30px;
}

.pop-metodos-pago a {
    text-align: center;
    font-family: "Regular";
    font-size: 18px;
    padding: 0px;
    font-weight: 800;
    text-decoration: none;
    display: block;
    color: #333;
    transition: .3s;
}

.pop-metodos-pago a:hover {
    transition: .3s;
    color: #fff;
}

.pop-metodos-pago a img {
    width: 35px;
    height: 35px;
    vertical-align: middle;
}

.cerrar-pop-metodos {
    width: 50px;
    height: 50px;
    background-color: rgba(223, 0, 36, .5);
    border-radius: 100%;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background-image: url(../img/cerrar.png);
    transition: .3s;
}

.cerrar-pop-metodos:hover {
    transition: .3s;
    background-color: rgba(223, 0, 36, .8);
}

.radio-exhumado {
    display: block !important;
    position: relative;
    left: 0px !important;
}

.boton-descar {
    background-color: #335ee2;
    width: 450px;
    height: 25px;
    font-family: "Bold";
    font-size: 22px;
    padding: 15px 10px;
    border-radius: 10px;
    vertical-align: middle;
    color: #fff;
    display: inline-block;
    margin-left: 30px;
    cursor: pointer;
    transition: .3s;
}

.boton-descar:hover {
    transition: .3s;
    background-color: #777;
}

.boton-descar img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#contenido-formulario {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    border-radius: 10px;
    min-height: 550px;
}

.datos-actualiza {
    width: 30px;
    height: 30px;
    background-color: #0BAC40;
    position: absolute;
    right: 0;
    top: 120px;
    cursor: pointer;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
}

.datos-actualiza div {
    background-image: url(../img/verificar-datos.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 990;
   border-radius: 100%;
}

.datos-actualiza section {
    background-color: #0BAC40;
    width: 200px;
    height: 120px;
    position: absolute;
    right: -200px;
    top: 0px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    position: absolute;
    z-index: 999;
}

.datos-actualiza section h2 {
    color: #fff;
    font-size: 14px;
}

#act-sis-mun {
    display: block;
    margin: 0 auto;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.en-revision {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.en-revisions {
    position: absolute;
    left: 50px;
    top: 320px;
    font-family: "Regular";
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.finalizar-moratoria {
    position: absolute;
    left: 30px;
    top: 260px;
    display: none;
    background-color: #23b3a8;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}

.bloque-mantenimiento {
    display: inline-block;
}

.bloque-mantenimiento label {
    display: inline-block;
    vertical-align: middle;
}

.bloque-mantenimiento input {
    display: inline-block;
    vertical-align: middle;
}

.grid-container {
    /* display: none; */
    display: grid;
    grid-gap: 1px;
    padding: 5%;
    grid-template-columns: repeat(auto-fill, minmax(250px, 500px));
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    font-size: 30px;
    border-radius: 10px;
    margin: 2.5px;
}

.item1 {
    grid-column: 1 / span 3;
    grid-row: 1;
}

.item2 {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.item5 {
    grid-column: 1 / span 3;
    grid-row: 3;
}

.contenido-usuario {
    padding: 18px;
}

.contenido-usuario h1 {
    font-size: 22px;
    padding: 0px;
    font-family: "Regular";
    color: #333;
    text-align: center;
}

.contenido-usuario h2 {
    font-size: 18px;
    color: #999;
    padding: 1px;
    text-align: center;
}

.icono-usuario {
    width: 80px;
    height: 80px;
    text-align: center;
    background-color: #09f;
    border-radius: 100%;
    font-family: "Bold";
    display: block;
    text-align: center;
    margin: 0 auto;
    background-image: url(../img/icono-usuario.png);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
}

.contenido-usuario .gestionar-boton {
    width: 150px;
    height: 30px;
    text-align: center;
    background-color: rgb(255, 81, 0);
    border-radius: 20px;
    font-family: "Bold";
    font-size: 18px;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
    margin-top: 15px;
    cursor: pointer;
    transition: .3s;
    color: #fff;
}

.contenido-usuario .gestionar-boton:hover {
    transition: .3s;
    background-color: rgba(230, 84, 0, 1);
}

.autorizar .logo {
    width: 80px;
    height: 80px;
    background-color: #09f;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
    background-image: url(../img/autoriza.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

.autorizar h1 {
    font-size: 20px;
    font-family: "Regular";
    text-align: center;
}

.autorizar h2 {
    font-size: 18px !important;
    font-family: "Regular";
    text-align: center;
    color: #777;
}

.autorizar input {
    font-size: 18px !important;
    font-family: "Regular";
    text-align: center;
    color: #777;
    border: 0px;
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid #777;
    outline: none;
}

.boton-autorizar {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 45px !important;
    border-radius: 30px !important;
    font-size: 16px;
    text-align: center;
    background-color: #0BAC40;
    margin-top: 10px !important;
    font-family: "Regular";
    cursor: pointer;
    color: #fff !important;
}

.boton-autorizar:hover {
    transition: .3s;
    background-color: #3a7d34;
}

.reportes {
    width: 60px !important;
    height: 60px !important;
    background-color: #0BAC40;
    padding: 10px;
    border-radius: 7px;
}

.reportes:hover {
    background-color: #545454;
    cursor: pointer;
}

.reportes img {
    width: 35px;
    height: 35px;
}

.asigna-btn {
    width: 60px !important;
    height: 60px !important;
    background-color: #335ee2;
    padding: 10px;
    border-radius: 7px;
    margin-left: -50px;
}

.asigna-btn:hover {
    background-color: #545454;
    cursor: pointer;
}

.asigna-btn  img {
    width: 35px;
    height: 35px;
   
}


.busqueda-btn {
    width: 60px !important;
    height: 50px !important;
    background-color: #195B85;
    padding: 12px;
    border-radius: 5px;
    margin-left: -60px;
}

.busqueda-btn:hover {
    background-color: #545454;
    cursor: pointer;
}

.busqueda-btn  img {
    width: 30px;
    height: 30px;
   
}

.contenido-reporte {
    width: 95%;
    height: auto;
    min-height: 500px;
    display: block;
    margin: 0 auto;
}

.no-reporte {
    width: 350px;
    height: 350px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
}

.no-reporte h1 {
    font-family: "Regular";
    font-size: 25px;
    color: #999;
}

.no-reporte img {
    width: 200px;
    height: 200px;
}

.herramientas-reporte {
    display: block;
    width: 95%;
    margin: 0 auto;
    margin-top: 25px;
}

.herramientas-reporte div {
    font-size: 16px;
    border: 0px;
    font-family: "Regular";
    padding: 3px;
    border-radius: 15px;
    outline: none;
    cursor: pointer;
    display: inline-block;
}

.herramientas-reporte input, select {
    font-size: 16px;
    border: 0px;
    font-family: "Regular";
    /* padding: 3px; */
    border-radius: 15px;
    outline: none;
    cursor: pointer;
    display: block;
    border: 1px solid #09f;
}

.herramientas-reporte div label {
    font-size: 18px;
    font-family: "Bold";
    padding-bottom: 5px;
}

.herramientas-reporte div input[type=button] {
    font-size: 18px;
    font-family: "Bold";
    padding-bottom: 5px;
    background-color: #74d56d;
    color: #fff;
    padding: 10px;
    border: 0px;
}

.herramientas-reporte div input[type=button]:hover {
    transition: .3s;
    background-color: limegreen;
}

#mostrar-lista-autori {
    font-family: "Regular";
    text-align: center;
    font-size: 18px;
    color: #09f;
    cursor: pointer;
    transition: .3s;
    margin-bottom: 10px;
}

#mostrar-lista-autori:hover {
    color: #333;
    text-decoration: underline;
    transition: .3s;
}

#lista-autorizado h1 {
    font-size: 16px !important;
    display: none;
    margin-bottom: 10px;
}

.botones-autorizar div {
    display: inline-block;
    font-family: "Regular";
    font-size: 18px;
    background-color: #09f;
    padding: 5px 10px;
    border-radius: 30px;
    cursor: pointer;
}

#te-autorizaron h1 {
    font-size: 18px;
    color: #777;
}

#te-autorizaron img {
    text-align: center;
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    background-color: #09f;
    padding: 15px;
    border-radius: 100%;
}

#te-autorizaron {
    border-bottom: 1px solid #777;
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    font-family: "Bold";
    text-align: center;
    margin-top: 15px;
    font-size: 20px;
}

#acepta-auto {
    color: #fff;
}

#acepta-auto:hover {
    background-color: #777;
}

#denegar-auto {
    background-color: rgb(255, 81, 0);
    color: #fff;
}

#denegar-auto:hover {
    background-color: #777;
}

.cambio-contraseña {
    display: none;
}

.cambio-contraseña img {
    display: block;
    background-color: #09f;
    padding: 15px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    text-align: center;
    margin: 0 auto;
}

.mis-auto {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #74b9f6;
    border-radius: 30px;
    color: #fff;
    padding-bottom: 7px;
    cursor: pointer;
    transition: .3s;
}

.mis-auto:hover {
    transition: .3s;
    background-color: #333;
}

.mis-auto h1 {
    display: inline-block;
    vertical-align: middle;
    color: #fff !important;
}

s .mis-auto img {
    display: inline-block;
    vertical-align: middle;
    width: 30px !important;
    height: 30px !important;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
    display: grid;
    width: 100%;
}

.grid div {
    background: #EDE7F6;
    padding: 1.5rem;
    border-radius: 1rem;
    height: auto;
    vertical-align: top;
}

.externo-datos{
    width: 500px;
    height: 200px;
    background-color: rgba(0, 0, 0, .2);
    border-radius: 10px;
    margin-top: 30px;
}

.externo-datos h1{
    font-size:25px;
}

.externo-datos h2{
    font-size:18px;
    padding: 0px;
    margin: 0px;
    margin-left: 25px;
    margin-top:0px;
    color:#333;
    
}

.externo-datos form input[type=submit]{
   display: block; 
   background-color: #09f;
   border: 0px;
   width:150px;
   height: 40px;
   color: #fff;
   font-size: 16px;
   font-family: "Regular";
   border-radius: 5px;
   cursor:pointer;
   padding: 0px;
   margin: 0px !important;
   margin-left: 25px !important;

}

.externo-datos form input[type=submit]:hover{
    transition: .3s;
    background-color: #666;
}

.fase-inter{
    background-color: rgba(86, 168, 221, .5);
}

.fase-inter:hover{
    background-color: rgba(86, 168, 221, .7);
}

.prevencion{
   width: 100%; 
   height: 650px;
   /* background-color: rgba(0,0,0,.5); */
   position: absolute;
   z-index: 999;
   display: none;
}



.prevencion div{
    width: 80%;
    height: 1000px;
    background-color: #eee;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0px 0px 20px slategrey;
}

.prevencion div img{
    width: 30px;
    font-size: 25px;

    border-radius: 100%;
    background-color:#09F;
    
    margin:0 auto;
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    margin-left: 7%;
    margin-bottom: 30px;

}

.prevencion div h1{
    font-size: 25px;
    text-align:left;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 30px;

}

.prevencion div form{
   background-color: #fff;
   width: 80%;
   display: block;
   margin: 0 auto;
   padding: 20px; 
   font-family: "Regular";
   border-radius: 10px;
}

.prevencion div form input{
  display: block;
  margin: 5px;
  width: 250px;
  font-size: 16px;
  background-color: #eee;
  border-radius: 5px;
  border: 0px solid #ccc;
  padding: 3px;
  font-family: "Regular";
}

.prevencion div form label{
    display: block;
    margin: 5px;
}

#cerrar-prevencion{
    width: 60px;
    height: 60px;
    background-color: rgba(255,72,92,.5);
    border-radius: 100%;
    position: absolute;
    right: calc(10% + 30px);
    top:30px;
    background-image: url(../img/cerrar.png);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#cerrar-prevencion:hover{
    transition: .3s;
    background-color: #ccc;
}


.generar-preven{
    width: 80px;
    height: 50px;
    background-color:#009f3c !important;
    cursor: pointer;
}

.generar-preven:hover{
    transition: .3 s;
    background-color: #1ebea5;
}

.m-pre{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #335ee2;
    right: 0px;
    background-image: url(../img/prevencion.png);
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom-left-radius: 10px;
    cursor:pointer;
    transition: .3s;
    display: none;
}

.m-pre:hover{
    background-color: #195B85;
    z-index: 999;
    width: 100px;
    transition: .3s;
}


.vum{
    background-color: #195B85;
    padding: 10px;
    border-radius: 5px;

}

.titulo-vum{
    width: 90%;
    height: 60px;
    background-color: #f2811d;
    display: block;
    margin:0 auto;
    margin-top: 20px;
    border-radius: 5px;
    text-align: center;
    padding-top:15px;
    font-family: "Regular";
    font-size: 30px;
    font-weight: bold;
    color: #f2eeee;

}

.archivos-ad{
    display: inline-block;
    
}

.archivos-ad a{
    margin-top: -10px;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    font-family: "Regular";
}

.archivos-ad a img{
    display: inline-block;
    vertical-align: top;
    color:#333;
}

.notificacion-plata{
    width: 600px;
    height: 100px;
    left: calc( 50% - 300px);
    border-radius: 10px;
    background-color: #195B85;
    display: block;
    margin: 0 auto;
    position: fixed;
    z-index: 999;
    box-shadow: 0px 2px 2px 2px #ccc;
    display: none;
}

.notificacion-plata img{
   width: 50px;
   height: 50px;
   display: block;
   text-align: center;
   margin: 0 auto;
   margin-top: 10px;
}

.notificacion-plata h2{
    color:#fff;
    text-align: center;
    font-size: 16px;
    margin-top: -10px;
}

.notificacion-plata-n{
    width: 600px;
    height: 100px;
    left: calc( 50% - 300px);
    border-radius: 10px;
    background-color: #f7941e;
    display: block;
    margin: 0 auto;
    position: fixed;
    z-index: 999;
    box-shadow: 0px 2px 2px 2px #ccc;
    display: none;
}

.notificacion-plata-n img{
   width: 50px;
   height: 50px;
   display: block;
   text-align: center;
   margin: 0 auto;
   margin-top: 10px;
}

.notificacion-plata-n h2{
    color:#fff;
    text-align: center;
    font-size: 16px;
    margin-top: -10px;
}

.interv{
    position: absolute;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Regular";
    width: 200px;
    height: 20px;
    background-color: #1ebea5;;
    top: 50px;
    border-radius: 40px;
    padding:10px 10px;
    left: -100px;
}

.linea-indica{
    height: 30px;
    background-color: #333;
    width: 3px;
    margin: 0 auto;
    display: block;
    margin-bottom: 50px;
    position: absolute;
    left: calc( 50% - 1px);
    top: 220px;
}

.observa{
    margin-top: 6px;
    background-color: #1ebea5;
    padding: 10px;
    border-radius: 5px;
}

.linea-abajo{
    height: 40px;
    background-color: #333;
    width: 2px;
    margin: 0 auto;
    display: block;
    margin-bottom: 0px;
    position: absolute;
    left: calc( 50% - 1px);
    top: 10px;
}

.tiempo-total{
    width: 250px;
    height: 60px;
    background-color: #0D7987;
    display:block;
    margin-bottom: 20px;
    border-radius: 40px;
    /* margin-left: -70px; */
    text-align: center;
    color: #fff;
    font-family: "Regular";
    padding-top: 10px;
}

.tiempo-total h3{
    display: block;
    font-family: 'Bold';
    color:#fff;
    font-size: 25px;

}


.no-tramites-hoy{
    background-color: #1ebea5;
    width: 95%;
    height: 400px;
    display: block;
    background-color:#bfe3f3;
    width: 95%;
    height: 400px;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    margin-top: -30px;
    margin-bottom: 25px;
}

.no-tramites-hoy img{
    margin:0 auto;
    text-align: center;
    display: block;
    width: 150px;
    height: 150px;
    margin-top: 50px;
}

.no-tramites-hoy h2{
    width: 55%;
    margin: 0 auto;
    display: block;
    text-align: center;
    color:#777;
    font-weight: 900;
    margin-top:-20px;
    font-size: 20px;

}

.contenido-control{
    width: 55%;
    /* background-color: #009f3c; */
    display: inline-block;
}

.reporte-tra-pla{
    background-color: lightblue;
    border-radius: 20px;
    width: 100%;
    display: inline-block;
    /* min-height: 720px; */
    /* margin-top: 10px; */
    padding-top: 20px;
    margin-bottom: 10px;
}

.reporte-tra-pla h1{
    font-size: 16px;
    text-align: left;
    padding-top:10px;
    /* padding-left: 10px; */
    
}   



.reporte-tra-pla input{
    border: 0;
    padding:5px;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 15px;
    font-family: "Regular";
    outline: none;
}

.reporte-tra-pla input[type=submit]{
    background-color: #56a8dd;
    cursor: pointer;
    color:#fff;
    padding: 7px 15px;
    font-size: 15px;
}

.reporte-tra-pla input[type=submit]:hover{
    transition: .3s;
    background-color: #777;
}

.fondo-adjuto-valor{
    background-color: #5fa0a8  !important;
    padding: 10px;
    border-radius: 10px;
}


.fondo-formulario-actualizado{
    background-color: #09f  !important;
    padding: 10px;
    border-radius: 10px;
    width: 97%;
    margin: 0 auto;
}

.fondo-formulario-actualizado label{
    font-family: "Regular";
    color:#fff;
    display: block;
}


.acomodar-boton{
    text-align: center;
    padding-bottom: 20px;
    height: 40px;
    font-family: "Regular";
    font-size: 35pt  !important;
    background-color: #e27c39;
}

.acomodar-boton input{
    left: 0px;
    height: 55px;
}


.ver-preventiva{
    position: absolute;
    z-index: 999;
    width: 70px;
    height: 20px;
    background-color: #C70039;
    /* padding: 20px 40px; */
    top: 35px;
    right: 10px;
    border-radius: 30px;
    transition: .3s;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-family: "Regular";
    
    padding-top: 7px;
    padding: 5px 10px;
    font-weight: bold;

}

.ver-preventiva:hover{
    background-color: #777;
}



.ver-notificacion{
    position: absolute;
    z-index: 999;
    width: 70px;
    height: 20px;
    background-color: #0b3bda;
    /* padding: 20px 40px; */
    top: 35px;
    right: 120px;
    border-radius: 30px;
    transition: .3s;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-family: "Regular";
    
    padding-top: 7px;
    padding: 5px 10px;
    font-weight: bold;

}

.ver-notificacion:hover{
    background-color: #777;
}

.boton-prevencion {
    position: absolute;
    background-color: #f7421e;
    width: 70px;
    height: 40px;
    right: 20px;
    top:30px;
    border-radius: 5px;
    background-image: url(../img/exclamacion.png);
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;

    color:#fff;
    font-family: "Regular";
    text-align: center;
}

/* .boton-prevencion h3{
    color:#fff;
    font-family: "Regular";
    text-align: center;
} */

.boton-prevencion :hover{
   transition: .3s; 
   background-color: #f35535;
   
}

#prevencion{
    display: none;
}

.contenido-asigna{
    width: 250px;
    height: 300px;
    background-color: #ccc;
    border-radius: 15px;
    position: absolute;
    left: 1100px;
    z-index: 999;
    box-shadow: #999 4px 3px 10px 1px;
    padding: 5px;
    display: none;

}


.contenido-asigna h2{
    color:#335ee2;
    font-size: 20px;
    text-align: center;
}

.contenido-asigna h3{
    color:#777;
    font-size: 16px;
    padding: 5px;
    vertical-align: bottom;
    

}

.contenido-asigna .check-asigna{
    vertical-align: bottom;
    float: right;
    margin-top: 10px; 
}

.pregristro{
    width: 55%;
    display: block;
    margin: 0 auto;
    height: auto;
    padding: 5px;
    border-radius: 15px;
    background-color: #aaedf7;
    margin-bottom: 30px;
}

.pregristro h2{
    font-size: 14px;
    color:#777;
}

.pregristro img{
    width: 70px;
    height: 70px;
    display: block;
    margin: 0 auto;
}

.pregristro .btn-preregistro{
    width: 100px;
    height: 20px;
    border-radius: 30px;
    background-color: #009045;
    color:#fff;
    font-family: "Regular";
    padding: 10px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 20px;

}

.pregristro .btn-preregistro:hover{
    background-color: #777;
    transition: .3s;
    cursor: pointer;

}


.no-registro-sis{
    padding-bottom: 20px;
    display:none;
}

.no-registro-sis input[type=file] {
    border: 0px;
    border-radius: 30px;
    width: 250px;
    margin-left: calc( 50% - 240px );
    height: 30px;
}

.new-user img{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: block;
}

.load-registro{
    width: 70px;
    height: 70px;
    margin: 0 auto;
    display: block;
}

.texto-clave{
    font-family:"Bold" ;
    font-size: 16px;
    color:#777;
    text-align: center;
}

.autorizar-user{
    width: 100%;
    height: 100px;
    background-color: #badbb7;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    margin-bottom: 3px;
    border-bottom: 1px solid #777;
    position: relative;
}

.autorizar-user img{
    padding: 15px;
    /* padding-top: 10px; */
}

.autorizar-user h2{
    font-size: 20px;
    color: #333;
    /* padding: 15px; */
    padding-left: -25px;
    color:#195B85;
    font-weight: bold;
}

.autorizar-user h1{
    font-size: 16px;
    color: #333;
    /* padding: 15px; */
    padding-left: 15px;
}

.botones-autorizar{
    background-color: #74d56d;
    width: 200px;
    height: 70px;
    position: absolute;
    right: 30px;
    top: 5px;
    border-radius: 10px;
    padding: 10px;
}

.botones-autorizar  div{
   display: block;
   margin: 0 auto;
   text-align: center;
   width: 60%;
   margin-bottom: 10px;
}


.botones-autorizar  div:hover{
    background-color: #777;
}


.secciones-panel{
    margin-left: 3%;
    margin-bottom: -20px;
}

.secciones-panel h2{
    font-weight: bold;
    display: inline-flex;
    font-size: 22px;
}

.secciones-panel h2 img{
   width: 30px;
   height: 30px;
   display: inline-flex;
}

.nuevo-control{
    width: fit-content;
    height: 30px;
    background-color: #0487d4;
    border-radius: 30px;
    font-family: "Regular";
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 10px 15px;
    transition: .3s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nuevo-control img{
    width: 20px;
    height: 20px;
    
}

.nuevo-control:hover{
    background-color: #777;
}

.contenido-buscar-entregado{
    width: 92%;
    display: block;
    margin: 0 auto;
    height: 40px;
    /* background-color: #09a; */
    border-radius: 30px;
    margin-bottom: 20px;
}

.contenido-buscar-entregado img{

    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding-top: 10px;
    padding-left: 10px;
    z-index: 99;
    position: relative;

}

.contenido-buscar-entregado input{
    width: 300px;
    height: 30px;
    font-weight: bold;
    border-radius: 0%;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    text-align: left;
    font-size: 20px;
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    margin-left: -40px;
    padding-left: 40px;
    padding-right: 10px;
}

.contenido-buscar-entregado button{
    width: 120px;
    height: 40px;
    border-radius: 0px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    
    text-align: center;
    font-size: 16px;
    padding: 10px;
    border: 0;
    cursor: pointer;
    background-color: #0487d4;
    color:#fff;
    font-family: "Regular";
    display: inline-block;
    vertical-align:top;
    margin-top: 5px;
    transition: .3s;
    margin-left: -10px;
}

.contenido-buscar-entregado button:hover{
    background-color: #777;
}

.lista-tramites-modulos{
    width: 98%  !important;
    height: 800px !important;
    background-color: #85ceed;
    margin-bottom: 50px;
}


.sin-tramites-control{
    display: block;
    margin: 0 auto;
}

.sin-tramites-control img{
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
}

.sin-tramites-control h3{
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 28px;
}

.paginacion{
    /* padding-top: 10px; */
    display: block;
    /* margin-top: 15px; */
    padding-left: 5px;
    margin-bottom: -20px;
    padding-bottom: 10px;
    /* border: 1px solid #2a7bc0; */
    position: relative;
    background-color: #195B85;
    border-radius: 10px;
    padding: 20px;
}

.paginacion h1{
    font-size: 18px;
    text-align: left;
    font-weight: bolder;
    color: #fff;
}
.paginacion h3{
    font-size: 15px;
    text-align: left;
    font-weight: lighter;
    color: #eee;
    display: block;
    padding-bottom: 10px;
}
.item-pagina{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    
}

.item-pagina:hover{
    background-color: #0BAC40;
}
.item-pagina-admin{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    
}

.item-pagina-admin:hover{
    background-color: #0BAC40;
}
.item-pagina-control{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 5px;
    
}

.item-pagina-control:hover{
    background-color: #0BAC40;
}

.pag-entra{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    
}

.pag-entra:hover{
    background-color: #0BAC40;
}



.pag-entre{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    
}

.pag-entre:hover{
    background-color: #0BAC40;
}



.ges-dep{
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #0487d4;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    transition: .3s;
    font-family: "Bold";
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 10px;
    
}

.ges-dep:hover{
    background-color: #0BAC40;
}

.btn-buscar{
    width: 100px;
    height: 25px;
    border-radius: 30px;
    background-color:#335ee2;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-family: "Regular";
    padding-top: 5px;
    transition: .3s;
}

.btn-buscar:hover{
    background-color: #777;
}

.activo{
    background-color: #ad30ae;
}


.alineado{
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    /* border-left: 1px solid #212121; */
}

.alineado input{
    /* margin-left: 25px; */
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    font-size: 15px;

}
.alineado div{
    /* display: inline-block; */
    vertical-align: middle;
}

.alineado h1{
    padding-left: 30px;
}

.alineado .boton-exp{
    display: block;
    width: 80px;
    height: 26px;
    border-radius: 30px;
    background-color: #335ee2;
    text-align: center;
    color: #fff;
    padding-top: 8px;
    font-family: "Regular";
    font-size: 15px;
    transition: .3s;
    cursor: pointer;
}

.alineado .boton-exp:hover{
    background-color: #777;
}

#gen-re{
    display: inline-block !important;
    vertical-align: middle;
}

#gen-re form {
    display: inline-block;
    vertical-align: middle;

}

#gen-re form input{
    display: inline-block;
    vertical-align: middle;
}

.preventica-elemento{
    width: 98%;
    display: block;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, .05);
}

.boton-sub{
    width: 100px;
    height: 25px;
    background-color: #3a7d34;
    position: absolute;
    right: 10px;
    text-align: center;
    font-family: "Regular";
    color:#fff;
    padding-top: 5px;
    border-radius: 20px;
    transition: .3s;
    cursor: pointer;
}

.boton-sub:hover{
    background-color: #333;
}


.boton-ver-pre{
    width: 100px;
    height: 25px;
    background-color: #C70039;
    position: absolute;
    top:60px;
    right: 10px;
    text-align: center;
    font-family: "Regular";
    color:#fff;
    padding-top: 5px;
    border-radius: 20px;
    transition: .3s;
    cursor: pointer;
}

.boton-ver-pre:hover{
    background-color: #333;
}

.botones-detalles{
    width: 70%;
    height: 40px;
    position: absolute;
    display: block;
    margin: 0 auto;
    top: 60px;
    left: 15px !important;
    /* background-color: #009045; */
}

.botones-detalles div{
    width: auto;
    height: 20px;
    background-color: #0487d4;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
    color:#fff;
    font-family: "Regular";
    text-align: center;
    font-size: 14px;
    padding: 5px 15px;
}

.archivo-digital{
  background-color: #fff;  
  width: 100%;
  min-height: 730px;
}

.elementos-digital {
    padding-left: 17px;
    width: calc( 20% - 21px);
    height: auto;
    min-height: 200px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: .3s;
    border-radius: 5px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/carpeta-archivo.png);
    background-size: contain;
    background-repeat: no-repeat;
   
}

.elementos-digital h1 {
    color: #000;
    font-family: "Ligth";
    font-size: 16px;
    display: block;
}

.elementos-digital h3 {
    color: #999;
    font-family: "Regular";
    font-size: 20px;
    display: block;
    margin-top: 5px;
}

.gen-comprobante{
    width: 200px !important;
    padding: 0px 15px;
}

.tramites-realizados{
    background-color: #31b57367;
}

#resolucion-cargada{
    width: 90%;
    display: block;
    margin: 0 auto;
    background-color: #335ee2;
    border-radius: 5px;
}

#resolucion-cargada h1{
    text-align: justify;
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    margin: 20px;
    margin-left: 0px;
    color:#fff;
    font-size: 20px;
}
#resolucion-cargada img{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin: 20px;
    margin-right: 0px;
}


#t-entrega{
    background-color: #f7941e;
    transition: .3s;
}

#t-entrega:hover{
    background-color: #777;
}

.preventiva-vencida{
    width: 100%;
    min-height: 30px;
    height: auto;
    background-color: #777;
    border-radius: 30px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.preventiva-vencida h1{
    color: #fff;
    text-align: left;
    font-size: 16px;
    font-weight: lighter;
    display: inline-block;
    vertical-align: middle;

}

.preventiva-vencida img{
    color: #fff;
    text-align: left;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.preventiva-vencida h3{
   color: #fff;
   text-align: left;
   font-size: 15px;
   font-weight: lighter;
   display: block;
   margin-left: 15px;
    margin-top: 10px;
   padding-bottom: 10px;
}

.preventiva-vencida h3 span{
    font-weight: bolder;
}

.preventiva-vencida div{
    width: 98%;
    height: 1px;
    border-bottom: 1px solid #fff;
    display: block;
    margin: 0 auto;

}

.pendientes{
    display: block;
    position: absolute;
    /* padding: 10px; */
    padding-top: 10px;
    background-color: #335ee2;
    border-radius: 100%;
    right: 30px;
    top:30px;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-family: "Regular";
    font-weight: bolder;
    font-size: 25px;
    width: 60px;
    height: 45px;
}

.pendientes-preventiva{
    display: block;
    position: absolute;
    /* padding: 8px; */
    background-color:#f83848;
    border-radius: 100%;
    right: 20px;
    top:15px;
    z-index: 1;
    text-align: center;
    color: #fff;
    font-family: "Regular";
    font-weight: bolder;
    font-size: 15px;
    width: 30px;
    height: 25px;
    padding-top: 5px;
}

.boton-archivar{
    width: 100px;
    height: 25px;
    background-color:#ff8c00;
    /* position: absolute;
    bottom: 10px;
    right: 120px; */
    text-align: center;
    font-family: "Regular";
    color:#fff;
    padding-top: 5px;
    border-radius: 20px;
    transition: .3s;
    cursor: pointer;
}

.boton-archivar:hover{
    background-color: #333;
}

.archivado {
    font-size: 14px;
    position: absolute;
    width: 120px;
    height: 35px;
    border-radius: 20px;
    background-color: #f7b15d;
    color: #333;
    text-align: center;
    font-family: "Regular";
    padding-top: 10px;
    padding: 5px;
    right: 100px;
    top: 50px;
    cursor: pointer;
    font-weight: bold;
}

.contiene-flujo{
    display: flex;
    overflow-x: auto;
}

.contiene-flujo .cajas-flujo{
    width: 250px;
    min-width: 250px;
    height: 400px;
    /* background-color: #0487d4; */
    border-radius: 20px;
    margin: 10px;

}

.nuevo-tramite{
    width: 100px;
    height: 22px;
    border-radius: 30px;
    text-align: center;
    font-size: 20px;
    font-family: "Regular";
    border:3px solid #09f;
    padding: 10px;
    text-decoration: none;
   margin-top: 10px;
   display: inline-block;
   vertical-align: middle;
   color:#09f;
   transition: .3s;
}

.nuevo-tramite:hover{
    background-color: #09f;
    color: #fff;
}

.flujo-datos-cabecera {
    display: block;
}

.flujo-datos-cabecera div {
    display: inline-block;
    vertical-align: middle;
}

.datos-finalizado {
    padding: 20px;
    width: 200px;
    height: 40px;
    background-color: #00b034;
    border-radius: 50px;
    margin-top: -20px;
    color: #fff;
    font-family: "Regular";
    text-align: center;

}

.datos-finalizado h3 {
    color: #fff;
}

.datos-entrega {
    padding: 20px;
    width: 200px;
    height: 40px;
    background-color: #dd7c15;
    border-radius: 50px;
    margin-top: -20px;
    color: #fff;
    font-family: "Regular";
    text-align: center;
}

.datos-entrega h3 {
    color: #fff;
}



.tipo-declaracion {
    width: 90%;
    height: auto;
    margin: 0 auto;
    /* background-color: #009045; */
    /* background-color: #0487d4; */
    margin-top: 20px;
    border-radius: 10px;
}

.tipo-declaracion h2 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-top: 20px;
    text-wrap: balance;
}

.tipo-declaracion div {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    height: auto;
    width: 100%;
    border-radius: 5px;
    transition: .5s;
    margin: 0 auto;
}

.tipo-declaracion div a{
    display: block;
    background-color: #888;
    height: auto;
    border-radius: 5px;
    transition: .5s;
    text-decoration: none;
    padding: 10px 20px;

}

.tipo-declaracion div a:hover {

    background-color: #195B85;
    transition: .5s;
    cursor: pointer;
    border-radius: 5px;

}

.activooo {
    background-color: #0487d2 !important;
}


.tipo-declaracion div img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    text-align: center;
    margin: 10px auto;
    display: block;
    /* border: 10px solid #0487f2; */
}

.tipo-declaracion div h3 {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    font-size: 18px;
}

.decla-juri {
    display: none;
}

.decla-ley {
    display: none;
}



.editar-tramite-control{
    display: block;
    width: 70px;
    height: 30px;
    background-color:#00b034 !important;
    border-radius: 30px;
    background-image: url(../img/editar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35%;
    padding: 0;
    margin: 0;   
    transition: .3s;
    margin-top: 10px !important;
    margin-left: -25px !important;

}

.editar-tramite-control:hover{
    background-color: #777 !important;
}

.clonar-tramite-control{
    display: block;
    width: 70px;
    height: 30px;
    background-color:orange !important;
    border-radius: 30px;
    background-image: url(../img/clonar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35%;
    transition: .3s;
    margin-top: 10px !important;
    margin-left: -20px !important;

}

.clonar-tramite-control:hover{
    background-color: #777 !important;
}

.dep-name {
    display: inline-block;
    position: initial;
    width: auto;

}

.dep-name h3 {
    position: initial;
    background-color: #333;
    font-family: "Bold";
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
}

.dep-name-list{
    display: inline-block;
    position: initial;
    width: auto;
    background-color: #333;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.platafomista-name {
    display: inline-block;
    position: initial;
    width: auto;
    margin-top: 22px;
    margin-left: 10px;
}

.platafomista-name h3 {
    position: initial;
    background-color: #0487f4;
    font-family: "Bold";
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
}


/* PRENVIO EN LINEA */
.preventiva-estado{
    width: 450px;
    height: 270px;
    background-color: #005686;
    position: absolute;
    z-index: 999;
    border-radius: 10px;
    left: 20px;
    top: 120px;
    display: none;
}

.preventiva-estado h1{
    color: #fff;
    font-size: 26px;
    margin-left: -15px;
}

.cerrar-preventiva{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #009045;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background-image: url(../img/cerrar.png);
    background-position: center;
    background-size: 80%;
    transition: .3s;
}

.cerrar-preventiva:hover{
    transform: scale(1.2,1.2);
}

.llenar-prev{
    width: 150px;
    height: auto;
    text-align: center;
    padding: 10px;
    background-color: #005686;
    border-radius: 30px;
    font-size: 16px;
    font-family: "Bold";
    color: #fff;
    position: absolute;
    z-index:    998;
    cursor: pointer;
    transition: .3s;
    left: 30px;
    top: 435px;
    display: no;
}

.llenar-prev:hover{
    background-color: #333;

}

.form-preve{
    padding: 15px;
}

.form-preve label{
    color: #fff;
    font-size: 16px ;
    font-family: "Regular";
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
}

.form-preve input{
    border: 0px;
    padding: 5px;
    font-size: 14px;
    font-family: "Regular";
    border-radius: 15px;
}

.form-preve textarea{
    border: 0px;
    padding: 5px;
    font-size: 14px;
    font-family: "Regular";
    border-radius: 10px;
    height: 50px;
    margin-top: 0px;
}
.form-preve textarea:focus{
    outline: none;
}

.form-preve button{
    outline: none;
    border: 0px;
    padding: 5px;
    font-size: 20px;
    font-family: "Bold";
    border-radius: 20px;
    width: 120px;
    height: 40px;
    margin-top: 5px;
    cursor: pointer;
    transition: .3s;
    background-color: #009f3c;
    color: #fff;
}

.form-preve button:hover{
    background-color: #0D8735;
}


.tiene-finca{
    background-color: #009045;
    color: #fff !important;
    width: 150px;
    border-radius: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 3px;
    font-size: 14px !important;
}

.reporte-general-contenido div a{
    width: 200px;
    height: 30px;
    text-decoration: none;
    font-family: "Regular";

    padding: 10px 15px;
    border-radius: 30px;
    font-weight: bolder;
    color: #000;
    transition: .2s;
    margin-left: 60px;
}

.reporte-general-contenido{
    width: 96%;
    height: 150px;
    background-color: #eee;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    padding-top: 20px;
}

.reporte-general-contenido div h1{
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    padding: 10px ;
    font-size: 24px;
    text-align: left;
    font-weight: lighter;
}

.reporte-general-contenido div h2{
    display: inline-block;
    vertical-align: middle;
    font-family: "Regular";
    padding: 10px ;
    font-size: 16px;
    text-align: left;
    margin-left: 65px;
    margin-top: -15px;
    font-weight: bolder;
}

.reporte-general-contenido div .icono-general{
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-left: 20px;
    text-align: center;
    border-radius: 100%;
    color: #fff;
    font-size: 26px;
    font-weight: bolder;
}

.t-linea{
    background-color: #195B85;
}

.t-presencial{
    background-color: #3EB900;
}

.t-preventiva{
    background-color: #C70039;
    margin-left: 0px  !important;
    color: #fff !important;
}

.t-estado{
    background-color: #212121;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
}
.t-departamento{
    background-color: #0447d4;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.t-tipo-tramite{
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
}

.reporte-general-contenido div a:hover{
    background-color: #212121;
    color: #c1c1c1;
}

.datos-busqueda h1{
    width: 400px;
    text-align: center;
    display: block;
    margin: 0 auto;
    font-size: 16px;
}

.datos-busqueda img{
    display: block;
    margin: 0 auto;
}


.recibe-doc {
    width: fit-content;
    height: 20px;
    background-color: #009f3c;
    position: absolute;
    right: 260px;
    top: 35px;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: 900;
    font-family: "Regular";
    text-align: center;
    padding: 10px;
    display: flex;
}

.recibe-doc:hover {
    transition: .3s;
    background-color: #0447d4;
    cursor: pointer;
}

.recibe-doc h1 {
    color: #fff;
    font-size: 18px;
    font-weight: bolder;
}

.recibe-doc span img {
    width: 25px;
    height: 25px;
    padding: 0px 5px;

}


.recibe-doc img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;

}

.recibe-ar {
    /* border: 2px solid #00b034; */
    box-shadow: inset 0 0 0 3px rgba(80, 172, 43, 1);
    background-color: rgba(80, 172, 43, .6)
}

.tiene-finca {
    margin: 10px;
}



.linea-tiempos {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    width: auto;
    height: auto;
    min-width: 200px;
    min-height: 500px;
    /* background-color: rgba(192, 210, 22, .5); */
    padding: 10px;
    margin: 20px;
    overflow-y: auto;

    scrollbar-width: thin;
    /* "auto" or "thin" */
    scrollbar-color: blue orange;
    /* scroll thumb and track */
}

.data-linea {
    width: 300px;
    height: auto;
    min-height: 100px;
    min-width: none;
    align-self: auto;
    margin: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px !important;
}

.contenido-linea-tiempo {
    width: 300px;
    height: auto;
    min-height: 100px;
    min-width: none;
    align-self: auto;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 10px;
    border-radius: 20px;

}

.contenido-linea-tiempo h1 {
    font-size: 16px;
    font-family: "Gob";
    font-weight: bold;
    text-align: center;
}

.contenido-linea-tiempo h5 {
    font-size: 14px;
    font-family: "Go";
    font-weight: 100;
    text-align: center;
    padding: 2px;
}

.fecha-movimiento {
    background-color: #f0f2f4;
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    position: relative;
    margin-bottom: 60px;
    z-index: 99;
    width: 200px;
    left: 50px;

}

.fecha-movimiento div {
    width: 4px;
    height: 60px;
    background-color: #0487f4;
    background: linear-gradient(#0487d4, #0447d4);
    display: block;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 2px);
    top: 55px;
    z-index: 999;
}

.fecha-movimiento h1 {
    font-size: 14px;
    font-family: "Go";
    font-weight: lighter;
    text-align: center;
}

.fecha-movimiento h3 {
    font-size: 16px;
    font-family: "Gob";
    font-weight: bold;
    color: #333;
}



.barrita-linea {
    width: 10px;
    height: 15px;
    position: relative;
    margin-top: 0px;
}

.linea-tiempo-linea {
    width: 300px;
    background-color: #555;
    height: 4px;
    position: absolute;
    left: 175px;
    top: 45px;
}

.linea-abajo-linea {
    height: 55px;
    background-color: #555;
    width: 2px;
    margin: 0 auto;
    display: block;
    margin-bottom: 0px;
    position: absolute;
    left: calc(50% - 1px);
    top: -7px;
    left: 340px;

    background: linear-gradient(#0487d4, #555);

}

.interv-linea {
    position: absolute;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-family: "Gob";
    width: 200px;
    height: 20px;
    background-color: #1ebea5;
    top: -50px;
    border-radius: 40px;
    padding: 10px 10px;
    left: 222px;
    padding-top: 15px;
    background: linear-gradient(#0487d4, #0447d4);
    color: #fff;
}

.observa-linea {
    background-color: #fcd495;
    padding: 10px !important;
    border-radius: 10px;
    position: relative;
    z-index: 99;
}

.triangulo-linea {
    width: 0;
    height: 0;
    border-left: 50px solid #fcd495;
    border-top: 0px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    bottom: -18px;
    left: 0px;
    z-index: 98;
}

.estado-linea {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.estado-linea-span {
    background-color: #0487d2;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    color: #fff;
}

.tiene-finca-linea {
    height: 30px;
    margin-top: 10px;
}

.tiene-finca-linea span {
    background-color: #00b034;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    font-family: "Go";
}

.recibio-doc-linea {
    height: 30px;
    margin-top: 10px;
}

.recibio-doc-linea span {
    background-color: #1CC854;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    color: #fff;
    font-size: 12px;
    font-family: "Go";
}

.archiva-linea {
    background-color: #f4a9a9 !important;
    background: linear-gradient(#fff, #f4a9a9);
}

.finaliza-linea {
    background-color: #a9f4be !important;
    background: linear-gradient(#fff, #a9f4be);
}

.entregado-linea {
    background-color: #a9cef4 !important;
    background: linear-gradient(#fff, #a9cef4);
}

.rechazado-linea {
    background-color: #f4d5a9 !important;
    background: linear-gradient(#fff, #f4d5a9);
}

.f-degra-linnea h3 {
    font-family: "Gob";
    color: #777;
    font-size: 18px;
}

.f-degra-linnea {
    background-color: #69d888 !important;
    background: linear-gradient(#a9f4be, #69d888);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    font-family: "Go";
    color: #777;
    font-size: 14px;
}

.e-degra-linnea h3 {
    font-family: "Gob";
    color: #fff;
    font-size: 18px;
}

.e-degra-linnea {
    background-color: #6098d1 !important;
    background: linear-gradient(#a9cef4, #6098d1);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    font-family: "Go";
    color: #fff;
    font-size: 14px;
}

.t-tempo-linea {
    background-color: #92d160 !important;
    background: linear-gradient(#bce59b, #92d160);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    font-family: "Go";
    color: #777;
    font-size: 18px;
}

.t-tempo-linea h3 {
    font-family: "Gob";
    color: #777;
    font-size: 18px;
}

.recibio-doc-linea-borde{
    border: 2px solid #009045;
}

.no-recibio-doc-linea-borde{
    border: 2px solid #C70039;
}

.btn-compro-busca{
    background-color: #005686;
    border-radius: 30px;
    transition: .3s;
    color: #fff;
    font-family: "Bold";
}

.btn-compro-busca:hover{
    background-color: #333;
}

/* actualizacion de flujo de tramites consulta por cedula */

.tipo-consulta-flujo {
    display: inline-block;
    vertical-align: middle;
    width: 180px;
    height: 50px;
    margin-left: 20px;
}

.tipo-consulta-flujo div {
    display: flex;
    align-items: center;
}

.tipo-consulta-flujo div label {
    font-family: "Bold";
    padding-right: 10px;
    font-size: 16px;
    color: #fff;
}

.tipo-consulta-flujo div input {
    font-family: "Bold";
    padding-right: 10px;
    width: 20px;
    height: 20px;
    background-color: #005686;
    cursor: pointer;
}


.tipo-consulta-flujo-exp {
    background-color: #0a2cd6;
    padding: 5px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: -12px;
    margin-bottom: 8px;
}

.tipo-consulta-flujo-id {
    background-color: #009f3c;
    padding: 5px 20px;
    border-radius: 20px;
    cursor: pointer;
}


.boton-desarchivar {
    width: 100px;
    height: auto;
    background-color: #00b034;
    /* position: absolute;
    right: 3px;
    top:60px; */
    text-align: center;
    font-family: "Bold";
    color: #fff;
    border-radius: 20px;
    transition: .3s;
    cursor: pointer;
    padding: 5px;
    font-size: 14px;
}

.boton-desarchivar:hover {
    background-color: #333;
}


/* FIN  */


/* AL DIA CCSS */

.puede-adjuntar-ccss {
    position: absolute;
    left: 0px;
    top: 60px;
    display:block;
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
    width: 200px;
    
}

/* Certificacion historica EXO*/
.puede-adjuntar-certificacion {
    position: absolute;
    left: 0px;
    top: 180px;
    display: block;
    background-color: #51ac4b;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
    width: 200px;
}


.puede-adjuntar-certificacion-bi {
    position: absolute;
    left: 30px;
    top: 250px;
    display: block;
    background-color: #51ac4b;
    border-radius: 10px;
    margin: 0px;
    padding-left: 10px;
    padding-top:10px;
    width: 200px;
}

.puede-adjuntar-certificacion-bi label{
    font-family: "Regular";
}

.puede-adjuntar-certificacion-trasl {
    position: absolute;
    left: 30px;
    top: 250px;
    display: block;
    background-color: #51ac4b;
    border-radius: 10px;
    margin: 0px;
    padding-left: 10px;
    padding-top:10px;
    width: 200px;
}

.puede-adjuntar-certificacion-trasl label{
    font-family: "Regular";
    display: block;
}

/*TRAMITE DE DECLARACION JURADA*/

.notificacion-simplificada{
    background-color: #f06767;

    border-radius: 5px;
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.notificacion-simplificada p{
    font-family: "Regular";
    font-size: 18px;
    color: #fff;
    padding: 10px;
}

.coloreado{
    background-color: #f0cfcf;
    width: 100%;
    border-radius: 5px;
}

.recomendacion-unir{
    font-family: "Regular";
    font-size: 16px;
    color: #fff;
    padding: 10px;
    background-color: #09f;
    border-radius: 5px;
}

.filtro-tramite{
    display: inline-block;
    vertical-align: middle;
    margin-top: 8px;
    margin-left: 10px;
}

.filtro-tramite select{
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 30px;
    border-radius: 30px;
    padding-left: 10px;
    font-size: 16px;
    font-family: "Bold";
    outline: none;
    color: #777;

}

.filtro-estado{
    display: inline-block;
    vertical-align: middle;
    margin-top: 8px;
    margin-left: 10px;
}

.filtro-estado select{
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 30px;
    border-radius: 30px;
    padding-left: 10px;
    font-size: 16px;
    font-family: "Bold";
    outline: none;
    color: #777;
}

.terminos-cookies-fondo{
    position: fixed;
    z-index: 998;
    background-color: rgba(0,0,0,.7);
    width: 100%;
    height: 1000px;
}

.terminos-cookies{
    display: block;
    margin: 0 auto;
    width: 90%;
    height: auto;
    position: relative;
    background-color: #ccc;
    padding: 40px;
    top: 120px;
    border-radius: 10px;
    font-family: "Regular";
    font-size: 20px;
    box-shadow: 0px 3px 10px rgba(0,0,0,.4);
    z-index: 999;
    font-weight: bold;
    color: #777;
}

.terminos-cookies h3{
    color: #335ee2;
    font-family: "Bold";
    font-size: 30px;
}


.terminos-cookies ul li{
    margin-top: 10px;
    list-style: disc;
}

.terminos-cookies form{
    display: flex;
    gap: 10px;
}

.terminos-cookies form button{
    border-radius: 5px;
    background-color: #335ee2;
    color: #fff;
    font-size: 18px;
    font-family: "Bold";
    padding: 10px 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    border: 0;
    cursor: pointer;
}

.terminos-cookies form button:hover{
    background-color: #777;
}
.terminos-cookies form a{
    border-radius: 5px;
    background-color: #335ee2;
    color: #fff;
    font-size: 18px;
    font-family: "Bold";
    padding: 10px 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    width: fit-content;
}

.terminos-cookies form a:hover{
    background-color: #777;
}

.terminos-cookies div{
    display: flex;
    gap: 10px;
}


/* AUTORIZADOS */

#autorizados {
    width: auto;
    height: auto;
    padding: 20px 0px;
    border-radius: 10px;
}

.dividido-autorizado{
    width: 400px;
    height: 1px;
    background-color: #777;
    margin: 10px 0px;
}

.cajon-botones{
    display: flex;
    gap: 15px;
    margin-top: 35px;
    background-color: #009045;
    width: 100%;
    height: 50px;
    align-items: center;
    padding: 0px 15px;
}

.botones-izquierda{
    display: flex;
    gap: 20px;
    margin-left: 20px;
    align-items: center;
}

.botones-derecha{
    display: flex;
    gap: 10px;
    margin-right: 20px;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
    background-color: tomato;
}

.botones-lista-tramites{
    background-color: #09f;
    padding: 5px 12px;
    text-decoration: none;
    font-family: 'Regular';
    border-radius: 20px;
    color: #fff;
    transition: all .3s;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block; /* Cambiado de flex a inline-block */
    height: auto; /* Altura automática */
    line-height: 1.2; /* Control de altura de línea */
    flex-shrink: 0;
    align-self: flex-start; /* El botón no se estira */
    margin-top: 15px;
    vertical-align: middle;
}

.botones-lista-tramites:hover{
    background-color: #555;
    cursor: pointer;
}

.botones-lista-tramites img{
    width: 16px;
    height: 16px;
    vertical-align: bottom;
    margin-right: 5px;
}

.prevencion-color{
    background-color: #dd7c15;
}

.notificacion-color{
    background-color: #1CC854;
}

.autorizacion-color{
    background-color: #0447d4;
}

.subsano-color{
    background-color: #009f3c;
}


.subsanar-color  {
    padding: 5px 15px 5px 15px; /* Espacio extra a la izquierda para el icono */
    margin-top: 15px;
    background-color: #009045;
    position: relative;
    /* background-image: url('../img/icon-notificacion.png'); */
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 16px 16px;
    font-family: "Bold";
    font-size: 14px;
}

/* O usando pseudo-elemento */
.subsanar-color::before {
    content: "";
    background-image: url('../img/icon-subsanar.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 0px;
    vertical-align: middle;
    background-position: 0px center;
}


.archivado-color  {
    padding: 5px 15px 5px 15px; /* Espacio extra a la izquierda para el icono */
    margin-top: 15px;
    background-color: #E31821;
    position: relative;
    /* background-image: url('../img/icon-notificacion.png'); */
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 16px 16px;
    font-family: "Bold";
    font-size: 14px;
}

/* O usando pseudo-elemento */
.archivado-color::before {
    content: "";
    background-image: url('../img/icon-archivo.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 0px;
    vertical-align: middle;
    background-position: 0px center;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Variante que se muestra cuando recibe focus (útil para navegación por teclado) */

.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}



.elementos-control-tramites{
    display: block;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: #6fbff5;
    border-radius: 15px;
    transition: all .6s;
    margin-bottom: 10px;
}

.elementos-control-tramites:hover{
    background-color: #3dadf8;
    cursor: default;
    transition: .3s;
}

.elementos-control-tramites-inner{
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 15px 0px;
    gap: 10px;
}

.circulo-letra{
    width: 40px;
    height: 40px;
    background-color: #fff;
    color: #6fbff5;
    font-family: "Bold";
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin-left: 15px;
}

.contenido-titular-tramite{
    padding-bottom: 5px;
}

.contenido-titular-tramite h2{
    text-align: left;
    font-size: 16px;
    font-family: "Regular";
    color: #333;
    padding: 0px;
    font-weight: bold;
}

.contenido-descripcion-tramite h3{
    text-align: left;
    font-size: 14px;
    font-family: "Bold";
    color: #333;
}

.autorizados-control-tramites{
    width: 100%;
    height: auto;
    padding: 5px 20px;
    border-top:1px solid lightblue; 
    border-bottom:1px solid lightblue; 
    width: 100%;
}
.autorizados-control-tramites h3{
    font-family: "Regular";
    font-size: 14px;
    color: #333;
    padding-bottom: 5px;
}

.form-dejar-sin-efecto{
    all: unset !important;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f22d1b;
}

.form-dejar-sin-efecto input[type="submit"] {
    padding: 5px 15px 5px 35px; /* Espacio extra a la izquierda para el icono */
    margin-top: 15px;
    background-color: #C70039;
    position: relative;
    background-image: url('../img/icon-sin-efecto.png'); /* Ruta a tu icono */
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 16px 16px;
    font-family: "Bold";
    font-size: 14px;
}

/* O usando pseudo-elemento */
.form-dejar-sin-efecto input[type="submit"]::before {
    content: "";
    background-image: url('../img/icon-sin-efecto.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

.contenido-botones-control-tramites{
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: start;
    /* background-color: yellow; */
}

.contenido-botones-control-tramites .botones-izquierda-control{
    padding: 0px 15px;
    margin: 0px;
    /* background-color: blue; */
    display: flex;
    align-self: flex-start;
    gap: 10px;
}

.contenido-botones-control-tramites .botones-derecha-control{ 
    padding: 0px 15px;
    margin: 0px;
    display: flex;
    align-self: flex-start;
    justify-content: flex-end;
    gap: 10px;
    /* background-color: green; */
    height: auto;
    margin-left: auto;
}

.consulta-movimientos-control{
    width: 50px;
    height: 50px;
    background-color: #009045;
    border-radius: 100%;
    margin-left: auto;
    margin-right: 15px;
    position: relative;
}

.ver-flujo-control {
    width: 30px;
    height: 30px;
    background-color: #0487d4;
    border-radius: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: 900;
    font-family: "Regular";
    text-align: center;
    display: flex;
    top: 0px;
    right: 0px;
}

.ver-flujo-control span img {
    width: 25px;
    height: 25px;
    padding: 3px;
}

.ver-flujo-control:hover {
    transition: .3s;
    background-color: #0447d4;
    cursor: pointer;
}

.ver-flujo-control img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
}

.botones-administra-tramites-linea{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
    height: auto;
    align-items: center;
    padding: 0px 15px;
    margin: 0 auto;
}

.alineado-izquierda-botones-administra-tramites-linea{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.alineado-derecha-botones-administra-tramites-linea{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
}

.contenido-botones-control-tramites-nuevo-exp{
    display: flex;
    align-items: flex-start;
    width: fit-content;
    justify-content: start;
    gap: 20px;
    margin-left: 30px;
}

/* ULTIMA */

@keyframes scales {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1);
    }
}

@keyframes progreso {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes suir {
    0% {
        bottom: 0;
        display: none;
    }
    100% {
        bottom: 61px;
        display: block;
    }
}

@keyframes subir-dos {
    0% {
        bottom: 0;
        display: none;
    }
    100% {
        bottom: 23px;
        display: block;
    }
}

@keyframes scales-dos {
    from {
        display: block;
        transform: scale(0);
    }
    to {
        display: block;
        transform: scale(1);
    }
}

@keyframes sube-baja {
    0% {
        transform: translateY(5px);
    }
    50% {
        transform: translateY(33px);
    }
}

@font-face {
    font-family: "Go";
    src: url(../font/GothamBook.ttf) format("truetype");
}

@font-face {
    font-family: "Gob";
    src: url(../font/gtbold.TTF) format("truetype");
}

@font-face {
    font-family: "Regular";
    src: url(../font/Louis.ttf) format("truetype");
}

@font-face {
    font-family: "Ligth";
    src: url(../font/LouisLight.ttf) format("truetype");
}

@font-face {
    font-family: "Bold";
    src: url(../font/LouisBold.ttf) format("truetype");
}

/* REST */
@media only screen and (max-width: 1300px) {
    .guarda-cambios-control-departamento {
        font-size: 18px;
        font-family: "Regular";
        color: #fff;
        background-color: #195B85;
        /* background-color: #009045; */
        width: 200px;
        height: 35px;
        border-radius: 5px;
        text-align: center;
        padding-top: 12px;
        
        cursor: pointer;
        transition: .3s;
        margin-top: 0px;
        border-radius: 30px;
        margin: 5px 15px;
        margin-top: -45px;
        margin-left: 370px;

        /* background-color: #f7b15d; */
    }

    .tramite-historial-menor{
        height: auto !important;
    }

}

@media only screen and (max-width: 720px) {
    
.terminos-cookies{
    display: block;
    margin: 0 auto;
    width: 85%;
    height: auto;
    position: relative;
    background-color: #ccc;
    padding: 20px;
    top: 20px;
    border-radius: 10px;
    font-family: "Regular";
    font-size: 20px;
    box-shadow: 0px 3px 10px rgba(0,0,0,.4);
    z-index: 999;
    font-weight: bold;
    color: #777;
    overflow: scroll;
}

.terminos-cookies h3{
    color: #335ee2;
    font-family: "Bold";
    font-size: 20px;
}


.terminos-cookies ul li{
    margin-top: 10px;
    list-style: disc;
    font-size: 16px;
    list-style-position: inside;
}
.no-registro-sis input[type=file] {
    border: none;
    border-radius: 30px;
    width: 250px;
    margin-left: 10%;
    height: 30px;
    padding: 10px;
}

.pregristro{
    width: 90%;
}

#grande {
    width: 80%;
    padding: 0px 10px;
}
.en-revisions {
    position: absolute;
    left: 20px;
    top: 400px;
    font-family: "Regular";
    background-color: #195B85;
    border-radius: 10px;
    margin: 0px;
    padding: 10px;
}
    .recuadro-qr {
        height: 333px;
    }
    #mostrar-consultas {
        display: block;
    }
    #outdiv {
        width: 250px;
        height: 350px;
        margin-top: -30px;
        position: relative;
    }
    .contenido-slider-inicio {
        /* background-color: rgba(255,255,255,1); */
        display: none;
        width: 98%;
        height: 500px;
        border-radius: 20px;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 30px;
        clear: both;
        /* display: none; */
    }
    /* inicio */
    .titulo-historial img {
        display: block;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        background-color: #f2eeee;
        border-radius: 100%;
    }
    .tramite-historial {
        width: 98%;
        min-height: 100px;
        background-color: #eeee;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
        position: relative;
        height: auto;
        padding: 10px 0px;
        margin-bottom: 4px;
    }
    .tramite-historial .circulo-historial {
        width: 40px;
        height: 36px;
        background-color: #09f;
        border-radius: 100%;
        display: block;
        margin: 0 auto;
        position: static;
        text-align: center;
        padding-top: 4px;
        font-size: 25px;
        font-family: "Bold";
        color: #eee;
    }
    .tramite-historial h2 {
        text-align: center;
        font-family: "Bold";
        font-size: 18px;
        position: static;
    }
    .h2-bold {
        font-family: "Bold";
    }
    .tramite-historial h3 {
        font-family: "Ligth";
        font-size: 17px;
        color: #777;
        position: static;
        text-align: left;
        padding: 0px 10px;
        margin: 0px;
    }
    /* fin */
    .info-qr-scan {
        width: 70%;
        background-color: #eee;
        min-height: 50px;
        height: auto;
        border-radius: 10px;
        position: absolute;
        top: 8px;
        right: 70px;
        display: none;
    }
    .acceso-rapido-m {
        position: absolute;
        width: 40px;
        height: 40px;
        top: 8px;
        right: 10px;
        border-radius: 10px;
        border: 5px solid #333;
        cursor: pointer;
    }
    .ocultar-acc {
        display: none;
    }
    .backg {
        /* height: 820px !important; */
        background-size: cover;
        background-repeat: repeat-y !important;
    }
    .contenido-consulta {
        width: 100%;
        height: 700px;
        background-color: rgba(255, 255, 255, .8);
        position: absolute;
        top: 127px;
        z-index: 999;
        display: block;
    }
    .contenido-resultado-consulta {
        width: 90%;
    }
    .cerrar-not {
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
    .notificacion {
        width: 95%;
        margin-top: 80px;
    }
    .notificacion h1 {
        font-size: 16px;
    }
    .notificacion img {
        width: 40px;
        height: 40px;
    }
    .titulo {
        width: 90%;
        display: block;
        margin: auto;
    }
    .titulo h1 {
        margin: 0 auto;
        display: block;
        font-size: 22px;
        font-family: "Regular";
        text-align: center;
    }
    .titulo img {
        width: 70px;
        height: 70px;
        margin: 0 auto;
        display: block;
    }
    .mensaje-box {
        display: block;
        margin: 0 auto;
        width: 90%;
        padding: 0px;
    }
    .mensaje-box h1 {
        margin: 0px;
        margin-left: 0px !important;
        padding: 0px;
    }
    .obs-contri {
        width: 95%;
        height: auto;
    }
    .formulario #titulo {
        width: 300px;
        margin: 0 auto;
        display: block;
    }
    .boton-qr {
        display: none !important;
    }
    .abajo-tool {
        margin-top: 18px;
        margin-left: 0px;
    }
    #pswd_info {
        position: absolute;
        top: -190px;
        left: 10.5%;
        width: 250px;
        padding: 15px;
        font-size: .875em;
        border-radius: 10px;
        background: rgba(255, 255, 255, .8);
        box-shadow: 0 1px 3px #ccc;
        border: 1px solid #ddd;
        font-family: "Regular";
        display: none;
    }
    .contra-input div {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 5px;
        left: 77%;
    }
    .mensaje-tramite {
        width: 100%;
        height: auto;
        padding: 10px 0px;
    }
    .mensaje-tramite h1 {
        font-size: 16px;
        font-family: "Regular";
        color: #333;
        vertical-align: middle;
        display: inline-block;
        padding: 5px;
        margin-left: 15px;
    }
    .mensaje-tramite h2 {
        font-size: 26px;
        font-family: "Regular";
        color: #333;
        display: inline-block;
        vertical-align: middle;
        margin-top: 5px;
    }
    .mensaje-tramite img {
        font-size: 16px;
        font-family: "Regular";
        color: #333;
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        margin-left: 15px;
    }
    .notificacion-panel {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        padding: 10px 5px;
        border-radius: 10px;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, .111);
        background: rgba(245, 194, 66, 1);
        background: -moz-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245, 194, 66, 1)), color-stop(100%, rgba(255, 221, 0, 1)));
        background: -webkit-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
        background: -o-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
        background: -ms-linear-gradient(left, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
        background: linear-gradient(to right, rgba(245, 194, 66, 1) 0%, rgba(255, 221, 0, 1) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5c242', endColorstr='#ffdd00', GradientType=1);
    }
    .notificacion-panel h1 {
        font-size: 15px;
        color: #fff;
        font-family: "Regular";
        display: inline-block;
        vertical-align: top;
        margin-left: 50px;
    }
    .notificacion-panel h1 span {
        margin-top: 5px;
        width: 140px;
        margin-left: -40px;
    }
    .texto-notificacion {
        display: inline-block;
        vertical-align: top;
        margin-top: -40px;
    }
    .icono-notificacion {
        width: 40px;
        height: 40px;
        background-image: url(../img/campañilla.png);
        display: inline-block;
        vertical-align: middle;
    }
    .estado-color {
        background-color: #f7941e;
        padding: 3px 10px;
        border-radius: 20px;
        margin-left: 5px;
        margin-top: 5px;
    }
    .boton-manual {
        bottom: 10px;
        left: 10px;
        z-index: 10;
        background-color: #f7941e;
    }
    .boton-video {
        bottom: 60px;
        left: 10px;
        z-index: 10;
        background-color: #f7941e;
    }
    .boton-busqueda {
        bottom: 70px;
        left: 3%;
        z-index: 10;
        width: 92%;
    }
    .boton-web {
        top: -12px;
        right: 5px;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0);
        box-shadow: 0px 3px 20px rgba(0, 0, 0, 0);
        position: absolute;
    }
    .boton-web:hover {
        transition: .3s;
        background-color: rgba(255, 255, 255, 0);
    }

    .formulario-accesso {
        width: 95%;
        min-height: 500px !important;
        margin-top: 30px;
        margin-bottom: 120px;
        padding-bottom: 30px;
        position: relative;
        z-index: 11;
        display: block;
    }
    .formulario-accesso select {
        margin: 0 auto;
        font-family: "Bold";
        color: #333;
        display: block;
        width: 75%;
        height: 30px;
        border: 0px;
        font-size: 16px;
        border-radius: 15px;
        padding-left: 10px;
        border: 1px solid #ccc;
        margin-bottom: 5px;
        outline: none;
    }
    .bienvenida h1 {
        color: #fff;
        font-family: "Regular";
        font-size: 18px;
        padding-top: 5px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        width: 90%;
        /* position: relative; */
        /* left: 20px; */
    }
    .bienvenida img {
        margin: 0 auto;
        text-align: center;
        width: 25px;
        height: 25px;
        margin: auto;
        display: inline-block;
        vertical-align: middle;
    }
    .cerrar {
        padding-top: 2px;
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        right: 20px;
        top: 85px;
        opacity: .7;
        transition: .3s;
    }
    .formulario-accesso input[type=text] {
        width: 70%;
        height: 28px;
        border: 0px;
        border: 1px solid #ccc;
        font-size: 18px;
    }
    .bajar-tool {
        margin-top: 10px;
    }
    .formulario-accesso input[type=submit] {
        width: 120px;
        height: 40px;
        border: 1px solid #ccc;
        font-size: 18px;
        margin-left: 13% !important;
        margin-top: 30px !important;
        outline: none;
        display: inline-block;
        vertical-align: middle;
    }
    .formulario-accesso .acceso-rapido {
        font-family: "Bold";
        color: #777;
        display: block;
        width: 120px;
        height: 28px;
        border: 1px solid #777;
        font-size: 16px;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 1);
        cursor: pointer;
        margin-top: 30px;
        transition: .3s;
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px !important;
        padding-top: 9px;
        text-align: center;
    }
    .formulario-accesso .acceso-rapido:hover {
        transition: .3s;
        background-color: #777;
        color: #fff;
    }
    .formulario-accesso input[type=password] {
        width: 70%;
        height: 28px;
        border: 1px solid #ccc;
        font-size: 18px;
        border-radius: 15px;
        padding-left: 10px;
        margin-bottom: 5px;
    }
    .formulario-accesso label {
        margin: 0 auto;
        font-family: "Bold";
        color: #333;
        display: block;
        padding-left: 15%;
        margin-bottom: 5px;
        font-size: 18px;
    }
    .formulario-accesso a {
        font-family: "Bold";
        color: #333;
        display: block;
        text-decoration: none;
        padding-left: 10%;
        margin-top: 10px;
        transition: .3s;
    }
    .formulario-registro {
        width: 95%;
    }
    .formulario-registro label {
        padding-left: 10%;
    }
    .formulario-registro input[type=text] {
        width: 75%;
    }
    .formulario-registro input[type=tel] {
        width: 75%;
    }
    .formulario-registro input[type=email] {
        width: 75%;
    }
    .formulario-registro input[type=password] {
        width: 75%;
    }
    .formulario-registro textarea {
        width: 75%;
    }
    .formulario-registro select {
        width: 77%;
    }
    #boton-verificar {
        margin-left: 10%;
    }
    .botones-registro #cancelar {
        margin-left: 10%;
    }
    .cssToolTip {
        left: calc(63% + 100px);
    }
    .cssToolTip span {
        left: -230px;
        /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
    }
    .lista-tramites div {
        width: 95%;
        height: 180px;
    }
    .bienvenida {
        width: 100%;
        background-color: #195B85;
        background-image: linear-gradient(19deg, #195B85 0%, #335ee2 100%);
        min-height: 30px;
        height: auto;
        margin-top: 55px;
    }
    .bienvenida h1 {
        color: #fff;
        font-family: "Regular";
        font-size: 18px;
        /* padding-top: 30px; */
        padding-bottom: 0px;
        display: inline-block;
        margin-top: -30px !important;
        vertical-align: middle;
        margin-left: 35px !important;
    }
    .bienvenida img {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-left: 10px;
        margin-top: 10px;
        vertical-align: middle;
    }
    .datos-clave {
        width: 95%;
        height: 400px;
        background-color: rgba(255, 255, 255, .93);
        border-radius: 15px;
        margin: 0 auto;
        margin-top: 30px;
        /* box-shadow: 0px 0px 8px 1px #cdcdcd; */
        display: none;
        margin-bottom: 50px;
    }
    .datos-clave a {
        font-family: "Bold";
        color: #777;
        display: block;
        text-decoration: none;
        padding-left: 15%;
        margin-top: 10px;
        transition: .3s;
    }
    #titulo-mobile {
        width: auto;
        height: 50px;
        display: inline;
        position: relative;
        left: -25px;
    }
    #titulo-sis {
        display: none;
    }
    .carpeta {
        top: 180px;
        background: #fff;
    }
    .elemento-tramite {
        display: block;
    }
    .contenido-notas {
        position: absolute;
        left: -220px;
        width: 200px;
        height: 90px;
        border-radius: 5px;
        top: 10px;
        display: none;
        z-index: 10 !important;
    }
    .triangulo {
        width: 0;
        height: 0;
        border-left: 30px solid #ccc;
        border-top: 0px solid transparent;
        border-bottom: 60px solid transparent;
        position: absolute;
        left: 190px;
    }
    .espacio-blanco {
        width: 100%;
        height: 50px;
    }
    header img {
        width: 60px;
        height: 60px;
        margin-left: 20px;
    }

    header {
        width: 100%;
        height: 65px;
        background-color: #fff;
        box-shadow: 0px 2px #cdcdcd;
        background-size: cover;
    }
    .boton-flotante {
        width: 70px;
        height: 70px;
        border-radius: 5px;
        background: #f79410;
        position: fixed;
        right: 15px;
        bottom: 15px;
        z-index: 90;
        transition: .3s;
        text-decoration: none;
        border-radius: 100%;
        outline: none;
        outline: 0px;
        box-shadow: 0px 10px 20px #777;
        outline: none;
        border: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    }
    .boton-flotante:focus {
        outline: 0px;
    }
    .boton-flotante h1 {
        font-size: 0px;
    }
    .boton-flotante img {
        height: 40px;
        width: 40px;
        padding: 14px;
    }
    .boton-sugerencia {
        width: 150px;
        height: 40px;
        border-radius: 30px;
        background-color:#f79410;
        position: fixed;
        left: 10px;
        bottom: 110px;
        z-index: 10;
        transition: .3s;
        text-decoration: none;
        outline: none;
        box-shadow: 0px 3px 20px rgba(0, 0, 0, .4);
    }
    .boton-sugerencia img {
        height: 30px;
        width: 30px;
        padding-left: 5px;
    }
    .boton-sugerencia h1 {
        font-size: 15px;
    }
    .acceso-botones {
        width: 100%;
        height: 60px;
        background-color: #335ee2;
        /* position: fixed;
	bottom: 0px;
	z-index: 1000; */
    }
    .baja-botenes {
        top: 70px;
        /* z-index:1; */
    }
    #busqueda {
        height: 40px;
        background-color: #fff;
        border-radius: 30px;
        margin-top: 35px;
        width: 85%;
        margin-left: 5%;
        margin: 0 auto;
        display: block;
        margin-top: 20px;
    }
    #busqueda img {
        width: 25px;
        height: 25px;
        display: inline-block;
        vertical-align: bottom;
        padding-top: 8px;
    }
    #busqueda input[type=text] {
        width: 80%;
        height: 25px;
        display: inline-block;
        vertical-align: bottom;
        border: 0px;
        outline: none;
        font-size: 24px;
        font-family: "Bold";
        color: #ccc;
    }
    .carpeta {
        width: 98.5%;
        min-height: 500px;
        height: auto;
        background: #fff;
        border-radius: 30px;
        position: absolute;
        left: .75%;
        top: 190px;
        z-index: 99;
        display: none;
    }
    .list-trami {
        color: #333;
        font-size: 23px;
        font-family: "Bold";
        padding-left: 20px;
        padding-top: 20px;
        margin-right: 50px;
    }
      .elemento-tramite {
        display: flex;
        height: auto;
        margin: 20px;
        transition: .5s;
        border-radius: 30px;
        width: 90%;
        text-decoration: none;
    }

    .elemento-tramite:hover {
        transition: .5s;
        background: #ccc;
    }

    .elemento-tramite h1 {
        font-family: "Regular";
        color: #777;
        font-size: 15px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        padding-right: 20px;
    }

    .elemento-tramite img {
        color: #fff;
        display: inline-block;
        vertical-align: middle;
        border-radius: 30px;
        width: 30px;
        height: 30px;
    } 
    .campo-busca {
        display: inline-block;
        vertical-align: middle;
        width: 200px;
        height: 28px;
        border-radius: 15px;
        background-color: #fff;
        margin-top: 5px;
        margin-left: 0px;
    }
    .adjuntos-user {
        width: 500px;
        height: 100px;
        position: absolute;
        top: 185px;
        left: -10px;
    }
    .contador {
        padding-top: 3px;
        width: 30px;
        height: 27px;
        border-radius: 100%;
        font-family: "Bold";
        position: absolute;
        text-align: center;
        left: calc(100% - 170px);
        top: 60px;
        color: #fff;
        animation: alerta-contador 3s infinite;
        z-index: 9;
    }
    .requisitos-tramites {
        width: 96%;
        margin: 0 auto;
        background-color: #87c9f4;
        height: auto;
        min-height: 280px;
        margin-top: 20px;
        border-radius: 5px;
        background-image: none;
        background-repeat: no-repeat;
        background-position: right center;
        box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, .1);
        padding-bottom: 30px;
        padding-right: 10px;
    }
    .formulario {
        margin: 0 auto;
        width: 96%;
        background-color: #fff;
        margin-top: 20px;
        border-radius: 5px;
        margin-bottom: 40px;
        display: block;
        text-align: left !important;
    }

    .formulario #titulo h1 {
        color: #777;
        font-family: "Regular";
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        margin-top: -90px;
        margin-left: 80px;
        font-size: 18px;
        width: 230px !important;
    }
    .adjunto {
        width: calc( 100% - 20px);
        height: auto;
        border-radius: 5px;
        background-color: #87c9f4;
        margin: 0 auto;
        margin-top: 10px;
        padding: 10px 10px;
        background-image: none;
        background-repeat: no-repeat;
        background-position: right center;
    }
    .formulario form {
        padding: 10px 10px;
    }
    .datos-propietario {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    .opciones-tramites a {
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        width: 200px;
        height: 40px;
        border-radius: 5px;
        background: #195B85;
        font-family: "Regular";
        color: #fff;
        text-decoration: none;
        padding-left: 35px;
        padding-top: 15px;
        transition: .3s;
        cursor: pointer !important;
        margin-bottom: 20px;
    }
    .email-enviado {
        width: 90%;
        height: 200px;
        border-radius: 5px;
        background-color: #d3dc11;
        position: absolute;
        top: 2555px;
        display: none;
        margin: 0 auto;
    }
    .elementos {
        height: 180px;
        /* background-color: #333; */
    }
    .elementos:hover {
        height: 180px;
    }
    .elementos h3 {
        font-size: 15px;
    }
    .elementos h1 {
        font-size: 14px;
    }
    .elementos h2 {
        font-size: 18px;
    }
    .text-numero-tramite {
        background: #195B85;
        width: 150px;
        height: 30px;
        border-radius: 30px;
        text-align: center;
        color: #fff !important;
        font-size: 12px !important;
        font-family: "Ligth";
        padding: 5px;
    }
    .text-center {
        display: inline-block !important;
        vertical-align: middle !important;
        font-size: 12px !important;
        /* width: 130px !important; */
        height: 20px !important;
        margin-top: 10px !important;
    }
    .ver {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 10px;
    }
    .ver:hover {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 40px;
    }
    .notas {
        display: inline-block;
        vertical-align: middle !important;
        margin-left: auto;
        margin-left: 15px;
    }
    .notas:hover {
        display: inline-block;
        vertical-align: middle !important;
        margin-left: auto;
        margin-left: 80px;
    }
    .eliminar {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 15px;
    }
    .eliminar:hover {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 50px;
    }
    .contenido-opciones {
        width: 100%;
        height: 45px;
        position: relative;
        top: 8px;
        background: #ddd;
        display: inline-block;
        border-radius: 30px;
        padding-top: 5px;
        z-index: 9;
    }
    .contenido-notas {
        position: absolute;
        left: -128px;
        width: 300px;
        height: 90px;
        background: #ccc;
        border-radius: 5px;
        top: -100px;
        transition: .3s;
        display: none;
        z-index: 100;
    }
    .triangulo {
        width: 0;
        height: 0;
        border-left: 30px solid #ccc;
        border-right: 30px solid transparent;
        border-bottom: 20px solid transparent;
        position: absolute;
        left: 150px;
        top: 85px;
    }
    .prioridad {
        display: inline-block;
        vertical-align: middle !important;
        top: 0px;
        margin-left: 40px;
    }
    #prioridad-alta {
        display: inline-block;
        vertical-align: middle !important;
        top: 0px;
        margin-left: 40px;
    }
    .prioridad:hover {
        display: inline-block;
        vertical-align: middle !important;
        top: 0px;
        margin-left: 40px;
    }
    .ocultar {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 40px;
    }
    .ocultar:hover {
        display: inline-block;
        vertical-align: middle !important;
        top: -5px;
        margin-left: 40px;
    }
    .gestionar {
        display: inline-block;
        vertical-align: middle !important;
        top: 0px;
        margin-left: 40px;
    }
    .gestionar:hover {
        display: inline-block;
        vertical-align: middle !important;
        top: 0px;
        margin-left: 40px;
    }
    .subir-cinta {
        margin: 0px;
    }
    .botones-registro #atras {
        font-family: "Bold";
        color: #fff;
        display: block;
        width: 120px;
        text-decoration: none;
        border: 1px solid #ccc;
        font-size: 16px;
        border-radius: 30px;
        background-color: #195B85;
        cursor: pointer;
        margin-top: 15px;
        margin-left: 9%;
        transition: .3s;
        text-align: center;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        display: inline-block;
        padding: 15px 0px;
    }
    
    .tips {
        background-color: #195B85;
        border-radius: 10px;
        width: 350px;
        height: 550px;
        left: calc( 50% - 175px);
        top: 200px;
    }
    .mis-resolucion {
        position: absolute;
        top: -3px;
        right: 90px;
        z-index: 10;
        width: 30px;
        height: 30px;
    }
    .mis-resolucion a {
        font-size: 0px;
        width: 40px;
        height: 40px;
        padding: 0px;
    }
    .mis-resolucion img {
        border-radius: 100%;
        width: 35px;
        height: 35px;
        margin-top: 0px;
        background: rgba(35, 171, 225, 1);
        background: -moz-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35, 171, 225, 1)), color-stop(100%, rgba(13, 33, 255, 0.61)));
        background: -webkit-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
        background: -o-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
        background: -ms-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
        background: linear-gradient(to right, rgba(35, 171, 225, 1) 0%, rgba(13, 33, 255, 0.61) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#23abe1', endColorstr='#0d21ff', GradientType=1);
    }
    .doc-resolucion {
        padding: 10px;
        position: absolute;
        right: 20px;
        z-index: 9;
    }
    .doc-exoneracion {
        padding: 10px;
        position: absolute;
        right: 20px;
        z-index: 9;
    }
    .certificacion {
        position: absolute;
        top: -3px;
        right: 40px;
        z-index: 10;
        width: 30px;
    }
    .certificacion a {
        font-size: 0px;
        width: 40px;
        height: 40px;
        padding: 0px;
    }
    .certificacion img {
        background-color: #195B85;
        border-radius: 100%;
        width: 35px;
        height: 35px;
        margin-top: 0px;
        background: rgba(35, 171, 225, 1);
        background: -moz-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(35, 171, 225, 1)), color-stop(100%, rgba(75, 0, 150, 0.61)));
        background: -webkit-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
        background: -o-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
        background: -ms-linear-gradient(left, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
        background: linear-gradient(to right, rgba(35, 171, 225, 1) 0%, rgba(75, 0, 150, 0.61) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#23abe1', endColorstr='#4b0096', GradientType=1);
    }
    .editar {
        width: 35px;
        height: 35px;
        background-image: url(../img/editar.png);
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto;
        transition: .3s;
        cursor: pointer;
        background-color: #009f3c;
        border-radius: 100%;
        position: absolute;
        top: 7px;
        right: 130px;
    }
    .alerta-tramite {
        width: 100px;
        height: 100px;
        background-color: #09f;
        right: 0px;
        bottom: 0px;
        z-index: 10;
        position: fixed;
        border-radius: 100%;
        animation: alerta-tra 1s;
        animation-iteration-count: 5;
        background-color: rgba(63, 188, 239, 0);
    }
    .nota-rectificativa {
        display: block;
        width: 95%;
        height: auto;
    }
    .requisitos-tramites h1 {
        text-align: center;
        font-size: 20px;
        padding: 8px;
        font-family: "Bold";
        font-weight: bold;
        color: #333;
    }
    .boton-entendido-s {
        margin-top: 20px;
        width: 80px;
        height: 28px;
        border-radius: 5px;
        border: 3px solid #fff;
        text-align: center;
        position: absolute;
        font-size: 15px;
        color: #fff;
        font-family: "Regular";
        padding-top: 7px;
        margin-right: 0px;
        right: 150px;
        transition: .3s;
        cursor: pointer;
    }
    .boton-entendido {
        margin-top: 20px;
        width: 80px;
        height: 28px;
        border-radius: 5px;
        border: 3px solid #fff;
        text-align: center;
        position: absolute;
        font-size: 15px;
        color: #195B85;
        font-family: "Regular";
        padding-top: 7px;
        margin-right: 50px;
        left: 2%;
        transition: .3s;
        cursor: pointer;
        background-color: #fff;
    }
    .usuario-bloqueado {
        display: block;
        margin: 0 auto;
        width: 95%;
        margin-top: 10px;
        margin-bottom: -15px;
    }
    .contenido-compartir .circulo-compartir {
        width: 70px;
        height: 35px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        cursor: pointer;
        position: relative;
        background-image: url(../img/compartir-s.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: 20%;
        z-index: 2;
        transition: .5s;
        margin-top: -2px;
        overflow: hidden;
        border: 0px solid #ccc;
        /* background-color: red; */
    }
    .contenido-compartir {
        position: absolute;
        right: 30px;
        top: 0px;
        /* background-color: blue; */
        width: 40px;
        padding: 0px;
        margin: 0px;
    }
    .contenido-compartir a {
        top: -5px;
        left: 0px;
        /* background-color: red; */
    }
    .whats {
        background-color: #1ebea5;
        background-image: url(../img/whats.png);
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .mail {
        background-color: #1ebea5;
        background-image: url(../img/mails.png);
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .down {
        background-color: #1ebea5;
        background-image: url(../img/downs.png);
        background-position: center;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .contenido-tutorial .video-principal {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .contenido-tutorial .video-principal h2 {
        font-size: 20px;
        font-weight: bold;
    }
    .contenido-tutorial .video-principal iframe {
        width: 100%;
        height: 200px;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
    }
    .videos-secundario div iframe {
        border-radius: 10px;
        width: 90%;
        height: 80px;
        display: block;
        margin: 0 auto;
    }
    .videos-secundario {
        width: 100%;
        height: 100px;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }
    .formulario-actualizar {
        height: 100rem;
    }
    .boton-lectura {
        width: 70px;
        height: 70px;
        background-color: #fff;
        position: fixed;
        z-index: 1 !important;
        bottom: 100px;
        right: 15px;
        border-radius: 100%;
        display: block;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, .2);
    }
    .boton-lectura img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        display: block;
        vertical-align: middle;
        display: block;
        padding-top: 5px;
    }
    .lectura-exito #analizando-qr {
        top: 135px;
    }
    .lectura-exito #cargando-qr {
        top: 230px;
    }
    .boton-evento {
        background-color: #333;
    }
    .notificaciones-contenedor-eventos {
        width: 300px;
        height: 90vh;
        position: absolute;
        z-index: 99;
        border-radius: 10px;
        left: calc(100% - 360px);
        display: none;
        top: 120px;
    }
    #cont-qr {
        display: none !important;
    }
    .con-qr {
        display: none;
    }
    .pop-metodos-pago {
        width: 95%;
        height: auto;
        position: absolute;
        left: 2.5%;
        background-color: #09f;
        border-radius: 15px;
        top: 290px;
        display: none;
    }
    .pop-metodos-pago h1 {
        font-size: 25px;
    }
    .boton-descar {
        background-color: #335ee2;
        width: 250px;
        height: 15px;
        font-family: "Bold";
        font-size: 14px;
        padding: 15px 10px;
        border-radius: 10px;
        vertical-align: middle;
        color: #fff;
        display: inline-block;
        margin-left: 30px;
        cursor: pointer;
        transition: .3s;
    }
    .boton-descar img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
    }
    .item1 {
        grid-column: 1 / span 4;
        grid-row: 1;
    }
    .item2 {
        grid-column: 1 / span 4;
        grid-row: 2;
    }
    .item3 {
        grid-column: 1 / span 2;
        grid-row: 3;
    }
    .item4 {
        grid-column: 3 / span 2;
        grid-row: 3;
    }
    .item5 {
        grid-column: 1 / span 4;
        grid-row: 4;
    }

    #resolucion-cargada{
        width: 95%;
        display: block;
        margin: 0 auto;
        background-color: #335ee2;
        border-radius: 5px;
        padding: 20px 0px;
    }
    
    #resolucion-cargada h1{
        text-align: center;
        display: block;
       
        font-family: "Regular";
        /* margin: 20px;
        margin-left: 0px; */
        color:#fff;
        font-size: 18px;
        margin:0 auto;
    }
    #resolucion-cargada img{
        display:block;
        margin:0 auto;
        width: 50px;
        height: 50px;
        
        /* margin-right: 0px; */
    }

    #como-pagar{
        display: block;
        margin-top: 10px !important;
        
    }

}