/* Graph */

/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.dotdiastoleLine {
    fill: #298C24;
    stroke: #fff;
}
.sistole{
    fill: #46DAFB;
    stroke: #fff;
}
/* 298C24 */
.lineSistole {
    fill: none;
    stroke: #46DAFB;
    stroke-width: 1;
}
.lineRed {
    fill: none;
    stroke: #D90B16;
    stroke-width: 1;
}
.dotlineRed {
    fill: #D90B16;
    stroke: #fff;
}
.diastoleLine {
    fill: none;
    stroke: #298C24;
    stroke-width: 1;
}
.y.axis > .tick >line,
.x.axis  > .tick >line{
    stroke: transparent;
}
.overlay {
  fill: none;
  pointer-events: all;
}
/* Style the dots by assigning a fill and stroke */

/*
.dot {
    fill: #46DAFB;
    stroke: #fff;
} */
.domain{
    stroke: gray;
    stroke-width: 0.1px;
}
  .focus circle {
  fill: none;
  stroke: steelblue;
}
.grid.y{
    stroke: gray;
    stroke-width: 0.1px;
}
.grid.x{
    stroke: gray;
    stroke-width: 0.1px;
}
#char1{
    /* margin: 0 auto; */
    display: grid;
    align-items: center;
}

/* Custom Background colors */
:root {
    --ion-color-gray: #f4f4f4;
    --ion-color-gray-rgb: 244,244,244;
    --ion-color-gray-contrast: #000000;
    --ion-color-gray-contrast-rgb: 0,0,0;
    --ion-color-gray-shade: #d7d7d7;
    --ion-color-gray-tint: #f5f5f5;
    --ion-color-darkblue: #053D5C;
    --ion-color-darkblue-rgb: 5,61,92;
    --ion-color-darkblue-contrast: #ffffff;
    --ion-color-darkblue-contrast-rgb: 255,255,255;
    --ion-color-darkblue-shade: #043651;
    --ion-color-darkblue-tint: #1e506c;
    --bullet-background-active: #3880ff;
}
  
.ion-color-gray {
--ion-color-base: var(--ion-color-gray);
--ion-color-base-rgb: var(--ion-color-gray-rgb);
--ion-color-contrast: var(--ion-color-gray-contrast);
--ion-color-contrast-rgb: var(--ion-color-gray-contrast-rgb);
--ion-color-shade: var(--ion-color-gray-shade);
--ion-color-tint: var(--ion-color-gray-tint);
}

.swiper-pagination-bullet {
    background: #000;
    opacity: 0.35;
}

.swiper-pagination-bullet-active {
    background: var(--bullet-background-active);
    opacity: 1;
}
.swiper-container{
    overflow: auto;
}
.ion-color-darkblue {
    --ion-color-base: var(--ion-color-darkblue);
    --ion-color-base-rgb: var(--ion-color-darkblue-rgb);
    --ion-color-contrast: var(--ion-color-darkblue-contrast);
    --ion-color-contrast-rgb: var(--ion-color-darkblue-contrast-rgb);
    --ion-color-shade: var(--ion-color-darkblue-shade);
    --ion-color-tint: var(--ion-color-darkblue-tint);
  }

/* Ampa Ionic Custom Styles */

ion-tab-bar {
    height: 70px;
}

ion-tab-button {
    height: 85%;
}

ion-title {
    font-size: 27px;
}

.card-margin{
    margin-bottom: 0;
}

#card-timeline{
    /* box-shadow: none; */
    margin: 0; 
}

#card-timeline-core{
    /* box-shadow: none; */
    margin: 0;
}

#timeline-divider{
    background-color: #fff;
    position: absolute;
    height: 35%;
    width: 100%;
    top: 0;
    left: 0;
}

#timeline-core{
    margin-top: 20px;
}

#card-last{
    /* box-shadow: none;*/
    margin: 0;
    background-color: #f4f4f4;
    text-align: center;
}

#card-last h5{
    /* box-shadow: none;
    margin: 0; */
    font-size: 13px;
}

#card-last-icon{
    padding-right: 5px;
    height: 14px;
    width: 14px;
}

#card-app{
    /* box-shadow: none;*/
    margin: 0; 
}

#card-app-title{
    border-bottom: solid 1px #ccc;
    padding-bottom: 16px;
    font-size: 25px;
    font-weight: 700;
}

#card-app-subtitle{
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700;
    text-transform: none !important;
}
#card-app-input{
    font-size: 40px;
    font-weight: 700;
    color: #1DAFFC;
    background-color: #f4f4f4;
    border-radius: 10px;
}
#card-app-input-modal{
    font-size: 40px;
    font-weight: 700;
    color: #1DAFFC;
    background-color: #f4f4f4;
    border-radius: 10px;
    float: left;
    width: 24%;
    text-align: center;
    display: inline-block;
    border: none;
    margin: 2%;
}
.alert-message.sc-ion-alert-md, .alert-input-group.sc-ion-alert-md{
    padding-top:0 !important;
}
#card-app-button{
    font-size: 15px;
}

#card-foo-subtitle{
    text-transform: none !important;
    font-weight: 700;
    color: #053D5C;
}

/* Pupup and popover */

.popup-container div {
    /* width: 100% !important; */
    min-width: 350px !important;
 }

 .popover-center {
    text-align: center;
 }

 .popover-span {
    color: #F03C3C;
 }

 .popover-wrapper div{
    width: 80% !important;
    max-width: 400px !important;
    /* left: 10px !important; */
 }

 .popover-arrow.sc-ion-popover-ios::after {
    left: 15% !important;
 }

 .d-none{
     display: none;
 }

 .d-block{
     display: block;
 }
 /* Timeline  */
 .timeline  {
     display: grid;
 }
 .timeline .dias, .timeline .circles{
    display: grid;
     grid-template-columns: repeat(6, 1fr);
 }
 .circle{
     width: 1em;
     height: 1em;
     border: solid lightgrey 1px;
     border-radius: 50%;
     background-color: white;
     z-index: 1;
     margin: 0 auto;
 }
.current {
    border: solid rgb(12, 151, 206) 1px;
    background-color: white;
 }
 .green{
    background-color: green;
    border: solid transparent 1px;
 }

 .red{
     background-color: red;
     border: solid transparent 1px;
 }
 .red::before{
    content: "x";
    color: #fff;
    display: grid;
    font-size: 12px;
    line-height: 0.9;
    font-weight: bold;
 }
 .green::before{
    content: "✔";
    color: #fff;
    display: grid;
    font-size: 10px;
    line-height: 1;
 }
 .yellow{
    border: solid transparent 1px;
    background-color: #FFC107;
    font-weight: bold;
 }
.current {
    border: solid var(--bullet-background-active) 1px;
    background-color: #02afffd2;
    font-weight: bold;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transition: all 1s; 

    -webkit-animation: 1600ms pulsate infinite alternate ease-in-out;
    -moz-animation: 1600ms pulsate infinite alternate ease-in-out;
    -ms-animation: 1600ms pulsate infinite alternate ease-in-out;
    -o-animation: 1600ms pulsate infinite alternate ease-in-out;
    animation: 1600ms pulsate infinite alternate ease-in-out;
}
     /* 
     animation
      */

@keyframes pulsate {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
  }
  @-webkit-keyframes pulsate {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.3); }
    100% { -webkit-transform: scale(1); }
  }
  @-moz-keyframes pulsate {
    0% { -moz-transform: scale(1); }
    50% { -moz-transform: scale(1.3); }
    100% { -moz-transform: scale(1); }  
  }
  @-ms-keyframes pulsate {
    0% { -ms-transform: scale(1); }
    50% { -ms-transform: scale(1.3); }
    100% { -ms-transform: scale(1); }  
  }
  @-o-keyframes pulsate {
    0% { -o-transform: scale(1); }
    50% { -o-transform: scale(1.3); }
    100% { -o-transform: scale(1); }  
  }
 .yellow::before{
    content: "-";
    color: #fff;
    display: grid;
    font-size: 12px;
    line-height: 0.9;
 }
 .circles::before{
    content: "";
    /* display: inline; */
    position: absolute;
    background: lightgrey;
    width: 94%;
    height: 0.2em;
    top: 40px;
    float: left;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .hide{
     display: none;

 }
 .select-placeholder{
     color:black;
     opacity: 0.9;
 }
 ion-select {
    /* Applies to the value and placeholder color */
    color: #545ca7;
  
    /* Set a different placeholder color */
    --placeholder-color: #971e49;
  
    /* Set full opacity on the placeholder */
    --placeholder-opacity: 1;
  }
  .he {
    height: 25vh;
  }
  .complete{
      height: 100%;
      position: relative;
      width: 100%; 
  }

.card-custom{
    margin: 10px;
}
.evol{
    display: table;
    width: 100%;
}
.evol-left{
    padding-top: 30%;
    padding-bottom: 29%;
    width: 15%;
    float: left;
    background-color: #053D5C;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#day-num{
    font-weight: 700;
}
#day-name{
}
.evol-right{
    width: 85%;
    float: left;
    text-align: center;
    display: table-cell;
    background-color: #F4F4F4;
    padding: 5px 10px;
}
#evol-input{
    font-size: 15px;
    color: #053D5C;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #053D5C;
    padding-left: 10px !important;
}

/* input border */
.inputborder{
    border:1px solid gray;
    border-radius: 3px;
    color: #063c5c;
    font-weight: 700 !important;
}
.backgroundcolor{
    background: #053D5C;
    color:white;
    width: 100%;
    padding:10px;
}
#scroll-infinite{
    overflow:auto;
    height: 340px;
}