@charset "UTF-8";
* {margin:0; padding:0}

:focus {outline:none}
input[type="button"]:focus {text-decoration:underline; -moz-text-decoration-style:dotted; -moz-text-decoration-color:#a2a2a2}
input[type="button"].sel:focus {-moz-text-decoration-color:#fff}

a {text-decoration:none}
a img {border:0}
abbr {border-bottom:0}
body {background:#e1e1e1 url('../img/ruido.png') repeat; font-family:"Trebuchet MS"; font-size:14px}
button {background:url('../img/corazon.png') 7px 7px no-repeat, #fff url('../img/fondo_informacion.png') bottom repeat-x; border:1px solid #c0c0c0; color:#000; border-radius:7px; cursor:pointer; font-family:Tahoma, Arial, Verdana, "Lucida Sans Unicode", sans-serif; font-weight:700; margin-top:20px; padding:5px 5px 5px 30px}
h1 {font-size:22px; margin:5px 0 25px}
h2 {font-size:18px; margin:0 0 10px; text-align:center}
h3 {font-size:14px; margin-bottom:10px}
h4 {color:#fff;font-size:16px; margin-bottom:15px}
header {background:#fff; border-bottom:1px solid #a4a4a4; border-top:5px solid #d22525; padding:17px 0 15px}
header div {margin:0 auto; width:850px}
input[type="button"].btn {font-family:"Trebuchet MS"; height:27px}
input[type="button"]::-moz-focus-inner {border:1px dotted transparent; padding:0} /* Fix para Firefox, falta border:0 */
input[type="text"] {border:1px solid #ccc; border-radius:7px 0 0 7px; float:left; height:15px; padding:5px; text-align:center; width:30px}
section {background:#fff; box-shadow:0 0 2px 2px #ccc; margin:35px auto; padding:40px; position:relative; width:700px}
select {background:#fff url('../img/fondo_boton.png') repeat-x; border:1px solid #c0c0c0; border-radius:7px; color:#a2a2a2; float:left; font-size:12px; height:27px; padding:0px 5px 0 5px; z-index:999}
select[name="fumador"] {width:240px}
option {padding:3px}

.paso {border-right:1px dashed #858585; float:left; padding:10px 20px; position:relative; width:180px}
.logo {margin-top:15px; width:21%}
#pasos {text-shadow:0 0 2px #000; color:#d6d6d6; background:#585858 url('../img/ruido_pie.png') repeat; font-size:12px; text-align:center}
#pasos > div {margin:0 auto; padding:15px 0; width:850px}
#paso1 {background-position:-450px -80px}
#paso2 {background-position:-450px -105px}
#paso3 {background-position:-450px -130px}
#paso4 {background-position:-450px -155px}
#paso1, #paso2, #paso3, #paso4 {background-image:url('../img/sprite.png'); height:25px; position:absolute; width:25px}
#img_test {background-position:-307px -251px}
#img_compartir {background-position:-339px -251px}
#img_consejos {background-position:-371px -251px}
#img_email {background-position:-403px -251px}
#img_test, #img_compartir, #img_consejos, #img_email {background-image:url('../img/sprite.png'); height:32px; margin:0 auto 8px; width:32px}
footer {background:#1e2022 url('../img/ruido_pie.png') repeat; color:#fff; font-size:12px; padding:5px 0 5px}
footer a {color:#acacac; text-decoration:none}
footer a:hover {color:#ccc}
footer div div {float:left}
footer div > div {text-align:left; width:37%}
footer > div {overflow:auto; margin:0 auto 15px; width:850px}
#cms {background:url('../img/sprite.png') -131px -300px no-repeat; display:block; height:75px; margin:17px auto 0; width:200px}
#mvm {background:url('../img/sprite.png') -331px -300px no-repeat; display:block; float:right; margin-top:17px; height:75px; width:96px}

#cs2 {background:url('../img/sprite.png') 0 -300px no-repeat; display:block; height:75px; width:131px}
#fac {background:url('../img/fac.png') 0 0 no-repeat; display:block; height:110px; width:131px; margin-top:2px}

.btn {background:#fff url('../img/fondo_boton.png') bottom repeat-x; border:1px solid #c0c0c0; color:#a2a2a2; cursor:pointer; display:block; float:left; font-size:12px; height:15px; padding:4px 10px 6px; text-align:center}
.izq {border-radius:7px 0 0 7px}
.med {border-left:0; border-radius:0}
.der {border-left:0; border-radius:0 7px 7px 0}
.sel {background:url('../img/fondo_seleccion.png') 50% 50% repeat-x; color:#fff}
.nfo {background:#fff url('../img/fondo_informacion.png') repeat-x; border-left:0; color:#000; cursor:default; font-weight:700; border-radius:0 7px 7px 0; padding:5px 10px}
.clear {clear:both}
.fila {border-bottom:1px solid #ccc; clear:both; margin:0 auto; overflow:visible; padding:10px}
.fila img {margin-left:4px; vertical-align:bottom}
.izquierda {float:left; font-weight:700; height:25px; margin-top:11px; width:310px}
.derecha {float:right; height:30px; margin-top:6px}
.oculto {display:none}
.overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:black; z-index:1001; opacity:.8}
.overlay div {color:#fff; padding-top:20px; position:fixed; top:50%; left:50%; width:200px; height:150px; margin-top:-75px; margin-left:-100px; text-align:center; z-index:1002}
.dropdown {border-left:1px solid #c0c0c0; height:21px; padding:4px 8px 0 4px; position:absolute; right:0; z-index:1000}
.dropdown img {vertical-align:middle}
.tooltip {background-color:#f0cfd8; border-radius:5px 0 0 5px; color:#ce063e; display:none; float:left; font-size:11px; margin:1px 20px 0 0; padding:6px 6px 5px; position:relative}
.tooltip:after {border-left:13px solid #f0cfd8; border-top:13px solid transparent; border-bottom:13px solid transparent; content:''; height:0; position:absolute; right:-13px; top:0; width:0}
.slider {float:right; margin:10px 0 0; width:250px}
.respuesta {background:#fff; border:1px dotted #c0c0c0; border-radius:4px; box-shadow:0 0 5px #bababa; color:#1582e8; display:block; float:left; padding:5px 0; text-align:center; width:95px}

#compartir_test {float:right; height:32px; margin-top:4px; width:106px}
#compartir_test a {background-image:url('../img/sprite.png'); background-repeat:no-repeat; display:block; float:left; height:32px; width:32px}
#fb {background-position:-307px -155px; margin-right:5px}
#fb:hover {background-position:-339px -155px}
#tw {background-position:-307px -187px; margin-right:5px}
#tw:hover {background-position:-339px -187px}
#gp {background-position:-307px -219px}
#gp:hover {background-position:-339px -219px}

.icono {float:left; margin-right:20px; width:57px}
.icono .flecha {background:url('../img/flecha-2.png') 27px 0 no-repeat}
.icono div {background-image:url('../img/sprite.png'); background-repeat:no-repeat; height:40px; margin:0 auto}
#img_edad {background-position:0 0; width:53px}
#img_sexo {background-position:-53px 0; width:26px}
#img_altura {background-position:-79px 0; width:51px}
#img_peso {background-position:-130px 0; width:45px}
#img_antecedentes {background-position:-175px 0; width:46px}
#img_colesterol {background-position:-221px 0; width:37px}
#img_cigarrillo {background-position:-258px 0; width:57px}
#img_diabetes {background-position:-315px 0; width:42px}
#img_tas {background-position:-357px 0; width:47px}
#img_medicacion {background-position:-404px 0; width:45px}
#img_genetica {background-position:-449px 0; width:15px}

.ayuda {text-decoration:none}
.ayuda span {box-shadow:0 0 5px #c0c0c0; background:rgba(0,0,0,.8); border-radius:7px; color:#fff; display:none; font-size:11px; overflow:visible; padding:7px; position:relative}
.ayuda span:after {border-right:8px solid rgba(0,0,0,.8); border-top:8px solid transparent; border-bottom:8px solid transparent; content:" "; height:0; left:-8px; position:absolute; width:0}
.ayuda:hover span {display:block}
#antecedentes .ayuda span {width:290px; left:310px; top:-52px}
#antecedentes .ayuda span:after {top:35px}
#genetica .ayuda span {width:155px; left:440px; top:-52px}
#genetica .ayuda span:after {top:35px}
#colesterol .ayuda span {width:200px; left:410px; top:-37px}
#colesterol .ayuda span:after {top:20px}
#colesterol_total .ayuda span {width:315px; left:140px; top:-31px}
#colesterol_total .ayuda span:after {top:13px}
#colesterol_hdl .ayuda span {width:325px; left:140px; top:-31px}
#colesterol_hdl .ayuda span:after {top:13px}
#ia .ayuda span {width:130px; left:200px; top:-44px}
#ia .ayuda span:after {top:28px}

label {background:url('../img/no_tildado.png') no-repeat; display:block; padding:0 0 5px 27px}
input[type="checkbox"]:checked + label {background:url('../img/tildado.png') no-repeat}
input[type="checkbox"]:not(:checked) + label:hover {background:url('../img/resaltado.png') no-repeat}
#edad {border-top:1px solid #ccc; margin-top:25px}
#tipos_antecedente {height:170px}
input[type="checkbox"] {display:none}

#femenino {background:url('../img/femenino.png') 7px 5px no-repeat, #fff url('../img/fondo_boton.png') bottom repeat-x; padding-left:28px}
#femenino.sel {background:url('../img/femenino.png') 7px 5px no-repeat, url('../img/fondo_seleccion.png') 50% 50% repeat-x}
#masculino {background:url('../img/masculino.png') 7px 5px no-repeat, #fff url('../img/fondo_boton.png') bottom repeat-x; padding-left:28px}
#masculino.sel {background:url('../img/masculino.png') 7px 5px no-repeat, url('../img/fondo_seleccion.png') 50% 50% repeat-x}
#ia input {width:25px}
#imc input {width:40px}
#peso input {width:45px}
#tipo_fumador .derecha {position:relative}
#antecedentes .izquierda, #colesterol .izquierda, #genetica .izquierda, #medicacion .izquierda {width:470px}
#colesterol_total .izquierda, #colesterol_hdl .izquierda {width:250px}

#resultado {margin:40px auto 0; height:280px; position:relative; width:450px}
#edad_cronologica {font-size:22px; background-color:#0067bf; color:#0067bf; float:left}
#edad_cronologica div {background-position:-167px -155px; width:70px; left:76px}
#edad_cronologica span {display:block; margin-top:52px}
#edad_cronologica_texto {color:#0067bf; float:left; font-weight:700; padding:0 0 5px 10px}
#edad_arterial {font-size:54px; background-color:#ce0037; color:#ce0037; float:right}
#edad_arterial div {background-position:0 -155px; width:167px; left:256px}
#edad_arterial span {display:block; margin-top:37px}
#edad_arterial_texto {color:#ce0037; float:right; font-weight:700; padding:0 10px 5px; text-align:right; width:45%}
#edad_arterial, #edad_cronologica {background-image:url('../img/destello.png'); background-position:center center; background-repeat:no-repeat; font-weight:700; height:180px; margin-bottom:7px; text-align:center; width:221px}
#edad_arterial div, #edad_cronologica div {background-image:url('../img/sprite.png'); height:145px; margin:0 auto; position:absolute; top:41px}
#riesgo_cardiovascular {background:#009800; color:#fff; clear:both; overflow:auto}
#porcentaje {float:left; font-size:28px; padding:5px 0; text-align:right; width:37%}
#probabilidad_texto {float:right; font-size:12px; padding:7px 0 0; width:60%}
#riesgo_cardiovascular_texto {color:#009800; font-weight:700; padding:5px 0 0; text-align:center}
#versus {background:#fff; border-radius:50%; font-size:18px; font-weight:700; height:29px; left:50%; padding-top:6px; position:absolute; text-align:center; margin:97px 0 0 -18px; width:35px}
#compartir {background:#fff; border:1px solid #ccc; border-radius:5px; left:50%; margin-left:-50px; opacity:0; padding:5px; position:absolute; top:5px; width:84px}
#compartir a {background-image:url('../img/sprite.png'); display:block; float:left; height:20px; width:20px}
#facebook {background-position:-371px -230px; margin-left:7px}
#twitter {background-position:-391px -230px; margin-left:5px; margin-right:5px}
#google_plus {background-position:-411px -230px}
#nuevo {display:none; margin-top:15px; text-align:center}
#nuevo a {color:#7f7f7f; text-decoration:none}
#nuevo a:hover {border-bottom:1px dotted #c0c0c0}

.mensaje_final {border:1px dashed; border-radius:7px; clear:both; display:none; margin:35px auto 0; overflow:auto; padding:15px; width:600px}
.incorrecto {background:#f6d6d5; border-color:#e89896}
.correcto {background:#cbe9cc; border-color:#009800}
.mensaje_final .btn {background:#fff url('../img/fondo_informacion.png') bottom repeat-x; color:#000}
#no_test {text-align:center}
#no_test > button {background:#fff url('../img/fondo_informacion.png') bottom repeat-x; padding:4px 10px}
.deshabilitado {color:#c0c0c0}
#opinion {margin:0 auto; text-align:center; width:450px}
#opinion .btn {padding:5px 10px}

#datos_personales {margin:0 auto; overflow:auto; text-align:center; width:395px}
#datos_personales .nfo {border:1px solid #c0c0c0; border-right:0; border-radius:7px 0 0 7px; clear:both; float:left; margin-top:5px; text-align:right; width:120px}
#datos_personales input {border-radius:0 7px 7px 0; float:left; margin-top:5px; padding:5px 10px; text-align:left; width:230px}
#datos_personales button {background:#fff url('../img/fondo_informacion.png') bottom repeat-x; font-weight:400; margin-top:10px; padding:4px 10px}

/* Hábitos -------------------------------------------------------------------------------------------------*/
#habitos {width:800px}
#habitos h2,
#consultar h2 {text-align:left}
#habitos .ayuda {border-bottom:1px dashed #000; position:relative}
#habitos .ayuda span {position:absolute; left:-115px}
#habitos .ayuda span:after {border-top:8px solid rgba(0,0,0,.8); border-left:8px solid transparent; border-right:8px solid transparent; left:50%; margin-left:-8px; bottom:-16px}
#hab1 .ayuda span {top:-95px; width:270px}
#hab2 .ayuda span {top:-140px; width:270px}
#hab6 .ayuda span {top:-40px; left:-130px; width:290px}
#habitos button.deshabilitado {background:url('../img/corazon_gris.png') 7px 7px no-repeat, #fff url('../img/fondo_informacion.png') bottom repeat-x}
#habitos .fila,
#consultar .fila {margin:0; padding:20px 5px 20px}
#habitos .fila img,
#consultar .fila img {margin:0}
#habitos .izquierda {background:url('../img/sprite.png'); height:75px; margin:0; padding:0; width:75px}
#hab1 .izquierda {background-position:0 -80px}
#hab2 .izquierda {background-position:-75px -80px}
#hab3 .izquierda {background-position:-150px -80px}
#hab4 .izquierda {background-position:-225px -80px}
#hab5 .izquierda {background-position:-300px -80px}
#hab6 .izquierda {background-position:-375px -80px}
#hab7 .izquierda {background-position:-375px -155px}
#habitos .centro {font-weight:700;float:left; margin:20px 0 0 25px; width:275px} /*height:190px;*/
#habitos .derecha {height:35px; margin:25px 0 0; padding:0 10px 0 0; width:380px}
#hab1.fila, #rec1.fila {border-top:1px solid #ccc; margin-top:35px; padding-top:15px}
#recomendaciones {display:none; margin-top:75px}
#recomendaciones .izquierda {background:none; height:50px; margin:0 0 0 20px; width:50px}
#recomendaciones .derecha {background:none; height:100%; margin:0; width:690px}
#recomendaciones .mensaje_final {background:#d0e1f7; border-color:#1b83b6}
#recomendaciones .mensaje_final h2 {color:#0f5a79; text-align:center}
#habitos ul,
#consultar ul {list-style-type:circle; margin:10px 60px 0 30px}
input[name="email"] {border:1px solid #a9a9a9; width:250px}
#enviar_email {background:#fff url('../img/fondo_informacion.png') bottom repeat-x; border:1px solid #a9a9a9; border-left:0; color:#000; border-radius:0 7px 7px 0; cursor:pointer; font-size:12px; padding:5px; height:27px}
#descargar {background:url('../img/descargar.png') 7px 7px no-repeat, #fff url('../img/fondo_informacion.png') bottom repeat-x; border:1px solid #c0c0c0; border-radius:7px; color:#000; cursor:pointer; display:block;margin:0 auto; padding:5px 5px 5px 30px; text-align:center; width:115px}

.noUi-target, .noUi-target * {-webkit-touch-callout:none; -webkit-user-select:none; -ms-touch-action:none; -ms-user-select:none; -moz-user-select:none; -moz-box-sizing:border-box; box-sizing:border-box}
.noUi-base {width:100%; height:100%; position:relative}
.noUi-origin {position:absolute; right:0; top:0; left:0; bottom:0}
.noUi-handle {position:relative; z-index:1}
.noUi-stacking .noUi-handle {z-index:10}
.noUi-stacking + .noUi-origin {z-index:-1}
.noUi-state-tap .noUi-origin {-webkit-transition:left 0.3s, top 0.3s; transition:left 0.3s, top 0.3s}
.noUi-state-drag * {cursor:inherit !important}
.noUi-horizontal {height:10px}
.noUi-horizontal .noUi-handle {width:25px; height:25px; left:-17px; top:-10px}
.noUi-horizontal.noUi-extended {padding:0 15px}
.noUi-horizontal.noUi-extended .noUi-origin  {right:-15px}
.noUi-background {background:#fafafa; box-shadow:inset 0 1px 1px #f0f0f0}
.noUi-connect {background:#1aabe1; box-shadow:inset 0 0 3px rgba(51,51,51,0.45); -webkit-transition:background 450ms; transition:background 450ms}
.noUi-origin {border-radius:2px}
.noUi-target {border-radius:4px; border:1px solid #D3D3D3; box-shadow:inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB}
.noUi-target.noUi-connect {box-shadow:inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB}
.noUi-handle {border:1px solid #bbb; border-radius:25px; background:#FFF; cursor:default;  box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}
.noUi-active {box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}
.noUi-handle:before, .noUi-handle:after {content:""; display:block; position:absolute; height:14px; width:1px; background:#c3c3c3; left:9px; top:5px}
.noUi-handle:after {left:13px}
[disabled].noUi-connect,[disabled] .noUi-connect {background:#B8B8B8}
[disabled] .noUi-handle {cursor:not-allowed}

/* Consultar resultado */
html, body {height:100%}
#wrapper {min-height:100%; position:relative}
#wrapper footer {position:absolute; bottom:0; width:100%}
#contenedor_central {padding-bottom:152px; position:static;}
#consultar {width:800px}
#consultar form {margin:20px auto 0; text-align:center; width:360px}
#consultar input[type="text"] {border:1px solid #ccc; border-radius:0; font-family:Verdana; font-size:22px; height:auto; margin:0 auto 15px; padding:7px 10px; text-align:left; width:290px;}
#consultar input[name="apellido"] {background:url('../cognitivo/img/apellido.png') no-repeat 10px 50%; padding-left:55px;}
#consultar input[name="nombre"] {background:url('../cognitivo/img/nombre.png') no-repeat 11px 50%; padding-left:55px; margin-right:15px}
#consultar input[name="documento"] {background:url('../cognitivo/img/documento.png') no-repeat 10px 50%; padding-left:55px; margin-right:15px}
#consultar input[name="enviar"] {background:#07a1dd; border:0; color:#fff; cursor:pointer; font-family:Calibri, Helvetica, Tahoma, Arial, "Myriad Pro"; font-size:24px; height:40px; padding:0 10px; width:100px}
#consultar input[name="enviar"]:hover {background:#1caae0}
#consultar form div {background:#f0cfd8; color:#ce063e; margin-bottom:20px; padding:10px; width:337px}
#consultar .fila .derecha {padding-right:10px}
#consultar #resultado_edad {background:#ce0037; color:#fff; float:left; font-weight:700; padding:15px; text-align:center; width:200px}
#consultar #resultado_riesgo {background:#0067bf; color:#fff; float:right; font-weight:700; padding:15px; text-align:center; width:200px}
#consultar #resultado_edad span,
#consultar #resultado_riesgo span {display:block; font-size:36px; margin-top:5px}
#informe {margin:0 auto; width:470px}
#informe .izquierda {background:none; clear:both; width:200px}
#informe .derecha {background:none; text-align:right; width:230px}
#informe .impar {background:#eaeaea; border:1px solid #ccc; border-left:0; border-right:0}
#informe div {height:auto; margin:0; padding:7px 10px}
#problemas_cardiacos {background:#eaeaea; border:1px solid #ccc; border-left:0; border-right:0; clear:both; overflow:auto; width:450px}
#problemas_cardiacos .izquierda,
#problemas_cardiacos .derecha {background:none; border:none; padding:0}
#problemas_cardiacos .izquierda {width:265px}
#problemas_cardiacos .derecha {width:185px}
#problemas_cardiacos .derecha ol {margin:0; text-align:left}