html{
min-height: 100%;
}
@font-face {
font-family: 'Gotham';
src: url('../fonts/original_Gotham-Thin.eot?#iefix') format('embedded-opentype'),
url('../fonts/original_Gotham-Thin.woff') format('woff'),
url('../fonts/original_Gotham-Thin.ttf') format('truetype'),
url('../fonts/original_Gotham-Thin.svg') format('svg');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('../fonts/original_Gotham-Book.eot?#iefix') format('embedded-opentype'),
url('../fonts/original_Gotham-Book.woff') format('woff'),
url('../fonts/original_Gotham-Book.ttf') format('truetype'),
url('../fonts/original_Gotham-Book.svg') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('../fonts/original_Gotham-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/original_Gotham-Bold.woff') format('woff'),
url('../fonts/original_Gotham-Bold.ttf') format('truetype'),
url('../fonts/original_Gotham-Bold.svg') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gotham';
src: url('../fonts/original_Gotham-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/original_Gotham-Black.woff') format('woff'),
url('../fonts/original_Gotham-Black.ttf') format('truetype'),
url('../fonts/original_Gotham-Black.svg') format('svg');
font-weight:800;
font-style: normal;
}
body{
background: #333238;
min-height: 100%;
font-family: 'Gotham', sans-serif, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* transition:all .5s;*/
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(../fonts/MaterialIcons-Regular.woff) format('woff'),
url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
.material-icons.blanco { color:#fff; }
/*+++++++++++++++++++++++++*/
a{
cursor: pointer;
}
.ani-up, .ani-dow, .ani-izq, .ani-der, .ani-zoom{
opacity: 0;
}
.delay-25{animation-delay: .25s;}
.delay-50{animation-delay: .50s;}
.delay-75{animation-delay: .75s;}
.delay-100{animation-delay: 1s;}
.delay-125{animation-delay: 1.25s;}
.delay-150{animation-delay: 1.50s;}
.delay-175{animation-delay: 1.75s;}
.bg-degra01{
background-image: linear-gradient( to bottom right, #c3f5fe 0%, #cdcaff 48%, #ffd6ff 100%);
}
.bg-degra02{
background-color: #EAECEF;
}
.bg-degra03{
background-color: #F7F8F9;
}
.header{
display: flex;
width: 100%;
border-bottom: 1px solid rgba(71, 80, 138, 0.15);
height: 61px;
position: fixed;
z-index: 100;
}
.header div{
position: relative;
}
.logos{
width: 15%;
display: flex;
}
.buscador{
width: 22%;
}
.menu01{
width: 35%;
}
.btn-registro{
width: 18%;
display: flex;
}
.usuario{
width: 10%;
display: flex;
}
.cont-logo{
background:#fff;
opacity: 0.8;
box-shadow: 0px 10px 40px 0px rgba(46, 53, 85, 0.32);
height: 40px;
border-radius: 20px;
max-width: 150px;
margin: auto;
display: flex;
}
.cont-logo img{
max-width: 80%;
max-height: 80%;
display: block;
margin: auto;
}
.inp-bus{
background: none;
border: none;
color: #47508a;
width: 100%;
line-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-bottom: 15px;
font-size: 14px;
padding-left: 25px;
cursor: pointer;
}
.buscador i{
position: absolute;
left: 0;
top: 10px;
line-height: 40px;
color: #47508a;
}
.menu01>ul{
list-style: none;
padding-left: 0;
display: flex;
width: 100%;
margin-bottom: 0;
}
.menu01>ul>li{
width: 33.33%;
}
.menu01>ul>li>a{
width: 100%;
line-height: 60px;
font-size: 12px;
font-weight: bold;
color: #3f4e8c;
border-bottom: 2px solid transparent;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.menu01>ul>li>a.active{
border-bottom: 2px solid #db4bde;
}
.img-user{
margin: auto;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
background: #253255;
}
.img-user img{
width: 100%;
width: 100%;
object-fit: cover;
}
.btn01{
background-image:linear-gradient( to right, #a953ff 1%, #dc4cdf 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
text-align: center;
}
.btn02{
background-image: linear-gradient( to right, rgb(95,132,251) 1%, rgb(103,183,251) 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
text-align: center;
}
.notifi{
margin: auto;
}
.lista-adds{
display: block;
margin-top: 0px;
margin-bottom: 0;
padding-left: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.lista-adds li{
display: inline-block;
}
.lista-adds li a{
border-radius: 10px;
background-image: linear-gradient( to top, rgb(95,132,251) 1%, rgb(103,183,251) 100%);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
width: 56px;
height: 56px;
overflow: hidden;
display: block;
}
.lista-adds li a img{
object-fit: cover;
width: 100%;
height: 100%;
}
.nombre-int{
display: block;
/* margin-top: 15px;*/
position: relative;
}
.nombre-int h3{
font-size: 18px;
font-weight: 400;
color: #3f4e8c;
margin-bottom: 0;
line-height: 20px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 50px;
}
.nombre-int h3 strong{
font-weight: 800;
}
.cards{
list-style: none;
padding-left: 0;
transition: all .5s;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding: 10px !important;
width: 100%;
}
.card-trj{
border-radius: 15px;
background-image: linear-gradient( to top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 100%);
box-shadow: 0px 5px 11px 0px rgba(70, 34, 120, 0.2);
width: 100%;
padding: 10px;
display: flex;
position: relative;
margin-bottom: 20px;
transition: all .5s;
}
.card-trj:hover{
background-image: linear-gradient( to top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%);
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.3);
}
.dropdown-toggle::after{
display: none;
}
.drop-more{
font-size: 14px;
line-height: 16px;
}
.card-title{
font-weight: 800;
text-transform: uppercase;
font-size: 14px;
line-height: 16px;
color: #3f4e8c;
margin-bottom: 0;
}
.card-divtit{
display: flex;
justify-content: flex-end;
align-items: center;
}
.card75{
width: 75%;
}
.card25{
width: 25%;
/* position: relative;*/
}
.card-cont{
display: flex;
align-items: center;
height: 40px;
}
.card-btn{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
}
.card-btn .progress{
width: 60%;
border-radius: 10px;
height: 10px;
}
.btn-mr0{
margin: 0;
margin-left: 5px;
}
.card-ico{
position: absolute;
top: -10px;
left: 0;
height: 120%;
}
.card-ico img{
height: 100%;
width: auto;
}
.cnt-val{
width: 33.33%;
}
.cnt-val span{
font-size: 12px;
font-weight: 400;
color: #3f4e8c;
display:block;
text-align: center;
line-height: 12px;
}
.cnt-val p{
font-weight: bold;
font-size: 24px;
line-height: 24px;
display:block;
color: #3f4e8c;
text-align: center;
margin-bottom: 0;
}
.cnt-val-B{
width: 100%;
}
.cnt-val-B span{
font-size: 12px;
font-weight: 400;
color: #3f4e8c;
display:block;
line-height: 12px;
}
.cora-lpm-B{
font-size: 12px;
font-weight: 400;
color: #3f4e8c;
line-height: 12px;
white-space: nowrap;
}
.spdiv>div{
border-right: 1px solid #3f4e8c;
}
.spdiv>div:last-child{
border-right: 0px solid #3f4e8c;
}
.progress-bar-vertical {
width: 20px;
min-height: 40px;
display: flex;
align-items: flex-end;
margin-right: 20px;
float: left;
}
.progress-bar-vertical .progress-bar {
width: 100%;
height: 0;
-webkit-transition: height 0.6s ease;
-o-transition: height 0.6s ease;
transition: height 0.6s ease;
}
.niv-presion{
display: flex;
margin-left: 8px;
}
.txt-niv-presion p{
font-weight: bold;
font-size: 24px;
line-height: 24px;
display:block;
color: #3f4e8c;
text-align: left;
margin-bottom: 0;
}
.txt-niv-presion span{
font-size: 10px;
font-weight: 400;
color: #3f4e8c;
display:block;
text-align: left;
line-height: 12px;
}
.niveles-pres{
height: 40px;
display: flex;
}
.niv-presion .progress-bar-vertical{
width: 6px;
margin-right: 6px;
border-radius: 0;
}
/*++++++++++++++++*/
#cardio{
position : relative;
width : 150px;
height :80px;
overflow: hidden;
transform:scale(.5) translateY(50%);
margin-top: -40px;
margin-right: -30px;
}
.pointer{
width : 10px;
height : 10px;
border-radius : 20px;
position : absolute;
top : 45%;
right: 0px;
background : #B83535;
-webkit-animation : point 2s linear infinite;
animation : point 2s linear infinite;
}
@-webkit-keyframes point
{
0%{
-webkit-transform : translateY(0px);
}
10%{
-webkit-transform : translateY(-28px);
}
20%{
-webkit-transform : translateY(16px);
}
30%{
-webkit-transform : translateY(0px);
}
40%{
-webkit-transform : translateY(-28px);
}
50%{
-webkit-transform : translateY(16px);
}
60%{
-webkit-transform : translateY(0px);
}
}
@keyframes point
{
0%{
transform : translateY(0px);
}
10%{
transform : translateY(-28px);
}
20%{
transform : translateY(16px);
}
30%{
transform : translateY(0px);
}
40%{
transform : translateY(-28px);
}
50%{
transform : translateY(16px);
}
60%{
transform : translateY(0px);
}
}
.line
{
width : 30px;
height : 2px;
position : absolute;
top : 50%;
background : #BA6E6E;
-webkit-animation : lines 2s linear infinite;
animation : lines 2s linear infinite;
}
.start
{
width : 180px;
-webkit-transform : translateX(-150px);
transform : translateX(-150px);
}
.up1
{
-webkit-transform : translateX(20px) translateY(-17px) rotate(-60deg) ;
transform : translateX(20px) translateY(-17px) rotate(-60deg) ;
width : 40px;
}
.up2
{
-webkit-transform : translateX(53px) translateY(12px) rotate(-60deg) ;
transform : translateX(53px) translateY(12px) rotate(-60deg) ;
width : 30px;
}
.down
{
-webkit-transform : translateX(25px) translateY(-5px) rotate(80deg) ;
transform : translateX(25px) translateY(-5px) rotate(80deg) ;
width : 60px;
}
.shortEnd
{
-webkit-transform : translateX(75px);
transform : translateX(75px);
width : 10px;
}
.longEnd
{
width : 150px;
-webkit-transform : translateX(75px);
transform : translateX(75px);
}
.right
{
left : 55px;
}
@-webkit-keyframes lines
{
0%{
margin-left : 130px;
}
10%{
margin-left : 95px;
}
20%{
margin-left : 85px;
}
30%{
margin-left : 70px;
}
40%{
margin-left : 45px;
}
50%{
margin-left : 30px;
}
70%{
margin-left : 0px;
}
100%{
margin-left : -120px;
}
}
@keyframes lines
{
0%{
margin-left : 130px;
}
10%{
margin-left : 95px;
}
20%{
margin-left : 85px;
}
30%{
margin-left : 70px;
}
40%{
margin-left : 45px;
}
50%{
margin-left : 30px;
}
70%{
margin-left : 0px;
}
100%{
margin-left : -120px;
}
}
#hide
{
position : absolute;
left : 52%;
width : 50%;
height : 100%;
background : #071706;
border-left : 2px dotted rgba(200,200,200,0.2);
}
#notaline
{
width : 300px;
height : 2px;
position : absolute;
top : 50%;
background : #BA6E6E;
}
.dsp-flex-end{
justify-content: flex-end;
}
.cora-lpm{
}
.years-exp span, .gluc-mg-ld span, .cora-lpm span{
font-size: 12px;
font-weight: 400;
color: #3f4e8c;
display:block;
text-align: center;
line-height: 12px;
}
.years-exp p, .gluc-mg-ld p, .cora-lpm p{
font-weight: bold;
font-size: 30px;
line-height: 30px;
display:block;
color: #3f4e8c;
text-align: center;
margin-bottom: 0;
}
.cardio-cora{
display: flex;
}
.cora-ani{
width: 15px;
height: 15px;
margin-right: 5px;
}
.cora-ani img{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
-webkit-animation : beat 2s linear infinite;
animation : beat 2s linear infinite;
}
@keyframes beat
{
0%{
transform : scale(1);
}
10%{
transform : scale(1.3);
}
30%{
transform : scale(1);
}
40%{
transform : scale(1.2);
}
60%{
transform : scale(1);
}
}
@-webkit-keyframes beat
{
0%{
-webkit-transform : scale(1);
}
10%{
-webkit-transform : scale(1.3);
}
30%{
-webkit-transform : scale(1);
}
40%{
-webkit-transform : scale(1.2);
}
60%{
-webkit-transform : scale(1);
}
}
.dsp-flex{
display: flex;
}
@keyframes beat
{
0%{
transform : scale(1);
}
10%{
transform : scale(1.3);
}
30%{
transform : scale(1);
}
40%{
transform : scale(1.2);
}
60%{
transform : scale(1);
}
}
.ani-prog{
animation: ani-pro 2s linear infinite;
}
.ani-delay{
animation-delay: .5s;
}
@keyframes ani-pro
{
0%{
height: 60%;
}
20%{
height: 100%;
}
40%{
height: 40%;
}
60%{
height: 80%;
}
80%{
height: 40%;
}
100%{
height: 60%;
}
}
/*++++++++++++++++++++++++*/
.bar-cuadros{
background: rgba(250,250,250,.5);
height: 10px;
list-style: none;
padding-left: 0;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
display: block;
margin-bottom: 4px;
}
.bar-cuadros li{
height: 8px;
width: 8px;
margin-right: 0px;
display: inline-block;
background: #a953ff;
vertical-align:top;
}
.bar01{
height: 10px;
width: 100%;
display: block;
overflow: hidden;
position: relative;
background-image:linear-gradient(to
left,
#aa53ff 0%,
#aa53ff 9%,
transparent 9%,
transparent 11%,
#aa53ff 11%,
#aa53ff 19%,
transparent 19%,
transparent 21%,
#aa53ff 21%,
#aa53ff 29%,
transparent 29%,
transparent 31%,
#aa53ff 31%,
#aa53ff 39%,
transparent 39%,
transparent 41%,
#aa53ff 41%,
#aa53ff 49%,
transparent 49%,
transparent 51%,
#aa53ff 51%,
#aa53ff 59%,
transparent 59%,
transparent 61%,
#aa53ff 61%,
#aa53ff 69%,
transparent 69%,
transparent 71%,
#aa53ff 71%,
#aa53ff 79%,
transparent 79%,
transparent 81%,
#aa53ff 81%,
#aa53ff 89%,
transparent 89%,
transparent 91%,
#aa53ff 91%,
#aa53ff 100%
);
}
.descubre{
position: absolute;
height: 10px;
background: #fff;
width: 100%;
animation: ani-bar 4s linear infinite;
}
@keyframes ani-bar
{
0%{
left: 20%;
}
25%{
left: 60%;
}
50%{
left: 40%;
}
75%{
left: 80%;
}
100%{
left: 20%;
}
}
.delay-1s{
animation-delay: 1s;
}
.bg-bar{
background: #fff;
margin-bottom: 10px;
}
.w70{
width: 70%;
}
.pd-10{
padding-right: 10px;
}
/*+++++++++++++++*/
.playing {
position: relative;
margin-right: 10px;
}
.now.playing .barra {
display: inline-block;
position: relative;
margin-right: 1px;
width: 10px;
height: 1px;
overflow: hidden;
background: linear-gradient(to bottom, #ff9500, #ff5e3a);
color: transparent;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
vertical-align: bottom;
}
.n1 {
animation-delay: 0.5s;
}
.n2 {
animation-delay: 0.2s;
}
.n3 {
animation-delay: 1.2s;
}
.n4 {
animation-delay: 0.9s;
}
.n5 {
animation-delay: 2.3s;
}
.n6 {
animation-delay: 1.2s;
}
.n7 {
animation-delay: 3.1s;
}
.n8 {
animation-delay: 1.9s;
}
@keyframes pulse {
0% {
height: 1px;
margin-top: 0;
}
10% {
height: 10px;
margin-top: -10px;
}
50% {
height: 20px;
margin-top: -20px;
}
60% {
height: 30px;
margin-top: -30px;
}
80% {
height: 40px;
margin-top: -40px;
}
100% {
height: 1px;
margin-top: 0;
}
}
.dropdown-menu{
background: rgba(250,250,250,.9);
border: none;
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.2);
padding: 10px;
min-width: auto;
}
.dropdown-menu li{
line-height: 24px;
font-size: 14px;
color: #253255;
font-weight: 600;
}
.dropdown-menu li a{
color: #3f4e8c!important;
white-space: nowrap;
}
.status-persona{
width: 80%;
margin: auto;
margin-top: -36px;
}
/*barra neon*/
.chart {
font-size: 1em;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.bar {
font-size: 1em;
position: relative;
height: 10em;
transition: all 0.3s ease-in-out;
-webkit-transform: rotateX(60deg) rotateY(0deg);
transform: rotateX(60deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.bar .face {
font-size: 1em;
position: relative;
width: 100%;
height: 2em;
background-color: rgba(254, 254, 254, 0.3);
}
.bar .face.side-a, .bar .face.side-b {
width: 1em;
}
.bar .side-a {
-webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(.5em);
}
.bar .side-b {
-webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-.5em);
position: absolute;
right: 0;
}
.bar .side-0 {
-webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}
.bar .side-1 {
-webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}
.bar .top {
-webkit-transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}
.bar .floor {
box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
}
.growing-bar {
transition: all 0.3s ease-in-out;
background-color: rgba(236, 0, 140, 0.6);
width: 100%;
height: 2em;
}
.bar.amarillo .side-a,
.bar.amarillo .growing-bar {
background-color: rgba(241, 196, 15, 0.6);
}
.bar.amarillo .side-0 .growing-bar {
box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
}
.bar.amarillo .floor .growing-bar {
box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
}
.bar.rojo .side-a,
.bar.rojo .growing-bar {
background-color: rgba(248, 22, 92, 0.6);
}
.bar.rojo .side-0 .growing-bar {
box-shadow: -0.5em -1.5em 4em rgba(255, 11, 77, 0.8);
}
.bar.rojo .floor .growing-bar {
box-shadow: 0em 0em 2em rgba(255, 4, 81, 0.8);
}
/*
.bar.navy .side-a,
.bar.navy .growing-bar {
background-color: rgba(10, 64, 105, 0.6);
}
.bar.navy .side-0 .growing-bar {
box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
}
.bar.navy .floor .growing-bar {
box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
}
*/
.bar.verde .side-a,
.bar.verde .growing-bar{
background-color: rgba(118, 201, 0, 0.6);
}
.bar.verde .side-0 .growing-bar{
box-shadow: -0.5em -1.5em 4em #76c900;
}
.bar.verde .floor .growing-bar{
box-shadow: 0em 0em 2em #76c900;
}
.bar.white .side-a,
.bar.white .growing-bar {
background-color: rgba(254, 254, 254, 0.6);
}
.bar.white .side-0 .growing-bar {
box-shadow: -0.5em -1.5em 4em #fefefe;
}
.bar.white .floor .growing-bar {
box-shadow: 0em 0em 2em #fefefe;
}
/*
.bar.gray .side-a,
.bar.gray .growing-bar {
background-color: rgba(68, 68, 68, 0.6);
}
.bar.gray .side-0 .growing-bar {
box-shadow: -0.5em -1.5em 4em #444;
}
.bar.gray .floor .growing-bar {
box-shadow: 0em 0em 2em #444;
}
.chart .bar.yellow-face .face {
background-color: rgba(241, 196, 15, 0.2);
}
.chart .bar.lime-face .face {
background-color: rgba(118, 201, 0, 0.2);
}
.chart .bar.red-face .face {
background-color: rgba(236, 0, 140, 0.2);
}
.chart .bar.navy-face .face {
background-color: rgba(10, 64, 105, 0.2);
}
.chart .bar.cyan-face .face {
background-color: rgba(87, 202, 244, 0.2);
}
.chart .bar.gray-face .face {
background-color: rgba(68, 68, 68, 0.2);
}
.chart .bar.lightGray-face .face {
background-color: rgba(145, 145, 145, 0.2);
}
*/
.bar-0 .growing-bar {
width: 0%;
}
.bar-1 .growing-bar {
width: 1%;
}
.bar-2 .growing-bar {
width: 2%;
}
.bar-3 .growing-bar {
width: 3%;
}
.bar-4 .growing-bar {
width: 4%;
}
.bar-5 .growing-bar {
width: 5%;
}
.bar-6 .growing-bar {
width: 6%;
}
.bar-7 .growing-bar {
width: 7%;
}
.bar-8 .growing-bar {
width: 8%;
}
.bar-9 .growing-bar {
width: 9%;
}
.bar-10 .growing-bar {
width: 10%;
}
.bar-11 .growing-bar {
width: 11%;
}
.bar-12 .growing-bar {
width: 12%;
}
.bar-13 .growing-bar {
width: 13%;
}
.bar-14 .growing-bar {
width: 14%;
}
.bar-15 .growing-bar {
width: 15%;
}
.bar-16 .growing-bar {
width: 16%;
}
.bar-17 .growing-bar {
width: 17%;
}
.bar-18 .growing-bar {
width: 18%;
}
.bar-19 .growing-bar {
width: 19%;
}
.bar-20 .growing-bar {
width: 20%;
}
.bar-21 .growing-bar {
width: 21%;
}
.bar-22 .growing-bar {
width: 22%;
}
.bar-23 .growing-bar {
width: 23%;
}
.bar-24 .growing-bar {
width: 24%;
}
.bar-25 .growing-bar {
width: 25%;
}
.bar-26 .growing-bar {
width: 26%;
}
.bar-27 .growing-bar {
width: 27%;
}
.bar-28 .growing-bar {
width: 28%;
}
.bar-29 .growing-bar {
width: 29%;
}
.bar-30 .growing-bar {
width: 30%;
}
.bar-31 .growing-bar {
width: 31%;
}
.bar-32 .growing-bar {
width: 32%;
}
.bar-33 .growing-bar {
width: 33%;
}
.bar-34 .growing-bar {
width: 34%;
}
.bar-35 .growing-bar {
width: 35%;
}
.bar-36 .growing-bar {
width: 36%;
}
.bar-37 .growing-bar {
width: 37%;
}
.bar-38 .growing-bar {
width: 38%;
}
.bar-39 .growing-bar {
width: 39%;
}
.bar-40 .growing-bar {
width: 40%;
}
.bar-41 .growing-bar {
width: 41%;
}
.bar-42 .growing-bar {
width: 42%;
}
.bar-43 .growing-bar {
width: 43%;
}
.bar-44 .growing-bar {
width: 44%;
}
.bar-45 .growing-bar {
width: 45%;
}
.bar-46 .growing-bar {
width: 46%;
}
.bar-47 .growing-bar {
width: 47%;
}
.bar-48 .growing-bar {
width: 48%;
}
.bar-49 .growing-bar {
width: 49%;
}
.bar-50 .growing-bar {
width: 50%;
}
.bar-51 .growing-bar {
width: 51%;
}
.bar-52 .growing-bar {
width: 52%;
}
.bar-53 .growing-bar {
width: 53%;
}
.bar-54 .growing-bar {
width: 54%;
}
.bar-55 .growing-bar {
width: 55%;
}
.bar-56 .growing-bar {
width: 56%;
}
.bar-57 .growing-bar {
width: 57%;
}
.bar-58 .growing-bar {
width: 58%;
}
.bar-59 .growing-bar {
width: 59%;
}
.bar-60 .growing-bar {
width: 60%;
}
.bar-61 .growing-bar {
width: 61%;
}
.bar-62 .growing-bar {
width: 62%;
}
.bar-63 .growing-bar {
width: 63%;
}
.bar-64 .growing-bar {
width: 64%;
}
.bar-65 .growing-bar {
width: 65%;
}
.bar-66 .growing-bar {
width: 66%;
}
.bar-67 .growing-bar {
width: 67%;
}
.bar-68 .growing-bar {
width: 68%;
}
.bar-69 .growing-bar {
width: 69%;
}
.bar-70 .growing-bar {
width: 70%;
}
.bar-71 .growing-bar {
width: 71%;
}
.bar-72 .growing-bar {
width: 72%;
}
.bar-73 .growing-bar {
width: 73%;
}
.bar-74 .growing-bar {
width: 74%;
}
.bar-75 .growing-bar {
width: 75%;
}
.bar-76 .growing-bar {
width: 76%;
}
.bar-77 .growing-bar {
width: 77%;
}
.bar-78 .growing-bar {
width: 78%;
}
.bar-79 .growing-bar {
width: 79%;
}
.bar-80 .growing-bar {
width: 80%;
}
.bar-81 .growing-bar {
width: 81%;
}
.bar-82 .growing-bar {
width: 82%;
}
.bar-83 .growing-bar {
width: 83%;
}
.bar-84 .growing-bar {
width: 84%;
}
.bar-85 .growing-bar {
width: 85%;
}
.bar-86 .growing-bar {
width: 86%;
}
.bar-87 .growing-bar {
width: 87%;
}
.bar-88 .growing-bar {
width: 88%;
}
.bar-89 .growing-bar {
width: 89%;
}
.bar-90 .growing-bar {
width: 90%;
}
.bar-91 .growing-bar {
width: 91%;
}
.bar-92 .growing-bar {
width: 92%;
}
.bar-93 .growing-bar {
width: 93%;
}
.bar-94 .growing-bar {
width: 94%;
}
.bar-95 .growing-bar {
width: 95%;
}
.bar-96 .growing-bar {
width: 96%;
}
.bar-97 .growing-bar {
width: 97%;
}
.bar-98 .growing-bar {
width: 98%;
}
.bar-99 .growing-bar {
width: 99%;
}
.bar-100 .growing-bar{
width: 100%;
}
/*
END // CHART'S RULES
*
*
*/
/*
.chart.grid {
display: flex;
flex-direction: row;
}
.chart.grid .exercise {
flex: 0 0 100%;
display: flex;
}
.chart.grid .exercise .bar {
flex: 1;
margin: 0 .5em;
}
.chart.grid .exercise .bar:nth-child(2) {
z-index: 8;
flex: 1 0 40%;
}
.chart.grid .exercise .bar:first-child {
z-index: 10;
margin-left: 0;
}
.chart.grid .exercise .bar:last-child {
margin-right: 0;
}
*/
/*
.actions {
display: flex;
justify-content: center;
margin-bottom: 0;
padding-bottom: 2em;
border-bottom: 1px dotted rgba(68, 68, 68, 0.4);
}
*/
.radar{
height: 100%;
width: 100%;
display: flex;
position: relative;
}
.circle-radar{
z-index: 8;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgb(39,210,145);
position: absolute;
animation-name:radar;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}
.delay2{
animation-delay: 2s;
}
.delay4{
animation-delay: 4s;
}
@keyframes radar{
0%{
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
10%{
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
95%{
transform:translate(-50%, -50%) scale(2.5);
opacity: .1;
}
100%{transform:translate(-50%, -50%) scale(3);
opacity: 0;}
}
.test-rapido{
border-radius: 50%;
background-image: linear-gradient(to bottom, rgb(56,245,175) 1%, rgb(39,210,145) 100%);
box-shadow: 0px 13px 43px 0px rgba(46, 53, 85, 0.43);
width: 60px;
height: 60px;
margin: auto;
text-align: center;
z-index: 9;
color: #fff!important;
line-height: 60px;
}
.test-rapido i{
line-height: 60px;
}
.tabla-datos{
width: 100%;
}
.tabla-datos tr td:last-child{
text-align: right;
color: #606ea5;
}
.tabla-datos tr td:first-child i{
color: #be4dda;
font-size: 14px;
}
.tabla-datos tr {
border-bottom: 1px solid rgba(250,250,250,.4);
line-height: 30px;
}
.tit-datos{
background: rgba(250,250,250,.3);
border: 1px solid rgba(250,250,250,.6);
border-radius: 10px;
padding: 5px;
display: flex;
justify-content: space-between;
}
.tit-datos a{
width: 30px;
height: 30px;
border-radius: 50%;
background: #67b5fb;
color: #fff !important;
text-align: center;
}
.tit-datos i{
line-height:30px;
font-size: 14px;
}
.tit-datos p{
margin-bottom: 0;
color: #2e3555;
font-size: 14px;
font-weight: 600;
line-height: 30px;
}
/*barritas*/
/*+++++++++++++++*/
.ani-barritas {
position: relative;
width: 100%;
margin-top: 20px;
display: block;
text-align: center;
}
.ani-barritas .barra {
display: inline-block;
position: relative;
margin-right: 1px;
width: 1%;
height: 1px;
overflow: hidden;
background: linear-gradient(to bottom, #aa53ff, #ff3af0);
color: transparent;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
vertical-align: bottom;
}
.b1 {
animation-delay: 0.3s;
}
.b2 {
animation-delay: 0.4s;
}
.b3 {
animation-delay: 1.2s;
}
.b4 {
animation-delay: 0.7s;
}
.b5 {
animation-delay: 2.1s;
}
.b6 {
animation-delay: 1.7s;
}
.b7 {
animation-delay: 3.0s;
}
.b8 {
animation-delay: 1.6s;
}
@keyframes pulse2 {
0% {
height: 1px;
margin-top: 0;
}
10% {
height: 30px;
margin-top: -30px;
}
50% {
height: 10px;
margin-top: -10px;
}
60% {
height: 30px;
margin-top: -30px;
}
80% {
height: 20px;
margin-top: -20px;
}
100% {
height: 1px;
margin-top: 0;
}
}
.cita-nivel{
height: 10px;
width: 100px;
border-radius: 5px;
background: rgba(250,250,250,.5);
float: right;
}
.cita-nivel div{
height: 10px;
width: 100px;
border-radius: 5px;
}
.cita-nivel>div>div{
animation: cita-niv 1s linear both;
}
.cita-nivel.comp>div>div{
background: #02c68a;
}
.cita-nivel.medio>div>div{
background: #e8c400;
}
.cita-nivel.incomp>div>div{
background: #ff0080;
}
@keyframes cita-niv {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.citas-hist{
width: 100%;
}
.citas-hist tr{
border-bottom: 1px solid rgba(250,250,250,.4);
line-height: 26px;
display: block;
}
.citas-hist tbody{
width: 100%;
display: block;
}
.citas-hist tr td:last-child{
text-align: right;
}
.citas-hist tr td:first-child{
font-size: 10px;
font-weight: 600;
color: #606ea5;
}
.title-citas{
background: #fff;
border-radius: 6px;
color: #606ea5;
display: flex;
margin-top: 10px;
font-size: 12px;
}
.title-citas div{
width: 33.33%;
padding: 5px;
line-height: 20px;
font-weight: 600;
text-align: center;
}
/*bg-persona*/
.progress-ind{
border-radius: 10px;
height: 10px;
width: 60%;
background-image: linear-gradient(to right, #ed0900, #ebff00, #00ed9b);
}
.progress-ind span{
background: url(../img/flechita.svg);
background-size: contain;
background-repeat: no-repeat;
width: 10px;
height: 10px;
display: block;
position: relative;
}
.prog-medio{
left: 50%;
}
.prog-bajo{
left: 20%;
}
.prog-alto{
left: 80%;
}
.circle-ani{
position: relative;
width: 100%;
padding-bottom: 20px;
}
/*
.circle__spin {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle__spin svg {
width: 100%;
height: 100%;
animation: spin01 10s linear infinite;
}
.circle__spin circle {
stroke-width: 1;
stroke-dasharray: 200, 20;
fill: none;
stroke: #b9b9b9;
}
@keyframes spin01 {
0%{
stroke-dasharray: 200, 20;
}
100% {
transform: rotate(360deg);
stroke-dasharray: 260, 20;
}
}
*/
/*+++++++++++*/
/*+++++++++++*/
.cuerpo01>svg{
fill: transparent;
stroke-width: 2px;
stroke: #9f9f9f;
stroke-dasharray: 2617;
stroke-dashoffset: 6517;
animation: dash 6s linear;
animation-fill-mode: both;
}
@keyframes dash {
0% {
stroke-dashoffset: -2617;
}
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
opacity: 0;
display: none;
}
}
/*
.cuerpo01>svg path{
animation: ocul 2s;
animation-delay: 10s;
}
@keyframes ocul {
0% {
}
100% {
display: none;
}
}
*/
.cuerpo01{
max-height: 500px;
display: block;
position: relative;
max-width:186px;
margin: auto;
z-index: 99;
}
/*++++++++++++++++++login++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++*/
.input-item {
position: relative;
padding-bottom: 20px;
}
.input-bordered {
border-radius: 4px;
border: 1px solid #d2dde9;
width: 100%;
padding: 10px 15px;
line-height: 20px;
font-size: .9em;
color: rgba(73,84,99,0.7);
transition: all .4s;
}
.page-ath-heading {
padding-bottom: 23px;
font-size: 2.8em;
}
.page-ath-heading {
font-size: 1.8em;
font-weight: 300;
letter-spacing: -0.025em;
color: #253992;
line-height: 1.2;
padding-bottom: 15px;
}
.page-ath-form {
padding-top: 40px;
padding-bottom: 50px;
}
.page-ath-form, .page-ath-header, .page-ath-footer, .page-ath-text {
width: 440px;
max-width: 100%;
margin: auto;
padding: 0 30px;
padding-top: 0px;
padding-bottom: 0px;
}
.sap-text {
padding: 15px 0;
text-align: center;
}
.sap-text span {
font-size: 12px;
line-height: 19px;
letter-spacing: 0.1em;
display: inline-block;
text-transform: uppercase;
padding: 0 12px;
position: relative;
}
.sap-text span::before {
right: 100%;
}
.sap-text span::before, .sap-text span::after {
position: absolute;
content: '';
height: 1px;
width: 40px;
background: #d2dde9;
top: 50%;
margin-top: -1px;
}
.guttar-vr-20px {
margin-top: -10px !important;
margin-bottom: -10px !important;
}
.guttar-20px {
margin-left: -10px !important;
margin-right: -10px !important;
}
.guttar-vr-20px > li, .guttar-vr-20px > div {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.guttar-20px > li, .guttar-20px > div {
padding-left: 10px !important;
padding-right: 10px !important;
}
.btn-outline.btn-dark {
color: #495463;
border-color: rgba(250,250,250,.8);
}
.btn-outline.btn-facebook .fab {
color: #3b5998;
}
.btn .ti, .btn [class*="fa-"] {
line-height: 24px;
}
.fab {
font-family: Font Awesome 5 Brands;
}
.btn span + .ti, .btn [class*="fa-"] + span {
margin-left: 14px;
}
.btn .ti + span, .btn [class*="fa-"] + span {
margin-left: 14px;
}
.btn span {
display: inline-block;
}
.btn-outline {
background: transparent;
box-shadow: none;
}
.bt-redes{
padding-left: 0;
list-style: none;
}
.btn-outline.btn-google .fa {
color: #d85040;
}
.btn-outline.btn-facebook .fa {
color: #3b5998;
}
.btn-outline.btn-dark:hover{
border-color: rgba(250,250,250,.8);
background: rgba(250,250,250,.6)
}
.he100hv{
min-height: 100%;
height: 100%;
}
.log-30{
width: 40%;
}
.log-70{
width: 60%;
}
.bg-trans-b{
background: rgba(250,250,250,.8)
}
.log-login{
max-width: 100%;
max-height: 80px;
}
.bg-log{
/* background: url(../img/bg-log.jpg);*/
background-size: cover;
background-position: center;
position: relative;
}
.frase-log{
margin: auto 0;
padding: 20px;
z-index: 9;
position: absolute;
width: 100%;
top: 50%;
}
.frase-log h1{
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
.btnbos{
border: none;
border-radius: 3px;
font-size: 16px;
font-weight: 400;
}
.modal-content{
background-color: rgba(250,255,255,.8);
}
.mod-tit{
font-size: 1.8em;
font-weight: 600;
color: #cf8bff;
}
/*+++++++++++++++++++index+++++++++++++++++++*/
.stl-inp{
background-color: rgba(255,255,255,.5);
line-height: 35px;
font-size: 12px;
border-radius: 6px;
border: none;
width: 100%;
display: block;
height: 35px;
padding-left: 10px;
padding-right: 10px;
}
.busca-agenda{
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0px 31px 65px 0px rgba(46, 53, 85, 0.31);
padding: 10px;
}
.title-tab{
background: rgba(46, 53, 85, 0.2);
line-height: 12px;
font-size: 12px;
color: #000;
border-radius: 6px;
display: flex;
padding: 10px;
text-align: center;
margin-bottom: 0px;
height: 5%;
}
.title-tab span:nth-child(1){
width: 25%;
}
.title-tab span:nth-child(2){
width: 10%;
}
.title-tab span:nth-child(3){
width: 10%;
}
.title-tab span:nth-child(4){
width: 20%;
}
.title-tab span:nth-child(5){
width: 10%;
}
.title-tab span:nth-child(6){
width: 25%;
}
.age-horas{
padding-left: 0;
list-style: none;
margin-bottom: 0;
overflow-y: auto;
overflow-x: hidden;
height: 84%;
padding: 10px;
}
.bg-regis{
background: url(../img/banersito-log2.png) rgba(250,250,250,.8);
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
border: none;
}
.brnone{
border: none;
}
.usag{
padding-left: 0;
list-style: none;
display: block;
flex-direction: column;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 95%;
padding: 15px;
padding-bottom: 20px;
}
.user-agen{
display: flex;
border-radius: 6px;
background-color: rgba(255, 255, 255,.6);
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.2);
padding: 5px;
margin-bottom: 10px;
transition: all .5s;
}
.user-agen:hover{
background-color: rgba(255, 255, 255,.8);
box-shadow: 0px 5px 25px 0px rgba(70, 34, 120, 0.3);
}
.user-agen>div{
text-align: center;
font-size: 12px;
line-height: 24px;
}
.user-agen>div p{
margin-bottom: 0;
}
.cont-age-hora{
display: flex;
border-bottom: 1px solid rgba(250,250,250,.4);
margin-bottom: 10px;
}
.user-agen>div:first-child{
text-align: left;
width: 25%;
}
.user-agen div:nth-child(2){
width: 10%;
}
.user-agen div:nth-child(3){
width: 10%;
}
.user-agen div:nth-child(4){
width: 20%;
}
.user-agen div:nth-child(5){
width: 10%;
}
.user-agen div:nth-child(6){
width: 25%;
}
.hr-agen{
width: 10%;
font-size: 12px;
color: #2e3555;
font-weight: 600;
}
.estatus{
padding-left: 0;
list-style: none;
display: flex;
justify-content: center;
}
.estatus li{
background: rgba(250,250,250,1);
width: 6px;
height: 30px;
text-align: center;
margin-right: 3px;
border-radius: 3px;
position: relative;
overflow: hidden;
}
.estatus li::after{
content: '';
width: 6px;
height: 30px;
position: absolute;
display: block;
border-radius: 3px;
}
.estatus.bien li::after{
background: rgb(0, 180, 111);
}
.estatus.medio li::after{
background: rgb(255, 226, 0);
}
.estatus.bajo li::after{
background: rgb(250, 45, 84);
}
.estatus li:nth-child(1)::after{
top: 15px;
}
.estatus li:nth-child(2)::after{
top: 10px;
}
.estatus li:nth-child(3)::after{
top: 5px;
}
.img-int figure{
border-radius: 50%;
background-color: rgba(255, 255, 255,.8);
box-shadow: 0px 9px 21px 0px rgba(46, 53, 85, 0.5);
width: 30px;
height: 30px;
overflow: hidden;
float: left;
margin-right: 10px;
margin-bottom: 0;
}
.img-int figure img{
object-fit: cover;
height: 100%;
width: 100%;
vertical-align: top;
}
.img-int p{
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 30px;
margin-bottom: 0;
}
.btn03{
background-image:linear-gradient( to right, rgb(255, 96, 129) 0%, rgb(245, 11, 62) 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
text-align: center;
}
.btn04{
background-image:linear-gradient( to right, #0dd81e 0%, #51c75b 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
text-align: center;
}
.btn05{
background-image:linear-gradient( to right, #ffb100 0%, #ff8000 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
text-align: center;
}
.btn-circle{
height: 30px;
width: 30px;
padding: 0;
}
.btn-circle i{
line-height: 30px;
font-size: 14px;
}
.valg-top{
vertical-align: top;
}
.cld-main{
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0px 31px 65px 0px rgba(46, 53, 85, 0.31);
margin: auto;
margin-bottom: 10px;
}
.dia-select{
outline: 1px solid rgba(250,250,250, 1);
background: rgba(250,250,250, .5)
}
.h3-tile{
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
margin-top: 10px;
line-height: 35px;
}
.sp65{
height: 65px;
}
.centra{
margin: 10px auto;
display: block;
max-width: 50%;
text-align: center;
}
.inp-stl-round{
line-height: 35px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
border-radius: 17.5px;
width: 100%;
border: none;
background-color: rgba(250,250,250,.8);
display: block;
height: 35px;
margin-bottom: 15px;
}
.popover{
background: rgba(255,255,255,.9);
border: none;
border-radius: 10px;
}
.clockpicker-popover .popover-title{
background: none;
}
.clockpicker-popover .popover-content{
background: none;
}
.clockpicker-button{
background: none;
color: #0080ff;
}
.clockpicker-plate{
border: none;
}
.psd-rel{
position: relative;
}
.fijo-ico{
position: absolute;
top: 0;
right: 0;
height: 35px;
width: 35px;
color: #888888 !important;
border-radius: 50%;
text-align: center;
}
.fijo-ico i{
line-height: 35px;
font-size: 18px;
}
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none;
background-image: url(../img/fle.png);
background-position: right center;
background-repeat: no-repeat;
}
/*++++++++++++++++++++++++++++*/
.progress{
width: 80px;
height: 80px;
line-height: 80px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid rgba(255,255,255,.5);
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: none;;
font-size: 22px;
color: #3f4e8c;
line-height: 70px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #9654fa;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #01d068;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
@keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
@keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
@media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
.progres-cir{
display: flex;
position: relative;
z-index: 1;
}
.progres-cir>div{
width: 50%;
padding: 5px;
z-index: 1;
position: relative;
border: 1px solid rgba(255, 255, 255, .6);
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0px 31px 65px 0px rgba(46, 53, 85, 0.31);
margin-top: 5px;
margin-bottom: 5px;
}
.progres-cir>div:first-child{
margin-right: 2px;
}
.progres-cir>div:last-child{
margin-left: 2px;
}
.lineas-lista{
margin-top: 20px;
text-align: center;
}
.tit-h4{
font-size: 12px;
font-weight: 600;
text-align: center;
}
.degra-bar>span{
background: linear-gradient(to bottom, #ff2d6e, #ff539c) !important;
}
.he61px{
height: 9%;
width: 100%;
display: block;
}
.header{
transition: all .5s;
}
.header.bg-header{
background: rgba(255,255,255,.85);
z-index: 99;
}
.diezpx{
height: 10px;
display: block;
}
.he100x{
height: 100%;
}
.ovfh{
overflow: hidden;
}
.brd-6{
border-radius: 6px;
}
.h35{
line-height: 35px;
height: 35px;
}
.fl-r{
float: right;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: none;
}
/*
.circle__spin{
animation: zoom1 .5s linear ;
}
@keyframes zoom1{
from {
transform: translate(-50%, -50%) scale(.1);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
*/
.efecto-malla{
position: absolute;
animation: linear both;
animation-name: vis01;
animation-duration: 12s ;
stroke: #9f9f9f;
opacity: .4;
}
@keyframes vis01{
0% {
opacity: .05;
}
30% {
opacity: .2;
}
80% {
opacity: 1;
}
100% {
opacity: .1;
display: none;
}
}
.persona-trama{
position: absolute;
max-width: 206px;
transform: translateX(-50%) translateY(-0%);
top: 0%;
left: 50%;
}
.scaner{
height: 0px;
overflow: hidden;
position: absolute;
width: 100%;
opacity: 0;
animation: sca 6s linear both;
animation-delay: 4s;
}
.scaner::after {
background: linear-gradient(to top, 0% #fff, 100% #fff);
content: '';
}
@keyframes sca{
0% {
top:0;
opacity: 0;
height: 0px;
}
25%{
top: 0;
}
50% {
top: 0px;
}
75%{
top: 0;
}
99%{
overflow:hidden;
}
100% {
top: 0px;
height: 100%;
opacity: 1;
z-index: 2;
overflow:visible;
}
}
/*
.scaner img{
animation: sca2 12s linear;
animation-delay: 6s;
}
*/
@keyframes sca2{
0% {
top: 0;
opacity: 0;
}
25% {
top: -264px;
opacity: 1;
}
50% {
top: 0px;
opacity: 1;
}
75% {
top: -264px;
opacity: 1;
}
100% {
top: 0px;
opacity: 0;
}
}
.he80x{
height: 91%;
}
input:focus, select:focus{
outline:0px;
}
.oculto{
display: none;
}
.visible{
display: block;
}
.cit-prox{
padding-left: 0;
list-style: none;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
align-items: flex-start;
padding-left: 15px;
}
.cit-prox::after{
content: '';
width: 100%;
height: 15px;
display: block;
}
.cit-prox>li{
border-radius: 6px;
background-color: rgba(255, 255, 255,.6);
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.2);
width: 23%;
padding: 10px;
margin: 1%;
transition: all .5s;
}
.cit-prox>li:hover{
background-color: rgba(255, 255, 255,.9);
box-shadow: 0px 5px 10px 0px rgba(70, 34, 120, 0.4);
transform: translateY(-5px);
}
.cit-prox>li>div{
display:flex;
}
.fh-cita{
flex-direction: row;
justify-content: space-between;
}
.fh-cita p{
font-size: 14px;
text-transform: uppercase;
font-weight: 800;
}
.fh-cita span{
font-size: 18px;
text-transform: uppercase;
font-weight: 800;
}
.nimg-cita{
display: block!important;
}
.nimg-cita figure{
width:60px ;
height:60px ;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
float: left;
margin-bottom: 0;
}
.nimg-cita figure img{
width: 100%;
height: 100%;
object-fit: cover;
}
.nimg-cita>p{
font-size: 14px;
line-height: 60px;
font-weight: 600;
width:auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
.cita-dat-user{
display:flex;
margin-bottom: 5px;
}
.cita-dat-user>div:first-child{
width: 65%;
}
.cita-dat-user>div:last-child{
width: 35%;
}
.ul-dat-user{
padding-left: 0;
list-style: none;
border-left: 1px solid #bcbcbc;
}
.ul-dat-user li{
color: #3f4e8c;
padding-left: 10px;
}
.ritmo-presion{
display: flex;
justify-content: space-around;
}
.ico-btn{
line-height: 20px;
vertical-align: middle;
font-size: 16px;
}
.cit-prox > li:last-child::after{
content: '';
}
.pdl-0{
padding-left: 0;
}
.switch-title{
height: 5%;
padding-left: 15px;
}
#lista-cit, #lista-int{
height: 95%;
}
.switch-title span{
font-weight: 800;
font-size: 12px;
display: inline-block;
text-transform: uppercase;
opacity: .5;
padding:5px;
cursor: pointer;
}
.act01{
opacity: 1 !important;
color: #d34de5;
}
#txt-lista-int{
border-right: 1px solid #adadad;
}
.mrb-0{
margin-bottom: 0;
}
.he10px{
height: 10px;
}
.button:focus {
outline: 0px dotted;
}
/*
.scaner::after{
content: '';
background: url(../img/)
}
*/
.he12por{
height:12%;
}
.he79por{
height: 91%;
}
.prog-vertical-cora{
height: 100%;
width: 8px;
overflow: hidden;
background: rgba(255,255,255,.5);
margin-right: 5px;
position: relative;
}
.prog-vertical-cora span{
background:#dc4cdf;
width: 100%;
height: 100%;
position: absolute;
top: 0;
animation: anibar 2s infinite linear ;
}
@keyframes anibar{
0% {top:0;}
25% {top:80%;}
50% {top:50%;}
75% {top:90%;}
100%{top:0;}
}
.delay01 span{
animation-duration: 1s;
background:#8a4cdf;
}
/*notifi*/
.notification-container {
display: none;
z-index: 999 !important;
cursor: default;
position: absolute !important;
z-index: 999;
top: 100%;
right: 50%;
margin-right: -28px;
width: 400px;
font-weight: 400;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
}
.notification-container:before {
content: "";
position: absolute;
top: 1px;
right: 0;
width: 0;
height: 0;
transform: translate(-1rem, -100%);
border-left: .75rem solid transparent;
border-right: .75rem solid transparent;
border-bottom: .75rem solid white;
}
.notification-container h3 {
text-transform: uppercase;
font-size: 75%;
font-weight: 700;
color: #84929f;
padding: 1.5rem 2rem;
margin-bottom: 0;
}
.notification-container i {
color: #b5c4d2;
font-size: 140%;
@vertical-align (50%);
position: absolute;
}
.notification-container i.right {
right: 2rem;
left: auto;
}
.notification-container i.right:hover {
opacity: .8;
cursor: pointer;
}
.notification-container em {
margin-right: 0.75rem;
font-weight: 700;
font-size: 115%;
color: #b5c4d2;
vertical-align: bottom;
display: inline-block;
font-style: normal;
}
.ani-noti{
display: block;
animation-name: dropPanel;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: .75s;
}
@keyframes dropPanel {
0% {
opacity: 0;
transform: translateY(-100px) scaleY(0.5);
}
}
.notification {
box-sizing: border-box;
}
.notification.new {
background: #f3f9fd;
}
.notification-container input.checkbox[type='checkbox'] {
display: none;
}
.notification-container input.checkbox[type='checkbox'] + label {
display: block;
}
.notification-container input.checkbox[type='checkbox']:not(:checked) + label {
transition: height .25s;
height: 0;
padding: 0;
font-size: 0;
border: none;
}
.notification-container input.checkbox[type='checkbox']:not(:checked) + label * {
display: none;
}
.notification-container input.checkbox[type='checkbox']:checked + label {
height: 3.25rem;
padding: 1.125rem 4rem 0.75rem 2rem;
font-size: 75%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 0;
}
.w50{
width: 50%;
display: flex;
}
.btn-none button{
background: none;
border: none;
outline: none;
}
.notifi{
cursor: pointer;
}
.chart>span{
position: absolute;
bottom: 50%;
text-align: center;
width: 100%;
color: #fff;
z-index: 9;
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
.chart>span i{
font-size: 14px;
line-height: 22px;
}
/**/
.st0, .st1, .st2, .st3 {
fill: none;
stroke: #00c4ff;
stroke-width: 42;
stroke-miterlimit: 10;
}
.st0 {
stroke-dasharray: 12.1947, 12.1947, 12.1947, 12.1947, 12.1947, 12.1947;
}
.st1 {
stroke-dasharray: 50, 90, 200, 30, 40, 0;
}
.st2 {
stroke-linecap: square;
stroke-dasharray: 120, 20, 110, 20, 140;
}
.st3 {
stroke-width: 16;
stroke-linecap: square;
/* fill:rgba(255, 255, 255, 0.38);*/
filter: drop-shadow( 0px 0px 20px #00edff );
}
.demo3d{
perspective: 300px;
-webkit-transform: scale3d(.8, .8, .8) rotate3d(1, 0, 0, 80deg);
transform: scale3d(1, .8, .8) rotate3d(1, 0, 0, 81deg);
position: absolute;
bottom: 0px;
margin-bottom: -45%;
z-index: 2;
width: 100%;
}
.cuerpo01::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
background-image: url(../img/respland.png);
background-size: cover;
background-position: bottom;
left: 0;
z-index: 9;
/* border-radius:0 0 20% 20%; */
}
/*
.cuerpo01::before{
content: '';
width: 50%;
height: 100%;
position: absolute;
background-image: linear-gradient( to top, rgba(195, 245, 254, 0.8) 0%, rgba(10, 246, 255, 0.0) 70%);
left: 25%;
z-index: 9;
border-radius:0 0 20% 20%;
}
*/
.lista-organos{
list-style: none;
padding-left: 0;
position: absolute;
left: 0;
z-index: 10;
margin-left: 10px;
}
.lista-organos li{
display: block;
margin-bottom: 10px;
}
.lista-organos li a{
position: relative;
}
.lista-organos li a figure{
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(250,250,250,.5);
transition: all .5s;
margin: auto;
}
.lista-organos li a figure img{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.lista-organos li a span{
display: none;
position: absolute;
left: 60px;
background: rgba(250,250,250,.5);
border-radius: 3px;
font-size: 12px;
line-height: 20px;
bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.lista-organos li a:hover > span{
display: block;
z-index: 10;
}
.lista-organos li a:hover figure{
background: rgba(250,250,250,.9);
}
.base001{
position: absolute;
width: 100%;
bottom: 0px;
margin-bottom: -45px;
z-index: 0;
}
.base001 img{
margin: auto;
max-width: 100%;
display: block;
}
.orgderecha{
right: 0;
left: auto;
}
.animar-org li{
animation: ani-org 1s ease both;
}
@keyframes ani-org {
0% {
margin-right: -350px;
opacity: 0;
}
100% {
margin-right: 0px;
opacity:1;
}
}
.animar-org2 li{
animation: ani-org2 1s ease both;
}
@keyframes ani-org2 {
0% {
margin-left: -350px;
opacity: 0;
}
100% {
margin-left: 0px;
opacity:1;
}
}
.lista-organos li:nth-child(1){animation-delay: 10.50s;}
.lista-organos li:nth-child(2){animation-delay: 10.75s;}
.lista-organos li:nth-child(3){animation-delay: 11s;}
.lista-organos li:nth-child(4){animation-delay: 11.25s;}
.lista-organos li:nth-child(5){animation-delay: 11.50s;}
.lista-organos li:nth-child(6){animation-delay: 11.75s;}
.lista-organos li:nth-child(7){animation-delay: 12s;}
.orgderecha li a span{
left: auto;
right: 10px;
}
.bg-md-int{
background: url(../img/modal-reg-int.png);
background-position: center -20px;
background-size: contain;
background-repeat: no-repeat;
background-color: rgba(250,250,250,.8);
}
.tabla-datos01{
display: none;
}
.alt10{
height: 75px;
margin-top: 1%;
margin-bottom: 1%;
margin-right: -15px;
}
.alt90{
height: 88%;
}
.agrnota{
border: none;
border-radius: 6px;
background-color: rgb(255, 234, 146);
background-image: url(../img/nota.png);
background-repeat: repeat;
width: 100%;
resize: vertical;
padding: 10px;
font-size: 15px;
line-height: 16px;
box-shadow: 0px 5px 11px 0px rgba(70, 34, 120, 0.2);
}
.lab-agrnota{
font-size: 12px;
line-height: 14px;
font-weight: 600;
margin-bottom: 0;
}
.mrtb{
margin-top: 10px;
margin-bottom: 10px;
}
.bg-md-citar{
background: url(../img/banersito-cita.png);
background-position: center -20px;
background-size: contain;
background-repeat: no-repeat;
background-color: rgba(250,250,250,.8);
}
.flxend{
display: flex;
justify-content: flex-end;
}
.w5{
width: 50%;
}
.btn-verde{
background-image: linear-gradient( to right, #05e697 1%, #00bf7c 100%);
}
.nino{
background-image: url(../img/nino.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color:rgba(255, 255, 255, 0.8);
}
.nina{
background-image: url(../img/nina.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color:rgba(255, 255, 255, 0.8)
}
/*modal test*/
.modal-50{
max-width: 50%;
}
.modal-60{
max-width: 60%;
}
.modal-75{
max-width: 75%;
}
.modal-80{
max-width: 80%;
}
.modal-90{
max-width: 90%;
}
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
margin-bottom: 0;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* 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: 18px;
width: 18px;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #02c956;
}
input:focus + .slider {
box-shadow: 0 0 1px #02c956;
}
input:checked + .slider:before {
-webkit-transform: translateX(19px);
-ms-transform: translateX(19px);
transform: translateX(19px);
}
/* Rounded sliders */
.slider.round {
border-radius: 10px;
}
.slider.round:before {
border-radius: 50%;
}
.pregunta{
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 5px;
padding-bottom: 5px;
}
.pregunta>p{
padding-left: 10px;
margin-bottom: 0;
line-height: 20px;
font-size: 14px;
}
.bg-tr05{
background: rgba(255,250,255,.4);
padding:0 15px 15px 15px;
border-radius: 3px;
}
.est-sal{
padding-left: 0;
text-align: left;
line-height: 20px;
}
.est-sal li{
display: inline-block;
list-style: none;
line-height: 20px;
}
.est-sal li i{
font-size: 16px;
line-height: 30px;
}
.est-sal.bien li{
color: rgb(0, 180, 111);
}
.est-sal.medio li{
color: rgb(255, 162, 0);
}
.est-sal.bajo li{
color: rgb(250, 45, 84);
}
.est-sal.medio li:nth-child(3){
color: rgba(255,255,255,.5)
}
.est-sal.bajo li:nth-child(3),.est-sal.bajo li:nth-child(2){
color: rgba(255,255,255,.5)
}
.delay-25{animation-delay: .25s;}
.delay-50{animation-delay: .50s;}
.delay-75{animation-delay: .75s;}
.delay-100{animation-delay: 1s;}
.delay-125{animation-delay: 1.25s;}
.delay-150{animation-delay: 1.50s;}
.delay-175{animation-delay: 1.75s;}
.brnone h4{
margin-bottom: 0;
line-height: 1;
}
.modal-body.mrt{
padding-top: 0;
}
.nav-test li{
width: 49%;
text-align: center;
}
.nav-test li a.active{
border-bottom: 2px solid #eb00ff;
color: #eb00ff;
}
.nav-test li a{
width: 100%;
display: block;
font-size: 12px;
line-height: 34px;
}
.nav-test li a i{
line-height: 34px;
vertical-align: middle;
}
.p-12-16{
font-size: 12px;
line-height: 16px;
}
.inp-st input{
width: 70%;
display: inline-block;
}
.inp-st p{
width: 25%;
display: inline-block;
font-size: 14px;
}
.inp-st label{
font-size: 14px;
font-weight: 400;
}
.mrr-0{
margin-right: 15px;
margin-top: 10px;
}
.selec-disp{
width: 100%;
display: block;
}
.selec-disp input[type="radio"] {
display: none;
}
.selec-disp label {
display: inline-block;
background: rgba(255,255,255,.4);
width: 49%;
padding: 4px 11px;
cursor: pointer;
border-radius: 6px;
transition: all .5s;
height: 150px;
vertical-align: middle;
border: 1px solid transparent;
}
.selec-disp input[type="radio"]:checked+label {
background: rgba(255,255,255,.9);
box-shadow: 0px 5px 11px 0px rgba(70, 34, 120, 0.2);
border: 1px solid #eb00ff;
}
.selec-disp label img{
object-fit: contain;
width: 100%;
height: 100%;
}
.titspan{
font-weight: 600;
font-size: 16px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}
.bg-cora-pres{
/* background: url(../img/img-press-cora.png);*/
background-position: bottom left;
background-repeat: no-repeat;
background-size:auto;
}
/*+++++*/
.charts {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.chart {
margin: 30px 0 0;
}
.chart:first-child {
margin: 0;
}
.chart__title {
display: block;
margin: 0 0 10px;
font-weight: bold;
opacity: 0;
animation: 1s anim-lightspeed-in ease forwards;
}
.chart--prod .chart__title {
animation-delay: 3.3s;
}
.chart--design .chart__title {
animation-delay: 4.5s;
}
.chart--horiz {
overflow: hidden;
list-style: none;
padding-left: 0;
}
.chart__bar {
height: 30px;
margin-bottom: 10px;
background: linear-gradient(to left, #ff003b 0%, #ffe200 30%, #ffe200 60%, #03d162 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
opacity: 0;
animation: 1s anim-lightspeed-in ease forwards;
}
.chart--dev .chart__bar:nth-of-type(11) {
animation-delay: 2.7s;
}
.chart--dev .chart__bar:nth-of-type(10) {
animation-delay: 2.5s;
}
.chart--dev .chart__bar:nth-of-type(9) {
animation-delay: 2.3s;
}
.chart--dev .chart__bar:nth-of-type(8) {
animation-delay: 2.1s;
}
.chart--dev .chart__bar:nth-of-type(7) {
animation-delay: 1.9s;
}
.chart--dev .chart__bar:nth-of-type(6) {
animation-delay: 1.7s;
}
.chart--dev .chart__bar:nth-of-type(5) {
animation-delay: 1.5s;
}
.chart--dev .chart__bar:nth-of-type(4) {
animation-delay: 1.3s;
}
.chart--dev .chart__bar:nth-of-type(3) {
animation-delay: 1.1s;
}
.chart--dev .chart__bar:nth-of-type(2) {
animation-delay: 0.9s;
}
.chart--dev .chart__bar:nth-of-type(1) {
animation-delay: 0.7s;
}
.chart--prod .chart__bar:nth-of-type(2) {
animation-delay: 4.2s;
}
.chart--prod .chart__bar:nth-of-type(1) {
animation-delay: 4s;
}
.chart--design .chart__bar:nth-of-type(3) {
animation-delay: 5.6s;
}
.chart--design .chart__bar:nth-of-type(2) {
animation-delay: 5.4s;
}
.chart--design .chart__bar:nth-of-type(1) {
animation-delay: 5.2s;
}
.chart__label {
padding-left: 10px;
line-height: 30px;
color: white;
}
@keyframes anim-lightspeed-in {
0% {
transform: translateX(-200%);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.tabla-corporal{
font-size: 12px;
width: 100%;
}
.tabla-corporal tr td{
width: 25%;
padding-top: 3px;
padding-bottom: 3px;
}
.tabla-corporal tr td input{
line-height: 35px;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
border-radius: 17.5px;
border: none;
background-color: rgba(250,250,250,.8);
display: inline-block;
height: 35px;
width: 80%;
}
.tabla-corporal tr td p{
display: inline-block;
margin-bottom: 0;
}
.tabla-corporal tr:first-child td{
font-weight: 600;
text-align: center;
}
.block-c{
margin: auto;
display: block;
}
.tabla-corporal tr td:nth-child(3) {
text-align: center;
font-size: 14px;
font-weight: bold;
}
.tabla-corporal tr td:nth-child(4){
text-align: center;
}
.kg-aft::after{
content: 'kg';
font-size:
}
.por-aft::after{
content: '%';
}
.tabla-corporal tr td:nth-child(4) span{
font-size: 14px;
font-weight: bold;
}
#chart {
margin: 32px auto;}
.p-12{
font-size: 12px;
}
.bold{
font-weight: bold;
}
.chart{}
.bg-blanco{
background: #fff;
}
.check-st{
display: block;
position: relative;
padding-left: 50px;
margin-bottom: 0px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
line-height: 25px;
width: 100%;
}
.check-st input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 6px;
margin-left: 8px;
}
.check-st:hover input ~ .checkmark {
background-color: #ccc;
}
.check-st input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-st input:checked ~ .checkmark:after {
display: block;
}
.check-st .checkmark:after {
left: 10px;
top: 7px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.panel-heading h4{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 14px;
display: block;
}
.panel-default {
color: #333;
background-color: rgba(255, 255, 255, 0.6);
border-color: #ddd;
margin-top: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
.panel-heading{
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background: #b9a8ff80;
border-radius: 3px;
padding: 7px;
}
.panel-collapse{
padding: 15px;
}
.txt-inp {
display: none;
border-radius: 3px;
border: 1px solid #dedede;
width: 100%;
padding: 5px;
transition: all .5s;
}
.check-st input:checked ~ .txt-inp {
display: block;
}
.panel-title a{
display: block;
line-height: 24px;
}
.panel-title a i{
vertical-align: top;
}
.txt-com{
width: 100%;
/* border: 1px solid #e2e2e2;*/
border: none;
padding: 5px;
border-radius: 6px;
font-size: 12px;
margin-top: 10px;
box-shadow:0px 5px 11px 0px rgba(70, 34, 120, 0.2)
}
.w100{
width: 100%;
}
/*++++++++++++*/
.icon {
position: absolute;
top: 50%;
left: 50%;
width: 16em;
height: 16em;
transform: translate(-50%,-50%);
}
.bg-modal-test01{
background: url(../img/bg-modal-test00.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-modal-test02{
background: url(../img/bg-modal-test02.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-modal-test03{
background: url(../img/bg-modal-test04.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-modal-test04{
background: url(../img/bg-modal-test03.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-modal-test05{
background: url(../img/bg-modal-test05.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-modal-test07{
background: url(../img/bg-modal-nutricion.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.body-status{
position: relative;
height:auto;
width: 100%;
}
.bs-ico{
position: absolute;
top: 40%;
left: 50%;
width: 150px;
height: 150px;
border-radius: 50%;
border: 6px solid;
text-align: center;
display: flex;
transform: translate(-50%,-50%);
background: rgba(255,255,255,.5);
}
.bs-ico i{
display: flex;
margin: auto;
font-size: 60px;
}
.bs-ico.bien{
color: #00d080;
border-color: #00d080;
}
.bs-ico.medio{
color: #ffb100;
border-color: #ffb100;
}
.bs-ico.mal{
color: #ff006c;
border-color: #ff006c;
}
.txt-visible{
border-radius: 3px;
border: 1px solid #ffeab6;
width: 100%;
padding: 5px;
transition: all .5s;
background: #fefae1;
}
.pregunta2{
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 5px;
padding-bottom: 5px;
flex-direction: column;
}
.pregunta2 label{
line-height: 20px;
font-size: 12px;
}
/*+++++++++++++++++*/
/* The container */
.radio-cont {
display: inline-block;
position: relative;
padding-left: 25px;
margin-bottom: 5px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 20px;
height: 20px;
margin-right: 10px;
float: right;
}
/* Hide the browser's default radio button */
.radio-cont input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.radio-efect {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.radio-cont:hover input ~ .radio-efect{
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.radio-cont input:checked ~ .radio-efect {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-efect::after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-cont input:checked ~ .radio-efect::after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio-cont .radio-efect::after {
top: 6px;
left: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
transition: all .5s;
}
.preguntainp p{
width: 80%;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-bottom: 0;
}
.dsp-none{
display: none;
}
.dsp-visible{
display: block;
}
/* Chart */
.txt-body-status{
color: #aeaeae;
font-size: 11px;
line-height: 16px;
text-align: justify;
width: 100%;
display: block;
}
/* */
.line-chart {
animation: fadeIn 600ms cubic-bezier(0.57, 0.25, 0.65, 1) 1 forwards;
opacity: 0;
max-width: 640px;
width: 100%;
margin: auto;
}
.aspect-ratio {
height: 0;
padding-bottom: 50%; // 495h / 990w
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/**/
.bar-exp {
padding: 4px;
background:rgb(234, 234, 234);
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
width: 100%;
}
.bar-exp-bar {
height: 16px;
border-radius: 12px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* https://css-tricks.com/webkit-sibling-bug/
*/
/*
#five:checked ~ .bar-exp > .bar-exp-bar {
width: 5%;
background-color: #f63a0f;
}
*/
.edad-50.bar-exp > .bar-exp-bar {
width:50%;
background-color: #f21a11;
}
.edad-60.bar-exp > .bar-exp-bar {
width: 60%;
background-color: #f2901e;
}
.edad-70.bar-exp > .bar-exp-bar {
width: 70%;
background-color: #ffb100;
}
.edad-80.bar-exp > .bar-exp-bar {
width: 800%;
background-color: #ffce00;
}
.edad-90.bar-exp > .bar-exp-bar {
width: 90%;
background-color: #95e01e;
}
#mcv:checked ~ .bar-exp > .bar-exp-bar {
width: 90%;
background-color: #95e01e;
}
.edad-100.bar-exp > .bar-exp-bar {
width: 100%;
background-color: #86e01e;
}
.edad-ul{
width: 100%;
margin-bottom: 0;
padding-left: 0;
}
.edad-ul li{
display: inline-block;
width: 9.5%;
text-align: right;
font-size: 14px;
}
.edad-ul li::after{
/* content: 'años'; */
font-size: 12px;
line-height: 14px;
}
.edad-ul li:first-child{
width: 48%;
}
.line-chart::after{
/* content: 'Años de vida'; */
position: absolute;
right: 0;
bottom: 0;
transform: translateX(150%);
font-size: 12px;
line-height: 26px;
}
.line-chart{
position: relative;
}
.line-chart::before{
/* content: 'Probabilidad de vida';*/
position: absolute;
left: -71px;
bottom: 77px;
transform: rotate(-90deg);
font-size: 12px;
line-height: 26px;
}
.radio-cali {
display: none;
}
.label-cali {
display: inline-block;
margin: 0 5px 20px;
padding: 3px 8px;
color: #5e5f62;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
}
.radio-cali:checked + .label-cali {
color: #fff;
background: rgb(176, 91, 255);
}
.rad-ct{
text-align: center;
}
.p-18{
margin-top: 20px;
font-size: 18px;
font-weight: 500;
text-align: center;
}
.p-18 span{
font-weight: bold;
}
.exp-card{
padding: 10px;
box-shadow: 0 9px 18px -8px rgba(209, 160, 255, 0.5);
border-radius: 6px;
text-align: center;
margin-top: 10px;
}
.exp-card p{
font-size: 24px;
font-weight: bold;
margin-bottom: 0;
}
.exp-card span{
font-size: 14px;
}
.p-menos{
color: #ff1465;
}
.p-mas{
color: #01e057;
}
.af-year::after{
/* content: ' años';*/
}
.af-dias::after{
/* content: ' días';*/
}
.scroll-x-tabla{
width: 100%;
overflow-x: auto;
}
.dt-nat{
display: block;
font-size: 12px;
color:#787878;
}
.dt-nat span{
display: inline-block;
}
.dt-nat p{
display: inline-block;
margin-bottom: 0;
}
/*+++++++++*/
#wizard-demo {
background:rgba(239, 239, 239, 0.92);
margin-top: 10px;
border-radius: 6px;
}
#wizard-demo h3{
opacity: 0;
font-size: 1px;
line-height: 1px;
margin: 0;
}
#wizard-demo .steps ul{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
#wizard-demo .steps ul>li{
display: inline-block;
text-align: center;
}
#wizard-demo .steps .current-info{
left: -999px;
position: absolute;
}
#wizard-demo .actions ul{
padding-left: 0;
list-style: none;
}
#wizard-demo .actions>ul >li{
display: inline-block;
text-align: right;
float: left;
}
.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
background: #eee;
color: #aaa;
}
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
background: #2184be;
color: #fff;
display: block;
padding: .5em 1em;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wizard > .steps > ul > li, .wizard > .actions > ul > li {
float: left;
}
.wizard > .steps > ul > li {
width: 25%;
}
.wizard ul > li , .tabcontrol ul > li {
display: block;
padding: 0;
}
.wizard ul > li a, .tabcontrol ul > li a{
line-height: 36px;
display: block;
border-radius: 6px;
background: #e1e1e1;
color: #242424;
font-size: 12px;
margin-left: 6px;
margin-right: 6px;
margin-top: 6px;
margin-bottom: 6px;
}
#wizard-demo .content{
padding: 15px;
}
.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
background: #2184be;
color: #fff;
cursor: default;
}
.inp-r .inp-radio{
display: inline-block;
margin-right: 5px;
}
.inp-radio label{
font-size: 12px;
margin-bottom: 0;
line-height: 14px;
}
.wizard > .steps > ul > li, .wizard > .actions > ul > li {
float: left;
}
.mx-h90{
max-height: 90px;
}
.tab-img tr td img{
max-width: 15px;
max-height: 15px;
}
.tab-cent{
text-align: center;
}
.prog-tab{
border-radius: 10px;
height: 10px;
width: 100%;
background-image: linear-gradient(to right, #ff7233, #ebff00, #00ed9b);
margin: auto;
max-width: 80px;
box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.25), inset 0 2px rgba(62, 62, 62, 0.1);
}
.prog-tab span {
background: url(../img/flechita-blanco.png);
background-repeat: repeat;
background-size: auto;
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
display: block;
position: relative;
top: -2px;
transform: translateX(-50%);
}
/*imprimir*/
.bg-imprimir{
background: rgba(255,255,255,1);
}
.barra-opciones{
background: #25c7ee;
/* background-image: linear-gradient( to right, #0081ff 0%, #00c5ff 100%);*/
padding-bottom: 5px;
padding-top: 15px;
margin-bottom: 10px;
}
.barra-opciones h5{
font-size: 24px;
font-weight: bold;
color: #fff;
margin-bottom: 0;
border-top: 1px solid #fff;
line-height: 34px;
text-shadow: 0 1px 1px #215684;
}
.borde-dato{
line-height: 35px;
font-size: 12px;
padding-right: 10px;
border-radius: 17.5px;
width: 100%;
border: 1px solid #a7a7a7;
background-color: rgba(250,250,250,1);
display: block;
height: 35px;
margin-bottom: 10px;
}
.borde-dato label{
background: #0081ff;
border-radius: 17.5px 0 0 17.5px;
padding-left: 15px;
color: #fff;
padding-right: 15px;
margin-bottom: 0;
height: 33px;
margin-right: 10px;
border-right: 1px solid #a7a7a7;
}
.cm-aft::after {
content: 'cm';
}
.bg-bien{
background: #0ce69b;
}
.bg-peligro{
background: #ff3939;
}
.bg-advert{
background: #ffc400;
}
.tabla-imp{
font-size: 14px;
}
.tabla-imp tr td{
font-size: 14px;
padding: 2px 5px;
}
.tabla-imp thead {
/* background: #0081ff;*/
color: #2c2c2c;
border:none;
}
.tabla-imp thead tr td{
font-weight: bold;
text-align: center;
}
.tabla-imp tr td:nth-child(2){
text-align: center;
}
.tabla-imp tr td:last-child{
font-weight: bold;
text-align: center;
}
.tit-resul{
background: #00ad51;
color: #fff;
margin-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
padding: 10px;
border: 1px solid #00ad51;
border-radius: 22px;
display: inline-block;
}
.tit-resul::after{
content: '';
border: 1px solid #00ad51;
width: calc(100% - 30px);
position: absolute;
left: 15px;
top: 32px;
z-index: -1;
}
.tableimp{
padding: 10px;
border: 1px solid #99daf3;
border-radius: 6px;
background: #99daf3;
}
.niveles-val{
padding-left: 20px;
list-style: none;
}
.niveles-val::before {
display: none;
}
.txnivel-gordura{
position: absolute;
transform: rotate(-90deg);
left: -28px;
top: 90px;
}
.rf-nina::before {
display: none;
}
.rf-nino::before {
display: none;
}
.txmujer{
transform: rotate(-90deg);
position: absolute;
top: 25px;
left: 0px;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
}
.txhombre{
transform: rotate(-90deg);
position: absolute;
top: 25px;
left: -5px;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
}
.niveles-val li{
text-align: center;
}
.niveles-val li>div{
display: inline-block;
width: 22.2%;
/* border: 2px solid #000;*/
height: 50px;
vertical-align: middle;
font-size: 14px;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
border-radius: 3px;
position: relative;
}
.niveles-val li>div:nth-child(2),
.niveles-val li>div:nth-child(3),
.niveles-val li>div:nth-child(4){
background: url(../img/cuadricula.png);
background-position: center;
background-size: cover;
}
.niv-01{
background: #ff6d02;
}
.niv-02{
background: #ff9d00;
}
.niv-03{
background: #ffd800;
}
.niveles-val li:first-child >div{
border: 2px solid #ff6d02;
}
.niveles-val li:nth-child(2) >div{
border: 2px solid #ff9d00;
}
.niveles-val li:nth-child(3)>div{
border: 2px solid #ffd800;
}
.niv-masa >div:nth-child(2) {
background:#ff8181 !important;
}
.niv-masa >div:nth-child(3){
background:#ff5c5c !important;
}
.niv-masa >div:nth-child(4){
background:#e54646 !important;
}
.btn-imprimir{
background-image: linear-gradient( to right, #a953ff 1%, #dc4cdf 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
display: inline-block;
margin: auto;
margin-bottom: 10px;
text-align: center;
float: right;
}
.card-imp{
border: 2px solid #ff8932;
border-radius: 6px;
padding: 10px;
margin-bottom: 30px;
}
.ico-card{
width: 60px;
height: 60px;
border-radius: 6px;
margin-top: -30px;
border: 2px solid #ff8932;
padding: 5px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.ico-card img{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
.ico-card-frec{
display: inline-block;
vertical-align: middle;
width: 52%;
}
.niveles-card p{
margin-bottom: 0;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #d1d1d1;
}
.niveles-card p span{
font-weight: 400;
}
.border-status{
position: absolute;
top: 0;
width: 10px;
height: 350px;
background-image: linear-gradient( to top, #fd2244 1%, #fdb122 49%, #4cdf63 100%);
display: block;
max-height: 100%;
right: 0;
border-radius: 6px;
}
}
.cont-cuerpo-lat{
position: relative;
height: 350px;
}
.cont-cuerpo-lat img{
display: block;
margin: auto;
height: 350px;
}
.coment-ad{
font-size: 14px;
line-height: 24px;
}
.chart__bar.bueno{
background: #06ce72;
}
.chart__bar.moderado{
background: #ffce00;
}
.chart__bar.malo{
background: #ff9300;
}
.st-chart span{
font-size: 12px;
color: #404040!important;
}
.ico-card-frec h6{
font-size: 14px;
}
.st-chart p{
position: absolute;
right: 5px;
top: 3px;
font-weight: bold;
font-size: 14px;
}
.st-chart{
margin-bottom: 30px;
}
.chart-comp{
background: linear-gradient( to right, #fda922 1%, #fdec22 49%, #4cdf63 100%);
height: 12px;
margin-top: 5px;
border-radius: 6px;
}
.chart-comp strong:first-child{
position: absolute;
left: 2px;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
.chart-comp strong:last-child{
position: absolute;
right: 2px;
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
.flech-lt{
position: absolute;
right: -4px;
width: 12px;
height: 27px;
background: url(../img/flechita-lado-negro.png);
background-repeat: no-repeat;
background-size: contain;
transform: translateY(-50%);
}
.val-fis{
border: 2px solid #99daf3;
display: block;
border-radius: 6px;
}
.niv-masa>div{
height: 30px !important;
}
.tabla-imp tr td:first-child{
background: #0096d2;
font-weight: bold;
color: #fff;
}
.tabla-imp thead td:first-child{
background: none;
color: #000;
}
.tabla-imp tbody{
background: #fff;
}
.ecw{
border: 2px solid #05c9e5;
border-radius: 6px;
margin-top: 10px;
overflow: hidden;
}
.ecw>div:first-child{
width: 60%;
display:inline-block;
}
.ecw>div:last-child{
width: 38%;
display:inline-block;
float: right;
}
.tcw>p{
/* width: 48%;*/
display:inline-block;
margin-bottom: 0;
line-height: 20px;
padding: 10px;
font-size: 18px;
font-weight: bold;
}
/*
.tcw>span{
width: 48%;
display:inline-block;
line-height: 40px;
padding: 10px;
font-size: 18px;
font-weight: bold;
}
*/
.icw>div{
width: 100%;
display:inline-block;
float: right;
border-left: 2px solid #05c9e5;
}
.icw>div>span{
background: #05c9e5;
display: block;
padding: 5px;
border-bottom: 2px solid #05c9e5;
line-height: 14px;
}
.icw>div>p{
margin-bottom: 0;
padding: 5px;
}
.barrita-blanca{
background: #fff;
border: 1px solid #a9d796;
}
.barrita-amarilla{
background: #ffb100;
border: 1px solid #a9d796;
}
.rec-verde{
background: #a9d796;
margin-top: 10px;
border-radius: 6px;
border: 2px solid #a9d796;
padding: 10px;
}
.niv-gras{
width: 40%;
display: inline-block;
vertical-align: baseline;
}
.niv-gras p{
display: inline-block;
margin-bottom: 0;
}
.niv-gras span{
border: 2px solid #ffa700;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-radius: 6px;
background: #fff;
}
.niv-gras-bar{
width: 58%;
display: inline-block;
vertical-align: bottom;
}
.niv-gras-bar div{
width: 100%;
height: 20px;
}
.niv-gras-bar div span{
display: block;
height: 18px;
text-align: right;
padding-right: 10px;
font-size: 12px;
line-height: 18px;
}
.barrita-blanca span{
background: #020202;
border: 1px solid #020202;
}
.barrita-amarilla span{
background: #ffd26c;
border: 1px solid #ffd26c;
}
.niveles-val img{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
.rangos-fat{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.rangos-fat> li{
height: 12px;
margin-top: -2px;
}
.rangos-fat> li> span{
display: inline-block;
width: 20%;
line-height: 20px;
font-size: 11px;
text-align: right;
vertical-align: middle;
}
.rang-bodyfat{
border: 2px solid #000;
display: inline-block;
width: 78%;
height: 12px;
vertical-align: middle;
}
.rang-bodyfat>div{
height: 8px;
display: inline-block;
float: left;
background-image: url(../img/cuadricula.png);
border-left: 2px solid #000;
}
.rang-bodyfat>div:nth-child(1){
background-color: #84e0fa;
border-left: 0;
}
.rang-bodyfat>div:nth-child(2){
background-color: #07c934;
}
.rang-bodyfat>div:nth-child(3){
background-color: #e3d200;
}
.rang-bodyfat>div:nth-child(4){
background-color: #fc3000;
}
.rang-001{}
.rangos-fat{
position: relative;
}
.esp-rg-fat{
display: block;
width: 100%;
overflow: hidden;
margin-top: 10px;
}
.esp-rg-fat>p{
display: inline-block;
float: left;
width: 20%;
font-size: 10px;
/* font-weight: bold;*/
text-align: center;
height: 20px;
margin-bottom: 5px;
}
.esp-rg-fat>p:nth-child(2){
background-color: #84e0fa;
width: 40%;
}
.esp-rg-fat>p:nth-child(3){
background-color: #07c934;
width: 12%;
}
.esp-rg-fat>p:nth-child(4){
background-color: #e3d200;
width: 12%;
}
.esp-rg-fat>p:nth-child(5){
background-color: #fc3000;
width: 16%;
}
.rf-nina::before{
content: 'mujer';
transform: rotate(-90deg);
position: absolute;
top: 25px;
left: 0px;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
}
.rf-nino::before{
content: 'Hombre';
transform: rotate(-90deg);
position: absolute;
top: 25px;
left: 0px;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
}
.rg-fat-por{
display: block;
overflow: hidden;
padding-left: 20%;
margin-top: 6px;
margin-bottom: -5px;
}
.rg-fat-por>span{
width: 20%;
display: inline-block;
float: left;
font-weight: bold;
font-size: 14px;
line-height: 14px;
}
.niv-agua-body{
display: block;
border: 1px solid #1b73ff;
overflow: hidden;
border-radius: 6px;
}
.niv-agua-body span{
width: 50%;
display: inline-block;
float: left;
text-align: center;
border: 1px solid #1b73ff;
font-weight: bold;
font-size: 14px;
color: #1b73ff;
}
.niv-agua-body span:first-child{
background: url(../img/nin01.png);
background-position: 10px 0;
background-repeat: no-repeat;
background-size: contain;
}
.niv-agua-body span:last-child{
background: url(../img/nin02.png);
background-position: right;
background-repeat: no-repeat;
background-size: contain;
}
.rg-gras-vis{
border: 2px solid #1b73ff;
display: flex;
text-align: center;
justify-content: center;
margin-bottom: 5px;
border-radius: 3px;
width: 50%;
}
.rg-gras-vis span{
border: 1px solid #000;
width: 15%;
background: #000;
color: #fff;
border-radius: 3px;
margin: 5px;
line-height: 18px;
font-size: 12px;
}
.rg-gras-vis p{
margin-bottom: 0;
line-height: 30px;
font-size: 14px;
}
.tabla-ran-mas tr td img{
max-height: 30px;
/*max-width: 35%;*/
}
.tabla-ran-mas tr td{
border: 1px solid #696969;
padding: 3px;
font-size: 12px;
text-align: center;
line-height: 12px;
}
.citas-hist tr td{
width: 31%;
display: inline-block;
}
.citas-hist tr td a{
margin: auto;
display: block;
}
.min-he-100{
height: calc(100% - 460px);
}
.citas-hist {
display: block;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.tabla-imp tr td:nth-child(2),
.tabla-imp tr td:nth-child(3){
text-align: center;
}
.tabla-imp tbody tr td{
border: 1px solid #0096d2;
}
.mrc-act::after{
position: absolute;
content: '';
background: url(../img/chek-01.png);
height: 30px;
width: 30px;
background-size: contain;
background-repeat: no-repeat;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.med-body-imp{
height: 350px;
display: block;
margin: auto;
width: 309.35px;
position: relative;
}
.med-body-imp img{
width: 100%;
height: 100%;
}
.med-body-imp span{
position: absolute;
font-size: 14px;
font-weight: 600;
}
.med-body-imp span::after{
content: 'cm';
}
.md-bizeps{
left: 0px;
top: 19px;
}
.md-antebrazo{
left: 0px;
top: 150px;
}
.md-pecho{
right: 0px;
top: 10px;
}
.md-cintura{
right: 0px;
top: 110px;
}
.md-cadera{
right: 0px;
top: 200px;
}
.md-pierna{
left: 0px;
top: 240px;
}
.md-ant-pierna{
right: 0px;
top: 250px;
}
.md-cuello{
left: 90px;
top: 20px;
}
.rcc-td{
display: block;
margin-top: 5px;
border: 2px solid #00baff;
border-radius: 6px;
text-align: center;
}
.rcc-td p{
margin-bottom: 0;
font-size: 14px;
line-height: 24px;
display: block;
}
.rcc-td span{
font-weight: bold;
}
.puls-min{
display: flex;
}
.bg-head-ad{
background: url(../img/bg-add.jpg);
background-size: cover;
margin-bottom: 10px;
border-radius: 10px;
}
.tx-blanco{
color: #fff;
}
.tr-add{
border-radius: 10px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.2);
width: 31%;
margin-left: 1%;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.tr-add>figure{
height: 140px;
background: #6200ff;
border-radius: 6px;
overflow: hidden;
margin-bottom: 5px;
}
.tr-add>figure>img{
object-fit: cover;
height: 100%;
width: 100%;
}
.tr-add>figcaption>p{
font-size: 12px;
margin-bottom: 2px;
}
.tr-add>figcaption>a{
display: inline-block;
text-align: center;
font-size: 12px;
color: #fff;
border-radius: 10px;
background: #6196fb;
color: #fff !important;
line-height: 24px;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
@media (max-width: 1366px) {
.log-30{
width: 50%;
}
.log-70{
width: 50%;
}
.cit-prox>li{
width: 31.3%;
}
}
.trj-adds{
list-style: none;
padding-left: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.trj-adds li{
width: 20.5%;
margin: 1%;
}
.trj-adds li figure{
height: 90px;
max-width: 90px;
border-radius: 15px;
background: #fff;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
overflow: hidden;
}
.trj-adds li figure>img{
object-fit: cover;
height: 100%;
width: 100%;
}
.trj-adds li figcaption h6{
font-size: 10px;
display: block;
margin-top: 2px;
margin-bottom: 2px;
font-weight: bold;
}
.trj-adds li figcaption span{
font-size: 8px;
display: block;
}
.trj-adds li figcaption a {
border-radius: 3px;
font-size: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
line-height: 20px;
display: inline-block;
}
.flr-30{
width: 30%;
float: right;
}
.pagination li{
width: 24px;
text-align: center;
}
.pagination li.active{
background: #fff;
border-radius: 6px;
}
.pagination li a{
display: block;
}
.pagination.flr-1{
float: right;
}
/*++++++++++++++++*/
/*++++++++++++++++*/
.rep-card{
width: 140px;
height: 140px;
box-shadow: 0px 5px 11px 2px rgba(0,0,0,.4);
margin: 0;
border-radius: 50%;
vertical-align: top;
margin: auto;
display: block;
}
.rep-card .progress-bar{
border-width: 28px;
}
.rep-card .progress-value {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
background: linear-gradient( to bottom, #ffffff 1%, #e6e6e6 100%);
box-shadow:0px 0px 18px 4px rgba(0,0,0,.5);
z-index: 99;}
.progress.amarillo .progress-bar {
border-color: #ff8f00;
}
/*
.progress.amarillo .progress-left .progress-bar {
animation: loading-1 1.2s linear forwards 1.8s;
}
*/
.ul-bar-temp{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.ul-bar-temp li>div{
height: 10px;
background: #ff8f00;
display: inline-block;
margin-right: 10px;
}
.ul-bar-temp li:first-child >div{
width: 100px;
}
.ul-bar-temp li:nth-child(2) >div{
width: 80px;
}
.ul-bar-temp li:last-child >div{
width: 60px;
}
.ul-bar-temp li{
font-size: 12px;
line-height: 14px;
margin-bottom: 5px;
}
.med-temp{
border: 1px solid #afafaf;
padding: 10px;
border-radius: 6px;
}
.desc-temp{
display: inline-block;
width: 65%;
vertical-align: middle;
margin-bottom: 10px;
}
.desc-temp h6{
color:#ff8f00;
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
margin-top: 0;
}
.desc-temp p{
margin-bottom: 0;
font-size: 12px;
}
/*++++++++*/
/*+++++++++*/
.tens-art h6{
color:#0080ff;
}
.tens-art .ul-bar-temp li>div{
background: #0080ff;
}
.progress.azul .progress-bar {
border-color: #0080ff;
}
.cora-report{
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%,-50%);
width: 30px;
height: 30px;
}
.med-temp>span{
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #c9c9c9;
display: block;
margin-bottom: 5px;
}
.desc-temp .med-temp p{
font-weight: bold;
font-size: 30px;
color: #ff8f00;
line-height: 30px;
}
.tens-art .med-temp p{
color: #0080ff;
}
.val-adlt{
border: 1px solid #7c7c7c;
text-align: center;
font-size: 12px;
}
.val-adlt tr td{
padding: 2px;
border: 1px solid #afafaf;
}
.w-35{width: 35%;}
.val-tens>figure{
width: 25%;
}
.val-tens>figure img{
max-height: 25px;
display: block;
margin: auto;
}
.val-tens>figcaption{
width: 75%;
font-size: 12px;
}
.val-tens>figcaption p{
margin-bottom: 0;
}
.cont-val-tens{
border: 1px solid #afafaf;
border-radius: 6px;
padding: 5px;
}
.progress.verde .progress-bar {
border-color: #00c143;
}
.progress.rojo .progress-bar {
border-color: #ff450d;
}
.sat-oxi h6 {
color: #00c143;
}
.sat-oxi .med-temp p{
color: #00c143;
}
.sat-oxi .ul-bar-temp li > div{
background: #00c143;
}
.pul-frec .ul-bar-temp li > div{
background: #ff450d;
}
.pul-frec h6 {
color: #ff450d;
}
.pul-frec .med-temp p{
color: #ff450d;
}
.pul-frec .ul-bar-temp li:last-child>div{
width: 120px;
}
.max100{
max-width: 49px;
margin-top: 15px;
}
.progress-value>img{
max-height: 50px;
max-width: 50px;
margin-top: 15px;
}
.usag{
height: calc(100% - 91px);
}
/*++++++++*/
/*+++++++++*/
.button {
position: absolute;
bottom: 22%;
right: 0%;
width: 35px;
height: 35px;
z-index: 99;
}
.button-checkbox {
display: none;
}
.button-trigger {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
background-color: #2196F3;
-moz-transition: all 0.34s ease-in-out;
-o-transition: all 0.34s ease-in-out;
-webkit-transition: all 0.34s ease-in-out;
transition: all 0.34s ease-in-out;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
-webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
.button .material-icons {
z-index: 5;
color: #ffffff;
-moz-transform: translate(-50%, -50%) rotate(0);
-ms-transform: translate(-50%, -50%) rotate(0);
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
-moz-transition: all 0.34s ease-in-out;
-o-transition: all 0.34s ease-in-out;
-webkit-transition: all 0.34s ease-in-out;
transition: all 0.34s ease-in-out;
}
.button-option {
z-index: -1;
width: 80%;
height: 80%;
cursor: pointer;
background-color: #ffffff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.34s ease-in-out;
-o-transition: all 0.34s ease-in-out;
-webkit-transition: all 0.34s ease-in-out;
transition: all 0.34s ease-in-out;
-moz-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
-webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
.button-option:hover {
background-color: #2196F3;
}
.button-option:hover .material-icons {
color: #ffffff;
}
.button-option:active {
background-color: #1976D2;
}
.button-option .material-icons {
color: rgba(0, 0, 0, 0.54);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
font-size: 16px;
}
.button-checkbox:checked ~ .button-trigger > .material-icons {
-moz-transform: translate(-50%, -50%) rotate(225deg);
-ms-transform: translate(-50%, -50%) rotate(225deg);
-webkit-transform: translate(-50%, -50%) rotate(225deg);
transform: translate(-50%, -50%) rotate(225deg);
}
.button-checkbox:checked ~ .button-option:nth-of-type(1) {
/*
-moz-transform: translate(-50%, -440%);
-ms-transform: translate(-50%, -440%);
-webkit-transform: translate(-50%, -440%);
*/
transform: translate(-50%,100%);
}
.button-checkbox:checked ~ .button-option:nth-of-type(2) {
/*
-moz-transform: translate(-50%, -320%);
-ms-transform: translate(-50%, -320%);
-webkit-transform: translate(-50%, -320%);
*/
transform: translate(-50%, 220%);
}
.button-checkbox:checked ~ .button-option:nth-of-type(3) {
/*
-moz-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
-webkit-transform: translate(-50%, -200%);
*/
transform: translate(-50%, 340%);
}
.button .material-icons, .button-option {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.list-doc{
list-style: none;
padding-left: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
}
.list-doc li{
margin: 1%;
width: 23%;
height: 50px;
padding: 3px;
background: #fff;
overflow: hidden;
border-radius: 3px;
position: relative;
}
.list-doc li img{
width: 100%;
height: 100%;
object-fit: cover;
}
.ver-mas-doc{
background: rgba(250,250,250,.3);
border: 1px solid rgba(250,250,250,.6);
border-radius: 10px;
margin-top: 5px;
}
.ver-mas-doc>p{
padding-left: 5px;
font-weight: bold;
color: #3f4e8c;
font-size: 14px;
margin-bottom: 0;
display: inline-block;
line-height: 40px;
}
.ver-mas-doc>p>span{
font-weight: 400;
}
.mostrar-todo{
display: inline-block;
float: right;
line-height: 35px;
border-radius: 6px;
margin-right: 2px;
background-image: linear-gradient( to right, #a953ff 1%, #dc4cdf 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
line-height: 30px;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
color: #fff !important;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
.subir-archivo{
display: inline-block;
float: right;
border-radius: 50%;
margin-right: 2px;
background-image: linear-gradient( to right, rgb(95,132,251) 1%, rgb(103,183,251) 100%);
box-shadow: 0px 6px 16px 0px rgba(70, 34, 120, 0.29);
font-size: 12px;
font-weight: bold;
color: #fff;
width: 30px;
text-align: center;
margin-top: 5px;
}
.subir-archivo i{
color: #fff;
line-height: 30px;
font-size: 18px;
}
::-webkit-scrollbar {
width: 5px; /*=> ancho del scroll*/
height: 5px; /*=> ancho del scroll*/
background-color:transparent; /*=> Color del fondo principal */
}
::-webkit-scrollbar-track {
background-color: rgba(255,255,255,.5); /*=> color de fondo del trayecto del scroll */
}
::-webkit-scrollbar-thumb {
background-color: #aa53ff; /*=> color del indicador del scroll */
border-radius: 0px; /*=> bordes redondeados */
}
.list-doc li span{
position: absolute;
font-size: 11px;
line-height: 12px;
background: rgba(255,255,255,.9);
font-weight: 400;
bottom: 2px;
left: 2px;
width: 100%;
}
/**/
.cont {
flex-direction: row;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.archivo {
color: #253443;
width: 18%;
border-radius: 6px;
background: #fff;
box-shadow: 0px 6px 13px 0px rgba(36, 95, 145, 0.11);
margin-bottom: 15px;
transition: all .5s;
margin-right: 2%;
}
.archivo > figure {
height: 130px;
margin: auto;
border-radius: 6px 6px 0 0;
position: relative;
}
.archivo > figure > img {
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 6px 6px 0 0;
}
.archivo > figcaption {
padding: 10px;
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
.archivo > figcaption p {
line-height: 16px;
margin-bottom: 0;
}
.archivo > figcaption span {
font-weight: 400;
}
.archivo > figcaption span strong{
font-style: italic;
font-weight: 400;
margin-right: 10px;
}
.btn-floating {
display: inline-block;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
background-color: #26a69a;
border-radius: 50%;
-webkit-transition: transform .5s;
transition:transform .5s;
cursor: pointer;
vertical-align: middle;
font-size: 12px;
outline: 0;
}
.blue {
background-color: #2196F3 !important;
}
.btn-arch {
position: absolute;
right: 10px;
bottom: -20px;
}
.btn-floating i {
width: inherit;
display: inline-block;
text-align: center;
color: #fff;
font-size: 16px;
line-height: 40px;
}
.bg-blanc{
background: #fff;
}
.btn-floating:hover{
transform: scale(1.1);
}
a.btn-floating:active {
background: #aa53ff !important;
}
.br1px{
border: 1px solid #e0c1fd;
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
.cont-logo{
background: none;
box-shadow: none;
opacity: 1;
height: 50px;
}
.cont-logo img {
max-width: 100%;
max-height: 100%;
}
.cortar-texto p {
background: none;
max-height:32px ;
font-size: 14px;
line-height: 16px;
overflow: hidden;
text-align: justify;
margin-bottom: 0;
display: block;
padding-right:11px;
}
.cortar-texto p:before {
content:'...';
position: absolute;
bottom: 0;
right: 0;
}
.cortar-texto p::after {
content: '';
background: inherit;
position: absolute;
right: 0;
width: 1rem;
height: 1.5rem;
z-index: 1;
}
.cortar-texto{
width: 100%;
line-height: 16px;
position: relative;
background: none;
}
.citas-hist tr td a{
display: inline-block;
}
.bg-modal-diag {
background: url(../img/bg-modal-diag.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
/*------------------modal-wiki------------------*/
.bg-modal-wikifruit{
background: url(../img/bg-modal-wiki-fruit.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.lista-wiki{
margin-bottom: 0;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top: 15px;
}
.lista-wiki li{
width: 90%;
margin: .5%;
}
.producto-wiki{
display: flex;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.90);
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.2);
padding: 5px;
margin-bottom: 10px;
transition: all .5s;
}
.nav-tab-info li a {
width: 100%;
display: block;
font-size: 12px;
line-height: 34px;
}
.nav-tab-info li a.active {
border-bottom: 2px solid #eb00ff;
color: #eb00ff;
}
.producto-wiki:hover{
transform: translateY(-5px);
}
.producto-wiki figure{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 6px;
margin-bottom: 0;
}
.producto-wiki figure img{
object-fit: cover;
height: 100%;
width: 100%;
}
.producto-wiki figcaption{
padding: 5px;
}
.producto-wiki figcaption p{
margin-bottom: 0;
font-size: 14px;
line-height: 18px;
}
.producto-wiki figcaption h6{
font-size:16px;
font-weight: bold;
margin-bottom: 0;
line-height: 22px;
}
.nav-tab-info li{
width: 33%;
text-align: center;
}
.bg-tr06 {
background: rgba(255, 250, 255, 0.8);
padding: 0 15px 15px 15px;
border-radius: 3px;
}
serving-calculator-numbers{
padding-left: 0;
list-style: none;
}
.serving-calculator-numbers li {
width: 25%;
float: left;}
.serving-calculator-numbers .value-wrapper {
line-height: 0;
vertical-align: middle;
display: inline-block;
}
.serving-calculator-numbers .value {
font-size: 36px;
line-height: 50px;
letter-spacing: 1.2px;
}
.serving-calculator-numbers .value {
font-size: 36px;
line-height: 50px;
letter-spacing: 1.2px;
font-weight: bold;
}
.serving-calculator-numbers {
width: 100%;
text-align: center;
margin-top: 20px;
margin-left: 0;
display: inline-block;
}
.color-verde{color: rgb(14, 208, 81)}
.color-azul{color: rgb(54, 162, 235)}
.color-rojo{color: rgb(255, 99, 132)}
.lista-wiki2{
padding-left: 0;
list-style: none;
display: block;
flex-direction: column;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 95%;
padding: 15px;
padding-bottom: 20px;
}
.lista-wiki2-li{
display: flex;
border-radius: 6px;
background-color: rgba(255, 255, 255,.9);
box-shadow: 0px 5px 21px 0px rgba(70, 34, 120, 0.2);
padding: 5px;
margin-bottom: 10px;
transition: all .5s;
}
.lista-wiki2-li:hover{
background-color: rgba(255, 255, 255,.6);
box-shadow: 0px 5px 25px 0px rgba(70, 34, 120, 0.3);
}
.lista-wiki2-li>div{
text-align: center;
font-size: 12px;
line-height: 24px;
}
.lista-wiki2-li>div p{
margin-bottom: 0;
}
.lista-wiki2-li>div:first-child{
text-align: left;
width: 70%;
}
.lista-wiki2-li div:nth-child(2){
width: 20%;
}
.lista-wiki2-li div:nth-child(3){
width: 10%;
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
.lista-wiki-title-tab{
background: rgba(46, 53, 85, 0.2);
line-height: 12px;
font-size: 12px;
color: #000;
border-radius: 6px;
display: flex;
padding: 10px;
text-align: center;
margin-bottom: 0px;
//height: 5%;
height:auto;
}
.lista-wiki-title-tab span:nth-child(1){
width: 70%;
}
.lista-wiki-title-tab span:nth-child(2){
width: 20%;
}
.lista-wiki-title-tab span:nth-child(3){
width: 10%;
}
.bg-modal-wiki-tabla{
background: url(../img/bg-modal-wiki-fruit-tabla.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
/*-----------------------------------------*/
/*-----------------------------------------*/
/*-----------------------------------------*/
/*-----------------------------------------*/
/*-----------------------------------------*/
/*---------modal-aodontograma--------------*/
.bg-modal-odonto{
background: url(../img/bg-modal-dent.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
background-color: #fff;
}
.bg-boca{
width: 201px;
height: 406px;
margin: auto;
display: block;
position: relative;
}
.bg-boca .boca-diente{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.bg-boca span{
position: absolute;
background: #aa53ff;
opacity: 0;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 2;
cursor: pointer;
text-align: center;
display: block;
line-height: 30px;
color: #fff;
font-weight: 600;
font-size: 14px;
}
.br-gris{
border: 1px solid #cecece;
}
.txtarea-rz{
resize: vertical;
height: auto;
}
.dnt-act{opacity:1 !important; }
.dnt-11{
top: 20px;
left: 65px;
}
.dnt-12{
top: 28px;
left: 42px;
}
.dnt-13{
top: 44px;
left: 23px;
}
.dnt-14{
top: 70px;
left: 15px;
}
.dnt-15{
top: 91px;
left: 12px;
}
.dnt-16{
top: 115px;
left: 10px;
}
.dnt-17{
top: 138px;
left: 10px;
}
.dnt-18{
top: 160px;
left: 10px;
}
.dnt-21{
top: 20px;
right: 73px;
}
.dnt-22{
top: 28px;
right: 45px;
}
.dnt-23{
top: 44px;
right: 24px;
}
.dnt-24{
top: 70px;
right: 15px;
}
.dnt-25{
top: 91px;
right: 12px;
}
.dnt-26{
top: 115px;
right: 10px;
}
.dnt-27{
top: 138px;
right: 10px;
}
.dnt-28{
top: 160px;
right: 10px;
}
.dnt-31{
bottom: 53px;
right: 70px;
}
.dnt-32{
bottom: 56px;
right: 49px;
}
.dnt-33{
bottom: 64px;
right: 31px;
}
.dnt-34{
bottom: 87px;
right: 15px;
}
.dnt-35{
bottom: 111px;
right: 12px;
}
.dnt-36{
bottom: 133px;
right: 10px;
}
.dnt-37{
bottom: 156px;
right: 10px;
}
.dnt-38{
bottom: 178px;
right: 10px;
}
.dnt-41{
bottom: 53px;
left: 70px;
}
.dnt-42{
bottom: 56px;
left: 49px;
}
.dnt-43{
bottom: 64px;
left: 31px;
}
.dnt-44{
bottom: 87px;
left: 15px;
}
.dnt-45{
bottom: 111px;
left: 12px;
}
.dnt-46{
bottom: 133px;
left: 10px;
}
.dnt-47{
bottom: 156px;
left: 10px;
}
.dnt-48{
bottom: 178px;
left: 10px;
}
/* *** */
.back-obscuro{
background: #02114a;
}
.text-blanco{
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.padd-10{
padding: 10px 0;
}
.bg-lap1{
background: url(../img/base-1.png);
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat;
}
.bg-lap2{
background: url(../img/base-2.png);
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
}
.bg-lap{
height: 460px;
width: 460px;
}
.ani-lap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation-name: ani-lap;
animation-duration: .5s;
animation-delay: 1s;
animation-fill-mode: both;
z-index: 1;
}
@keyframes ani-lap{
0%{
top: -100%;
opacity: 0;
}
100%{
top:50%;
opacity: 1;
}
}
.ani-pantalla{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation-name: ani-pantalla;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: both;
z-index: 2;
}
@keyframes ani-pantalla{
0%{
left: 35%;
opacity: 0;
}
100%{
left:50%;
opacity: 1;
}
}
.text-ani1{
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
animation-name: ani-text;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: both;
z-index: 2;
margin-top: 0;
margin-bottom: 0;
}
@keyframes ani-text{
0%{
transform: translateY(200%);
opacity: 0;
}
100%{
transform: translateY(0%);
opacity: 1;
}
}
.base-pnt{
height: 505px;
width: 460px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.efect-1{
animation: pantalla-1;
animation-duration: .5s;
animation-delay: .3s;
border-radius: 0;
animation-fill-mode: both;
}
@keyframes pantalla-1{
0%{
border-radius: 0;
}
25%{
border-radius: 50%;
}
100%{
border-radius: 50%;
height: 0;
width: 0;
}
}
.contenedor-pant{
height: 505px;
width: 460px;
display: block;
}
.dsp-none{
display: none;
}
.ani-lap2{
position: absolute;
animation: anilap2;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: both;
}
@keyframes anilap2{
0%{
left: -100%;
top: -10%;
}
100%{
left: -30%;
top: -10%;
}
}
.ani-conecta{
position: absolute;
animation: aniconecta2;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: both;
}
@keyframes aniconecta2{
0%{
top: -100%;
left: 37%;
}
100%{
top: 25%;
left: 37%;
}
}
.ani-mano{
position: absolute;
animation: animano;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: both;
z-index: 3;
}
@keyframes animano{
0%{
right: 13%;
bottom: -100%;
}
100%{
right: 13%;
bottom: 11%;
}
}
.bg-rec-car{
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
}
.bg-electro1{
margin-top: 30px;
}
.bg-electro1::before{
content: '';
background: url(../img/electro.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center left;
height: 100px;
width: 100%;
position: absolute;
display: block;
opacity: 0;
animation: anispan2 5s infinite;
animation-delay: 5s;
animation-timing-function:ease;
}
.bg-electro{
background: url(../img/electro.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center left;
height: 100px;
width: 100%;
position: relative;
animation: anispan1 5s infinite;
animation-timing-function: linear;
}
@keyframes anispan1{
0%{
width: 0%;
}
100%{
width: 100%;
}
}
@keyframes anispan2{
0%{
opacity: 1;
}
30%{
opacity: .05;
}
100%{
opacity: 0;
}
}
.ani-scan{
display: flex;
justify-content: space-between;
margin-top: 70px;
height: 8px;
}
.ani-scan .barra {
display: inline-block;
position: relative;
margin-right: 1px;
width: 10px;
height: 1px;
overflow: hidden;
background: linear-gradient(to bottom, #aa53ff, #00baff);
color: transparent;
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
vertical-align: bottom;
}
.br-cortado{
border: none;
border-bottom: 1px dashed #fff;
margin: 0;
padding-top: 20px;
}
.md-tst{
width: 460px;
}
.botones-quitar{
position: absolute;
width: 80%;
}
.padd0{
padding: 0;
}
.btn-cer-mod{
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top: 5px;
background:#fff!important;
opacity: 1;
border-radius: 50%;
line-height: 30px;
z-index: 99;
}
.btn-cer-mod span{
line-height: 30px;
width: 30px;
height: 30px;
display: block;
line-height: 27px;
font-size: 30px;
text-align: center;
}
.efecto-apagar{
animation: apagatv;
animation-duration: .4s;
animation-delay: 0s;
animation-fill-mode: both;
}
@keyframes apagatv{
0%{
transform: scaleY(1);
filter: brightness(1);
}
60%{
transform: scaleY(1);
filter: brightness(0);
}
100%{
transform: scaleY(0);
filter: brightness(200);
}
}
.usag {
height: calc(100% - 129px);
}
.paginas-ymc{
justify-content: flex-end;
}
.paginas-ymc li{
width: auto;
}
.paginas-ymc li.active .page-link{
background-color: #a953ff;
border-color: #a953ff;
}
.paginas-ymc li .page-link{
background-color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.5);
}
.paginas-ymc li.disabled .page-link{
background-color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.5);
}
@media (max-width: 768px){
html{
width: 100%;
}
.he100hv{
width: 100%;
}
.log-30{
width: 100%;
}
.page-ath-form, .page-ath-header, .page-ath-footer, .page-ath-text{
width: 100%;
}
.log-70{
display: none;
}
}
.mrc-act::after {
top: 0;
right: 0;
transform: none;
left: inherit;
}