* { margin: 0px; padding: 0px; } .container-services{ display: flex; flex-wrap: wrap; background: white; justify-content: center; :nth-child(3n){ margin-right: 0 !important; } font-family: 'Roboto', sans-serif; font-size: 16px; } .card{ width: 31%; margin-right: 1%; height: 450px; overflow-y: auto; margin-top: 2em; border:1px solid #778899; border-radius: 4px; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #acaeae; border: 1px solid #0d0c0c; border-radius: 50px; } ::-webkit-scrollbar-thumb:hover { background: #808384; } ::-webkit-scrollbar-thumb:active { background: #6f7475; } ::-webkit-scrollbar-track { background: #666666; border: 0px none #ffffff; border-radius: 43px; } ::-webkit-scrollbar-track:hover { background: #666666; } ::-webkit-scrollbar-track:active { background: #333333; } ::-webkit-scrollbar-corner { background: transparent; } .indicadores{ display: flex; list-style: none; margin: 0; justify-content: space-around; width: 100%; } .indicadores li{ width: 30%; padding: 1.5em; text-align: center; border-radius:4px; margin:0; } .total-bono{ text-align: center; font-size:2em; font-weight: bold; } .main-container{ white-space: nowrap; position: relative; transition: left 2s cubic-bezier(0.075,0.82,0.165,1); } .main-container *{ white-space: normal; } .main-container .lateral-menu,.main-container .content{ margin-right:-4px; display: inline-block; vertical-align: top; height:100vh; } .main-container .content{ width: 100%; transition: left .2s; } .main-container .lateral-menu{ width: 300px; background: #222; left: -300px; position: fixed; z-index: 100; transition: all .8s cubic-bezier(0.075,0.82,0.165,1); box-shadow: 2px 0px 10px rgba(0,0,0,.6); } .list-lateral-menu{ display: flex; height: 100%; flex-direction: column; margin-top:4em; li{ padding: .5em; padding-left: 1em; border-bottom: 1px solid #4d4d4d; a{ text-decoration: none; color:#f2f2f2; display: block; height: 100%; width: 100%; font-family: Roboto; font-size: 1.2em; } } } .list-lateral-menu a:hover{ color: white; } .open{ left:0 !important; } .texto { color:blue; cursor: pointer; font:bold; font-size:12px; line-height: 40px; text-align: center; .transicion(font-size); } .texto:hover { color:white; font-size: 14px; } .titleSection{ color:#428BCA; font-weight: bold; font-size: 1.5em; } .txtlogin:focus{ background: #0000FF; color:#fff; } .efecto3 { box-shadow:inset -3px -5px 7px rgba(0,0,0,0.2),inset 3px 5px 7px rgba(0,0,0,0.2); -webkit-box-shadow:inset -3px -5px 5px rgba(0,0,0,0.2),inset 3px 5px 10px rgba(0,0,0,0.2); -moz-box-shadow:inset -3px -5px 5px rgba(0,0,0,0.2), inset 3px 5px 10px rgba(0,0,0,0.2); } .giro{ width: 20px; height: 20px; //float: right; border:solid; margin-left: 0px; } .subtitulo { padding: 0px; float: right; margin: 0px; height: 40px; line-height: 40px; } a { text-decoration: none; margin-top: 0px; margin-bottom: 0px; } html,body { background: rgb(252,255,244); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(252,255,244,1) 0%, rgba(233,233,206,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(233,233,206,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ font-family: 'olort'; height:100%; margin:0px; padding:0px; max-width:100%; background-image: url('../img/shl.png'); } ul,ol { list-style: none; padding: 0px; margin: 0px; } #contenedor-derecho { //margin-left: 200px; margin-top: 30px; .redondeado(20px); } #barraPrincipal {background: #f7fbfc; /* Old browsers */ background: -moz-linear-gradient(top, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7fbfc), color-stop(40%,#d9edf2), color-stop(100%,#add9e4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4',GradientType=0 ); /* IE6-9 */ } .mensajes { padding: 10px; border-radius: 5px; background-color: #ff6666; } .caja-flex { margin-top: 3em; display: flex; h4{ margin-right: 1em; padding: .5em; justify-content: space-between; border-right: 1px solid black; display: flex; flex-direction: column-reverse; strong{ margin-top: 1em; } } h3{ margin-right: 1.5em; justify-content: center; align-items: center; } } .comentarios { box-shadow: 0px 2px 5px #D0D0D0 ; border-radius: 5px; margin-bottom: 7px; padding: 10px; background-color:#F8F8F8 ; } #buscadorCliente { margin-top: 10px; border:2px solid green; padding: 14px; } #contenedor{ width:500px; height:60%; .redondeado(5px); background-color:#7575FF; .sombra(0px,13px,20px,1px,#383838); } #contenedor-principal { margin-left: 0px; margin-top: 50px; } #divFlogin{ } #estadoFolio { font-size: 20px; margin-top: 10px; color:black; padding: 10px; text-align: center; font-weight: bold; background-color: #33CCCC; } #divLogin{ width:100%; height: 100%; //ackground-color: rgba(92,156,204,1); background-image: url('../img/white_carbonfiber.png'); color:#fff; } #tablaServicio{ text-align: center; th{ text-align: center; } } #tablaServicio td{ vertical-align: middle !important; margin: 0; } @font-face{ font-family: "olort"; src:url(../michroma.eot); } @font-face{ font-family: "olort"; src:url(../michroma.ttf); } /*#logo { background-image: url(../img/logoIsco.png); height: 30px; margin:10px; .redondeado(5px); width: 50px; z-index: 10 !important; position: relative; opacity: 1; } #item-cliente { .items; } #item-empleado { .items; margin-top: 40px; } #item-refaccion { .items; } #item-servicio { .items; } /*#menu { //background: rgb(69,72,77); /* Old browsers */ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ //background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ //background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ //background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ //background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */ //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ /*background-color: rgba(153,204,255,0.0); height: 100%; padding: 0px; position: fixed; margin-left: -3px; width: 70px; //opacity: 0.4; overflow: hidden; .transicion(width); }*/ /*#menu:hover { width: 180px; } #menu div ul li { margin-top: 3px; text-align: center; width: 77px; } #menu div li a { color:white; text-decoration: none; font-size: 13px; } #menu div ul li:hover { background-color:#535aed; .redondeado(5px); }*/ #buscadorServicios { padding: 10px; border: solid; } .buscadorCliente::-webkit-input-placeholder{ color:green; } #navegador { margin-left: 0px; position:fixed; width: 100% !important; } #preHeader { .fondo-preheader; margin-top: 0px !important; width: 100%; .titulo; } .encabezado { background-color:#5c9ccc; .bordesSup(5px); } .error { .mns; background: #FFDAB9; color:#FA8072; } .mns { padding-left: 5px; padding-right: 5px; float: right; margin: 0px; height: 40px; line-height: 40px; .redondeado(5px); } .exito { .mns; color:green; } .item-logo { background-image: url(../img/menu.png); float: left; height: 40px; .redondeado(5px); width: 40px; } .ubicacion { color:#339933; font-weight: bold; } .urgente { background-color: #800000; color:white; padding:10px; text-align:center; font-weight: bold; margin-top:10px; margin-bottom:10px; } .td-flex{ display: flex; flex-direction: column; height: 100% !important; a { margin-bottom: 5px; } div{ margin-bottom: 5px; } button{ margin-top: 5px; } } .texto { color:blue; cursor: pointer; font:bold; font-size:12px; line-height: 40px; text-align: center; .transicion(font-size); } .texto:hover { color:white; font-size: 14px; } .titleSection{ color:#428BCA; font-weight: bold; font-size: 1.5em; } .txtlogin:focus{ background: #0000FF; color:#fff; } .efecto3 { box-shadow:inset -3px -5px 7px rgba(0,0,0,0.2),inset 3px 5px 7px rgba(0,0,0,0.2); -webkit-box-shadow:inset -3px -5px 5px rgba(0,0,0,0.2),inset 3px 5px 10px rgba(0,0,0,0.2); -moz-box-shadow:inset -3px -5px 5px rgba(0,0,0,0.2), inset 3px 5px 10px rgba(0,0,0,0.2); } .giro{ width: 20px; height: 20px; //float: right; border:solid; margin-left: 0px; } .subtitulo { padding: 0px; float: right; margin: 0px; height: 40px; line-height: 40px; } /*.submenu { display: none; } #menu div:hover >ul{ display: block; }*/ /*Less----------------------------------Less--------------------------------------------------------*/ .bordesSup(@med) { border-radius: @med @med 0px 0px; -webkit-border-radius: @med @med 0px 0px; -moz-border-radius: @med @med 0px 0px; -o-border-radius: @med @med 0px 0px; color:white; padding: 3px; font-weight: bolder; cursor: pointer; } .fondo-preheader { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */ background: rgb(242,245,246); /* Old browsers */ background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */ } @font-menu:#0078A4; .items { //background-color:red; height: 60px; margin:10px; margin-top:20px; width: 170px; } .redondeado(@med) { border-radius: @med; -webkit-border-radius: @med; -moz-border-radius: @med; -o-border-radius: @med; } .sombra(@x,@y,@bl,@d,@color){ box-shadow:@x @y @bl @d @color; } .sombra_int(@x,@y,@bl,@d,@color){ box-shadow:@x @y @bl @d @color inset; } .titulo { color:#2b7ee4; font-family: 'olort'; font-size: 50px; text-align: center; } .submenu { color:white; margin-left: 70px; } .total-comision{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .transicion(@atributo:'') { transition:@atributo .4s; -webkit-transition:@atributo .4s; -moz-transition:@atributo .4s; -o-transition:@atributo .4s; } .paneles { box-shadow:0px 0px 10px #7db9d6; -webkit-box-shadow:0px 0px 10px #7db9d6; -moz-box-shadow:0px 0px 10px #7db9d6; } /* Chat containers */ .container-comment { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } /* Darker chat container */ .darker { border-color: #ccc; background-color: #ddd; } /* Clear floats */ .container-comment::after { content: ""; clear: both; display: table; } /* Style images */ .container-comment img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } /* Style the right image */ .container-comment img.right { float: right; margin-left: 20px; margin-right:0; } /* Style time text */ .time-right { float: right; color: #aaa; } /* Style time text */ .time-left { float: left; color: #999; }