﻿


/***************************************************
                Definicion General
***************************************************/


html {
    /*font-size: 1px !important; quite el important por que no dejaba que se redimensionara en resoluciones pequeñas*/
    font-size: 1px;
    overflow: auto;

}

body {
    font-size: 16rem;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    box-sizing: border-box;
    /*font-family: Thonburi-Regular;*/
    font-family: Calibri;
    background: rgba(0, 0, 0, 0.88);
}



.fullWapper #wrapper, 
.fullWapper #fondo, 
.fullWapper #contenedorSeccion, 
.fullWapper #wrapperMenu,
.fullWapper .fullWapperInner, 
.fullWapper body, 
.fullWapper {
    height: 100%;
    min-width: 100% !important;
    overflow: hidden;
}

input:focus, select:focus, button:focus {
    outline: none;
    box-shadow: none;
}

article, a, aside, details, span, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, div, span {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0
}

.clear_input {
    text-decoration: none !important;
    color: inherit;
}

/***************************************************
                    Botones
***************************************************/
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

.crane-boton {
    border-radius: 5rem;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    text-align: center;
    border: none;
    font-size: 14rem;
    height: 24rem;
    font-family: Calibri;
    line-height: 26rem;
    min-height: 26rem !important;
    width: 100%;
}

.crane-boton:focus {
    outline: none;
    box-shadow: none;
}

.crane-boton:hover {
    border-radius: 5rem;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    text-align: center;
    border: none;
    font-size: 13rem;
}


.crane-boton-deshabilitado {
    pointer-events: none;
}

.crane-boton-icono {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 6rem 12rem;
    font-size: 14rem;
    line-height: 1.42857143;
    border-radius: 4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.crane-boton-icono-chico {
    height: 27rem;
    width: 27rem;
    text-align: center;
    font-size: 19rem !important;
    letter-spacing: normal !important;
    /* line-height: 13rem; */
    /* margin: 0; */
    padding: 0;
    display: inline-block;
    /* vertical-align: bottom; */
}

.crane-boton-chico {
    width: 90rem;
}

.crane-boton-mediano {
    width: 130rem;
}

.crane-boton-grande {
    width: 160rem;
}

.crane-boton-rectangular {
    display: inline-table;
    text-align: center;
    border-radius: 5rem;
    margin-left: 0rem;
    width: 28rem;
    height: 28rem;
    margin-top: 15rem;
}

.crane-boton-circular {
    border-radius: 30rem;
    display: inline-table;
    text-align: center;
    margin-left: 0rem;
    width: 28rem;
    height: 28rem;
    margin-top: 15rem;
}

.crane-boton-progreso {
    opacity: 1;
}

    .crane-boton-progreso.loading {
        pointer-events: none;
        opacity: 0.5;
        display: block;
    }

    .crane-boton-progreso .progreso {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
    }

    .crane-boton-progreso.loading .progreso {
        display: block;
    }


/***************************************************
          Contenedores de Botones
***************************************************/
.crane-contenedor-btn-cen,
.crane-contenedor-btn-der,
.crane-contenedor-btn-izq {
    line-height: 25rem !important;
}

.crane-contenedor-btn-der {
    text-align: right;
    margin-left: 10rem;
}

.crane-contenedor-btn-izq {
    text-align: left;
    margin-right: 5rem;
}

.crane-contenedor-btn-cen {
    text-align: center;
}

    .crane-contenedor-btn-cen .crane-boton,
    .crane-contenedor-btn-izq .crane-boton
    .crane-contenedor-btn-der .crane-boton {
        margin: 5rem;
    }

.crane-contenedo-boton-modal {
    display: inline-block;
    margin-bottom: 10rem;
    width: 35%;
    text-align: right;
    padding-right: 40rem;
}

.crane-contenedo-titulo-modal {
    display: inline-block;
    margin-top: 12rem;
    margin-left: 15rem;
    margin-bottom: 10rem;
    width: 60%;
}


/***************************************************
                    Paneles
***************************************************/

.crane-panel {
    border-radius: 4rem;
    border-radius: 5rem;
    padding: 0;
}

.crane-panelCentrado {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.crane-panelEmptyText {
    border: 1px solid lightgray;
    padding: 30rem 100rem;
    border-radius: 10rem;
    background: white;
    text-transform: uppercase;
    position: absolute;
    top: 55%;
    left: 50%;
    height: initial !important;
    line-height: initial;
    text-align: center;
    color: #808080;
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.crane-panel-encabezado {
    border-top-right-radius: 3rem;
    border-top-left-radius: 3rem;
    padding: 5rem 15rem;
    font-size: 13rem;
    letter-spacing: 2rem;
}

.crane-panel-contenido {
    padding: 10rem;
    border-bottom-right-radius: 3rem;
    border-bottom-left-radius: 3rem;
    -webkit-user-select: none;
}

    .crane-panel-contenido:before,
    .crane-panel-contenido:after {
        content: " ";
        display: table;
    }

    .crane-panel-contenido:after {
        clear: both;
    }

.crane-panel-herramientas {
    display: inline-block;
    float: right;
    margin-top: -1rem;
    position: relative;
    padding: 0;
    font-family: FontAwesome;
}

    .crane-panel-herramientas > a {
        height: 20rem;
        width: 20rem;
        line-height: 20rem;
        float: right;
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 5rem;
        font-size: 18rem;
        font-weight: lighter !important;
        text-align: center;
        padding-top: 0 !important;
    }


        .crane-panel-herramientas > a.crane-panel-icon-cuadrado {
            border-radius: 3rem;
            padding-top: 2rem;
            text-decoration: none;
            font-size: 14rem;
            padding: 3rem;
        }

/*Dibuja el borde de los formatos*/
.crane-seccion {
    padding: 0 !important;
    border-radius: 3rem;
}


.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/***************************************************
                    Cuadriculas
***************************************************/

.crane-renglon {
    display: inline-flex;
    width: 100%;
}

    .crane-renglon.espacio {
        height: 15rem;
    }

.crane-col-por {
    display: inline-flex;
    /*padding: 5rem;*/
    position: relative;
}

.crane-col-1,
.crane-col-2,
.crane-col-3,
.crane-col-4,
.crane-col-5,
.crane-col-6,
.crane-col-7,
.crane-col-8,
.crane-col-9,
.crane-col-10,
.crane-col-11,
.crane-col-12 {
    display: inline-block;
    padding: 5rem;
    position: relative;
}

.crane-col-1 {
    width: 8.33%;
}

.crane-col-2 {
    width: 16.66%;
}

.crane-col-3 {
    width: 25%;
}

.crane-col-4 {
    width: 33.33%;
}

.crane-col-5 {
    width: 41.66%;
}

.crane-col-6 {
    width: 50%;
}

.crane-col-7 {
    width: 58.33%;
}

.crane-col-8 {
    width: 66.66%;
}

.crane-col-9 {
    width: 75%;
}

.crane-col-10 {
    width: 83.33%;
}

.crane-col-11 {
    width: 91.66%;
}

.crane-col-12 {
    width: 100%;
}

.crane-clearfix {
    float: none !important;
    clear: both;
}

/***************************************************
         alertify
***************************************************/
.ajs-commands .crane-btnAlertify i:before {
    vertical-align: middle;
}

.ajs-commands .crane-btnAlertify {
    display: inline-block;
    width: 28rem;
    height: 28rem;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle;
    margin: 0 3rem;
}

.ajs-commands button.crane-btnAlertify {
    margin: 0;
    display: inline-block;
    border-radius: 15rem;
    line-height: 0rem;
    margin-right: -5rem;
    width: 28rem;
    height: 28rem;
    padding: 0 !important;
    text-align: center !important;
    background-image: none !important;
}


.ajs-content .panelFormDataAlertify {
    border-radius: 5rem;
    padding: 10rem;
    position: relative;
    overflow: hidden;
}


.ajs-dialog.height100p {
    position: relative;
    width: auto;
    display: block;
}

    .ajs-dialog.height100p .ajs-content,
    .ajs-dialog.height100p .ajs-content > div {
        height: 100%;
        width: auto;
        position: relative !important;
        top: 0 !important;
    }

    .ajs-dialog.height100p .ajs-header {
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .ajs-dialog.height100p .ajs-commands {
        z-index: 3;
    }

    .ajs-dialog.height100p .ajs-body {
        height: 100%;
        /* margin: 0; */
        position: relative;
        width: 100%;
        top: -24rem;
        padding-top: 70rem !important;
        /*padding-bottom: 25rem;*/
        z-index: 1;
        display: block !important;
        left: 0;
        margin: 0 !important;
    }

.alertify.ajs-resizable .ajs-dialog.height100p .ajs-body {
    top: 0;
    padding-bottom: 25rem !important;
}
/***************************************************
         Cuadriculas - Busqueda
***************************************************/

.crane-renglon-tablas {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
}

.crane-col-busqueda,
.crane-col-tabla {
    display: inline-block;
    padding: 5rem;
}

.crane-col-busqueda {
    flex-basis: 25%;
    max-width: 25%
}

.crane-col-tabla {
    width: 75%;
    flex-basis: 75%;
    max-width: 75%
}

@media (max-width: 991px) {
    .crane-col-busqueda {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%
    }

    .crane-col-tabla {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        min-height: 400rem;
    }
}

.crane-botones-busqueda {
    width: 40%;
}

/***************************************************
                    Formularios
***************************************************/

.crane-contenedor-form {
    -ms-border-radius: 2rem;
    border-radius: 2rem;
    padding-bottom: 15rem;
}

/*.crane-contenedor-form .crane-renglon {
    margin-left: 10rem;
    margin-right: 10rem;
    width: auto;
}*/

.crane-contenedor-tab {
    margin-left: 10rem;
}

.crane-subtitulo {
    width: 100%;
    margin-bottom: .5%;
    padding-top: 3rem;
    display: flex;
    padding-bottom: 3rem;
}

    .crane-subtitulo > .crane-form-label {
        padding-left: 10rem;
    }

.crane-form-label.crane-negritas {
    font-weight: bold;
}

.crane-subtitulo > .crane-subtitulo-botones {
    text-align: right;
    display: inline-block;
    margin-left: auto;
}

.crane-subtitulo-botones > .crane-subtitulo-boton {
    height: 20rem;
    width: 20rem;
    font-size: 13rem;
    border-radius: 3rem;
    text-align: center;
    font-size: 14rem;
    line-height: 20rem;
    display: inline-block;
}

    .crane-subtitulo-botones > .crane-subtitulo-boton:hover {
        cursor: pointer;
        text-decoration: none;
    }

.crane-form-label {
    font-size: 12rem;
    text-align: left;
    width: 100%;
    font-weight: normal;
    letter-spacing: 1rem;
    line-height: 30rem;
}

.crane-simple-group {
    display: table;
    vertical-align: middle;
}

    .crane-simple-group > .crane-form-label {
        width: auto;
        padding: 0 5rem;
        display: table-cell;
        vertical-align: middle;
    }

    .crane-simple-group > div,
    .crane-simple-group > input {
        width: 100%;
        display: table-cell;
        margin: 0;
    }

.crane-form-input {
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    border-radius: 5rem;
    padding: 0 10rem;
    padding-left: 6rem;
    width: 100%;
    line-height: 26rem;
    height: 26rem;
    font-size: 12rem;
}

.crane-form-textarea {
    border-radius: 5rem;
    resize: none;
    font-size: 12rem;
}

.crane-form-inputIcon {
    -ms-border-top-left-radius: 5rem;
    border-top-left-radius: 5rem;
    -ms-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -ms-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
    -ms-border-bottom-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    padding: 0 10rem;
    line-height: 26rem;
    height: 26rem !important;
    font-size: 12rem;
}


.crane-form-input-icon, .input-group-addon {
    -ms-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -ms-border-top-right-radius: 5rem;
    border-top-right-radius: 5rem;
    -ms-border-bottom-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    -ms-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    display: table-cell;
    padding: 0 12rem;
    font-size: 14rem;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.crane-form-input.readonly {
    border: none;
}

.crane-form-icon, .crane-form-icon:hover {
    text-decoration: none;
    cursor: pointer;
}


.crane-form-textarea.readonly {
    border: none;
}

/***************************************************
               Grupos de inputs
***************************************************/
.crane-group-height24 .crane-input-group .crane-form-input,
.crane-group-height24 input[type="text"] {
    height: 26rem; /*24 + border*/
    line-height: 24rem;
}

.crane-form-label + .crane-input-group {
    margin-top: 0;
}

.crane-input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    margin-top: 5rem;
}

    .crane-input-group.date {
        width: 100%;
    }

.crane-input-group-lbl {
    font-size: 12rem;
    min-width: 100rem;
    text-align: left;
    padding: 1rem 3rem;
    font-weight: normal;
    line-height: 1;
    border-radius: 4rem;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
    width: 1%;
}

.crane-form-input:focus {
    outline: 0;
}

.crane-input-group-lbl:first-child {
    border-right: 0;
}

.crane-input-group .crane-form-input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
    height: 34rem;
    min-width: 128rem;
}

    .crane-input-group .crane-form-input:last-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .crane-input-group .crane-form-input:first-child,
    .crane-input-group-lbl:first-child {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

.crane-input-group .crane-form-select {
    width: 100%;
    display: table-cell;
}

@media (min-width: 990px) and (max-width: 1260px) {

    .crane-input-group-lbl {
        min-width: 15rem !important;
        padding: 0rem !important;
        font-size: 0rem !important;
    }
}

.crane-input-group .crane-input-group.fecha > .crane-form-input {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    min-width: 88rem;
    width: 100%;
}

.crane-input-group .crane-input-group.fecha {
    margin-top: 0;
    width: 100%;
}


/***************************************************
              Tabuladores
***************************************************/

.crane-tab-seccion {
    min-width: 320rem;
    min-height: 300rem;
    margin: 10rem auto;
    padding: 0;
    position: relative;
    /*padding-right: 50rem;*/
}

.crane-tab {
    display: none;
}


.crane-tab-nav * {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
    display: block;
}

.crane-tab-nav {
    width: 80rem;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}



    .crane-tab-nav:after {
        content: ' ' !important;
        width: 80rem;
        height: 80rem;
        position: absolute;
        left: 0;
        border-top: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        transition: .5s;
    }

.crane-tab-articulo {
    height: 316rem;
    position: absolute;
    left: 80rem;
    top: 0;
    right: 0;
    transition: .7s;
    transform: scale(0);
    transform-origin: 0% 0%;
    transition-delay: .1s;
}

    .crane-tab-articulo:before {
        font-size: 40rem;
        font-weight: 100;
        position: absolute;
        top: 10rem;
        left: 10rem;
    }

.crane-tabnav-cuadrado {
    font-family: Thonburi-Regular !important;
    padding-top: 5rem;
}

.crane-tabnav-icon {
    font-size: 20rem;
    display: block;
    height: 80rem;
    text-align: center;
    cursor: pointer;
    transition: .5s;
    z-index: 2;
    font-weight: normal !important;
}

    .crane-tabnav-icon span {
        font-size: 11rem;
    }


    .crane-tabnav-icon:before {
        display: block;
        font-size: 30rem;
        z-index: 2;
    }

.crane-tab-seccion .crane-tabnav-icon {
    padding-top: 10rem;
    display: block;
}

.crane-tab-deshabilitado,
.crane-tab-deshabilitado:hover {
    opacity: .5;
    pointer-events: none;
}

/***************************************************
              Panel Checbox/radio
***************************************************/

.crane-panelseleccion {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-align: center;
    height: 70rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.crane-panelseleccion-checkbox {
    display: none;
}

.crane-panelseleccion-label {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5rem;
    height: 100%;
    max-width: 100%;
    min-height: inherit;
    /* color: #BCBEC0; */
    overflow: hidden;
    table-layout: fixed;
    text-overflow: ellipsis;
}

.crane-panelseleccion-inner {
    display: block;
    position: absolute;
    width: 200%;
    height: 100%;
    margin-left: -100%;
}

    .crane-panelseleccion-inner:before,
    .crane-panelseleccion-inner:after {
        display: inline-block;
        width: 50%;
        height: 100%;
        content: "";
    }



.crane-panelseleccion-checkbox:checked + .crane-panelseleccion-label .crane-panelseleccion-inner {
    margin-left: 0;
}

.crane-panelseleccion-inner:before,
.crane-panelseleccion-inner:after {
    background-color: transparent;
}
/*.crane-panelseleccion-inner:before {
    background-color: #79ABB5; 
}

.crane-panelseleccion-inner:after {
    background-color: #EEE; 
}*/

/*.crane-panelseleccion-checkbox:checked + .crane-panelseleccion-label .crane-panelseleccion-icon,
.crane-panelseleccion-checkbox:checked + .crane-panelseleccion-label .crane-panelseleccion-label-text {
    color: #fff !important;
}*/

.crane-panelseleccion-icon,
.crane-panelseleccion-label-text {
    display: block;
    position: relative;
    z-index: 2;
    font-weight: normal;
}

.crane-panelseleccion-label-text {
    font-size: 12rem;
    text-transform: uppercase;
    padding: 5rem;
    width: 100%;
    text-overflow: ellipsis;
    /*word-spacing: 50rem;*/
    overflow: hidden;
    /* outline: 1px solid red; */
}

.crane-panelseleccion-icon {
    font-size: 30rem;
    margin: 5rem;
    margin-bottom: -10rem;
}

/***************************************************
              wrapper vertical align middle
***************************************************/

.crane-wrap-vertical-center {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    display: table;
}

.crane-inner-vertical-center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    /* overflow: hidden; */
}

    .crane-inner-vertical-center > div {
        display: inline-block;
        vertical-align: middle;
    }
/***************************************************
             Checkbox
***************************************************/
.crane-checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20rem;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: normal;
    cursor: pointer;
}

    .crane-checkbox-inline input[type="checkbox"] {
        position: absolute;
        margin-left: -20rem;
        margin-top: 4rem \9;
    }

/***************************************************
             SelectList
***************************************************/
.crane-selectList {
}

.crane-selectList-panel.mostrar {
    opacity: 1;
    -webkit-transition: visibility 0s, opacity 0.5s linear;
    -moz-transition: visibility 0s, opacity 0.5s linear;
    -ms-transition: visibility 0s, opacity 0.5s linear;
    -o-transition: visibility 0s, opacity 0.5s linear;
    transition: visibility 0s, opacity 0.5s linear;
    max-height: 200rem;
    z-index: 1;
    visibility: visible;
}


.crane-selectList-panel {
    -ms-border-radius: 10rem;
    border-radius: 10rem;
    border: 2rem solid #AFAFAF;
    -webkit-box-shadow: 0rem 0rem 29rem 0rem rgba(50, 50, 50, 0.39);
    -ms-box-shadow: 0rem 0rem 29rem 0rem rgba(50, 50, 50, 0.39);
    box-shadow: 0rem 0rem 29rem 0rem rgba(50, 50, 50, 0.39);
    background: #ffffff;
    width: 450rem;
    overflow: auto;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 0.5s linear;
    -moz-transition: visibility 0s, opacity 0.5s linear;
    -ms-transition: visibility 0s, opacity 0.5s linear;
    -o-transition: visibility 0s, opacity 0.5s linear;
    transition: visibility 0s, opacity 0.5s linear;
    max-height: 200rem;
    z-index: 1;
}

    .crane-selectList-panel .crane-form-icon {
        font-size: 13rem;
        padding-left: 5rem;
        cursor: pointer
    }

        .crane-selectList-panel .crane-form-icon:hover {
            font-size: 15rem;
        }

ol.crane-selectList-lista {
    font-size: 12rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 25rem;
    padding-right: 20rem;
}

    ol.crane-selectList-lista li {
        max-height: 27rem
    }

        ol.crane-selectList-lista li input {
            display: inline-block;
            width: 47%;
            height: 20rem;
            margin-top: 2rem
        }

        ol.crane-selectList-lista li label {
            width: 47%;
            overflow: hidden;
            padding-right: 5rem;
            text-overflow: ellipsis;
            height: 15rem;
            white-space: nowrap;
        }

.digitales-icono-eliminar {
    height: 25rem;
    width: 25rem;
    border-radius: 26rem;
    cursor: pointer;
    margin-left: 20%;
    text-align: center;
    font-size: 23rem;
    font-weight: bolder;
    line-height: 25rem;
}

.texto-seleccionable + .select2 .selection .select2-selection,
.texto-seleccionable + .select2 .selection,
.texto-seleccionable + .select2 {
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

/***************************************************
             Animaciones
***************************************************/

.fa-sync-alt.animado {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

    .fa-sync-alt.animado.lento {
        -webkit-animation: spin 2.2s linear infinite;
        -moz-animation: spin 2.2s linear infinite;
        -ms-animation: spin 2.2s linear infinite;
        -o-animation: spin 2.2s linear infinite;
        animation: spin 2.2s linear infinite;
    }

    .fa-sync-alt.animado.rapido {
        -webkit-animation: spin 0.7s linear infinite;
        -moz-animation: spin 0.7s linear infinite;
        -ms-animation: spin 0.7s linear infinite;
        -o-animation: spin 0.7s linear infinite;
        animation: spin 0.7s linear infinite;
    }


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        -ms-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.centrado {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    display: block;
    z-index: 9999;
}

/***************************************************
             Notificacion
***************************************************/

.crane-notificacion {
    z-index: 9;
    width: 200rem;
    min-height: 40rem;
    opacity: .8;
    -ms-opacity: .8;
    position: absolute;
    position: absolute;
    top: 45%;
    left: 30%;
    font-family: Calibri;
    font-size: 15rem;
    padding: 10rem;
    text-align: center;
    -ms-border-radius: 5rem;
    border-radius: 5rem;
}

/************* panel loader  *************/

.crane-loader {
    height: 2rem;
    width: 100%;
    position: absolute;
    left: 0;
    overflow: hidden;
    /* background-color: #ddd; */
    /*background-color: #ddd;*/
    /*background-color: rgba(255, 255, 255, 0.22);*/
    z-index: 2;
}


.crane-loader-progress {
    display: block;
    position: absolute;
    content: "";
    left: -200rem;
    width: 200rem;
    height: 4rem;
    animation: idigitales-loading 2s linear infinite;
}

@keyframes idigitales-loading {
    from {
        left: -200rem;
        width: 30%;
    }

    50% {
        width: 30%;
    }

    70% {
        width: 70%;
    }

    80% {
        left: 50%;
    }

    95% {
        left: 120%;
    }

    to {
        left: 100%;
    }
}

/***************************************************
             Tablero Camas
***************************************************/

.crane-tablero-elemento-cama .cama-icono {
    width: 40%;
    display: inline-block;
    margin-bottom: 0;
    font-size: 40rem;
    line-height: 1.3333333;
    border-radius: 10rem;
    text-align: center;
    color: #fff;
}



.crane-tablero-elemento-cama .cama-texto {
    font-size: 15rem;
    display: inline-block;
    color: #9D9C9C;
    margin: 3rem;
}

.crane-tablero-totales {
    padding-top: 15rem;
    padding-bottom: 12rem;
    text-align: center;
    -ms-border-top-right-radius: 10rem;
    border-top-right-radius: 10rem;
    -ms-border-bottom-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
}

    .crane-tablero-totales .total {
        height: 93rem;
    }

        .crane-tablero-totales .total strong {
            font-size: 18rem;
        }

#datosCamasTablero {
    margin-top: -20rem;
    margin-right: -35rem;
    margin-bottom: -15rem;
}

/***************************************************
             Lista Camas
***************************************************/
.lista-row-panel-camas > div {
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: table-cell;
}

.lista-row-panel-camas {
    display: table-row;
}

.lista-miniatura-panel-camas {
    text-align: center !important;
    width: 150rem;
}

.crane-contenedor {
    padding: 0;
    margin-bottom: 0;
    border-radius: 5rem;
}


.lista-miniatura-panel-camas > div.icono {
    border-radius: 50%;
    width: 57rem;
    height: 57rem;
    overflow: hidden;
    margin: 18rem 5rem;
    font-size: 39rem;
    display: inline-block;
    text-align: center;
}

.lista-miniatura-panel-camas > div.iconoNoInfo {
    width: 57rem;
    height: 57rem;
    overflow: hidden;
    margin: 18rem 5rem;
    font-size: 39rem;
    display: inline-block;
    text-align: center;
}

.lista-innerBody-panel-camas {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.lista-informacion-panel-camas > div {
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13rem;
}

    .lista-informacion-panel-camas > div > span {
        display: inline;
    }

.lista-estado-pediatrico {
    position: absolute;
    /*right: 0;*/
    z-index: 2;
    top: 0;
    width: 90rem;
    text-align: center;
    padding: 0 3rem 3rem 3rem;
    border-radius: 0 0 10rem 10rem;
}

.etiqueta-tipo {
    width: 90rem;
    float: right;
    background: #78B5F2;
    border-radius: 0 4rem 4rem 0;
    height: 16rem;
    line-height: 15rem;
    text-align: center;
    vertical-align: middle;
    font-size: 12rem;
    color: #fff;
}

    .etiqueta-tipo:before {
        content: "";
        left: 111rem;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent #78B5F2 transparent transparent;
        border-style: solid;
        border-width: 8rem 9rem 8rem 0;
    }

    .etiqueta-tipo:after {
        content: "";
        float: right;
        left: 111rem;
        position: absolute;
        top: 65rem;
        left: 120rem;
        width: 4rem;
        height: 4rem;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        background: #fff;
        -moz-box-shadow: -1px -1px 2px #78B5F2;
        -webkit-box-shadow: -1px -1px 2px #78B5F2;
        box-shadow: -1px -1px 2px #78B5F2;
    }

.etiqueta-tipo {
    width: 90rem;
    float: right;
    background: #78B5F2;
    border-radius: 0 4rem 4rem 0;
    height: 16rem;
    line-height: 15rem;
    text-align: center;
    vertical-align: middle;
    font-size: 12rem;
    color: #fff;
}

    .etiqueta-tipo:before {
        content: "";
        left: 111rem;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent #78B5F2 transparent transparent;
        border-style: solid;
        border-width: 8rem 9rem 8rem 0;
    }

    .etiqueta-tipo:after {
        content: "";
        float: right;
        left: 111rem;
        position: absolute;
        top: 65rem;
        left: 120rem;
        width: 4rem;
        height: 4rem;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        background: #fff;
        -moz-box-shadow: -1px -1px 2px #78B5F2;
        -webkit-box-shadow: -1px -1px 2px #78B5F2;
        box-shadow: -1px -1px 2px #78B5F2;
    }



.lista-estado-panel-camas {
    position: absolute;
    right: 0;
    z-index: 2;
    top: 0;
    width: 90rem;
    text-align: center;
    padding: 0 3rem 3rem 3rem;
    border-radius: 0 0 10rem 10rem;
}

.lista-body-panel-camas {
    height: 250rem;
    max-height: 250rem;
    overflow-y: auto;
}

    .lista-body-panel-camas::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10rem;
        background-color: #F5F5F5;
    }

    .lista-body-panel-camas::-webkit-scrollbar {
        width: 12rem;
        background-color: #F5F5F5;
    }

    .lista-body-panel-camas::-webkit-scrollbar-thumb {
        border-radius: 10rem;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #31585E;
    }

.lista-estado-panel-camas-mixto {
    position: absolute;
    right: 100rem;
    z-index: 2;
    top: 0;
    width: 45rem;
    text-align: center;
    padding: 0 3rem 3rem 3rem;
    border-radius: 0 0 10rem 10rem;
    background: linear-gradient(141deg, #0fb8ad 0%, #42c1cf 51%, #aebbc0 75%);
    color: white;
}

.lista-estado-panel-camas-pespecial {
    position: absolute;
    right: 100rem;
    z-index: 2;
    top: 0;
    width: 90rem;
    text-align: center;
    padding: 0 3rem 3rem 3rem;
    border-radius: 0 0 10rem 10rem;
    background: #00A3E9;
    color: white;
}

/***************************************************
           Etiquetas
***************************************************/


.crane-etiqueta {
    position: relative;
    background: #0089e0;
    border-radius: 0 4rem 4rem 0;
    height: 16rem;
    line-height: 15rem;
    text-align: center;
    vertical-align: middle;
    margin: 3rem 0;
    color: #fff;
    margin-left: 10rem;
}


    .crane-etiqueta:before {
        content: "";
        float: left;
        position: absolute;
        top: 0;
        left: -8rem;
        width: 0;
        height: 0;
        border-color: transparent #0089e0 transparent transparent;
        border-style: solid;
        border-width: 8rem 9rem 8rem 0;
    }

    .crane-etiqueta.cancelado {
        background: #ff0000;
    }

        .crane-etiqueta.cancelado:before {
            border-color: transparent #ff0000 transparent transparent;
        }

    .crane-etiqueta:after {
        content: "";
        position: absolute;
        top: 6rem;
        left: 0;
        float: left;
        width: 4rem;
        height: 4rem;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        background: #fff;
        -moz-box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.63);
        -webkit-box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.63);
        box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.63);
    }

/* ribbon style */

.ribbon-wrapper {
    position: relative;
    border-bottom: 10px solid #ccc;
    border-top: 0px solid #ccc;
    -moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
    -webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}

.ribbon-front {
    background-color: #ccf;
    height: 80px;
    width: 40px;
    position: relative;
    left: -20px;
    z-index: 2;
}

.ribbon-front,
.ribbon-back-left,
.ribbon-back-right {
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

.ribbon-edge-topleft,
.ribbon-edge-topright,
.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style: solid;
    height: 0px;
    width: 0px;
}

.ribbon-edge-topleft,
.ribbon-edge-topright {
}

.ribbon-edge-bottomleft,
.ribbon-edge-bottomright {
    top: 80px;
}

.ribbon-edge-topleft,
.ribbon-edge-bottomleft {
    left: -20px;
    border-color: transparent #99c transparent transparent;
}

.ribbon-edge-topleft {
    top: 0px;
    border-width: 0px 20px 0 0;
}

.ribbon-edge-bottomleft {
    border-width: 0 20px 10px 0;
}

.ribbon-edge-topright,
.ribbon-edge-bottomright {
    left: 20px;
    border-color: transparent transparent transparent #99c;
}

.ribbon-edge-topright {
    top: 0px;
    border-width: 0px 0 0 0px;
}

.ribbon-edge-bottomright {
    border-width: 0 0 0px 0px;
}

.ribbon-back-left {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 10px;
    height: 80px;
    background-color: #ccf;
    z-index: 0;
}

.ribbon-back-right {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 80px;
    z-index: 0;
}


/***************************************************
           Fieldset
***************************************************/


.crane-fielset {
    border: 1rem solid #bcbec0;
    border-radius: 5rem;
    padding: 0;
    overflow: hidden;
    position: relative;
    overflow: inherit;
}

    .crane-fielset > div {
        padding-left: 15rem;
        padding-right: 15rem;
    }

.crane-fielset-body {
    height: 100%;
    width: 100%;
    /* position: absolute; */
    top: 0;
    left: 0;
    padding: 10rem 5rem 10rem 5rem !important;
    z-index: 1;
    padding-bottom: 5rem;

}

.crane-fielset-title {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #d3d3d3;
    margin: 0 !important;
    width: 100% !important;
    height: 26rem;
    line-height: 26rem;
}

.crane-fielset-title-tools {
    display: inline-block;
    float: right;
    margin-top: 0;
    position: relative;
    padding: 0;
    font-family: FontAwesome;
}

.crane-fielset-title-tools-minimize,
.crane-fielset-title-tools-maximize {
    cursor: pointer;
}

    .crane-fielset-title-tools-minimize:before {
        font-family: FontAwesome;
        content: "\f077";
    }

    .crane-fielset-title-tools-maximize:before {
        font-family: FontAwesome;
        content: "\f078";
    }

.crane-fielset-title > label {
    font-size: 12rem;
    text-align: left;
    letter-spacing: 1px;
    font-weight: normal !important;
}

.crane-fielset-titleBtns {
    float: right;
    margin-right: -10rem;
}

    .crane-fielset-titleBtns > div {
        line-height: 18rem;
        float: right;
        width: 23rem;
        margin-right: 5rem;
        font-size: 12rem;
        padding: 3rem;
        height: 23rem;
        border-radius: 5rem;
        text-align: center;
        cursor: pointer;
        margin-top: 1rem
    }

        .crane-fielset-titleBtns > div:hover,
        .crane-fielset-titleBtns > div.active {
            background: #79ABB5;
            color: #fff;
        }

/***************************************************
           tabs izquierda
***************************************************/


.crane-tabPanel {
    /*border: 1rem solid #bcbec0;
    border-radius: 5rem;*/
    padding: 0;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.crane-navTab > input {
    display: none;
}

.crane-navTab > label {
    font-size: 12rem;
    display: block;
    height: 80rem;
    text-align: center;
    cursor: pointer;
    transition: .5s;
    z-index: 2;
    font-weight: normal !important;
    cursor: pointer;
}

.crane-navTab {
    width: 80rem;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}

    .crane-navTab > label:before {
        display: block;
        font-size: 30rem;
        z-index: 2;
        height: 40rem;
        line-height: 35rem;
        padding-top: 5rem;
    }

.crane-bodyTab {
    /* padding: 10px 10px 10px 10px; */
    position: absolute;
    /* left: 80rem; */
    top: 0;
    right: 0;
    overflow: hidden;
    transition: .7s;
    /*transform: scale(0);*/
    transform-origin: 0% 0%;
    transition-delay: .1s;
    height: 100%;
    width: 100%;
    padding: 5rem 5rem 5rem 85rem;
    display: none;
}

.crane-bodyTabActive {
    /*transform: scale(1);*/
    display: block;
}


/***************************************************
           Validador Campos
***************************************************/
.imginval {
    margin-left: 1%;
    cursor: help;
    height: 20rem;
}


/***************************************************
           Checkbox Switchs
***************************************************/

.crane-checkboxswitch input[type="checkbox"] {
    display: none;
}


.crane-checkboxswitch label {
    line-height: 30rem;
    vertical-align: middle;
    margin: 10rem 0;
    display: block;
}

    .crane-checkboxswitch label.crane-form-label {
        width: auto;
    }


.crane-checkboxswitch input[type="checkbox"]:checked + label .crane-switch .crane-toggle {
    left: 53%;
}

.crane-checkboxswitch input[type="checkbox"] + label .crane-switch .crane-toggle {
    left: -1rem;
}

.crane-switch .crane-toggle {
    position: absolute;
    top: -1rem;
    width: 22rem;
    height: 22rem;
    z-index: 999;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    line-height: 30rem;
    vertical-align: middle;
    border-radius: 20rem;
    -ms-border-radius: 20rem;
    -moz-border-radius: 20rem;
}

.crane-switch {
    background: transparent;
    position: relative;
    display: inline-block;
    width: 46rem;
    font-size: 14rem;
    font-weight: bold;
    color: #444;
    height: 22rem;
    padding: 4rem;
    cursor: pointer;
    line-height: 22rem;
    vertical-align: middle;
    border-radius: 20rem;
    -ms-border-radius: 20rem;
    -webkit-border-radius: 20rem;
    -moz-border-radius: 20rem;
    margin-left: 15rem;
}


/******************** toggle Button  **********************/

.crane-toggle-button {
    cursor: default !important;
}

    .crane-toggle-button > div {
        width: 35rem;
        font-size: 20rem;
        line-height: 22rem;
        text-decoration: none;
        text-align: center;
        /*color: #fff !important;*/
        position: relative;
        /*padding: 4rem 5rem;*/
        /*margin-top: -2rem;*/
        /*border-left:solid 1rem #2ab7ec;*/
        /*text-shadow: 1rem 1rem 0rem #2B5455;*/
        /*border-right: solid 1rem #2B5455;*/
        border-radius: 5rem;
        cursor: default;
        box-shadow: inset 0rem 1rem 0rem rgba(0, 0, 0, 0), 0rem 4rem 0rem 0rem #dcdcdc;
    }


    .crane-toggle-button > input {
        display: none;
    }

    .crane-toggle-button > div > label {
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .crane-toggle-button > input[type=radio]:checked + div,
    .crane-toggle-button > input[type=checkbox]:checked + div {
        top: 2rem;
        box-shadow: inset 0rem 1rem 0rem rgba(0, 0, 0, 0), 0rem 2rem 0rem 0rem #dcdcdc;
    }


/***************************************************
           Range
***************************************************/

input[type=range] {
    -webkit-appearance: none;
    width: 355rem;
}

    /* GrupBox - Estilos para Navegadores Opera Safari Chrome */
    input[type=range]::-webkit-slider-runnable-track {
        width: auto;
        height: 5rem;
        border: none;
        border-radius: 3rem;
        margin-top: 10rem;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16rem;
        width: 16rem;
        border-radius: 50%;
        margin-top: -5rem;
    }

    input[type=range]:focus {
        outline: none;
    }



    /*  GrupBox - Estilos para Firefox */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 5rem;
        border: none;
        border-radius: 3rem;
        margin-top: 50rem;
    }

        input[type=range]::-moz-range-track ~ label {
            padding: 0;
        }

    input[type=range]::-moz-range-thumb {
        border: none;
        height: 16rem;
        width: 16rem;
        border-radius: 50%;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusing {
        outline-offset: -1rem;
    }

    input[type=range]::-ms-track {
        width: auto;
        height: 5rem;
        border-width: 6rem 0;
        padding: -10rem;
    }

    /* GrupBox -  Estilos para Explorer */
    input[type=range]::-ms-fill-lower {
        border-radius: 10rem;
    }

    input[type=range]::-ms-fill-upper {
        border-radius: 10rem;
    }

    input[type=range]::-ms-thumb {
        border: none;
        height: 16rem;
        width: 16rem;
        border-radius: 50%;
        padding: -10rem;
    }

    input[type=range]::-ms-tooltip {
        display: none;
    }

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 52rem;
    height: 25rem;
}

    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20rem;
        width: 20rem;
        left: 3rem;
        bottom: 2.5rem;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34rem;
}

    .slider.round:before {
        border-radius: 50%;
    }

/*Tooltip Bootstrap*/

.contenedorTooltip .tooltip > .tooltip-inner {
    color: gray;
    background-color: #E2EFEF !important;
}

.contenedorTooltip .tooltip.top > .tooltip-arrow {
    border-top-color: #E2EFEF !important;
}

.contenedorTooltip .tooltip.left > .tooltip-arrow {
    border-left-color: #E2EFEF !important;
}

/***************************************************
          Reescribe bootstrap
***************************************************/

.form-control {
    height: 34rem;
    padding: 6rem 12rem;
    font-size: 12rem;
}

.input-group .form-control {
    padding-left: 6rem;
}


/***************************************************
           Firma
***************************************************/

#modalFirmaDispositivo {
    min-height: 200rem;
    height: 100%;
    position: relative;
}

.canvas-container-firma {
    position: relative;
    left: 50%;
    width: 75%;
    top: 50%;
    height: 100rem;
}

#firmaDispositivoCanvas {
    position: relative;
    left: -50%;
    border: inset 3rem;
    width: 100%;
    height: 100rem;
    top: -50%;
}

#ventana-agregarFirma {
    height: 200rem;
    position: relative;
}

#AgregarFirma-Bgrd {
    height: 100%;
    position: relative;
}

.crane-tab-articulo.art2 {
    height: 100%;
}

img#FirmaImg {
    height: auto !important;
    position: relative;
    top: 22%;
}

/************************************de _FirmaDispositivo***************************************************/

/** id Local #modalFirmaDispositivoDatos  **/
#modalFirmaDispositivoDatos #tabDispositivoFirma:checked ~ .art1,
#modalFirmaDispositivoDatos #tabDibujarFirma:checked ~ .art2,
#modalFirmaDispositivoDatos #tabArchivo:checked ~ .art3 {
    display: block;
    transform: scale(1);
    transition-delay: .4s;
}

#modalFirmaDispositivoDatos #tabDispositivoFirma:checked ~ nav:after {
    top: 0;
}

#modalFirmaDispositivoDatos #tabDibujarFirma:checked ~ nav:after {
    top: 80rem;
}

#modalFirmaDispositivoDatos #tabArchivo:checked ~ nav:after {
    top: 160rem;
}

#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma #AgregarFirma-Bgrd,
#modalFirmaDispositivoDatos #contCanvas {
    /*margin-top: 50rem;
        margin-right: 85rem;
        margin-bottom: 50rem;
        margin-left: 85rem;*/
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 50rem;
}

#modalFirmaDispositivoDatos #firmaDibujoCanvas {
    border: 3px inset #eee;
    position: relative;
    width: 100%;
    height: 100%;
}

#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma .crane-contenedor-tab,
#modalFirmaDispositivoDatos #seccion-tabDibujarFirma .crane-contenedor-tab,
#modalFirmaDispositivoDatos #seccion-tabArchivo .crane-contenedor-tab {
    position: relative;
    height: 100%;
}

#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma .crane-contenedor-btn-cen,
#modalFirmaDispositivoDatos #seccion-tabDibujarFirma .crane-contenedor-btn-cen,
#modalFirmaDispositivoDatos #seccion-tabArchivo .crane-contenedor-btn-cen {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}


/****** agregado********/
#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma.crane-tab-articulo.art1 {
    height: 100%;
    left: 0;
    padding-left: 80rem;
}



#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma #ventana-agregarFirma,
#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma .canvas-container-firma {
    margin: 0;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
}

#modalFirmaDispositivoDatos #seccion-tabDispositivoFirma #firmaDispositivoCanvas {
    position: relative;
    left: 0;
    border: inset 3rem;
    width: 100%;
    height: 100%;
    top: 0;
}


/************** estilo item listasconfig **************/


.crane-listConfig {
    position: relative;
}

.crane-itemListConfig > input {
    display: none;
}



    .crane-itemListConfig > input + label {
        font-weight: normal;
    }

.crane-itemListConfig {
    padding-top: 10rem;
    padding-right: 10rem;
    position: relative;
    /*color:#000;*/
}

    .crane-itemListConfig > div,
    .crane-itemListConfig > label {
        /*margin-top: 10rem !important;*/
        padding: 10rem;
        display: block;
        text-align: left;
        border-radius: 10rem;
        /*margin-right: 10rem;*/
        position: relative;
        /*border: 2rem solid #d3d3d3;
    background-color: #f1f2f2;*/
        cursor: pointer;
    }

    /*.crane-itemListConfig > input:checked + label {
    border: 2px solid #79abb5;
}*/
    .crane-itemListConfig .crane-activo-True,
    .crane-itemListConfig .crane-activo-False {
        width: 8rem;
        height: 8rem;
        position: absolute;
        background: #008000;
        top: 5rem;
        right: 5rem;
        border-radius: 50%;
    }


    .crane-itemListConfig .crane-activo-False {
        background: #f00;
    }


/* CAMBIO   IPAD MINI */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .ajs-content .panelFormDataAlertify,
    input[type="text"], textarea, .select-style, input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="time"], input[type="date"] {
        border-width: 1px;
    }
}

.divmodal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow-y: auto;
    z-index: 999999;
    background-color: #080808;
    background-color: rgba(8, 8, 8, 0.4);
}

.divmodalBloqueo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow-y: auto;
    z-index: 999999;
    background-color: #080808;
    background-color: rgba(8, 8, 8, 0.1);
}

.divmodalAccion, .divmodal {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow-y: auto;
    z-index: 999999;
    background-color: #080808;
    background-color: rgba(8, 8, 8, 0.2);
}

#panelMonitoreoSesion {
    position: fixed;
    z-index: 3;
    border-radius: 4px;
    bottom: 0;
    left: 0;
    /* margin-top: 55rem; */
    /* padding-top: 9rem; */
    background: white;
    width: 200rem;
}

    #panelMonitoreoSesion li > div {
        display: inline-block
    }

/* CKEDITOR */
.cke_panel.cke_combopanel {
    z-index: 100001 !important; /*Permite mostrar los combos de fuentes, formato y tamaño cuando ckeditor esta en una modal*/
}


.hide {
    display: none !important;
}