@CHARSET "ISO-8859-1"; #layout-1 {
}

#layout-1 h1 {
    margin: 0px;
}

#layout-1-izquierda {
    width: 240px;
    background: #f5f5f5;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-top: 10px;
    position: fixed;
}

#layout-1-izquierda h2 {
    font-size: 24px;
    font-weight: normal;
    text-align: right;
    border-bottom: none;
    padding: 10px 25px;
}

#layout-1-izquierda p {
    padding: 10px;
}

#layout-1-izquierda hr {
    margin: 10px;
}

#layout-1-centro {
    width: 70%;
    padding: 20px 30px 0 270px;
}

#layout-1-centro h2 {
    font-size: 24px;
    font-weight: normal;
    border-bottom: 1px solid #C3CCD4;
    padding-bottom: 4px;
}

#layout-1-derecha {
    float: right;
    width: 21%;
}

.mod-menu-1 {
}

.mod-menu-1 ul {
    list-style: none;
    padding: 10px 0;
    margin-left: 20px;
}

.mod-menu-1 li {
    margin: 0;
    padding: 0;
}

.mod-menu-1 li span {
    color: #888;
    display: block;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #f5f5f5;
    font-weight: bold;
}

.mod-menu-1 li span:hover {
    background-color: #eef6fd;
}

.mod-menu-1 li.activo {
    width: 221px;
}

.mod-menu-1 li.activo span {
    background-color: #fff;
    border: 1px solid #ccc;
    border-right: none;
    color: #36679F;
}

#esperandoGW {
    z-index: 200000;
}

#esperandoGW #esperandofondo {
    background-color: Silver;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 2001000000;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
}

#esperandoGW #esperandotexto {
    background-color: white;
    border: solid 1px Gray;
    z-index: 2002000000;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 50px;
    margin-left: -100px;
    margin-top: -45px;
    padding-top: 70px;
    text-align: center;
    font-weight: bold;
    background-position: 50% 30%;
    background-image: url(images/loader.gif);
    background-repeat: no-repeat;
}

.oculto {
    display: none;
}

.invisible {
	opacity: 0;
	pointer-events: none;
}

/* para que el detalle se ajuste */
.izquierda .detalle {
    width: 100%;
}

.derecha .detalle {
    width: 100%;
}

/* para que el detalle se ajuste */
.thumb-preview {
    border: 1px solid;
    background-color: #f0f0f0;
    padding: 10px;
}

input.mayusculas {
    text-transform: uppercase;
}

input.numerico {
    text-align: right;
}

#contenedor {
    width: 100%;
    margin: 0 auto;
}

#cuerpo {
    width: 100%;
    border: 1px solid transparent;
}

.texto-nota-mini {
    padding: 3px 19px 3px 10px;
}

.texto-nota {
    padding: 3px 19px 3px 10px;
}

/* INICIO Layout con arbol dynatree a la derecha */
#layout-arbol-izquierda {
    width: 250px;
    float: left;
}

#layout-arbol-derecha {
    float: left;
    margin-left: 30px;
}

#layout-arbol-derecha-arriba {
    display: block;
    margin: 10px;
}

#layout-arbol-derecha-abajo {
    background-color: yellow;
    display: block;
    margin: 10px;
}

/* FIN Layout para procesos permitidos */
/* tendria que hacer eloy un sprite, supongo */
.icono.pdf {
    background: transparent url(images/acrobat.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icono.excel {
    background: transparent url(images/excel.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icono.word {
    background: transparent url(images/word.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* tendria que hacer eloy un sprite, supongo */
/* Clases para botones con Font Awesome */
i.operacion.fa, span.operacion.fa {
    font-size : 14px;
    color : darkorange;
}

i.ordenar.fa {
    font-size : 12px;
    color : green;
    transform: scale(0.8,0.9);
    background: white;
}

i.operacion.fa.margin-top-28 {
    margin-top: 28px;
}

.modulo-estilo1 h5 i.operacion.fa {
    padding: 3px;
    padding-left: 5px;
}

.fa.operacion.margin-left {
    margin-left: 6px;
}

i.favoritos_browse_operacion.fa {
    font-size: 9px;
    color: darkorange;
    margin-left: 4px;
    display: inline-block;
}

/* Clases para progreso de formularios (carlos gutierrez) */
/* BARRA DE PROGRESO SIN FLECHAS */
#contenedor-progreso-basic {
    width: 99%;
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    background: #fff;
    padding: 2px;
    border: 1px solid #f0f0f0;
}

#contenedor-progreso-basic-body {
    display: table-row;
}

.botones-basic {
    display: table-cell;
    width: 9%;
    height: 76px;
    padding: 0px 10px 0px 10px;
    font-family: Arial, sans-serif;
    color: #989898;
    font-size: 11px;
    border: 1px solid #fff;
}

.flechas-basic {
    display: table-cell;
    width: 1%;
    vertical-align: middle;
}

.flechas-basic:hover {
    cursor: pointer;
}

.izquierda-fle-basic {
    background-image: url(img-barra-progreso/flech-izq.png);
    background-repeat: no-repeat;
    background-position: center;
}

.derecha-fle-basic {
    background-image: url(img-barra-progreso/flech-der.png);
    background-repeat: no-repeat;
    background-position: center;
}

.botones-basic h2 {
    font-size: 11px;
    text-align: left;
    margin-top: 10px;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
}

.botones-basic p {
    font-size: 10px;
}

.hecho-basic {
    background-color: #EBF8A4;
}

.hecho-basic:hover {
    cursor: pointer;
    color: #4C4C4C;
}

.activo-basic {
    background-color: #BFDFFF;
    color: #4C4C4C;
}

.pendiente-basic {
    background-color: #f0f0f0;
}

.pendiente-basic:hover {
    cursor: pointer;
    color: #4C4C4C;
}

/*
	<div id="contenedor-progreso-basic">
        <div id="contenedor-progreso-basic-body">            
            <div class="flechas-basic izquierda-fle-basic"></div>
            
            <div class="botones-basic pendiente-basic">                
                <h2>Paso 1</h2>                    
                <p>Paso 1 que se vea a dos líneas tres</p>
            </div>
            
            <div class="botones-basic pendiente-basic">                
                <h2>Paso 2 fghfghfg fghfghgf</h2>                    
                <p>Paso 1 que se vea a dos</p>
            </div>
            
            <div class="botones-basic pendiente-basic">                
                <h2>Paso 3</h2>                     
                <p>Paso 1 que se vea a dos líneas tres lineas</p>
            </div>
            <div class="botones-basic activo-basic">                
                <h2>Paso 3</h2>                     
                <p>Paso 1 que se vea a dos líneas tres lineas</p>
            </div>
            <div class="botones-basic hecho-basic">                
                <h2>Paso 3</h2>                     
                <p>Paso 1 que se vea a dos líneas tres lineas</p>
            </div>
            <div class="botones-basic pendiente-basic">               
                <h2>Paso 3</h2>                     
                <p>Paso 1 que se vea a dos líneas tres lineas</p>
            </div>
            
            <div class="botones-basic pendiente-basic">                
                <h2>Paso 5</h2>                     
                <p>Paso 1 que se vea a dos líneas tres lineas</p>
            </div>      
            
            <div class="flechas-basic derecha-fle-basic"></div>
        </div>
    </div>
		
*/
/* Clases para progreso de formularios (carlos gutierrez) */
/* BARRA DE PROGRESO VERTICAL ÚLTIMA VERSION CON ALERTS */
.posicionando {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.posicion-menu {
    height: 100%;
    min-width: 15%;
    max-width: 15%;
}

.posicion-contenido {
    height: 100%;
    min-width: 85%;
    max-width: 85%;
}

fieldset {
    min-inline-size: auto !important;
}

.vertical-menu {
    padding: 23px 0px 0px 0px;
}

.js_og_operaciones_div.js_og_operaciones_sin_padding .vertical-menu {
    padding: 0px 0px 0px 0px;
}

.vertical-menu div.titulo {
    float: left;
    min-height: 55px;
    width: 96%;
    margin-bottom: 2px;
}

.vertical-menu div.titulo:hover {
    background: #eef6fd;
    cursor: pointer;
}

.vertical-menu div.titulo.alertaazul {
    border-left: 5px solid #BFDFFF;
    background: #f5f5f5;
}

.vertical-menu div.titulo.alertagris {
    border-left: 5px solid #ddd;
}

.vertical-menu div.titulo.alertaverde {
    border-left: 5px solid #EBF8A4;
}

.vertical-menu div.titulo h2 {
    font-size: 11px;
    margin: 5px 2px 0 4px;
}

.vertical-menu div.titulo p {
    font-size: 11px;
    margin: 1px 2px 2px 5px;
}

/*
	<div class="posicionando">
          <div class="posicion-menu">
              <div class="vertical-menu">
              	<div class="vertical-menu-titulo">
                        <h2>Titulo 1</h2>
                        <p>Subtitulo</p>
                    </div>
                    <div class="limpiar"></div>
                </div> 
          </div>
          <div class="posicion-contenido">
              hola
          </div>
      </div>
*/
/* MOSTRAR EL CALCULO DE PLUSVALIAS EN DOS COLUMNAS - OJO se utiliza*/
.ancho44 {
    width: 44%;
}

.ancho44px {
    width: 44px;
}

/* MAP Este estilo lo pongo para sustituir el fa-border que no me gusta como queda */
.btnGridHeader {
    padding: .2em .25em .15em;
    border-radius: .1em;
    min-width: 12px;
    text-align: center;
}

/* PARA LA NUEVA FUNCION generarResumen */
/* MAPAS. ESTILOS PARA PINTAR INFORMACIÓN EN LOS MAPAS */
.gm-style-iw {
    width: 350px !important;
    top: 15px !important;
    left: 0px !important;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 2px 2px 10px 10px;
}

#mapas-iw-container {
    margin-bottom: 10px;
    min-width: 350px;
}

#mapas-iw-container .iw-title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15px;
    font-weight: 400;
    padding: 5px 10px 5px 10px;
    background-color: #48b5e9;
    color: white;
    margin: 0;
    border-radius: 2px 2px 0 0;
}

#mapas-iw-container .iw-content {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 5px 15px;
    max-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
}

.iw-content img {
    float: right;
    margin: 0 5px 5px 10px;
}

.iw-subTitle {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
}

.iw-bottom-gradient {
    position: absolute;
    width: 326px;
    height: 25px;
    bottom: 10px;
    right: 18px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

/* FIN: MAPAS. ESTILOS PARA PINTAR INFORMACIÓN EN LOS MAPAS */
/* INICIO: CSS3 para seleccionar tipo de escaneado*/
.cc-selector input {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cc-selector input[type=radio] + label {
    text-align: center;
}

.cc-selector input:active +.drinkcard-cc {
    opacity: .9;
}

.cc-selector input:checked +.drinkcard-cc {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.cc-selector div {
    text-align: center;
}

.drinkcard-cc {
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 70px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.drinkcard-cc-text {
    display: block;
    vertical-align: bottom;
}

/* FIN: CSS3 para seleccionar tipo de escaneado*/
/* JQGrid. Consultas con websockets. */
.jqGrid-botonWebSocket {
    margin-top: 1px;
    margin-right: 6px;
    color : white;
    font-size: 120%;
}

.jqGrid-botonWebSocket.activado {
    color : #a7ff00;
}