.row{
    max-width: 1300px;
}
.clear{
    clear: both;
}
body{
    background: url(img/bg.png);
}
body>.row{
    background: #fff;
    box-shadow: 0 3px 20px rgba(0,0,0,0.3);
    padding-bottom: 0.9375rem;
}

.bodylogin{
    background: url(img/home.jpg) no-repeat;
    background-size: cover;
    min-height: 100%;
}
    .bodylogin body{
        background: none;
    }
.headergap{
    height: 30px;
}
.top-bar .name h1{
    padding: 0;
    margin: 0;
    line-height: 100%;
}
    .home.row h1, .login h1{
        text-align: center;
    }
    .row h1, .login h1{
        margin: 30px 0;
        color: #AD2828;
        font-size: 36px;
    }
    .row h2{
        font-size: 24px;
    }
    .row h1 span{
        font-size: 16px;
    }
    .row h3{
        font-size: 20px;
    }
    .colorhead{
        margin-bottom: 0;
        background: #ccc;
        padding: 10px;
    }
.login{
    max-width: 400px;
    margin: 0 auto;
    background: #fff;
    padding: 1px 20px 0;
    margin-top: 20px;
    box-shadow: 0 3px 30px rgba(0,0,0,0.6);
}
.notificaciones li{
    white-space: nowrap;
    width: 100%;
}
.top-bar-section ul.notificaciones{
    max-width: 300px;
    width: 300px;
}
.top-bar-section li a.leido{
    width: 24px;
    height: 24px;
    display:block; text-indent: -3000px; font-size: 0; overflow:hidden; 
    background: url(img/check.png) no-repeat;
    float: right;
    margin: 10px 5px 0 0;
}



    .top-bar-section li a.leido:hover, .top-bar-section li:hover a.leido{
        background: url(img/check.png) no-repeat;
        opacity: 0.5;
    }

    .top-bar-section li a.leido.loader, .top-bar-section li a.leido.loader:hover{
        background: url(img/loaderfondonegro.gif) center no-repeat;
    }


           
.estado{
    height: 32px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 100%;
}
.estado.left{
    padding: 0;
    height: 18px;
    width: 18px;
    margin: 8px 10px 0 0;
}
    .estado span{
        float: left;
        width: 30px;
        height: 30px;
        display: block;
        margin: -10px 10px 0 -10px;
    }
    .estado.left span{
        width: 18px;
        height: 18px;
        margin: 0;
    }
        .estado.borrador span{ background: #f5c70a;}
        .estado.activo span{ background: #008000;}
        .estado.inactivo span{ background: #dd0000;}
        
table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td{
    padding: 10px;
}
tr.child td{
    padding: 5px 10px 5px 10px;
}
tr.child td:first-child{
    border-left: 10px solid #ddd;
    padding-left: 20px;
}
table tr.even, table tr.alt, table tr:nth-of-type(even){
    background: #f1f1f1;
}
table td h4, table td h5{
    margin: 0;
}
table td h4 span{
    font-size: 14px;
}
table button, table .button{
    margin-bottom: 0;
}
.modulosin{
    display: none;
}
.alert-box a{
    color: #fff;
    font-weight: bold;
}
.eliminarmodal{
    text-align: center;
}
table tr:hover{
    background: #eee;
}
button.alert, .button.alert{
    background: #cc0000;
}
button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus{
    background: #ff1515;
}
button:hover, button:focus, .button:hover, .button:focus {
    background-color: #00b5f0;
}

.field{
    padding: 0 5px;
}
.field.medio{
    width: 50%;
    float: left;
}
.field.cuarto{
    width: 25%;
    float: left;
}
.field.tercio{
    width: 33.3%;
    float: left;
}
.checboxgroup{
    width: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 20px;
    float: left;
    font-size: 12px;
}
    .checboxgroup input{
        float: left;
    }
    input[type="checkbox"] + label, input[type="radio"] + label{
        display: block;
        padding-left: 13px;
    }

.selectorpiezas select {
    height: 400px;
}
.selectorpiezas #piezas .option{
    display: block;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 10px 55px 10px 0;
    position: relative;
}
    .selectorpiezas #piezas .option .btn{
        height: 26px;
        width: 26px;
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #0079a1;
        display: block;
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 24px;
    }
    .selectorpiezas #piezas .option select{
        height: 26px;
        width: 40px;
        position: absolute;
        top: 5px;
        right: 33px;
        font-size: 12px;
        line-height: 100%;
        padding: 0;
    }
.selectorpiezas #piezasmodulo .option{
    display: block;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 10px 35px 10px 10px;
    position: relative;
}
textarea {
    min-height: 100px;
}
.selectorpiezas #piezasmodulo .option:nth-child(even){
    background: #eee;
}
    .selectorpiezas #piezasmodulo .option .btn{
        height: 26px;
        width: 26px;
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #d90000;
        display: block;
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 24px;
    }
    #piezas , #piezasmodulo{
        height: 400px;
        overflow-y: scroll;
    }
    
    
    .imagenes .large-3{
        float: left !important;
    }
    .imagenes .large-3:nth-child(n+5){
        clear: both;
    }
    
   
   .large-3.color{
    background: #fff;
    padding: 10px;
    float: left !important;
    border: 1px solid #eee;
   }
    .large-3.color img{
        margin: 0 auto 10px;
        display: block;
    }
   
    
    
.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10;
    top: 0;
    left: 0;
    padding-top: 45px;
    overflow: scroll;
    display: none;
}
.modal img{
    display: block;
    margin: 0 auto 20px;
}
    .modalin {
        width: 1024px;
        margin: 0 auto;
    }
    
    #wPaint{
        background: #eee;
        height: 768px;
        width: 1024px;
        margin: 50px auto 30px;
        position: relative;
    }
    
#controles{
    position: absolute;
    top: 0;
    left: 0;
}   
    #controles #acercar{
        background: url(img/zoomin.png) no-repeat;
        display:inline-block; text-indent: -3000px; font-size: 0; overflow:hidden; 
        width: 32px;
        height: 32px;
    }
    #controles #alejar{
        background: url(img/zoomout.png) no-repeat;
        display:inline-block; text-indent: -3000px; font-size: 0; overflow:hidden; 
        width: 32px;
        height: 32px;
    }


    .progreso{
        background: #f3f3f3;
        border: 1px solid #eee;
        overflow: hidden;
        margin: 0 0 30px;
    }
    .progreso li{
        float: left;
        padding: 10px 20px 10px 20px;
        font-size: 11px;
        list-style: none;
        line-height: 130%;
    }
    .progreso li.current{
        background: #339900 url(img/breadcrumb2.png) no-repeat left;
        color: #fff;
    }
    .progreso li.pasado{
        background: #FF6600 url(img/breadcrumb1.png) no-repeat left;
        color: #fff;
    }
    .progreso li.siguiente{
        background: #f3f3f3 url(img/breadcrumb3.png) no-repeat left;
        color: #fff;
    }
    .progreso li.pasado:first-child{
        background: #FF6600;
    }
    /* #339900 */

    .progreso li strong{
        font-size: 14px;
    }
        .progreso li.siguiente:hover a{
            color: #339900;
        }
        .progreso li a{
            color: #333;
        }
        .progreso li.current a, .progreso li.pasado a{
            color: #fff;
        }
        .progreso li.unavailable{
            opacity: 0.3;
            background: none;
        }
        
.tabs-content{
    width: auto;
}
.hidden{
    display: none;
}

#esquemacontenedorout{
    position: relative;
}
    #esquema{
        padding: 20px;
        background: #eee;
        /*overflow: hidden;*/
        height: 1160px;
    }
    #esquemaloading{
        background: url(img/ajax-loader.gif) no-repeat center rgba(0,0,0,0.5);
        display: none;
        z-index: 1000;
        position: absolute;;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .espacio.tabs-content{
        background: #fff;
        padding: 10px;
    }
    .esquema{
        background: #eee;
        margin: 0 auto;
        position: relative;
    }
    .esquema:after{
        border-top: 1px dashed #ccc;
        content: '';
        position: absolute;
        bottom: 675px; /* 135cm del piso*/
        left: 0;
        width: 100%;
    }


    #esquema .modulo{
        /*margin-right: 7px;*/
        position: absolute;
    }
    .cuerpo{
        background: #fff;
        border: 5px solid #a7a7a7;
        position: relative;
        float: left;
    }
    .cuerpo.portamicroondas{
        border-bottom: 10px solid #a7a7a7;
    }
    .modulo .cuerpo{
        position: relative;
        float: left;
    }
    .cuerpo .acciones{
        position: absolute;
        top: -40px;
        left: -5px;
        background: rgba(0,0,0,0.5);
        display: none;
        z-index: 100;
        height: 35px;
        padding: 5px;
    }
    .cuerpo:hover .acciones{
        display: block;
    }
    .cuerpo .edit{
        width: 24px;
        height: 24px;
        background:  url(img/edit.png) no-repeat;
        display:block; text-indent: -3000px; font-size: 0; overflow:hidden; 
        float: left;
        margin-right: 5px;
    }
    
    .cuerpo .delete{
        float: left;
        width: 24px;
        height: 24px;
        background:  url(img/delete.png) no-repeat;
        display:block; text-indent: -3000px; font-size: 0; overflow:hidden; 
    }

        .cuerpo .cajon{
            background: url(img/manija.png) no-repeat center #eaeaea;
            border: 1px solid #4b4b4b;
            margin-bottom: 2px;
            position: relative;
        }
        .cuerpo .cajon.bordealuminio{
            border: 3px solid #666;
        }
       
        
            .cuerpo .cajon.fijo{
                background-color: #ffd5dd;
                border: 2px solid #970004;
            }
            .cuerpo .cajon.interior{
                /*margin-left: 1px;*/
                background: #ffd5dd;
                margin-right: 1px;
                margin-top: 2px;
                position: absolute;
                z-index: 1;
                width: 100%;
                border: 2px dashed #970004;
                opacity: 0.5;
            }
            .cuerpo .cajon.interior span{
                float: right;
            }
            .cuerpo .cajon.interior .manija{
                display: none !important;
            }
            .cuerpo .cajon.exterior{
                margin-left: -3px;
                margin-right: -3px;
                margin-top: -3px;
            }
            
            .cuerpo  .cajon.interior ~ .cajon.interior{
                margin-top: 0px;
            }
            .cuerpo .cajon.interior ~ .cajon.exterior, .cuerpo .cajon.exterior ~ .cajon.exterior {
                margin-top: 0px;
            }
            .cuerpo .cajon .manija{
                background: url(img/manija.png) no-repeat ;
                display:block; text-indent: -3000px; font-size: 0; overflow:hidden;
                position: absolute;
                top: 50%;
                left: 50%;
                height: 5px;
                width: 50px;
                margin: -3px 0 0 -25px;
            }

            .espacio{
                border-bottom: 5px solid #a7a7a7;
            }

            .espacio.portahorno{
                background: #000 url(img/horno.png) no-repeat ;
                background-size: 100% 100%;
            }

            .espacio.portamicroondas{
                background: #000 url(img/microondas.png) no-repeat bottom;
                background-size: 100% auto;
            }
            
            

            #esquemacontenedor #esquema .modulo .cuerpo .perfilc32 .manija, 
            #esquemacontenedor #esquema .cuerpo .puerta.dospuertas.perfilc32:nth-child(1) .manija,
            #esquemacontenedor #esquema .cuerpo .puerta.dospuertas.perfilc32:nth-child(2) .manija {
                background: url(img/perfilc32.png) top #eaeaea;
                display:block; text-indent: -3000px; font-size: 0; overflow:hidden;
                position: absolute;
                top: 0%;
                left: 0%;
                height: 16px;
                width: 100%;
                margin: 0;
            }


            

            .cuerpo .perfilc50 .manija,
            .cuerpo .puerta.perfilc50.izquierda .manija,
            .cuerpo .puerta.perfilc50.derecha .manija,
            #esquemacontenedor #esquema .cuerpo .puerta.dospuertas.perfilc50:nth-child(1) .manija,
            #esquemacontenedor #esquema .cuerpo .puerta.dospuertas.perfilc50:nth-child(2) .manija {
                background: url(img/perfilc50.png) top #eaeaea;
                display:block; text-indent: -3000px; font-size: 0; overflow:hidden;
                position: absolute;
                top: 0%;
                left: 0%;
                height: 25px;
                width: 100%;
                margin: 0;
            }

            .cuerpo.alacena .perfilc32 .manija  ,
            .cuerpo.alacena .perfilc50 .manija  {
                top: auto !important;
                bottom: 0 !important;
            }


            .cuerpo .perfilc50 .txt, .cuerpo .perfilc32 .txt {
                padding-top: 30px;
                display: block;
            }

        .cuerpo .paniofijo{
            border: 2px solid #4b4b4b;
            float: left;
            margin-top: -5px;
            margin-left: -5px;
            background:  #ddd ;
            margin-right: 11px;
        }
        .cuerpo .paniofijo.derecha{
            float: right;
            margin-left: 11px;
            margin-right: -5px;
        }
        .puerta.izquierda.completa.esquinero.unapuerta{
            float: left;
        }
        .puerta.derecha.completa.esquinero.unapuerta{
            float: left;
        }
        .cuerpo .paniofijo{
        }
            
        .cuerpo .estante{
            width: 100%;
            position: absolute;
            height: 5px;
            border-top: 3px dashed #000;
            opacity: 0.2;
        }
        .cuerpo .divisorvertical{
            height: 100%;
            position: absolute;
            width: 5px;
            background: #333;
            opacity: 0.5;
        }
        .cuerpo .divisorhorizontal{
            width: 100%;
            position: absolute;
            height: 5px;
            background: #333;
            opacity: 0.5;
        }
        .cuerpo .puerta{
            border: 2px solid #4b4b4b;
            margin-bottom: 1px;
            margin-left: -3px;
            margin-right: -3px;
            margin-top: -3px;
            background:  #f5f5f5 ;
            position: relative;
        }
        .cuerpo .puerta.dospuertas{
            width: 50%;
            width:-moz-calc(50% + 3px);
            width:-webkit-calc(50% + 3px);
            width:calc(50% + 3px); 
            float: left;
        }
        .cuerpo .puerta.dospuertas:nth-child(1){
            margin-right: 0;
        }
        .cuerpo .puerta.dospuertas:nth-child(1){
            margin-right: 0;
        }
        .cuerpo .puerta.dospuertas:nth-child(2){
            margin-left: 0;
        }
        .cajon.exterior ~ .puerta{
            margin-top: 0;
        }
        .cuerpo .puerta.derecha .manija, #esquema .cuerpo .puerta.dospuertas:nth-child(2) .manija{
            background: url(img/manija-izq.png) no-repeat ;
            display:block; text-indent: -3000px; font-size: 0; overflow:hidden;
            position: absolute;
            top: 20px;
            left: 10px;
            width: 5px;
            height: 50px;
        }
        .cuerpo .puerta.izquierda .manija, #esquema .cuerpo .puerta.dospuertas:nth-child(1) .manija{
            background: url(img/manija-der.png) no-repeat ;
            display:block; text-indent: -3000px; font-size: 0; overflow:hidden;
            position: absolute;
            top: 20px;
            right: 10px;
            width: 5px;
            height: 50px;
            left: auto;
        }

        .cuerpo .puerta.izquierda.dospuertasesquinero:nth-child(1){
            opacity: 0;
        }
        .cuerpo .puerta.izquierda.dospuertasesquinero:nth-child(2){
            float: right;
        }
            #esquema .cuerpo .puerta.izquierda.dospuertas.dospuertasesquinero:nth-child(2) .manija{
                left: auto;
                right: 10px;
            }
        .cuerpo .puerta.derecha.dospuertasesquinero:nth-child(2){
            opacity: 0;
        }
        .cuerpo .puerta.derecha.dospuertasesquinero:nth-child(1){
            float: left;
        }
            #esquema .cuerpo .puerta.derecha.dospuertas.dospuertasesquinero:nth-child(1) .manija{
                left: 10px;
                right: auto;
            }



        .cuerpo span.txt{
            font-size: 12px;
            font-weight: bold;
            padding: 3px;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
            display: inline-block;;
            /*text-shadow: 1px 1px 0px rgba(255,255,255,1), -1px -1px 0px rgba(255,255,255,1), 1px -1px 0px rgba(255,255,255,1),  -1px 1px 0px rgba(255,255,255,1);*/
            
            line-height: 120%;
            color: #fff;
            background: rgba(0,0,0,0.5);
            opacity: 0.5;
        }
        .cuerpo span strong{
            font-size: 14px;
        }
        .modulo:hover span{
            opacity: 1;
        }
            
    #esquemacontenedor{
        position: relative;
    }
    #menuesquema{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        display: none;
        z-index: 10;
    }
    #menuesquema .button{
        margin-bottom: 5px;
    }
    #menuesquema .opciones{
        position: absolute;
        padding: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
        z-index: 10;
        left: 0px;
        width: 300px;
        top: 0;
        background: #00526c;
        display: none;
    }
    #menuesquema .opciones .cerrar{
        position: absolute;
        top: 0;
        right: 0;
        background: #003648;
        color: #fff;
        padding: 5px;
        font-weight: bold;
        line-height: 100%;
    }
    #menuesquema .opciones label{
        color: #fff;
    }
    #menuesquema .opciones .field{
        border-bottom: 1px solid #00769d;
        overflow: hidden;
        margin-bottom: 10px;
    }
    #menuesquema .opciones .field label{
        display: inline !important;
    }
    .radio{
        width: 50%;
        float: left;
    }
    
    
.materiales table{
    width: 100%;
}


.printcontainer{
    height: 842px;
    width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.printcontainer hr{
    border-bottom: 2px solid #000;
    margin: -3px 0 0;
    width: 100%;
    float: left;
    z-index: 10;
    position: relative;
}
.etiqueta{
    width: 137px;
    height: 61px;
    border: 1px solid #999;
    float: left;
    padding: 5px;
    margin: -1px 0 0 -1px;
    background: #fff;
    font-size: 11px;
    line-height: 110%;
}
    .etiqueta h4{
        font-size: 14px;
        font-weight: bold;
        margin: 0;
        line-height: 110%;
    }


/*cuerpos especiales*/
.modulo .cuerpo.cocina{
    background: url(img/cocina.png) no-repeat center;
    background-size: 95% auto;
    border: none;
}


.piezasrel .large-4{
    padding: 10px;
}
.piezasrel .large-4.predeterminada{
    background: #D8F1D8;
}
    .piezasrel .large-4 img{
        position: absolute;
        top: 5px;
        right: 10px;

    }
    .piezasrel .large-4 input{
        margin: 0;
    }



/*placared*/
.placard.ruedamas{
    padding: 0 12px;
}
.placard .baulera, .placard .interior{
    float: left;
    border: 9px solid #AB8989;
    position: relative;
}
/*
.placard .modulo{
    background: #fff;
    border: 3px solid #ccc;
}
*/
.placard  .add{
    width: 36px;
    height: 36px;
    background: #2A9130;
    color: #fff;
    text-align: center;
    line-height: 34px;
    font-size: 24px;
    position: absolute;
    top: 0;
    right: -36px;
    z-index: 10;
    display: none;
}
.placard div:hover  .add{
    display: block;
}

/*pedidos*/
.pedidoscorralon{
    position: relative;
    padding: 0 30% 0 20px;
}
    .pedidoscorralon table{
        width: 100%;
    }
    #pedidocorralon{
        position: fixed;
        top: 70px;
        height: 90%;
        width: 24%;
        right: 3%;
        background: #fff;
        padding: 20px;
        overflow-y: auto;
    }
    #pedidocorralon .ped{
        padding: 10px;
        background: #eee;
        padding: 10px;
        font-size: 13px;
        line-height: 17px;
        margin-bottom: 2px;
        border: 1px solid #ccc;
        position: relative;
    }
    #pedidocorralon .remove{
        background: #900;
        height: 20px;
        width: 20px;
        color: #fff;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
    }

    .top-bar-section .dropdown.cols2{
        overflow: hidden;
        width: 530px !important;
    }
    .top-bar-section .dropdown.cols2 li{
        float: left;
        width: 50%;
    }