@charset "utf-8";

/*dependencias*/ @import 'bootstrap-grid.min.css';
@import 'rubik.css';

/*fuentes*/
/*icomoon*/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?prhbto');
    src: url('../fonts/icomoon.eot?prhbto#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?prhbto') format('truetype'),url('../fonts/icomoon.woff?prhbto') format('woff'),url('../fonts/icomoon.svg?prhbto#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block
}

.icon {
    font-family: 'icomoon';
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-adjuntar:before {
    content: "\e900"
}

.icon-agregar:before {
    content: "\e901"
}

.icon-aspa:before {
    content: "\e902"
}

.icon-banco:before {
    content: "\e903"
}

.icon-campana:before {
    content: "\e904"
}

.icon-candado:before {
    content: "\e905"
}

.icon-clientes:before {
    content: "\e906"
}

.icon-descargar:before {
    content: "\e907"
}

.icon-documento:before {
    content: "\e908"
}

.icon-estado:before {
    content: "\e909"
}

.icon-estado:after {
    content: "\e90a"
}

.icon-fecha:before {
    content: "\e90b"
}

.icon-flecha:before {
    content: "\e90c"
}

.icon-lupa0:before {
    content: "\e90d"
}

.icon-lupa1:before {
    content: "\e90e"
}

.icon-ojo:before {
    content: "\e90f"
}

.icon-ojo:after {
    content: "\e910"
}

.icon-pagar:before {
    content: "\e911"
}

.icon-pago:before {
    content: "\e912"
}

.icon-tacho:before {
    content: "\e913"
}

.icon-ver:before {
    content: "\e914"
}

.icon-visto:before {
    content: "\e915"
}
/*rubik*/
.rubik-light {
    font-weight: 300
}

.rubik-regular {
    font-weight: 400
}

.rubik-medium {
    font-weight: 500
}

.rubik-semibold {
    font-weight: 600
}

.rubik-bold {
    font-weight: 700
}

.rubik-extrabold {
    font-weight: 800
}

.rubik-black {
    font-weight: 900
}

/*colores*/
/*fondo*/
.bgcolor-azul {
    background-color: #003f8c !important
}

.bgcolor-blanco {
    background-color: #fff !important
}

.bgcolor-cian0 {
    background-color: #69c7df !important
}

.bgcolor-cian1 {
    background-color: #e6f3f6 !important
}

.bgcolor-gris0 {
    background-color: #6b6b6b !important
}

.bgcolor-gris1 {
    background-color: #a2a2a2 !important
}

.bgcolor-gris2 {
    background-color: #eee !important
}

.bgcolor-negro {
    background-color: #000 !important
}

.bgcolor-plomo0 {
    background-color: #54667a !important
}

.bgcolor-plomo1 {
    background-color: #a6b7bf !important
}

.bgcolor-rojo0 {
    background-color: #e13432 !important
}
/*texto*/
.color-azul {
    color: #003f8c !important
}

.color-blanco {
    color: #fff !important
}

.color-cian0 {
    color: #69c7df !important
}

.color-cian1 {
    color: #e6f3f6 !important
}

.color-gris0 {
    color: #6b6b6b !important
}

.color-gris1 {
    color: #a2a2a2 !important
}

.color-gris2 {
    color: #eee !important
}

.color-negro {
    color: #000 !important
}

.color-plomo0 {
    color: #54667a !important
}

.color-plomo1 {
    color: #a6b7bf !important
}

.color-rojo0 {
    color: #e13432 !important
}

/*talla*/
.talla10 {
    font-size: 10px !important
}

.talla13 {
    font-size: calc(12px + 0.1vmin) !important
}

.talla14 {
    font-size: calc(12px + 0.2vmin) !important
}

.talla17 {
    font-size: calc(12px + 0.5vmin) !important
}

.talla18 {
    font-size: calc(12px + 0.6vmin) !important
}

.talla20 {
    font-size: calc(12px + 0.8vmin) !important
}

.talla24 {
    font-size: calc(12px + 1.2vmin) !important
}

.talla25 {
    font-size: calc(12px + 1.3vmin) !important
}

.talla27 {
    font-size: calc(12px + 1.5vmin) !important
}

.talla30 {
    font-size: calc(12px + 1.8vmin) !important
}

.talla40 {
    font-size: calc(12px + 2.8vmin) !important
}

/*todo*/
*, *:before, *:after {
    background: none;
    border: none;
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2em;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    z-index: 0
}

    *, *:active, *:focus, *:hover {
        /*border: none;*/
        outline: none;
        text-decoration: none
    }

        *::placeholder {
            color: inherit;
            font-family: inherit
        }

a, button, input[type='checkbox'], input[type='radio'], label, select {
    cursor: pointer
}

hr {
    border-top: 1px dashed #a2a2a2;
    width: 100%
}

html {
    color: #000;
    font-family: 'Rubik',sans-serif;
    font-size: 15px;
    font-weight: 400;
    width: 100%
}

    html body {
        width: 100%;
        opacity: 1;
        transition: opacity 1s 0.5s
    }

@media(min-width:1200px) {
    html {
        font-size: calc(12px + 0.3vmin)
    }
}

/*fluido*/
body > * > .container-fluid, main .contenedor > .container-fluid {
    height: 100%;
    max-width: 1600px;
    min-width: 320px
}

@media(min-width:1400px) {
    body > * > .container-fluid, main .contenedor > .container-fluid {
        width: 80%;
        min-width: 1380px
    }
}

/*mayor*/
main {
    width: 100%;
    overflow: hidden
}

    main .contenedor {
        width: 100%
    }

        main .contenedor > .container-fluid {
            padding-bottom: 30px;
            padding-top: 30px
        }

            main .contenedor > .container-fluid .row:not(:only-of-type) {
                flex: none
            }

            main .contenedor > .container-fluid .row:first-child {
                margin-top: -15px
            }

            main .contenedor > .container-fluid .row:last-child {
                margin-bottom: -15px
            }

            main .contenedor > .container-fluid .row .col {
                padding-bottom: 15px;
                padding-top: 15px
            }
        /*contenedor alto*/ main .contenedor:only-of-type {
            min-height: 100vh
        }
        /*contenedor borde*/
        main .contenedor:first-of-type > .container-fluid {
            border-top: 70px solid transparent
        }

        main .contenedor:last-of-type > .container-fluid {
            border-bottom: 60px solid transparent
        }

@media(min-width:576px) {
    main .contenedor:last-of-type > .container-fluid {
        border-bottom-width: 50px
    }
}

/*fondo*/
.fondo, .fondo .fondo-elemento {
    background: no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.fondo {
    overflow: hidden;
    -webkit-perspective: 100px
}

    .fondo .fondo-elemento {
        background-color: #e6f3f6;
        transform-origin: center center
    }

/*formulario*/
@keyframes error {
    from {
        max-height: 0
    }

    to {
        max-height: 100px
    }
}

.formulario:not(.row):not(.col) {
    width: 100%
}

.formulario .formulario-campo {
    color: #6b6b6b;
    font-size: 14px;
    width: 100%;
    text-align: left
}

    .formulario .formulario-campo:before {
        content: '';
        background: #fff no-repeat center center;
        border: 1px solid;
        border-radius: 50%;
        display: block;
        height: 20px;
        width: 20px;
        position: absolute;
        right: 5px;
        top: calc(5px + 0.5vmin);
        z-index: 2;
        transition: 0.4s;
        transition-property: visibility,transform
    }

    .formulario .formulario-campo.has-success:before {
        background-image: url(../img/form-success.png);
        border-color: #55ce63
    }

    .formulario .formulario-campo.has-error:before {
        background-image: url(../img/form-error.png);
        border-color: #f00
    }

    .formulario .formulario-campo:not(.has-feedback):before {
        visibility: hidden;
        transform: matrix(0.01,0,0,0.01,0,0)
    }

    .formulario .formulario-campo .error {
        color: #f00;
        cursor: default;
        display: block;
        order: 2;
        flex: 0 0 100%;
        font-size: 13px;
        width: 100%;
        max-width: 100%
    }

    .formulario .formulario-campo.has-error .error {
        animation: error 1s ease-in
    }

    .formulario .formulario-campo.texto:not(:last-of-type) {
        margin: 0 0 10px
    }

    .formulario .formulario-campo.texto > *:not(div) {
        background: none !important;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px
    }

    .formulario .formulario-campo.texto .formulario-control {
        border: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1
    }

        .formulario .formulario-campo.texto .formulario-control ~ .formulario-marcador {
            border: 1px solid #dbe3e7;
            border-radius: 5px;
            display: flex;
            pointer-events: none
        }

            .formulario .formulario-campo.texto .formulario-control ~ .formulario-marcador:before {
                content: '';
                background: #f00;
                display: block;
                height: 1px;
                width: calc(100% - 10px);
                position: absolute;
                bottom: -1px;
                left: 5px;
                z-index: 1;
                transition: 0.6s;
                transition-property: visibility,transform
            }

            .formulario .formulario-campo.texto .formulario-control ~ .formulario-marcador span {
                flex: 1 1 auto;
                width: auto;
                max-width: 100%;
                line-height: 0.8em;
                transform-origin: left center;
                transition: 0.4s;
                transition-property: color,opacity,transform
            }

            .formulario .formulario-campo.texto .formulario-control ~ .formulario-marcador .icon-fecha {
                color: #a6b7bf;
                font-size: 20px
            }

        .formulario .formulario-campo.texto .formulario-control:not(select) ~ .formulario-marcador {
            cursor: text
        }

        .formulario .formulario-campo.texto .formulario-control:not(textarea), .formulario .formulario-campo.texto .formulario-control:not(textarea) ~ .formulario-marcador {
            height: calc(30px + 1vmin)
        }

            .formulario .formulario-campo.texto .formulario-control:not(textarea) ~ .formulario-marcador {
                align-items: center
            }

        .formulario .formulario-campo.texto .formulario-control:-webkit-autofill ~ .formulario-marcador span {
            color: #69c7df;
            opacity: 1;
            transform: matrix(0.7,0,0,0.7,0,-12)
        }

        .formulario .formulario-campo.texto .formulario-control:not(:disabled):focus ~ .formulario-marcador span, .formulario .formulario-campo.texto .formulario-control:not(:disabled):active ~ .formulario-marcador span, .formulario .formulario-campo.texto.activo .formulario-control ~ .formulario-marcador span {
            color: #69c7df;
            opacity: 1;
            transform: matrix(0.7,0,0,0.7,0,-13)
        }

        .formulario .formulario-campo.texto .formulario-control:disabled ~ .formulario-marcador {
            background: #eee !important;
            color: #999
        }

    .formulario .formulario-campo.texto select.formulario-control ~ .formulario-marcador span {
        opacity: 0
    }

    .formulario .formulario-campo.texto textarea.formulario-control, .formulario .formulario-campo.texto textarea.formulario-control ~ .formulario-marcador {
        padding-top: calc(7px + 0.5vmin)
    }

        .formulario .formulario-campo.texto textarea.formulario-control ~ .formulario-marcador {
            align-items: flex-start
        }

    .formulario .formulario-campo.texto:not(.has-error) .formulario-control ~ .formulario-marcador:before {
        visibility: hidden;
        transform: matrix(0.01,0,0,1,0,0)
    }

    .formulario .formulario-campo.texto .select2 {
        background: none !important;
        border: none;
        display: block;
        height: calc(30px + 1vmin);
        width: 100% !important;
        padding: 0;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1
    }

        .formulario .formulario-campo.texto .select2 .selection {
            height: 100%;
            width: 100%
        }

            .formulario .formulario-campo.texto .select2 .selection .select2-selection {
                background: none;
                border: none;
                display: flex;
                align-items: center;
                height: 100%;
                width: 100%
            }

                .formulario .formulario-campo.texto .select2 .selection .select2-selection .select2-selection__rendered {
                    width: 100%
                }

                .formulario .formulario-campo.texto .select2 .selection .select2-selection .select2-selection__arrow {
                    height: 100%
                }

    .formulario .formulario-campo.texto.ojo .formulario-control {
        z-index: -1
    }

        .formulario .formulario-campo.texto.ojo .formulario-control ~ .formulario-marcador .icon-ojo {
            font-size: 25px;
            pointer-events: auto;
        }

        .formulario .formulario-campo.texto.ojo .formulario-control[type='text'] ~ .formulario-marcador .icon-ojo:before, .formulario .formulario-campo.texto.ojo .formulario-control[type='password'] ~ .formulario-marcador .icon-ojo:after {
            display: none
        }

    .formulario .formulario-campo.texto.ojo.has-feedback .formulario-control ~ .formulario-marcador {
        padding-right: 30px
    }

    .formulario .formulario-campo.adjunto:before {
        margin-top: -10px;
        top: 50%
    }

    .formulario .formulario-campo.adjunto .control ~ .formulario-marcador {
        background: #f7f8fa;
        border: 1px solid #dbe3e7;
        border-radius: 5px;
        display: flex;
        align-items: center;
        height: calc(30px + 1vmin)
    }

        .formulario .formulario-campo.adjunto .control ~ .formulario-marcador span {
            color: #6b6b6b;
            flex: 1 1 auto;
            width: auto;
            max-width: 100%;
            overflow: hidden;
            padding-left: calc(10px + 1.5vmin);
            padding-right: 30px;
            text-overflow: ellipsis;
            white-space: nowrap
        }

    .formulario .formulario-campo:not(.texto):not(.adjunto) {
        padding: 0 30px 0 0
    }

        .formulario .formulario-campo:not(.texto):not(.adjunto):before {
            margin-top: -10px;
            top: 50%
        }

        .formulario .formulario-campo:not(.texto):not(.adjunto) .order-last {
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            padding-bottom: 0 !important;
            padding-top: 0 !important
        }

        .formulario .formulario-campo:not(.texto):not(.adjunto) .formulario-control {
            display: block;
            height: 1px;
            width: 1px;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -2
        }

            .formulario .formulario-campo:not(.texto):not(.adjunto) .formulario-control ~ .formulario-marcador {
                display: flex;
                align-items: center
            }

                .formulario .formulario-campo:not(.texto):not(.adjunto) .formulario-control ~ .formulario-marcador span {
                    flex: 1 1 auto;
                    width: auto;
                    max-width: 100%;
                    padding: 0 0 0 10px
                }

    .formulario .formulario-campo.radio:before {
        top: 7px
    }

    .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador b {
        border: 2px solid #a2a2a2;
        border-radius: 50%;
        flex: 0 0 20px;
        height: 20px;
        width: 20px;
        max-width: 20px;
        transition: border-color 0.4s
    }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador b:before {
            content: '';
            background: #003f8c;
            border: 3px solid #fff;
            border-radius: 50%;
            display: block;
            height: 100%;
            width: 100%;
            transition: 0.4s;
            transition-property: visibility,transform
        }

    .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span {
        font-size: 15px;
        transition: 0.4s;
        transition-property: color,font-weight
    }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span small {
            font-size: 0.8em
        }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span strong, .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador img, .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador .icon {
            display: inline-block;
            vertical-align: middle
        }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span strong {
            padding: 0 2vmin 0 0
        }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span img {
            flex: 0 0 auto;
            height: auto;
            width: auto;
            max-width: 100%
        }

        .formulario .formulario-campo.radio .formulario-control ~ .formulario-marcador span .icon {
            color: #6b6b6b;
            font-size: 40px
        }

    .formulario .formulario-campo.radio .formulario-control:checked ~ .formulario-marcador b {
        border-color: #003f8c
    }

    .formulario .formulario-campo.radio .formulario-control:checked ~ .formulario-marcador span {
        color: #003f8c;
        font-weight: 500
    }

    .formulario .formulario-campo.radio .formulario-control:not(:checked) ~ .formulario-marcador b:before {
        visibility: hidden;
        transform: matrix(0.01,0,0,0.01,0,0)
    }

    .formulario .formulario-campo.radio .row {
        align-items: center
    }

    .formulario .formulario-campo.radio.has-error .row .formulario-control ~ .formulario-marcador b {
        border-color: #f00
    }

    .formulario .formulario-campo.interruptor .formulario-control ~ .formulario-marcador span {
        padding: 0 10px 0 0 !important
    }

    .formulario .formulario-campo.interruptor .formulario-control ~ .formulario-marcador b {
        background: #a2a2a2;
        border: 2px solid transparent;
        border-radius: 10px;
        flex: 0 0 40px;
        height: 20px;
        width: 40px;
        max-width: 40px;
        transition: background-color 0.4s
    }

        .formulario .formulario-campo.interruptor .formulario-control ~ .formulario-marcador b:before {
            content: '';
            background: #fff;
            border-radius: 50%;
            display: block;
            height: 16px;
            width: 16px;
            transition: transform 0.4s
        }

    .formulario .formulario-campo.interruptor .formulario-control:checked ~ .formulario-marcador b {
        background-color: #55ce63
    }

        .formulario .formulario-campo.interruptor .formulario-control:checked ~ .formulario-marcador b:before {
            transform: matrix(1,0,0,1,20,0)
        }

    .formulario .formulario-campo.interruptor.has-error .formulario-control ~ .formulario-marcador b {
        background-color: #f00
    }

    .formulario .formulario-campo.caja:not(:last-of-type) {
        margin: 0 0 10px
    }

    .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador b {
        border-radius: 5px;
        display: block;
        flex: 0 0 20px;
        height: 20px;
        width: 20px;
        max-width: 20px;
        transform-origin: right top;
        transition: transform 0.4s
    }

        .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador b:before, .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador b:after {
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            transition: 0.4s;
            transition-property: border-radius,opacity,visibility
        }

        .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador b:before {
            border: 1px solid #a2a2a2;
            width: 100%
        }

        .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador b:after {
            border: solid #003f8c;
            border-width: 0 2px 2px 0;
            width: 50%
        }

    .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador span {
        color: #a2a2a2
    }

        .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador span a {
            color: #003f8c;
            font-weight: 500
        }

    .formulario .formulario-campo.caja .formulario-control:checked ~ .formulario-marcador b {
        transform: rotate(45deg)
    }

        .formulario .formulario-campo.caja .formulario-control:checked ~ .formulario-marcador b:before, .formulario .formulario-campo.caja .formulario-control:not(:checked) ~ .formulario-marcador b:after {
            opacity: 0;
            visibility: hidden
        }

    .formulario .formulario-campo.caja .formulario-control:not(:checked) ~ .formulario-marcador b:before, .formulario .formulario-campo.caja .formulario-control:not(:checked) ~ .formulario-marcador b:after {
        border-radius: 5px
    }

.formulario .campo-boton {
    display: flex
}

    .formulario .campo-boton > * {
        width: auto;
        max-width: 100%
    }

    .formulario .campo-boton .formulario-campo {
        border-right: 5px solid transparent;
        flex: 1 1 auto
    }

    .formulario .campo-boton .boton {
        flex: 0 0 auto
    }

@media(min-width:1200px) {
    .formulario .formulario-campo.texto.ojo .formulario-control ~ .formulario-marcador .icon-ojo {
        cursor: pointer
    }

    .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador span a {
        transition: color 0.4s
    }

        .formulario .formulario-campo.caja .formulario-control ~ .formulario-marcador span a:hover {
            color: #69c7df
        }
}

/*boton*/
@keyframes boton {
    from {
        opacity: 0.5;
        visibility: visible;
        transform: matrix(0.01,0,0,0.01,0,0)
    }

    to {
        opacity: 0;
        visibility: hidden;
        transform: matrix(1,0,0,1,0,0)
    }
}

.boton {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(30px + 1vmin);
    width: 150px;
    overflow: hidden;
    padding: 5px 15px;
    text-transform: uppercase
}

    .boton:before {
        content: '';
        border-radius: 5px;
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0
    }

    .boton strong {
        font-size: 13px;
        font-weight: 500
    }

    .boton .icon {
        font-size: 18px;
        margin: 0 15px 0 0
    }

    .boton b {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        margin: -100px 0 0 -100px;
        position: absolute;
        animation: boton 1s
    }

@media(min-width:1200px) {
    .boton {
        transition: color 0.4s
    }

        .boton:before {
            border: 1px solid #fff;
            transition: 0.4s;
            transition-property: background-color,border-color
        }

        .boton:hover:before {
            background-color: #fff !important
        }
}
/*boton azul*/
.boton.azul:not(:first-child) {
    margin: calc(15px + 1.5vmin) 0 0
}

.boton.azul:before, .boton.azul b {
    background: #003f8c
}

@media(min-width:1200px) {
    .boton.azul:hover {
        color: #003f8c
    }

        .boton.azul:hover:before {
            border-color: #003f8c
        }
}
/*boton cian*/
.boton.cian:before, .boton.cian b {
    background: #69c7df
}

.boton.cian .icon {
    font-size: 15px;
    margin-right: 10px
}

@media(min-width:1200px) {
    .boton.cian:hover {
        color: #69c7df
    }

        .boton.cian:hover:before {
            border-color: #69c7df
        }
}
/*boton esmeralda*/
.boton.esmeralda {
    width: 120px
}

    .boton.esmeralda:before, .boton.esmeralda b {
        background: #06ad16
    }

@media(min-width:1200px) {
    .boton.esmeralda:hover {
        color: #06ad16
    }

        .boton.esmeralda:hover:before {
            border-color: #06ad16
        }
}
/*boton plomo*/
.boton.plomo {
    /*justify-content: flex-start;*/
    width: calc(150px + 7vmin)
}

.boton.plomo:before, .boton.plomo b {
    background: #a6b7bf
}

@media(min-width:1200px) {
    .boton.plomo:hover {
        color: #a6b7bf
    }

        .boton.plomo:hover:before {
            border-color: #a6b7bf
        }
}

.boton.plomo15 {
    justify-content: flex-start;
    width: 51px
}

    .boton.plomo15before, .boton.plomo15 b {
        background: #a6b7bf
    }

@media(min-width:1200px) {
    .boton.plomo15:hover {
        color: #a6b7bf
    }

        .boton.plomo15:hover:before {
            border-color: #a6b7bf
        }
}
/*boton rojo*/
.boton.rojo:before, .boton.rojo b {
    background: #e13432
}

@media(min-width:1200px) {
    .boton.rojo:hover {
        color: #e13432
    }

        .boton.rojo:hover:before {
            border-color: #e13432
        }
}
/*boton verde*/
.boton.verde {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.verde:before, .boton.verde b {
        background: #55ce63
    }


.boton.verde_200 {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.verde_200:before, .boton.verde_200 b {
        background: #55ce63
    }


.boton.verde_200 {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.verde_200:before, .boton.verde_200 b {
        background: #55ce63
    }

@media(min-width:1200px) {
    .boton.verde:hover {
        color: #55ce63
    }

        .boton.verde:hover:before {
            border-color: #55ce63
        }

    .boton.verde_200:hover {
        color: #55ce63
    }

        .boton.verde_200:hover:before {
            border-color: #55ce63
        }
}

.boton.verde15 {
    justify-content: flex-start;
    width: 51px
}

    .boton.verde15:before, .boton.verde15 b {
        background: #55ce63
    }

@media(min-width:1200px) {
    .boton.verde15:hover {
        color: #55ce63
    }

        .boton.verde15:hover:before {
            border-color: #55ce63
        }
}


/*boton gris*/
.boton.gris {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.gris:before, .boton.gris b {
        background: #a6b7bf
    }


.boton.gris_200 {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.gris_200:before, .boton.gris_200 b {
        background: #a6b7bf
    }


.boton.gris_200 {
    justify-content: flex-start;
    width: calc(150px + 7vmin)
}

    .boton.gris_200:before, .boton.gris_200 b {
        background: #a6b7bf
    }

@media(min-width:1200px) {
    .boton.gris:hover {
        color: #a6b7bf
    }

        .boton.gris:hover:before {
            border-color: #a6b7bf
        }

    .boton.gris_200:hover {
        color: #a6b7bf
    }

        .boton.gris_200:hover:before {
            border-color: #a6b7bf
        }
}

.boton.gris15 {
    justify-content: flex-start;
    width: 51px
}

    .boton.gris15:before, .boton.gris15 b {
        background: #a6b7bf
    }

@media(min-width:1200px) {
    .boton.gris15:hover {
        color: #a6b7bf
    }

        .boton.gris15:hover:before {
            border-color: #a6b7bf
        }
}



/*avatar*/
.avatar {
    background: #a6b7bf;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden
}

    .avatar img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0
    }

/*titulo*/ .titulo {
    color: #003f8c;
    font-size: calc(15px + 1vmin);
    text-align: left
}

/*datepicker*/
.ui-datepicker {
    background: #fff;
    border: 1px solid #dbe3e7;
    border-radius: 5px;
    width: 250px;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 0
}

    .ui-datepicker .ui-datepicker-header {
        background: #e6f3f6;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 0 5px;
        padding: 5px
    }

        .ui-datepicker .ui-datepicker-header .ui-corner-all {
            background: #69c7df;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            flex: 0 0 20px;
            justify-content: center;
            height: 20px;
            width: 20px
        }

            .ui-datepicker .ui-datepicker-header .ui-corner-all:before {
                font-size: 10px
            }

            .ui-datepicker .ui-datepicker-header .ui-corner-all span {
                display: none
            }

            .ui-datepicker .ui-datepicker-header .ui-corner-all.ui-datepicker-prev {
                order: 0;
                padding: 0 2px 0 0
            }

                .ui-datepicker .ui-datepicker-header .ui-corner-all.ui-datepicker-prev:before {
                    content: '◄'
                }

            .ui-datepicker .ui-datepicker-header .ui-corner-all.ui-datepicker-next {
                order: 2;
                padding: 0 0 0 2px
            }

                .ui-datepicker .ui-datepicker-header .ui-corner-all.ui-datepicker-next:before {
                    content: '►'
                }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
            order: 1;
            margin: 0 10px
        }

            .ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
                background: #fff;
                margin: 5px;
                padding: 5px
            }

    .ui-datepicker .ui-datepicker-calendar {
        width: 100%;
        text-align: center
    }

        .ui-datepicker .ui-datepicker-calendar th {
            color: #003f8c;
            font-size: 15px;
            font-weight: 500;
            width: 14.28%;
            padding: 5px
        }

        .ui-datepicker .ui-datepicker-calendar td {
            border: 1px solid #dbe3e7;
            color: #6b6b6b;
            font-size: 14px;
            padding: 5px
        }

/*parrafos*/
.parrafos:not(:last-child), .parrafos *:not(:last-child) {
    margin-bottom: 20px
}

.parrafos {
    color: #6b6b6b;
    font-size: 14px;
    width: 100%;
    overflow: hidden
}

    .parrafos * {
        height: auto;
        max-width: 100%;
        line-height: 1.4em
    }
    /*parrafos formateo*/
    .parrafos b, .parrafos strong {
        font-weight: 500
    }

    .parrafos del, .parrafos strike {
        text-decoration: line-through
    }

    .parrafos em, .parrafos i {
        font-style: italic
    }

    .parrafos ins, .parrafos u {
        text-decoration: underline
    }

    .parrafos mark {
        background: #e13432;
        color: #fff;
        padding: 0.2em
    }

    .parrafos q:before {
        content: '“'
    }

    .parrafos q:after {
        content: '”'
    }

    .parrafos small, .parrafos sub, .parrafos sup {
        font-size: 12px
    }
    /*parrafos encabezados*/
    .parrafos h1, .parrafos h2, .parrafos h3, .parrafos h4, .parrafos h5, .parrafos h6 {
        font-weight: 500
    }

    .parrafos h1 {
        font-size: calc(14px + 1.0vmin)
    }

    .parrafos h2 {
        font-size: calc(14px + 0.8vmin)
    }

    .parrafos h3 {
        font-size: calc(14px + 0.6vmin)
    }

    .parrafos h4 {
        font-size: calc(14px + 0.4vmin)
    }

    .parrafos h5 {
        font-size: calc(14px + 0.2vmin)
    }

    .parrafos h6 {
        font-size: calc(14px + 0.0vmin)
    }
    /*parrafos lista*/
    .parrafos li::marker {
        color: #003f8c
    }

    .parrafos li > ol, .parrafos li > ul {
        margin-top: 20px
    }

    .parrafos ol, .parrafos ul {
        padding-left: 1.5em;
        text-align: left
    }

        .parrafos ol > li::marker {
            font-weight: 500
        }

        .parrafos ul > li::marker {
            font-size: 1.4em
        }

/*estado*/
.estado p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 25px;
    width: 90px
}

.estado.azul p {
    background: #ceecff;
    color: #009efb
}

.estado.rojo p {
    background: #f9e7eb;
    color: #f62d51
}

.estado.verde p {
    background: #dcf6df;
    color: #55ce63
}

/*popup*/
#popup {
    background: rgba(0,0,0,0.5);
    transition: 0.4s;
    transition-property: opacity,visibility
}

    #popup #popup-contenedor {
        max-width: 700px;
        transition: transform 0.4s
    }

        #popup #popup-contenedor #popup-contenido {
            width: 100%
        }

            #popup #popup-contenedor #popup-contenido #popup-cabecera {
                background: #69c7df;
                display: flex;
                align-items: center;
                justify-content: center;
                height: calc(30px + 4vmin);
                width: 100%
            }

                #popup #popup-contenedor #popup-contenido #popup-cabecera p {
                    color: #003f8c;
                    font-size: calc(15px + 1.3vmin);
                    font-weight: 500;
                    text-transform: uppercase
                }

                #popup #popup-contenedor #popup-contenido #popup-cabecera span.popup-cerrar {
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 40px;
                    font-weight: 300;
                    height: 30px;
                    width: 30px;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    transform: rotate(45deg)
                }

    #popup:not(.activo) {
        opacity: 0;
        visibility: hidden
    }

        #popup:not(.activo) #popup-contenedor {
            transform: matrix(0.5,0,0,0.5,0,0);
            transition-timing-function: ease-out
        }

    #popup.activo #popup-contenedor {
        transition-timing-function: cubic-bezier(0,0.5,0.5,1.5)
    }

@media(min-width:1200px) {
    #popup #popup-contenedor #popup-contenido #popup-cabecera span.popup-cerrar {
        cursor: pointer;
        transition: color 0.4s
    }

        #popup #popup-contenedor #popup-contenido #popup-cabecera span.popup-cerrar:hover {
            color: #003f8c
        }
}

.popup-cabecera {
    background: #69c7df;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(30px + 4vmin);
    width: 100%;
}

/*popup letra*/
#popup-letra {
    padding: 4vmin 5vmin 6vmin
}

    #popup-letra .container-fluid {
        border: 1px solid rgba(0,0,0,0.2)
    }

        #popup-letra .container-fluid .row:first-child {
            margin-top: -15px
        }

        #popup-letra .container-fluid .row:last-child {
            margin-bottom: -15px
        }

        #popup-letra .container-fluid ul.row {
            list-style: none;
            margin-left: -5px;
            margin-right: -5px;
            text-align: center
        }

            #popup-letra .container-fluid ul.row li.col {
                margin-bottom: 10px;
                margin-top: 10px;
                padding-left: 5px;
                padding-right: 5px
            }

                #popup-letra .container-fluid ul.row li.col > * {
                    display: block;
                    width: 100%
                }

                #popup-letra .container-fluid ul.row li.col strong {
                    color: #003f8c;
                    font-size: 13px;
                    font-weight: 500;
                    margin: 0 0 5px;
                    text-transform: uppercase
                }

                #popup-letra .container-fluid ul.row li.col > *:not(strong) {
                    font-size: calc(15px + 0.1vmin);
                    text-transform: uppercase
                }

        #popup-letra .container-fluid div.row div.col {
            padding-bottom: 15px;
            padding-top: 15px
        }

            #popup-letra .container-fluid div.row div.col > p > * {
                display: block;
                width: 100%
            }

@media(min-width:576px) {
    #popup-letra .container-fluid ul.row li.col.col-sm-4 + li.col.col-sm-4 {
        border-left: 1px solid rgba(0,0,0,0.2)
    }
}

/*muestra*/
@media(min-width:1200px) {
    .muestra {
        -webkit-perspective: 100px
    }

        .muestra > *:not(.activa) {
            opacity: 0
        }

        .muestra > *:not(.centro) {
            transform: translate3d(0,60px,-15px)
        }

            .muestra > *:not(.centro).arriba {
                transform: translate3d(0,-60px,-30px)
            }

        .muestra > *.activa {
            transition: 1s;
            transition-property: opacity,transform
        }
}

/*pie*/
#pie .row {
    color: rgba(0,0,0,0.3);
    font-family: 'arial'
}

    #pie .row .col {
        display: flex;
        align-items: center;
        height: 25px
    }

        #pie .row .col address {
            width: 100%;
            line-height: 2.4em
        }

@media(max-width:1199.98px) {
    #pie .row .col address a {
        padding: 5px 0
    }
}

@media(max-width:575.98px) {
    #pie .row .col address br {
        display: none
    }
}

@media(min-width:576px) {
    #pie .row .col {
        height: 40px
    }
}

@media(min-width:1200px) {
    #pie .row .col address {
        line-height: 1.4em
    }

        #pie .row .col address a {
            transition: color 0.4s
        }

            #pie .row .col address a:hover {
                color: #000
            }
}

/*login*/
#login main .container-fluid {
    border-top-width: 0
}

#login #pie .row {
    color: rgba(255,255,255,0.6)
}

@media(min-width:1200px) {
    #login main {
        height: 100vh
    }

    #login #pie .row a:hover {
        color: #fff
    }
}
/*login contenedor*/
#login-contenedor .container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: center
}

    #login-contenedor .container-fluid .row {
        align-items: center;
        justify-content: center
    }

        #login-contenedor .container-fluid .row .col {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            text-align: center
        }

            #login-contenedor .container-fluid .row .col > * {
                display: flex;
                align-items: center;
                flex-direction: column
            }

            #login-contenedor .container-fluid .row .col header {
                background: #69c7df;
                justify-content: center;
                padding: calc(15px + 1.5vmin) 15px
            }

                #login-contenedor .container-fluid .row .col header img {
                    display: block;
                    height: 45px;
                    width: 190px;
                    margin: 0 0 calc(15px + 0.5vmin)
                }

                #login-contenedor .container-fluid .row .col header h1 {
                    color: #fff;
                    font-size: calc(15px + 0.8vmin);
                    width: 100%;
                    line-height: 1em;
                    text-transform: uppercase
                }

            #login-contenedor .container-fluid .row .col #formulario-login {
                background: #fff;
                padding: calc(15px + 1.5vmin) calc(15px + 4.5vmin) calc(15px + 3vmin)
            }

                #login-contenedor .container-fluid .row .col #formulario-login p {
                    color: #003f8c;
                    font-size: calc(15px + 0.8vmin);
                    margin: 0 0 calc(15px + 1.5vmin)
                }

                #login-contenedor .container-fluid .row .col #formulario-login a:not(.boton) {
                    color: #54667a;
                    display: block;
                    font-size: 14px;
                    margin: calc(15px + 0.5vmin) 0 0
                }

                #login-contenedor .container-fluid .row .col #formulario-login .boton {
                    height: calc(40px + 1vmin);
                    width: 100%;
                    margin-top: calc(15px + 0.5vmin)
                }

                    #login-contenedor .container-fluid .row .col #formulario-login .boton span {
                        font-size: calc(20px + 0.5vmin)
                    }

@media(min-width:576px) {
    #login-contenedor .container-fluid .row .col {
        flex: 0 0 83.33%;
        width: 83.33%;
        max-width: 83.33%
    }
}

@media(min-width:768px) {
    #login-contenedor .container-fluid .row .col {
        flex: 0 0 66.67%;
        width: 83.33%;
        max-width: 66.67%
    }
}

@media(min-width:992px) {
    #login-contenedor .container-fluid .row {
        justify-content: flex-start
    }

        #login-contenedor .container-fluid .row .col {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%
        }
}

@media(min-width:1200px) {
    #login-contenedor .container-fluid .row {
        min-height: calc(100vh - 80px)
    }

        #login-contenedor .container-fluid .row .col {
            flex: 0 0 41.67%;
            width: 41.67%;
            max-width: 41.67%
        }

            #login-contenedor .container-fluid .row .col #formulario-login a {
                transition: color 0.4s
            }

                #login-contenedor .container-fluid .row .col #formulario-login a:hover {
                    color: #69c7df
                }
}

@media(min-width:1400px) {
    #login-contenedor .container-fluid .row .col {
        flex: 0 0 33.33%;
        width: 33.33%;
        max-width: 33.33%
    }
}

/*cabecera*/
#cabecera {
    height: 70px
}

    #cabecera #cabecera-titulo img {
        height: 4.5vmin;
        min-height: 30px;
        width: 19vmin;
        min-width: 125px
    }

    #cabecera #cabecera-contratos #cabecera-contrato {
        border-radius: 5px
    }

    #cabecera #cabecera-usuario figure .avatar {
        flex: 0 0 30px;
        height: 30px;
        width: 30px;
        max-width: 30px
    }

    #cabecera #cabecera-usuario #usuario-opciones {
        width: 200px;
        opacity: 0.9;
        visibility: hidden;
        transition: 0.6s;
        transition-property: opacity,visibility
    }

        #cabecera #cabecera-usuario #usuario-opciones ul {
            border: 1px solid #eee;
            max-height: 0;
            transition: max-height 0.6s
        }

            #cabecera #cabecera-usuario #usuario-opciones ul:before {
                content: '';
                border-bottom: 10px solid #eee;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                display: block;
                height: 0;
                width: 0;
                position: absolute;
                right: 5px;
                top: -10px
            }

            #cabecera #cabecera-usuario #usuario-opciones ul li {
                width: 100%
            }

                #cabecera #cabecera-usuario #usuario-opciones ul li:not(:last-child):before {
                    content: '';
                    background: #eee;
                    display: block;
                    height: 1px;
                    width: calc(100% - 30px);
                    margin: 0 15px;
                    position: absolute;
                    bottom: 0;
                    left: 0
                }

                #cabecera #cabecera-usuario #usuario-opciones ul li a {
                    display: flex;
                    align-items: center;
                    height: calc(30px + 0.5vmin);
                    padding: 5px 15px
                }

    #cabecera #cabecera-usuario #control-usuario:not(:checked) ~ #usuario-opciones {
        transition-timing-function: ease-out
    }

        #cabecera #cabecera-usuario #control-usuario:not(:checked) ~ #usuario-opciones ul {
            transition-timing-function: ease-out
        }

    #cabecera #cabecera-usuario #control-usuario:checked ~ #usuario-opciones {
        opacity: 1;
        visibility: visible;
        transition-timing-function: ease-in
    }

        #cabecera #cabecera-usuario #control-usuario:checked ~ #usuario-opciones ul {
            max-height: 50vh;
            transition-timing-function: ease-in
        }

@media(min-width:768px) {
    #cabecera #cabecera-titulo p {
        border-left: 1px solid rgba(255,255,255,0.3)
    }
}

@media(min-width:1200px) {
    #cabecera #cabecera-usuario figure {
        cursor: pointer
    }

    #cabecera #cabecera-usuario #usuario-opciones ul li a {
        border-left: 0 solid #003f8c;
        transition: background-color 0.4s
    }

        #cabecera #cabecera-usuario #usuario-opciones ul li a:hover {
            background-color: #eee
        }

        #cabecera #cabecera-usuario #usuario-opciones ul li a:before {
            content: '';
            background: #003f8c;
            display: block;
            height: 100%;
            width: 2px;
            position: absolute;
            left: 0;
            top: 0;
            transition: 0.4s;
            transition-property: visibility,transform
        }

        #cabecera #cabecera-usuario #usuario-opciones ul li a:not(:hover):before {
            visibility: hidden;
            transform: matrix(1,0,0,0.01,0,0)
        }

    #cabecera #cabecera-usuario:not(:hover) #usuario-opciones {
        transition-timing-function: ease-out
    }

        #cabecera #cabecera-usuario:not(:hover) #usuario-opciones ul {
            transition-timing-function: ease-out
        }

    #cabecera #cabecera-usuario:hover #usuario-opciones {
        opacity: 1;
        visibility: visible;
        transition-timing-function: ease-in
    }

        #cabecera #cabecera-usuario:hover #usuario-opciones ul {
            max-height: 25vh;
            transition-timing-function: ease-in
        }
}

/*pasos*/
#pasos {
    height: calc(50px + 5vmin)
}

    #pasos .col {
        padding: 5px
    }

        #pasos .col:not(:first-child):before, #pasos .col:not(:last-child):after {
            content: '';
            background: #dbe3e7;
            display: block;
            height: 1px;
            width: calc(50% - 20px - 1vmin);
            position: absolute;
            top: calc(15px + 1.5vmin)
        }

        #pasos .col:not(:first-child):before {
            left: 0
        }

        #pasos .col:not(:last-child):after {
            right: 0
        }

        #pasos .col a {
            display: block;
            width: 100%
        }

            #pasos .col a b {
                background: #55ce63;
                border-radius: 50%;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: calc(15px + 0.2vmin);
                font-weight: 500;
                height: calc(20px + 1vmin);
                width: calc(20px + 1vmin);
                margin: 1vmin auto
            }

            #pasos .col a p {
                color: #54667a;
                font-size: 13px;
                line-height: 1em;
                white-space: nowrap
            }

        #pasos .col.activo a b {
            background: #e13432
        }

        #pasos .col.activo a p {
            color: #003f8c;
            font-weight: 500
        }

@media(min-width:1200px) {
    #pasos .col.activo a {
        cursor: default
    }

    #pasos .col:not(.activo) a b {
        border: 1px solid #fff;
        transition: 0.4s;
        transition-property: background-color,border-color,color
    }

    #pasos .col:not(.activo) a:hover b {
        background: #fff;
        border-color: #003f8c;
        color: #003f8c
    }
}

@media(min-width:1400px) {
    #pasos .col a p {
        font-size: 15px
    }
}

/*documentos*/
/*documentos estado*/
#formulario-documentos {
    width: 100%
}

    #formulario-documentos #documentos-estado fieldset {
        width: 100%;
        padding: 5px 0
    }

        #formulario-documentos #documentos-estado fieldset:not(:last-child) {
            border-bottom: 1px solid #ddd
        }

        #formulario-documentos #documentos-estado fieldset legend {
            display: flex;
            align-items: center;
            padding: 15px 0 5px
        }

            #formulario-documentos #documentos-estado fieldset legend .icon-documento {
                color: #a6b7bf;
                flex: 0 0 24px;
                font-size: 24px;
                width: 24px;
                max-width: 24px
            }

            #formulario-documentos #documentos-estado fieldset legend strong {
                color: #003f8c;
                font-size: 15px;
                line-height: 1.4em;
                padding-left: 6px
            }

        #formulario-documentos #documentos-estado fieldset ul {
            width: 100%;
            padding-left: 30px
        }

            #formulario-documentos #documentos-estado fieldset ul li {
                border-top: 1px solid #eee;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                width: 100%;
                padding: 5px 0
            }

                #formulario-documentos #documentos-estado fieldset ul li .formulario-campo.caja {
                    flex: 0 0 30px;
                    width: 30px;
                    max-width: 30px;
                    margin: 0
                }

                #formulario-documentos #documentos-estado fieldset ul li header {
                    flex: 1 1 auto;
                    width: auto;
                    max-width: calc(100% - 30px);
                    padding: 5px 0
                }

                #formulario-documentos #documentos-estado fieldset ul li div {
                    flex: 0 0 100%;
                    width: 100%;
                    max-width: 100%;
                    padding: 5px 0
                }

                #formulario-documentos #documentos-estado fieldset ul li header {
                    display: flex;
                    align-items: flex-start
                }

                    #formulario-documentos #documentos-estado fieldset ul li header p {
                        color: #54667a;
                        font-size: 14px;
                        padding: 5px 0
                    }

                #formulario-documentos #documentos-estado fieldset ul li .estado {
                    display: flex;
                    align-items: center
                }

                    #formulario-documentos #documentos-estado fieldset ul li .estado .icon-estado {
                        color: #a2a2a2;
                        font-size: 25px;
                        margin: 0 0 0 15px
                    }

                    #formulario-documentos #documentos-estado fieldset ul li .estado.verde .icon-estado:after {
                        display: none
                    }

                    #formulario-documentos #documentos-estado fieldset ul li .estado.rojo .icon-estado:before {
                        display: none
                    }

                #formulario-documentos #documentos-estado fieldset ul li .boton {
                    flex: 0 0 150px;
                    max-width: 150px;
                    margin: 5px 0
                }

                #formulario-documentos #documentos-estado fieldset ul li .fieldset, #formulario-documentos #documentos-estado fieldset ul li .fieldset .formulario-campo {
                    flex: 0 0 100%;
                    width: 100%;
                    max-width: 100%
                }

                #formulario-documentos #documentos-estado fieldset ul li .fieldset {
                    display: flex;
                    flex-wrap: wrap
                }

@media(min-width:576px) {
    #formulario-documentos #documentos-estado fieldset ul li header {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 175px)
    }

    #formulario-documentos #documentos-estado fieldset ul li .estado {
        flex: 0 0 130px;
        width: 130px;
        max-width: 130px;
        margin-left: 15px
    }

    #formulario-documentos #documentos-estado fieldset ul li .fieldset .formulario-campo {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 315px);
        margin-right: 15px
    }
}

@media(min-width:1400px) {
    #formulario-documentos #documentos-estado fieldset ul li, #formulario-documentos #documentos-estado fieldset ul li .fieldset {
        flex-wrap: nowrap
    }

        #formulario-documentos #documentos-estado fieldset ul li header {
            flex: 0 0 30%;
            width: 30%;
            max-width: 30%
        }

        #formulario-documentos #documentos-estado fieldset ul li .estado {
            margin-right: 15px
        }

        #formulario-documentos #documentos-estado fieldset ul li .fieldset {
            flex: 1 1 auto;
            width: auto;
            max-width: calc(70% - 160px)
        }
}

/*cliente*/
.cliente #pasos {
    background: #fff;
    height: calc(50px + 5vmin);
    width: 100%;
    position: fixed;
    left: 0;
    top: 70px;
    z-index: 1
}

.cliente .contenedor#login-contenedor .col header {
    width: 100%
}

.cliente .contenedor:not(#login-contenedor):first-of-type {
    padding-top: calc(50px + 5vmin)
}

.cliente .contenedor:not(#login-contenedor) .container-fluid .titulo {
    text-transform: uppercase
}

    .cliente .contenedor:not(#login-contenedor) .container-fluid .titulo:not(:last-child) {
        margin-bottom: calc(15px + 1.5vmin)
    }

/*miniatura*/
.miniatura, .miniatura figure {
    width: 100%
}

.miniatura {
    text-align: center
}

    .miniatura figure a {
        display: block;
        width: 100%
    }

        .miniatura figure a .miniatura-documento {
            display: block;
            height: auto;
            width: 100%
        }

        .miniatura figure a .miniatura-icono {
            position: absolute;
            left: 0;
            top: 0;
            display: none
        }

        .miniatura figure a .icon-descargar {
            background: #003f8c;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            height: 40px;
            width: 40px;
            margin: auto;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 55px;
            top: 0
        }

        .miniatura figure a .icon-aspa {
            background: #003f8c;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            height: 40px;
            width: 40px;
            margin: auto;
            position: absolute;
            bottom: 0;
            left: 55px;
            right: 0;
            top: 0
        }

    .miniatura figure figcaption {
        color: #54667a;
        font-size: calc(15px + 0.3vmin);
        font-weight: 500;
        width: 100%;
        margin: calc(15px + 1.5vmin) 0 15px
    }

        .miniatura figure figcaption small {
            font-size: 13px;
            font-weight: 400
        }

@media(min-width:1200px) {
    .miniatura figure a:before {
        content: '';
        background: #000;
        display: block;
        height: 100%;
        width: 100%;
        opacity: 0.1;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        transition: 0.4s;
        transition-property: opacity,visibility
    }

    .miniatura figure a .icon-descargar {
        border: 1px solid #fff;
        z-index: 2;
        transition: 0.4s;
        transition-property: background-color,border-color,color
    }

    .miniatura figure a .icon-aspa {
        border: 1px solid #fff;
        z-index: 2;
        transition: 0.4s;
        transition-property: background-color,border-color,color
    }

    .miniatura figure a:not(:hover):before {
        opacity: 0;
        visibility: hidden
    }

    .miniatura figure a:hover .icon-descargar {
        background-color: #fff;
        border-color: #003f8c;
        color: #003f8c
    }

    .miniatura figure a:hover .icon-aspa {
        background-color: #fff;
        border-color: #003f8c;
        color: #003f8c
    }
}

/*soporte*/
.soporte {
    background: #fff;
    padding: 6vmin
}

    .soporte > time {
        color: #6b6b6b;
        display: block;
        font-size: 12px;
        width: 100%;
        margin: 0 0 calc(15px + 1.5vmin);
        text-align: left
    }

    .soporte .parrafos {
        border: 5px solid #e6f3f6;
        padding: 3.5vw 4vw
    }

    .soporte iframe {
        border: 5px solid #e6f3f6;
        height: 100vw;
        width: 100%;
        padding: 5px
    }

        .soporte iframe:not(:last-child) {
            margin-bottom: 30px
        }

@media(min-width:1200px) {
    .soporte iframe {
        height: 60vh
    }
}

/*pdf*/ .pdf {
    justify-content: center
}

    .pdf .col {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%
    }


/*01 datos*/
/*datos contenedor*/
#datos-contenedor .tabulado-patas:before {
    content: '';
    background: #f3f3f3;
    display: block;
    height: 1px;
    width: calc(100% - 30px);
    position: absolute;
    bottom: 15px;
    left: 15px
}

#datos-contenedor .tabulado-patas .tabulado-pata p {
    display: flex;
    align-items: center;
    height: calc(30px + 2.5vmin);
    padding: 0 15px;
    transition: color 0.4s
}

#datos-contenedor .tabulado-patas .tabulado-pata.activo p {
    color: #003f8c
}

#datos-contenedor .tabulado-patas .tabulado-pata p:before {
    content: '';
    background: #e13432;
    display: block;
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.4s;
    transition-property: visibility,transform
}

#datos-contenedor .tabulado-patas .tabulado-pata:not(.activo) p:before {
    visibility: hidden;
    transform: matrix(0.01,0,0,1,0,0)
}

#datos-contenedor .tabulado-contenedor {
    transition: 0.6s;
    transition-property: opacity,visibility
}

    #datos-contenedor .tabulado-contenedor:not(.activo) {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1
    }

    #datos-contenedor .tabulado-contenedor .acordion-panel {
        margin: 0
    }

        #datos-contenedor .tabulado-contenedor .acordion-panel:not(:last-child) {
            margin: 0 0 10px
        }

        #datos-contenedor .tabulado-contenedor .acordion-panel > * {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%
        }

        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata {
            background: #fff;
            border: 1px solid #69c7df;
            display: flex;
            align-items: center;
            min-height: calc(30px + 2.5vmin);
            padding-bottom: 5px;
            padding-top: 5px;
            transition: background-color 0.6s
        }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata strong {
                color: #003f8c;
                flex: 1 1 auto;
                font-size: calc(10px + 1vmin);
                font-weight: 500;
                width: auto;
                max-width: 100%;
                padding: 0 5px 0 0
            }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i {
                flex: 0 0 16px;
                height: 16px;
                width: 16px;
                max-width: 16px
            }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:before, #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:after {
                    content: '';
                    background: #69c7df;
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0
                }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:before {
                    height: 2px;
                    width: 100%;
                    margin: 7px 0;
                    transition: background-color 0.6s
                }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:after {
                    height: 100%;
                    width: 2px;
                    margin: 0 7px;
                    transition: 0.6s;
                    transition-property: background-color,visibility,transform
                }

        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor {
            max-height: 0;
            visibility: hidden;
            overflow: hidden;
            padding-bottom: 0;
            padding-top: 0;
            /*transition: 0.8s ease-out;*/
            transition: 0.8s cubic-bezier(0,1,0,1);
            transition-property: max-height,visibility
        }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row {
                margin-top: 0;
                margin-bottom: 0
            }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row:first-child {
                    padding-top: 15px
                }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row:last-child {
                    padding-bottom: 15px
                }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col {
                    padding-bottom: 7px;
                    padding-left: 1vmin;
                    padding-right: 1vmin;
                    padding-top: 7px
                }

                    #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row {
                        margin-left: -1vmin;
                        margin-right: -1vmin
                    }

                        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row:first-child {
                            margin-top: -7px
                        }

                        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row:last-child {
                            margin-bottom: -7px
                        }

                    #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p {
                        color: #6b6b6b;
                        font-size: 14px
                    }

                        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p:not(:last-child) {
                            margin: 0 0 0.2em
                        }

                        #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p strong {
                            font-weight: 500
                        }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo > .row:not(:first-child), #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo > .col:not(:first-child):not(:nth-child(2)) {
                overflow: hidden;
                transition: 0.6s;
                transition-property: max-height,opacity,visibility
            }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo.activo > .row:not(:first-child), #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo.activo > .col:not(:first-child):not(:nth-child(2)) {
                max-height: 400px;
                transition-timing-function: ease-in
            }

            #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo:not(.activo) > .row:not(:first-child), #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo:not(.activo) > .col:not(:first-child):not(:nth-child(2)) {
                max-height: 0;
                opacity: 0;
                visibility: hidden;
                transition-timing-function: ease-out
            }

                #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo:not(.activo) > .row:not(:first-child) .formulario-control, #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo:not(.activo) > .col:not(:first-child):not(:nth-child(2)) .formulario-control {
                    display: none
                }

        #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata {
            background-color: #69c7df
        }

            #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:before, #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:after {
                background-color: #fff
            }

            #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:after {
                visibility: hidden;
                transform: matrix(1,0,0,0.01,0,0)
            }

        #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
            /*max-height: 200vh;*/
            max-height: 20000vh !important;
            visibility: visible;
            /*transition-timing-function: ease-in;*/
            transition-timing-function: cubic-bezier(1,0,1,0);
        }

#datos-contenedor .boton.azul {
    height: calc(40px + 2vmin);
    width: calc(150px + 11vmin)
}

    #datos-contenedor .boton.azul strong {
        font-size: 20px
    }

#datos-contenedor .parrafos {
    color: #000;
    font-size: 15px
}

@media(max-width:1199.98px) {
    #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor {
        overflow: auto
    }
}

@media(min-width:576px) {
    #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 180vh
    }
}

@media(min-width:768px) {
    #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 160vh
    }
}

@media(min-width:992px) {
    #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 140vh
    }
}

@media(min-width:1200px) {
    #datos-contenedor .tabulado-patas .tabulado-pata, #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata {
        cursor: pointer
    }

        #datos-contenedor .tabulado-patas .tabulado-pata:hover p {
            color: #003f8c
        }

    #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 120vh
    }
}

@media(min-width:1400px) {
    #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 100vh
    }
}


/*01 datos*/
/*datos contenedor*/
.cliente #datos-contenedor .tabulado-patas:before {
    content: '';
    background: #f3f3f3;
    display: block;
    height: 1px;
    width: calc(100% - 30px);
    position: absolute;
    bottom: 15px;
    left: 15px
}

.cliente #datos-contenedor .tabulado-patas .tabulado-pata p {
    display: flex;
    align-items: center;
    height: calc(30px + 2.5vmin);
    padding: 0 15px;
    transition: color 0.4s
}

.cliente #datos-contenedor .tabulado-patas .tabulado-pata.activo p {
    color: #003f8c
}

.cliente #datos-contenedor .tabulado-patas .tabulado-pata p:before {
    content: '';
    background: #e13432;
    display: block;
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.4s;
    transition-property: visibility,transform
}

.cliente #datos-contenedor .tabulado-patas .tabulado-pata:not(.activo) p:before {
    visibility: hidden;
    transform: matrix(0.01,0,0,1,0,0)
}

.cliente #datos-contenedor .tabulado-contenedor {
    transition: 0.6s;
    transition-property: opacity,visibility
}

    .cliente #datos-contenedor .tabulado-contenedor:not(.activo) {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1
    }

    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel {
        margin: 0
    }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel:not(:last-child) {
            margin: 0 0 10px
        }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel > * {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%
        }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata {
            background: #fff;
            border: 1px solid #69c7df;
            display: flex;
            align-items: center;
            min-height: calc(30px + 2.5vmin);
            padding-bottom: 5px;
            padding-top: 5px;
            transition: background-color 0.6s
        }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata strong {
                color: #003f8c;
                flex: 1 1 auto;
                font-size: calc(10px + 1vmin);
                font-weight: 500;
                width: auto;
                max-width: 100%;
                padding: 0 5px 0 0
            }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i {
                flex: 0 0 16px;
                height: 16px;
                width: 16px;
                max-width: 16px
            }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:before, .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:after {
                    content: '';
                    background: #69c7df;
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0
                }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:before {
                    height: 2px;
                    width: 100%;
                    margin: 7px 0;
                    transition: background-color 0.6s
                }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata i:after {
                    height: 100%;
                    width: 2px;
                    margin: 0 7px;
                    transition: 0.6s;
                    transition-property: background-color,visibility,transform
                }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor {
            max-height: 0;
            visibility: hidden;
            overflow: hidden;
            padding-bottom: 0;
            padding-top: 0;
            transition: 0.8s ease-out;
            transition-property: max-height,visibility
        }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row {
                margin-top: 0;
                margin-bottom: 0
            }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row:first-child {
                    padding-top: 15px
                }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row:last-child {
                    padding-bottom: 15px
                }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col {
                    padding-bottom: 7px;
                    padding-left: 1vmin;
                    padding-right: 1vmin;
                    padding-top: 7px
                }

                    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row {
                        margin-left: -1vmin;
                        margin-right: -1vmin
                    }

                        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row:first-child {
                            margin-top: -7px
                        }

                        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col .row:last-child {
                            margin-bottom: -7px
                        }

                    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p {
                        color: #6b6b6b;
                        font-size: 14px
                    }

                        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p:not(:last-child) {
                            margin: 0 0 0.2em
                        }

                        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor > .row .col p strong {
                            font-weight: 500
                        }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo > .row:not(:first-child), .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo > .col:not(:first-child):not(:nth-child(2)) {
                overflow: hidden;
                transition: 0.6s;
                transition-property: max-height,opacity,visibility
            }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo.activo > .row:not(:first-child), .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo.activo > .col:not(:first-child):not(:nth-child(2)) {
                max-height: 400px;
                transition-timing-function: ease-in
            }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo:not(.activo) > .row:not(:first-child), .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo:not(.activo) > .col:not(:first-child):not(:nth-child(2)) {
                max-height: 0;
                opacity: 0;
                visibility: hidden;
                transition-timing-function: ease-out
            }

                .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor.activador-objetivo:not(.activo) > .row:not(:first-child) .formulario-control, .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor .row.activador-objetivo:not(.activo) > .col:not(:first-child):not(:nth-child(2)) .formulario-control {
                    display: none
                }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata {
            background-color: #69c7df
        }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:before, .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:after {
                background-color: #fff
            }

            .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-pata i:after {
                visibility: hidden;
                transform: matrix(1,0,0,0.01,0,0)
            }

        .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
            max-height: 200vh;
            visibility: visible;
            transition-timing-function: ease-in
        }

.cliente #datos-contenedor .boton.azul {
    height: calc(40px + 2vmin);
    width: calc(150px + 11vmin)
}

    .cliente #datos-contenedor .boton.azul strong {
        font-size: 20px
    }

.cliente #datos-contenedor .parrafos {
    color: #000;
    font-size: 15px
}

@media(max-width:1199.98px) {
    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-contenedor {
        overflow: auto
    }
}

@media(min-width:576px) {
    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 180vh
    }
}

@media(min-width:768px) {
    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 160vh
    }
}

@media(min-width:992px) {
    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 140vh
    }
}

@media(min-width:1200px) {
    .cliente #datos-contenedor .tabulado-patas .tabulado-pata, .cliente #datos-contenedor .tabulado-contenedor .acordion-panel .acordion-pata {
        cursor: pointer
    }

        .cliente #datos-contenedor .tabulado-patas .tabulado-pata:hover p {
            color: #003f8c
        }

    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 120vh
    }
}

@media(min-width:1400px) {
    .cliente #datos-contenedor .tabulado-contenedor .acordion-panel.activo .acordion-contenedor {
        max-height: 100vh
    }
}

/*03 proformas*/ /*proformas contenedor*/

.cliente #proformas-contenedor .boton.azul {
    height: calc(40px + 1.5vmin);
    width: calc(150px + 5vmin)
}

/*06 documentos*/ /*documentos contenedor*/

.cliente #documentos-contenedor .boton.verde {
    width: 150px
}

.cliente #documentos-contenedor .boton.verde15 {
    width: 150px
}

.cliente #documentos-contenedor .boton.verde_200 {
    width: 220px
}

.cliente #documentos-contenedor .boton.plomo15 {
    width: 150px
}


/*09 pago*/
/*pago monto*/
#pago-monto #pago-tabla ul {
    border-bottom: 1px solid #eee;
    width: 100%;
    list-style: none;
    padding: 15px 5.5vmin
}

    #pago-monto #pago-tabla ul:first-of-type {
        border-top: 1px solid #eee
    }

    #pago-monto #pago-tabla ul li {
        width: 100%;
        padding: 5px
    }

        #pago-monto #pago-tabla ul li:first-child {
            display: flex
        }

            #pago-monto #pago-tabla ul li:first-child .icon-pago {
                background: #69c7df;
                border-radius: 5px;
                color: rgba(255,255,255,0.7);
                display: flex;
                align-items: center;
                flex: 0 0 45px;
                justify-content: center;
                font-size: 20px;
                height: 40px;
                width: 45px;
                max-width: 45px
            }

            #pago-monto #pago-tabla ul li:first-child p {
                flex: 1 1 auto;
                width: auto;
                max-width: 100%;
                padding: 0 0 0 3vmin
            }

                #pago-monto #pago-tabla ul li:first-child p * {
                    display: block;
                    width: 100%
                }

                #pago-monto #pago-tabla ul li:first-child p strong {
                    color: #6b6b6b;
                    font-size: calc(15px + 0.1vmin);
                    margin: 0 0 5px
                }

                #pago-monto #pago-tabla ul li:first-child p small {
                    color: #a6b7bf;
                    font-size: 14px
                }

        #pago-monto #pago-tabla ul li:not(:first-child) {
            display: flex;
            align-items: center
        }

            #pago-monto #pago-tabla ul li:not(:first-child) span {
                color: #69c7df;
                flex: 0 0 55px;
                font-weight: 500;
                width: 55px;
                max-width: 55px
            }

                #pago-monto #pago-tabla ul li:not(:first-child) span + * {
                    color: #54667a;
                    flex: 1 1 auto;
                    width: auto;
                    max-width: 100%
                }

            #pago-monto #pago-tabla ul li:not(:first-child) time {
                font-size: 14px
            }

            #pago-monto #pago-tabla ul li:not(:first-child) b {
                font-size: 18px;
                font-weight: 500
            }

#pago-monto fieldset legend {
    color: #6b6b6b;
    display: block;
    font-size: 13px;
    width: 100%;
    margin: 0 0 15px;
    top: 15px
}

#pago-monto fieldset .activador-objetivo#bancaria:before {
    content: '';
    border-bottom: 15px solid #e6f3f6;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: block;
    height: 0;
    width: 0;
    margin: 0 0 0 50%
}

#pago-monto fieldset .activador-objetivo#bancaria strong {
    font-weight: 500
}

#pago-monto .activador-objetivo {
    transition: 0.6s;
    transition-property: max-height,opacity,visibility
}

    #pago-monto .activador-objetivo:not(.activo) {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition-timing-function: ease-out
    }

        #pago-monto .activador-objetivo:not(.activo) .formulario-control {
            display: none
        }

    #pago-monto .activador-objetivo.activo {
        max-height: 150px;
        transition-timing-function: ease-in
    }

@media(min-width:576px) {
    #pago-monto #pago-tabla > * li:first-child {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%
    }

    #pago-monto #pago-tabla > * li:not(:first-child) {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
        text-align: center
    }

    #pago-monto #pago-tabla ol {
        height: calc(30px + 2vmin);
        padding: 0 5.5vmin
    }

    #pago-monto #pago-tabla ul {
        display: flex
    }

        #pago-monto #pago-tabla ul li:not(:first-child) span {
            display: none
        }

    #pago-monto fieldset .activador-objetivo#bancaria strong {
        margin: 0 5px 0 0
    }
}

@media(min-width:768px) {
    #pago-monto #pago-tabla > * li:first-child {
        flex: 0 0 40%;
        width: 40%;
        max-width: 40%
    }

    #pago-monto #pago-tabla > * li:not(:first-child) {
        flex: 0 0 30%;
        width: 30%;
        max-width: 30%
    }

    #pago-monto fieldset .activador-objetivo#bancaria:before {
        margin-left: 66.67%
    }
}
/*pago total*/ #pago-total .bgcolor-cian1 > * {
    display: block;
    text-align: center
}

#pago-total .boton.azul {
    height: calc(40px + 1vmin)
}

/*10 pago*/ #formulario-pago .formulario-control, #formulario-pago .formulario-marcador {
    height: calc(40px + 2vmin)
}

/*respuesta*/
#respuesta-contenedor .titulo {
    font-size: calc(12px + 2.8vmin);
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase
}

#respuesta-contenedor .parrafos {
    font-size: calc(12px + 0.8vmin)
}

    #respuesta-contenedor .parrafos a {
        color: #003f8c
    }

#respuesta-contenedor .bgcolor-blanco > .col {
    padding: calc(15px + 1.5vmin)
}

    #respuesta-contenedor .bgcolor-blanco > .col table {
        border: 2px solid #69c7df;
        border-collapse: collapse;
        width: 100%
    }

        #respuesta-contenedor .bgcolor-blanco > .col table thead {
            text-align: center;
            text-transform: uppercase
        }

            #respuesta-contenedor .bgcolor-blanco > .col table thead tr th {
                font-size: calc(12px + 0.8vmin)
            }

        #respuesta-contenedor .bgcolor-blanco > .col table tbody {
            text-align: left
        }

            #respuesta-contenedor .bgcolor-blanco > .col table tbody tr > * {
                font-size: calc(12px + 0.5vmin)
            }

        #respuesta-contenedor .bgcolor-blanco > .col table > * tr > * {
            border: 1px solid #69c7df;
            padding: calc(5px + 1vmin)
        }

        #respuesta-contenedor .bgcolor-blanco > .col table > * tr th {
            font-weight: 700
        }

    #respuesta-contenedor .bgcolor-blanco > .col footer {
        margin: calc(15px + 1.5vmin) 0 0;
        text-align: center
    }

        #respuesta-contenedor .bgcolor-blanco > .col footer .boton {
            height: calc(40px + 2vmin);
            width: calc(150px + 11vmin)
        }

            #respuesta-contenedor .bgcolor-blanco > .col footer .boton strong {
                font-size: calc(15px + 0.5vmin)
            }

@media(min-width:1200px) {
    #respuesta-contenedor .parrafos a:hover {
        text-decoration: underline
    }
}

/*supervisor*/
.supervisor #cabecera .container-fluid {
    width: 100% !important;
    max-width: none !important
}

.supervisor main > .contenedor#login-contenedor .container-fluid {
    max-width: 1800px
}

@media(min-width:768px) {
    .supervisor main {
        display: flex
    }
}

@media(min-width:992px) {
    .supervisor main > .contenedor#login-contenedor .container-fluid .col:before {
        content: '';
        background: #fff;
        display: block;
        height: 200vh;
        width: 100vw;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }

    .supervisor main > .contenedor#login-contenedor .container-fluid .col > * {
        width: 90%
    }

    .supervisor#login #pie .col.tex-sm-left {
        color: rgba(0,0,0,0.3)
    }
}

@media(min-width:1400px) {
    .supervisor main > .contenedor#login-contenedor .container-fluid {
        width: 90%;
        max-width: 1800px
    }

    .supervisor main > .contenedor:not(#login-contenedor) > .container-fluid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: calc(15px + 3.5vmin);
        padding-right: calc(15px + 3.5vmin)
    }
}

/*control*/ .control {
    display: block;
    height: 1px;
    width: 1px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9
}

/*sanguche*/
.sanguche {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 30px;
    width: 30px;
    padding: 6px 4px
}

    .sanguche u {
        background: #69c7df;
        display: block;
        height: 2px;
        width: 100%
    }

/*paginador*/
.paginador {
    display: flex;
    justify-content: flex-end;
    max-width: 100%;
    margin: 30px 0 0
}

    .paginador a {
        display: flex;
        align-items: center;
        flex: 0 0 30px;
        justify-content: center;
        height: 30px;
        width: 30px
    }

        .paginador a.paginador-flecha {
            background: #003f8c;
            border: 1px solid #fff;
            color: #fff;
            font-size: 20px
        }

            .paginador a.paginador-flecha:first-child {
                border-radius: 5px 0 0 5px
            }

            .paginador a.paginador-flecha:last-child {
                border-radius: 0 5px 5px 0
            }

    .paginador ul {
        display: flex;
        font-size: 15px;
        list-style: none
    }

        .paginador ul li a {
            border: 1px solid #e6f3f6
        }

        .paginador ul li.activo a {
            background: #a6b7bf;
            color: #fff
        }

@media(min-width:1200px) {
    .paginador a.paginador-flecha {
        transition: 0.4s;
        transition-property: background-color,border-color,color
    }

        .paginador a.paginador-flecha:hover {
            background: #fff;
            border-color: #a6b7bf;
            color: #003f8c
        }

    .paginador ul li a {
        transition: 0.4s;
        transition-property: background-color,color
    }

        .paginador ul li a:hover {
            background: #a6b7bf;
            color: #fff
        }

    .paginador ul li.activo a {
        cursor: default
    }
}

/*lateral*/
#control0 ~ #lateral {
    border-top: 70px solid transparent;
    width: 320px
}

    #control0 ~ #lateral strong {
        margin: 0 10px;
        transition: 0.6s;
        transition-property: font-size,margin,opacity,visibility
    }

    #control0 ~ #lateral > * {
        width: 100%
    }

    #control0 ~ #lateral header {
        height: calc(40px + 1vmin)
    }

        #control0 ~ #lateral header strong {
            font-size: 12px
        }

    #control0 ~ #lateral ul {
        padding: 0 0 0 2px
    }

        #control0 ~ #lateral ul li {
            width: 100%
        }

            #control0 ~ #lateral ul li:not(:last-child):before {
                content: '';
                background: #fff;
                height: 1px;
                width: 90%;
                position: absolute;
                bottom: 0;
                left: 5%
            }

            #control0 ~ #lateral ul li a {
                color: #003f8c;
                display: flex;
                align-items: center;
                height: calc(30px + 2vmin);
                width: 100%;
                transition: background-color 0.4s
            }

                #control0 ~ #lateral ul li a:before {
                    content: '';
                    background: #003f8c;
                    display: block;
                    height: 100%;
                    width: 2px;
                    visibility: hidden;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: matrix(1,0,0,0.01,0,0);
                    transition: 0.4s;
                    transition-property: visibility,transform
                }

                #control0 ~ #lateral ul li a .icon {
                    font-size: 20px;
                    margin: 0 0 0 calc(10px + 5%)
                }

                #control0 ~ #lateral ul li a strong {
                    font-weight: 500
                }

            #control0 ~ #lateral ul li.activo a {
                background: #fff
            }

                #control0 ~ #lateral ul li.activo a:before {
                    visibility: visible;
                    transform: matrix(1,0,0,1,0,0)
                }

                #control0 ~ #lateral ul li.activo a .icon {
                    color: #e13432
                }

#control0 ~ .contenedor .container-fluid > header.row {
    align-items: center
}

    #control0 ~ .contenedor .container-fluid > header.row .col {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

@media(max-width:767.98px) {
    #control0 ~ #lateral {
        height: 100vh;
        visibility: hidden;
        position: fixed;
        left: -320px;
        top: 0;
        z-index: 1;
        transition: matrix(1,0,0,1,0,0);
        transition: 0.6s;
        transition-property: visibility,transform
    }

    #control0:checked ~ #lateral {
        visibility: visible;
        transform: matrix(1,0,0,1,320,0)
    }
}

@media(min-width:768px) {
    #control0 ~ #lateral {
        border-bottom: 60px solid transparent;
        flex: 0 0 calc(30px + 22.5vmin);
        width: calc(30px + 22.5vmin);
        transition: 0.6s;
        transition-property: flex,width
    }

        #control0 ~ #lateral header .sanguche {
            display: flex !important
        }

    #control0 ~ .contenedor {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 30px - 22.5vmin);
        transition: max-width 0.6s
    }

        #control0 ~ .contenedor .container-fluid > header.row .col:first-child {
            display: none
        }

    #control0:checked ~ #lateral {
        flex: 0 0 50px;
        width: 50px
    }

        #control0:checked ~ #lateral strong {
            font-size: 0;
            margin: 0;
            opacity: 0;
            visibility: hidden
        }

    #control0:checked ~ .contenedor {
        max-width: calc(100% - 50px)
    }
}

@media(min-width:1200px) {
    #control0 ~ #lateral {
        border-bottom-width: 50px
    }

        #control0 ~ #lateral header label {
            border-radius: 5px;
            transition: background-color 0.4s
        }

            #control0 ~ #lateral header label:hover {
                background-color: #fff
            }

        #control0 ~ #lateral ul li a:hover {
            background-color: #fff
        }

            #control0 ~ #lateral ul li a:hover:before {
                visibility: visible;
                transform: matrix(1,0,0,1,0,0)
            }

        #control0 ~ #lateral ul li.activo a {
            cursor: default
        }
}

/*clientes*/
/*clientes contenedor*/
#clientes-contenedor nav.row .col {
    padding-bottom: 7px;
    padding-top: 7px
}

    #clientes-contenedor nav.row .col .boton.azul {
        width: calc(160px + 1vmin)
    }

    #clientes-contenedor nav.row .col .formulario-campo {
        width: 290px
    }

#clientes-contenedor .ove-auto {
    border: 1px solid #e6f3f6
}

    #clientes-contenedor .ove-auto #clientes-tabla {
        padding-left: 5vmin;
        padding-right: 5vmin
    }

        #clientes-contenedor .ove-auto #clientes-tabla > * ul li, #clientes-contenedor .ove-auto #clientes-tabla > * ul li > * {
            vertical-align: middle
        }

        #clientes-contenedor .ove-auto #clientes-tabla > * ul li {
            border-bottom: 1px solid #e6f3f6;
            display: table-cell;
            white-space: nowrap
        }

        #clientes-contenedor .ove-auto #clientes-tabla header {
            display: table-header-group
        }

            #clientes-contenedor .ove-auto #clientes-tabla header ul li {
                height: calc(40px + 1vmin);
                padding: 5px 10px
            }

        #clientes-contenedor .ove-auto #clientes-tabla div {
            display: table-row-group
        }

            #clientes-contenedor .ove-auto #clientes-tabla div ul {
                display: table-row
            }

                #clientes-contenedor .ove-auto #clientes-tabla div ul li {
                    padding: 10px
                }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li .icon {
                        font-size: 20px
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li > .icon {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        height: 30px;
                        width: 30px
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(1):before {
                        content: '';
                        /*background: #003f8c;*/
                        display: block;
                        height: 100%;
                        width: 2px;
                        position: absolute;
                        left: calc(-15px - 3.5vmin);
                        top: 0;
                        transition: 0.2s;
                        transition-property: visibility,transform
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(1) figure {
                        display: flex;
                        align-items: center
                    }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(1) figure .avatar {
                            flex: 0 0 35px;
                            height: 35px;
                            width: 35px;
                            max-width: 35px
                        }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(1) figure figcaption {
                            flex: 1 1 auto;
                            padding: 0 0 0 10px;
                            white-space: nowrap
                        }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(7) .icon.icon-lupa1 {
                        color: #003f8c;
                        font-size: 13px
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(9) .icon.icon-agregar {
                        color: #a6b7bf
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(10) b {
                        border-radius: 50%;
                        color: #fff;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        height: 25px;
                        width: 25px;
                        margin: 0 0 0 5px
                    }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(10) b.rojo {
                            background: #e13432
                        }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(10) b.verde {
                            background: #06ad16
                        }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(11) .boton.cian {
                        width: 90px
                    }

                    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(11) .boton.rojo {
                        width: 50px
                    }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(11) .boton.rojo:before {
                            opacity: 0.5
                        }

                        #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(11) .boton.rojo .icon-tacho {
                            margin-right: 0
                        }

                #clientes-contenedor .ove-auto #clientes-tabla div ul:not(:hover) li:nth-child(1):before {
                    visibility: hidden;
                    transform: matrix(1,0,0,0.01,0,0)
                }

@media(min-width:1200px) {
    #clientes-contenedor .ove-auto #clientes-tabla div ul li > .icon {
        transition: color 0.4s
    }

        #clientes-contenedor .ove-auto #clientes-tabla div ul li > .icon:hover {
            color: #69c7df !important
        }

    #clientes-contenedor .ove-auto #clientes-tabla div ul li:nth-child(5) a {
        cursor: text
    }
}

/*crear*/
/*crear contenedor*/
#crear-contenedor #formulario-crear > div.col {
    border: 1px solid #e6f3f6
}

    #crear-contenedor #formulario-crear > div.col fieldset.row legend {
        color: #54667a;
        font-weight: 500;
        text-transform: uppercase
    }

    #crear-contenedor #formulario-crear > div.col fieldset.row .row:first-child {
        margin-top: -7px
    }

    #crear-contenedor #formulario-crear > div.col fieldset.row .row:last-child {
        margin-bottom: -7px
    }

    #crear-contenedor #formulario-crear > div.col fieldset.row .row .col {
        padding-bottom: 7px;
        padding-top: 7px
    }

    #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#parcial, #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#mancomunado > .col:not(:first-child) {
        overflow: hidden;
        transition: 0.6s;
        transition-property: max-height,opacity,visibility
    }

        #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#parcial:not(.activo), #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#mancomunado:not(.activo) > .col:not(:first-child) {
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            transition-timing-function: ease-out
        }

            #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#parcial:not(.activo) .formulario-control, #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#mancomunado:not(.activo) > .col:not(:first-child) .formulario-control {
                display: none
            }

        #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#parcial.activo {
            max-height: 400px;
            transition-timing-function: ease-in
        }

    #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#mancomunado > .col:first-child .interruptor span {
        flex: 0 0 auto
    }

    #crear-contenedor #formulario-crear > div.col fieldset.row.activador-objetivo#mancomunado.activo > .col:not(:first-child) {
        max-height: 700px;
        transition-timing-function: ease-in
    }

#crear-contenedor #formulario-crear > footer.col col {
    padding-bottom: 5px;
    padding-top: 5px
}

    #crear-contenedor #formulario-crear > footer.col col .boton {
        height: calc(40px + 0.5vmin);
        width: calc(150px + 3vmin)
    }

/*contrasena*/ /*contrasena contenedor*/

#contrasena-contenedor #formulario-contrasena > div.col {
    border: 1px solid #e6f3f6
}

/*estado*/
/*estado perfil*/
#estado-perfil div.row {
    border: 1px solid #e6f3f6
}

    #estado-perfil div.row figure:before {
        content: '';
        border-right: 1px dotted #e6f3f6;
        height: calc(100% - 30px);
        width: 1px;
        position: absolute;
        right: 0;
        top: 15px
    }

    #estado-perfil div.row figure .avatar {
        height: 17.5vmin;
        width: 17.5vmin;
        margin: 0 0 2vmin
    }

    #estado-perfil div.row figure figcaption {
        font-size: calc(10px + 0.8vmin);
        width: 100%
    }

    #estado-perfil div.row dt {
        color: #003f8c;
        font-size: 13px;
        font-weight: 500;
        margin: 0 0 calc(5px + 0.5vmin);
        text-transform: uppercase
    }

    #estado-perfil div.row dd {
        color: #6b6b6b;
        font-size: 14px
    }

        #estado-perfil div.row dd:not(:last-child) {
            margin: 0 0 calc(5px + 1.5vmin)
        }

@media(min-width:992px) {
    #estado-perfil {
        flex: 0 0 33.33%;
        width: 33.33%;
        max-width: 33.33%
    }

        #estado-perfil div.row figure:before {
            content: '';
            border-bottom: 1px dotted #e6f3f6;
            border-right: none;
            height: 1px;
            width: calc(100% - 30px);
            bottom: 0;
            right: 15px;
            top: auto
        }
}

@media(min-width:1200px) {
    #estado-perfil {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%
    }

        #estado-perfil div.row dd a[href^='tel:'] {
            cursor: text
        }

        #estado-perfil div.row dd a:not([href^='tel:']) {
            transition: color 0.4s
        }

            #estado-perfil div.row dd a:not([href^='tel:']):hover {
                color: #69c7df
            }
}

@media(min-width:1400px) {
    #estado-perfil {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%
    }
}
/*estado pasos*/
#estado-pasos #pasos {
    margin-left: -15px;
    margin-right: -15px
}

#estado-pasos > div.row {
    padding: 15px
}

    #estado-pasos > div.row > .col {
        border: 1px solid #e6f3f6;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-bottom: 8vmin;
        padding-top: 4vmin
    }

    #estado-pasos > div.row .col > .icon {
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        height: 60px;
        width: 60px;
        margin: 0 auto calc(15px + 0.5vmin)
    }

        #estado-pasos > div.row .col > .icon.icon-visto {
            background: #55ce63
        }

        #estado-pasos > div.row .col > .icon.icon-aspa {
            background: #e13432
        }

    #estado-pasos > div.row .col > p {
        color: #6b6b6b;
        font-size: calc(15px + 0.2vmin);
        text-align: center
    }

    #estado-pasos > div.row .col > .boton {
        height: calc(40px + 2vmin);
        width: 100%
    }

        #estado-pasos > div.row .col > .boton strong {
            font-size: calc(15px + 0.3vmin)
        }

@media(min-width:992px) {
    #estado-pasos {
        flex: 0 0 66.67%;
        width: 66.67%;
        max-width: 66.67%
    }
}

@media(min-width:1200px) {
    #estado-pasos {
        flex: 0 0 80%;
        width: 80%;
        max-width: 80%
    }
}

@media(min-width:1400px) {
    #estado-pasos {
        flex: 0 0 75%;
        width: 75%;
        max-width: 75%
    }
}
/*estado volver*/
#estado-volver {
    text-align: center
}

@media(min-width:992px) {
    #estado-volver {
        flex: 0 0 33.33%;
        width: 33.33%;
        max-width: 33.33%
    }
}

@media(min-width:1200px) {
    #estado-volver {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%
    }
}

@media(min-width:1400px) {
    #estado-volver {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%
    }
}