.wraper-sistema{
    position: relative;
    color: #6f6f6f;
    width: 1000px;
    min-width: 1000px;
    margin: 10px auto;
    padding: 0;
    box-shadow: 0 0 5px rgba(0,0,0,0.15)
}
    .encabezado-sistema{
        text-align: center;
        width: 1000px;
        height: 70px;
        background-image: url(../../images/encabezado.jpg);
    }
        .encabezado-sistema .sucursal{
            font-size: 24px;
            font-weight: 400;
            color: #199919;
        }
.wraper-sistema ul{width: 100%;line-height: }
.wraper-sistema li{display: inline-block;float: left;width: 9%;text-align: center;padding: 4px 0;background-color: #f6f6f6;font-size: 13px; cursor: pointer;border-top: 1px solid #f6f6f6;}
.wraper-sistema.bi li{display: inline-block;float: left;width: 11.10%;text-align: center;padding: 4px 0;background-color: #f6f6f6;font-size: 13px; cursor: pointer;border-top: 1px solid #f6f6f6;color: #6f6f6f;}
.wraper-sistema li:hover{background-color: #fff;border-top:1px solid #198999;}

.contenido-sistema{
    clear: both;
    width: 100%;
    border:1px solid #a2efa8;
    background-color: white;
}

    .cabezal{
        clear: both;
        width: 100%;
        height: 24px;
        font-size: 14px;
        color: #468a38;
        text-align: center;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,e4f5fc+50,d4eff9+51,d4eff9+100 */
background: #e4f5fc; /* Old browsers */
background: -moz-linear-gradient(top, #d2faca 0%, #d2faca 50%, #bdf3b8 51%, #bdf3b8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d2faca 0%,#d2faca 50%,#bdf3b8 51%,#bdf3b8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d2faca 0%,#d2faca 50%,#bdf3b8 51%,#bdf3b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2faca', endColorstr='#bdf3b8',GradientType=0 ); /* IE6-9 */
    }
    .listado{
        clear: both;
        width: 100%;
        height: 24px;
        font-size: 14px;
        color: #999;
        text-align: center;
        background-color: white;
    }
    .resultados .listado:nth-child(2n+0), .lista-de-estudios .listado:nth-child(2n+0){
        background-color: #f9f9f9;
    }
    .resultados{
        height: 0px;
        overflow: hidden;
    }
    .resultados.ver{
        height: 100px;
        transition:.6s;
    }
    .lista-de-estudios .listado.especial div{font-size: 10px !important;}
    .resultados .listado.especial div{font-size: 11px !important;}
    .resultados .listado.especial div a{color: #999;}
    .resultados .listado.especial div a:hover{color: #199919;}
    .listado img.email{position: relative;top: 5px;}
    .border-top{border-top: 1px solid #a2efc5; }
    .border-bottom{border-bottom: 1px solid #a2efc5; }
    /*.cabezal.especial, .renglon.especial{text-align: left;}*/
    .cabezal.especial div, .listado.especial div{display:inline-block; text-align:center;float:left;border-left: 1px solid white;font-size: 13px;line-height: 24px;}
    .cabezal.especial.no-float div, .listado.especial.no-float div {float: none !important;}
    .renglon{
        clear: both;
        width: 100%;
        height: 28px;
        line-height: 28px;
        background-color: #fff;
    }
        .renglon div{
            display: inline-block;
            text-align: center;
            padding-top: 2px;
            float: left;
            font-size: 12px;
            line-height: 25px;
        }
        .renglon div.left-text{
            text-align: left;
        }
        .renglon div.left-text span{
            display: inline-block;
            text-indent: 7px;
        }
        .renglon div img{cursor:pointer; opacity: .6; transition:.3s;} .renglon div img:hover{opacity: 1; transition:.3s;}
        .renglon input.sistema, .pie-recepcion input.sistema, .listado input.sistema, .renglon select.sistema{
            display: inline-block;
            background-color: #fff;
            border: 1px solid #a2efc5;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            behavior: url(../border.htc);
            border-radius: 3px;
            outline: none;
            color: #b2b2b2;
            height: 1.2rem;
            width: 100%;
            font-size: 10px;
            margin: 0;
            letter-spacing: .3pt;
            text-indent: 4px;
            padding: 0;
            box-shadow: none;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            transition: all .3s; 
        }
        .renglon input.sistema:focus, .pie-recepcion input.sistema:focus, .listado input.sistema:focus{
            display: inline-block;
            background-color: #fff;
            border: 1px solid #a2efc5;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            behavior: url(../border.htc);
            border-radius: 3px;
            outline: none;
            color: #b2b2b2;
            height: 1.2rem;
            width: 100%;
            font-size: 10px;
            margin: 0;
            letter-spacing: .3pt;
            text-indent: 4px;
            padding: 0;
            box-shadow: 0 0 4px rgba(60,100,255,0.9);
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            transition: all .3s; 
        }
    .pie-recepcion{
        clear: both;
        width: 100%;
        height: 28px;
        line-height: 28px;
        background-color: #f2f2f2;
    }
        .pie-recepcion div{
            display: inline-block;
            text-align: center;
            padding-top: 2px;
            float: left;
            font-size: 12px;
            line-height: 25px;
        }
.boton-sistema{
    margin: 0 5px;
    cursor: pointer;
    background-color: #e4fced;
    border:1px solid #a2efa8;
    padding: 0 10px;
    color: #666;
    border-radius: 6px;
    line-height: 20px !important;
    transition:.3s;
}
.boton-sistema:hover{
    background-color: #a2efb3;
    border:1px solid #e4fce5;
    color: white;
    transition:.3s;
}

.wraper-sistema.bi .paso1{position: relative; width: 125px;top: -13px;right: -800px;}
.paso1{
    position: relative;
    width: 125px;
    top: -22px;
    right: -815px;
}
.paso2{
    position: relative;
    width: 125px;
    top: 22px;
    right: -250px;
}
.paso3{
    position: absolute;
    width: 125px;
    bottom: 9px;
    right: 257px;
}
.paso4{
    position: absolute;
    width: 125px;
    bottom: 9px;
    left: 20px;
}
.modal-sistema, .modal-pdf{
    position: absolute;
    margin-left: 50%;
    top: 50%;
    width: 0%;
    height: 0%;
    background-color: rgba(0,0,0,0.7);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: -1;
    transition:.2s;
}
    .modal-pdf{overflow: hidden;}
    .modal-sistema.full, .modal-pdf.full{
        width: 100%;
        height: 100%;
        opacity: 1;
        z-index: 1;
        transition:.2s;
    }

    .wraper-caja{
        width:580px; margin:100px auto; background:#fff; box-shadow: 0 0 7px rgba(255,255,255,1);padding-bottom: 1px;
    }
        .x, .x2 {width: 20px;
            cursor: pointer;
            text-align: center;
            line-height: 15px;
            position: absolute;
            background-color: #e4f5fc;
            border: 1px solid #a2efc5;
            color: #a2efc5;
            padding: 0 3px;
            margin-top: 3px;
            margin-left: 558px;
            font-size: 14px;}

            .x2 {margin-left: 971px !important;}

        .x:hover, .x2:hover {
            background-color: red;
            color: white;
        }
        .wraper-tabla-caja{
            position: relative;
            margin:10px;
            border:1px solid #a2efc5;
        }