.icon-achieved {
  color: #868686;
}
#step-value {
  line-height: 0px;
}
#Breakfast {
  color: #FFFFFF;
}
#Lunch {
  color: #868686;
}
#Dinner {
  color: #868686;
}
#Snack {
  color: #868686;
}
#icon-ml {
  color: #868686;
}
#icon-ml1 {
  color: #868686;
}
#icon-ml2 {
  color: #868686;
}
#icon-ml3 {
  color: #868686;
}
.waitingpopup {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  width: 50px;
  height: 50px;
}

.image {
  position: absolute;
  background-repeat: no-repeat;
  background-image: url('../images/Medium-36px-spin.gif');
  background-position: center;
  width: 50px;
  height: 50px;
  padding: 6px;
}
#caloriesicon-column {
  padding-left: 0px;
}
#foodimg .icon-Food {
  float: right;
  color: #999393
  
}
#stepimg .icon-Steps {
  float: right;
  color: #999393;
}
#sleepimg .icon-Sleep {
  float: right;
  color: #999393;
}
#waterimg .icon-Water {
  float: right;
  color: #999393;
}
#steps-text {
  font-family: 'Roboto';
  font-weight: 400;
  color: #747474;
  size: 32px;
  letter-spacing: 0 38px;
}
#card-row {
  margin-right: 3%;
  margin-left: 1.6%;
  margin-top: 20px;
}
.row {
  margin-right: 0px !important;
  margin-left: 0px !important;
}
@media(max-width: 575px) {
  .row {
    display: inline-block;
    width: 100%;
  }
  .data-wrap {
   margin-bottom: 20px; 
  }
 
  #donut,
  #pie-chart,
  #multiple-donut {
    height: 100% !important;
  }
}
#leftcontent {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 14px;
  color: #485465;
  letter-spacing: -0.08px;
  text-align: center;
}
#rightcontent {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 14px;
  color: #485465;
  letter-spacing: -0.08px;
  text-align: center;
}
#container {
  padding-bottom: 20px;
  background: #FAFAFA;
  /* box-shadow: 0 2px 7px 0 rgb(0 0 0 / 16%); */
  margin: 5px 5px 0px 5px;
}
.e-appbar.custom-appbar{
  height: auto;
  width: 100%;
  margin-bottom: 20px;
  font-family: 'Roboto';
}
.e-avatar.custom-avatar{
  background-color: transparent;
  font-size: 14px;
  margin: 0px 13px;
}
.e-appbar.custom-appbar p {
  margin: 0;
  letter-spacing: 0;
}
.e-appbar.custom-appbar .appbar-title{
  font-weight: 300;
  font-size: 18px;
  color: #1A1A1A;
}
.e-appbar.custom-appbar .appbar-subtitle{
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #535353;
}
.card-block {
  cursor:pointer;
  /* box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10); */
  border-radius: 4px;
}
#calories-column.card-container, 
#step-column.card-container, 
#water-column.card-container, 
#sleep-column.card-container {
  padding: 0px 0px 20px 20px;
}
.e-card.selected .card-text, 
.e-card.selected .card-value, 
.e-card.selected #food-img, 
.e-card.selected #steps-img, 
.e-card.selected #water-img, 
.e-card.selected #sleep-img{
  color: #FFFFFF !important;
}
.e-card.selected#calories, 
.e-card.selected #calories-bg, 
.e-card.selected #calories-value{
  background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%);
  border-radius: 4px;
}
.e-card.selected#step, 
.e-card.selected #step-bg, 
.e-card.selected #steps-value{
  background-image: linear-gradient(45deg, #04AB11 0%, #7DD61D 100%);
  border-radius: 4px;
}
.e-card.selected#water, 
.e-card.selected #water-bg, 
.e-card.selected #water-value{
  background-image: linear-gradient(44deg, #2140DC 0%, #00BFD5 100%);
  border-radius: 4px;
}
.e-card.selected#sleep, 
.e-card.selected #sleep-bg, 
.e-card.selected #sleep-value{
  background-image: linear-gradient(-135deg, #2925A6 0%, #B250D1 100%) ;
  border-radius: 4px;
}

.chart-container {
  height: 530px;
  background-color: transparent;
  padding-left: 0px !important;
}
.chart-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: 'Roboto';
  letter-spacing: 0;
}

.chart-header-values{
  display: flex;
}
.chart-header-values span {
  display: block;
}
.chart-header #title-annotation {
  font-weight: 300;
  font-size: 12px;
  color: #1A1A1A;
  letter-spacing: 0;
}
.chart-header #value-annotation {
  font-size: 25px;
  font-weight: 700;
}
#chart-title {
  font-weight: 500;
  font-size: 20px;
  color: #535353;
}
/*  */
#water-text {
  padding-left: 5%;
}
#water-subtitle {
  padding-left: 5%;
}
#calories-text {
  padding-left: 5%;
}
#calories-subtitle {
  padding-left: 5%;
}
#steps-text {
  padding-left: 5%;
}
#steps-subtitle {
  padding-left: 5%;
}
#sleep-text {
  padding-left: 5%;
}
#sleep-subtitle {
  padding-left: 5%;
}
.page-title {
  font-family: 'Roboto';
  font-weight: 300;
  font-size: 18px;
  color: #1A1A1A;
  letter-spacing: 0;
  display:inline-block;
  margin-top: 20px;
  margin-left: 10px;
}
#caloriescontent {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 12px;
  color: #4A4A4A;
  letter-spacing: -0.07px;
}
#chart-rightarea {
  background: #FFFFFF;
  box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
  border-radius: 4px;
  margin-left: 4.5%;
  margin-right: 2.9%;
}
#chart-leftarea {
  margin-left: 3%;
}
#calories,#step,#water,#sleep {
  border-radius: 4px;
  cursor: pointer;
  overflow: visible !important;
  line-height: 1.42857143;
}
#calories.hidden-element-size, 
#step.hidden-element-size,
#water.hidden-element-size,
#sleep.hidden-element-size {
  display: block;
  visibility: hidden;
  position: absolute;
} 
#steps-text:hover {
  font-family: ''Roboto'';
  font-weight: 400;
  color: #E41852;
  font-size: 32px;
  letter-spacing: 0 38px;
}
#calories-bg:hover {
  background-image: 'linear-gradient(to right, #FCDE72 , #F26D6D)';
}
#water-bg:hover {
  background-image: 'linear-gradient(to right, #FCDE72 , #F26D6D)';
}
#step-bg:hover {
  background-image: 'linear-gradient(to right, #FCDE72 , #F26D6D)';
}
#sleep-bg:hover {
  background-image: 'linear-gradient(to right, #FCDE72 , #F26D6D)';
}
#pie-chart {
  background: #FFFFFF;
  box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
  border-radius: 4px;
  margin: 0px;
  padding: 0px;
  /* padding-left: 20px !important; */
}
#inside-container {
  cursor: default !important;
}
#water-polarSeriesCollection {
  cursor:  pointer !important;
}
#calories-value:hover .card-block {
  color: #E41852 !important;
}
.card-value{
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 32px;
  color: #727272;
  margin-bottom: 0px;
  margin-top: 10px;
  letter-spacing: 0;
}
.card-text {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  color: #303030;
}
#Break-icon {
  background: #FFFFFF;
  border: 1px solid rgba(241,89,51,0.20);
  border-radius: 4px;
}
#Lunch-icon {
  background: #FFFFFF;
  border: 1px solid rgba(241,89,51,0.20);
  border-radius: 4px;
}
#Dinner-icon {
  background: #FFFFFF;
  border: 1px solid rgba(241,89,51,0.20);
  border-radius: 4px;
}
#Snack-icon {
  background: #FFFFFF;
  border: 1px solid rgba(241,89,51,0.20);
  border-radius: 4px;
}
#Break-icon:hover {
  background: #FFFFFF;
  border: 1px solid #CB2F1B;
  box-shadow: 0 2px 4px 0 rgba(240,121,44,0.10) !important;
  border-radius: 4px;
  cursor: pointer;
}
#Lunch-icon:hover {
  background: #FFFFFF;
  border: 1px solid #CB2F1B;
  box-shadow: 0 2px 4px 0 rgba(240,121,44,0.10) !important;
  border-radius: 4px;
  cursor: pointer;
}
#Dinner-icon:hover {
  background: #FFFFFF;
  border: 1px solid #CB2F1B;
  box-shadow: 0 2px 4px 0 rgba(240,121,44,0.10) !important;
  border-radius: 4px;
  cursor: pointer;
}
#Snack-icon:hover {
  background: #FFFFFF;
  border: 1px solid #CB2F1B;
  box-shadow: 0 2px 4px 0 rgba(240,121,44,0.10) !important;
  border-radius: 4px;
  cursor: pointer;
}
#Break-text {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  line-height: 16px !important;
  color: #7D7D7D;
  letter-spacing: 0;
}
#Break-text:hover {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  line-height: 16px !important;
  color: #CB2F1B;
  letter-spacing: 0;
}
#Lunch-text {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #7D7D7D;
  letter-spacing: 0;
}
#Lunch-text:hover {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #CB2F1B;
  letter-spacing: 0;
}
#Dinner-text {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #7D7D7D;
  letter-spacing: 0;
}
#Dinner-text:hover {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #CB2F1B;
  letter-spacing: 0;
}
#Snack-text {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #7D7D7D;
  letter-spacing: 0;
}
#Snack-text:hover {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #CB2F1B;
  letter-spacing: 0;
}
#Break-icon:hover .breakimg {
      color: #CB2F1B !important
}
#Break-icon:hover .breaktext {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 15px;
  color: #CB2F1B !important;
  letter-spacing: 0;
}
#Lunch-icon:hover .lunchimg {
  color: #CB2F1B !important
}
#Lunch-icon:hover .lunchtext {
font-family: 'Roboto';
font-weight: 400;
font-size: 15px;
color: #CB2F1B !important;
letter-spacing: 0;
}
#Dinner-icon:hover .dinnerimg {
  color: #CB2F1B !important
}
#Dinner-icon:hover .dinnertext {
font-family: 'Roboto';
font-weight: 400;
font-size: 15px;
color: #CB2F1B !important;
letter-spacing: 0;
}
#Snack-icon:hover .snackimg {
  color: #CB2F1B !important
}
#Snack-icon:hover .snacktext {
font-family: 'Roboto';
font-weight: 400;
font-size: 15px;
color: #CB2F1B !important;
letter-spacing: 0;
}
.water-value:hover .icon-Water {
  color: #1867DA !important;
}
.water-value:hover .card-value {
  color: #1867DA !important;
}
.water-value:hover .card-text {
  color: #1867DA !important;
}
.water-value:hover .water-bg-shadow {
  box-shadow: 0 1px 4px 1px rgba(24,103,218,0.30) !important;
}
.steps-value:hover .icon-Steps {
  color: #078411 !important;
}
.steps-value:hover .card-value {
  color: #078411 !important;
}
.steps-value:hover .card-text {
  color: #078411 !important;
}
.steps-value:hover .step-bg-shadow {
  box-shadow: 0 1px 4px 1px rgba(76, 219, 83, 0.3) !important;
}
.calories-value:hover .icon-Food {
  color: #F16A30 !important;
}
.calories-value:hover .calories-bg-shadow {
  box-shadow: 0 1px 4px 1px rgba(241,106,48,0.20) !important;
}
.calories-value:hover .card-value {
  color: #F16A30 !important;
}
.calories-value:hover .card-text {
  color: #F16A30 !important;
}
.sleep-value:hover .icon-Sleep {
  color: #6638B9 !important;
}
.sleep-value:hover .card-value {
  color: #6638B9 !important;
}
.sleep-value:hover .card-text {
  color: #6638B9 !important;
}
.sleep-value:hover .sleep-bg-shadow {
  box-shadow: 0 1px 4px 1px rgba(102,56,185,0.30) !important;
}
#chart {
  margin:0% 3% !important;
}
#water50ml-column {
  width: 20%;
  flex: 0 0 20%;
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
}
#water100ml-column {
  width: 20%;
  flex: 0 0 20%;
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
}
#water200ml-column {
  width: 20%;
  flex: 0 0 20%;
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
}
#water300ml-column {
  width: 20%;
  flex: 0 0 20%;
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
}
.water50ml-column:hover {
  background: #FFFFFF;
  border: 1px solid #4771E8 !important;
  border-radius: 4px;
}
.water100ml-column:hover {
  background: #FFFFFF;
  border: 1px solid #4771E8 !important;
  border-radius: 4px;
}
.water200ml-column:hover {
  background: #FFFFFF;
  border: 1px solid #4771E8 !important;
  border-radius: 4px;
}
.water300ml-column:hover {
  background: #FFFFFF;
  border: 1px solid #4771E8 !important;
  border-radius: 4px;
}
.water50ml-column:hover .icon-ml {
  color: #4771E8 !important
}
.water100ml-column:hover .icon-ml1 {
  color: #4771E8 !important
}
.water200ml-column:hover .icon-ml2 {
  color: #4771E8 !important
}
.water300ml-column:hover .icon-ml3 {
  color: #4771E8 !important
}
.water50ml-column:hover .imgtext1 {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  color: #2250D4 !important;
  letter-spacing: 0;
}
.water100ml-column:hover .imgtext2 {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  color: #2250D4 !important;
  letter-spacing: 0;
}
.water200ml-column:hover .imgtext3 {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  color: #2250D4 !important;
  letter-spacing: 0;
}
.water300ml-column:hover .imgtext4 {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  color: #2250D4 !important;
  letter-spacing: 0;
}
#value {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 40px;
  color: #F24C37;
  letter-spacing: 0.86px;
  text-align: center;
  line-height: 25.92px;
}
#sub-value {
  font-family: 'Roboto';
  font-weight: 400;
font-size: 14px;
color: #F24C37;
letter-spacing: 0;
text-align: center;
margin-bottom: 0px;
}
#end-value {
  font-family: 'Roboto';
  font-weight: 400;
font-size: 14px;
color: #4A4A4A;
letter-spacing: 0;
text-align: center;
}
#pie-title {
  padding-top: 10px;
}
/* #pie {
  padding-left: 20px !important;
} */
@media (min-width: 768px)
{
  .page-title{
      display:inline-block;
  }
  .pie-chart,
  .column-chart,
  .line-chart{
      margin-bottom: 16px;
  }
  .line-column-chart{
      margin-bottom: 1.8rem;
  }
}

@media only screen and (max-width:375px)
{
    #Break-text, 
    #Lunch-text, 
    #Dinner-text, 
    #Snack-text {
        font-size: 12px;
    }
    #Breakfast, 
    #Lunch, 
    #Snack, 
    #Dinner{
        font-size: 38px;
    }
}

@media only screen and (max-width:300px)
{
    .column-chart-area{
        margin-top: 40px;
    }
}

@media (max-width: 768px)
{
  .pie-chart, 
  .column-chart, 
  .line-chart{
    margin-bottom: 16px;
  }
  .chart-container {
    padding: 0px 0px 15px 10px;
  }
  .column-chart-area 
  .chart-container {
    padding-left: 0;
  }
}

@media only screen and (min-width: 213px) and (max-width: 500px) {
  /* For portrait layouts only */
  #calories-column.card-container, 
  #step-column.card-container, 
  #water-column.card-container, 
  #sleep-column.card-container {
    width: 100%;
    padding: 15px;
  }
  .chart-container {
    padding: 15px;
  }
  #card-row {
    margin: 0;
  }
  .e-appbar.custom-appbar .appbar-title {
    font-size: 15px;
  }
  .e-appbar.custom-appbar .appbar-subtitle {
    display: none;
  }
  .chart-header{
    flex-wrap: wrap;
  }
  #chart-header-title {
    margin: auto;
  }
  .chart-header-values{
    width: 100%;
    justify-content: space-evenly;
  }
  #Break-text {
      font-family: 'Roboto';
      font-weight: 400;
      font-size: 16px !important;
      color: #7D7D7D;
      line-height: 16px !important;
      letter-spacing: 0;
  }
  #Break-text:hover {
      font-family: 'Roboto';
      font-weight: 400;
      font-size: 16px !important;
      line-height: 16px !important;
      color: #CB2F1B;
      letter-spacing: 0;
  }
  .stepsimg {
      width: 15vw;
  }
  .foodimg {
      width: 15vw;
  }
  .waterimg {
      width: 15vw;
  }
  .sleepimg {
      width: 15vw;
  }
}

@media (min-width: 992px) {
  .col-md-2 {
      margin-left: 8%;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 3400px) {
  #water50ml-column {
      margin-left: 20px !important;
  }
}