body {

  background: #ffffff !important;
  font-family: "Poppins", sans-serif;
  width: 100%;
  margin: 0;
}

.footer__item {
  text-decoration: none;
  color: black;
  font-size: 0.8rem;
  /*color: aliceblue;*/
}

.input__container-in__label,
.input__container-in__number {
  display: none;
}

.header__nav-bar__icon {
  font-size: 2rem;
  cursor: pointer;
  will-change: transform;
  transition: 300ms;
}

.header__nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
}

.container {
  max-width: 100%;
  margin: 0;
  /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(500px, 700px);
  grid-gap: 78px; */
}

.output__container__meter-container_meter {
  height: 12px;
  min-width: 300px;
  border-radius: 6px;
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: blue;
  background-image: linear-gradient(
    90deg,
    #f4b740 33.33%,
    #0096b7 33.33%,
    #0096b7 66.66%,
    #c30052 66.66%,
    #c30052 100%
  );
  background-size: 100% 100%;
  display: block;
  text-indent: -9999px;
}

.output__container__line {
  border: 0 solid #000000;
  width: 80%;
  height: 5px;
  background-color: #000000;
}

.input {
  background-color: #ffffff;
  border-radius: 32px;
  min-width: 300px;
  margin: 0.5rem;
  display: grid;
  grid-template-areas:
    "unitsTitle unitsTitle"
    "heightContainer weightContainer"
    "dataInputTitle dataInputTitle"
    "textInputWraper textInputWraper"
    "textInputWraper textInputWraper"
    "inputButton inputButton";
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
}

.input__title-1 {
  grid-area: unitsTitle;
  margin-top: 0.5rem;
}

.input__container-height,
.input__container-weight {
  min-width: 140px;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  background: #eff0f7;
  border-radius: 32px;
}

.input__container-height {
  grid-area: heightContainer;
}

.input__container-weight {
  grid-area: weightContainer;
}

.input__title-2 {
  grid-area: dataInputTitle;
  margin-top: 0.5rem;
}

.text-input__wrapper {
  grid-area: textInputWraper;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  min-height: 150px;
}

.input__button {
  grid-area: inputButton;
  width: 180px;
  height: 55px;
  margin: auto;
  background: #1956A0;
  border-radius: 40px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 0.8rem;
  /* or 175% */
  letter-spacing: 0.75px;
  /* Grayscale / Background */
  color: #f7f7fc;
  border-style: none;
  transition: 300ms;
  cursor: pointer;
  will-change: transform, background-color;
  margin-bottom: 0.5rem;
}

.output__close-button {
  width: 180px;
  height: 55px;
  border: 2px solid #1956A0;
  background: transparent;
  border-radius: 40px;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 0.8rem;
  /* or 175% */
  letter-spacing: 0.75px;
  /* Grayscale / Background */
  color: #1956A0;
  /* border-style: none; */
  transition: 300ms;
  cursor: pointer;
  will-change: transform, background-color;
  margin-top: 1rem;
}

.input__button:active,
.output__close-button:active {
  transform: scale(1.05);
  transition: 300ms;
}

.input__button:hover {
  background-color: #00ceec;
  transition: 300ms;
}

.radio-container {
  display: block;
  width: 80%;
  margin: 0;
  position: relative;
  float: left;
  color: #aaaaaa;
}

.radio-container input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

.radio-container label {
  display: block;
  position: relative;
  margin: 10px auto;
  z-index: 2;
  cursor: pointer;
  transition: 300ms;
  will-change: color;
}

.radio-container:hover label {
  color: #00ceec;
  transition: 300ms;
}

.radio-container .check {
  display: block;
  position: absolute;
  border: 8px solid #aaaaaa;
  background-color: #aaaaaa;
  border-radius: 100%;
  height: 0.6rem;
  width: 0.6rem;
  top: 0.25rem;
  /* left: -10px; */
  z-index: 1;
  transition: 300ms;
  will-change: border, background-color;
}

.radio-container:hover .check {
  border: 8px solid #00ceec;
  background-color: #00ceec;
  transition: 300ms;
}

.radio-container .check::before {
  display: block;
  position: absolute;
  content: "";
  border-radius: 100%;
  height: 0.6rem;
  width: 0.6rem;
  top: 0;
  left: 0;
  margin: auto;
  transition: 300ms;
  will-change: border, background-color;
}

input[type="radio"]:checked ~ .check {
  border: 8px solid #1956A0;
  transition: 300ms;
}

input[type="radio"]:checked ~ .check::before {
  background-color: #ffffff;
  transition: 300ms;
}

input[type="radio"]:checked ~ label {
  color: #1956A0;
}

h1 {
  font-style: normal;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2rem;
  /* or 103% */
  letter-spacing: 1px;
  /* Grayscale / Title-Active */
  color: #14142b;
  margin: 0;
}

h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 2rem;
  /* or 106% */
  letter-spacing: 1px;
  color: #000000;
}

h3 {
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 2rem;
  /* identical to box height, or 158% */
  letter-spacing: 0.75px;
  color: #000000;
}

.output__container__bmi-container {
  /* margin: auto; */
  display: grid;
  grid-template-columns: 180px 150px;
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.output__container__bmi-container_bmi-value,
.output__container__bmi-container_bmi-title,
.output__container__bmi-container_bmi-tag {
  margin: 0;
}

.output__container__bmi-container_bmi-value {
  grid-row: 1 / 3;
  grid-column: 1;
  font-style: normal;
  font-weight: normal;
  font-size: 3rem;
  line-height: 3rem;
  /* or 111% */
  letter-spacing: 1px;
  /* Primary / Default */
  color: #1956A0;
}

.output__container__bmi-container_bmi-title {
  grid-row: 1;
  grid-column: 2;
  font-style: normal;
  font-weight: normal;
  font-size: 2rem;
  line-height: 2rem;
  /* or 125% */
  letter-spacing: 1px;
  /* Primary / Dark */
  color: #00ceec;
}

.output__container__bmi-container_bmi-tag {
  grid-row: 2;
  grid-column: 2;
  font-style: normal;
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 1rem;
  letter-spacing: 0.75px;
  animation: none;
  will-change: transform;
}

.text-large {
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1rem;
  /* or 158% */
  letter-spacing: 0.75px;
  color: #000000;
}

.text-medium {
  font-style: normal;
  font-weight: normal;
  font-size: 0.8rem;
  line-height: 0.8rem;
  /* or 189% */
  letter-spacing: 0.75px;
  color: #000000;
}

.text-small {
  font-style: normal;
  font-weight: normal;
  font-size: 0.6rem;
  line-height: 0.6rem;
  /* identical to box height, or 175% */
  letter-spacing: 0.75px;
  /* Grayscale / Label */
  color: #6e7191;
}

.text-small-black {
  font-style: normal;
  font-weight: normal;
  font-size: 0.6rem;
  line-height: 0.6rem;
  /* identical to box height, or 175% */
  letter-spacing: 0.75px;
  /* Grayscale / Label */
  color: #000000;
}

.link-small {
  font-style: normal;
  font-weight: 600;
  font-size: 0.6rem;
  line-height: 0.6rem;
  /* identical to box height, or 175% */
  letter-spacing: 0.75px;
  /* Grayscale / Label */
  color: #6e7191;
}

.link-medium {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 0.8rem;
  /* identical to box height, or 189% */
  letter-spacing: 0.75px;
  /* Grayscale / Body */
  color: #4e4b66;
}

.input-text-label {
  background: #eff0f7;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px;
  padding: 10px;
}

.input__container-in {
  display: none;
}

.input-text {
  font-family: Poppins;
  border-style: none;
  background: none;
  min-width: 175px;
}

.input-text:focus-visible {
  outline: none;
}

.meter-tag-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.container-meter-values {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.footer {
  margin: 0.5rem;
  text-align: center;
}

.footer__item__icon {
  margin: 10px;
  font-size: 1.5rem;
}

.overlay,
.output-overlay {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 1.1s ease-in;
  opacity: 1;
  visibility: visible;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay.active,
.output-overlay.output-active {
  opacity: 0;
  visibility: hidden;
}

.modal,
.output__container {
  height: fit-content;
  animation: none;
  will-change: transform;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  z-index: 4;
}

.output__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #eff0f7;
  border-radius: 32px;
  width: 90%;
  height: 60%;
}

.modal {
  background-color: #ffffff;
  width: 80%;
  position: inherit;
  padding: 2em;
  border-radius: 0.5em;
}

.modal__close-button {
  border: none;
  cursor: pointer;
  border-style: none;
  background-color: #ffffff;
  outline: none;
  text-shadow: none;
  box-shadow: none;
  margin: 1.5em;
  will-change: transform;
  transition: 300ms;
}

.modal__icon {
  position: absolute;
  top: calc(1em + 10px);
  right: calc(1em + 10px);
  cursor: pointer;
  font-size: 2em;
  will-change: transform;
  transition: 300ms;
}

.modal__close-buton:active,
.modal__icon:active,
.header__nav-bar__icon:active {
  transform: scale(0.8);
  transition: 300ms;
}

.modal__table {
  margin: 1em;
  border-collapse: collapse;
  border: 1px solid #6e7191;
  border-radius: 0.5em;
  overflow: hidden;
}

.modal__table__header {
  border: 1px solid #6e7191;
  background-color: #eff0f7;
  padding: 0.5em;
}

.modal__table__row {
  font: #4e4b66;
  border: 1px solid #6e7191;
  padding: 0.5em;
}

@keyframes modalIn {
  from {
    transform: translateY(-3000px);
  }
  60% {
    transform: translateY(25px);
  }
  75% {
    transform: translateY(-10px);
  }
  90% {
    transform: translateY(5px);
  }
}

@keyframes modalOut {
  0% {
    transform: translateY(5px);
  }
  60% {
    transform: translateY(-10px);
  }
  75% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(-3000px);
  }
}
.News-footer{ position: fixed; bottom: 0 ; margin:0; width: 100%; background-color: black; display: inline-flex; overflow: hidden; white-space: nowrap; z-index:99; } 
.N-text { padding-top: 10px; vertical-align: middle; font-size: 20px; color: yellow; margin: 0; width:100%; animation: marquee 10s linear infinite; display: inline-block; padding-right: 1px; } .news{ height:auto; background-color:red; padding: 13px 20px 5px 20px; font-size:15px; color: white; z-index:9; display: block; } 
.news:after { content:''; top:0; transform:translateX(100%); width:100%; height:220px; position: absolute; z-index:99; animation: slide 5s infinite; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */ } #news-head:before{position: absolute; content: ''; top:19px;left: 9px; display: inline-block;height: 10px; width: 10px;background: #fff;animation:at-blink .4s infinite;} @keyframes at-blink{from{opacity:0}to{opacity:1}} @keyframes slide { 0% {transform:translateX(-100%);} 100% {transform:translateX(100%);} } .t-link{color:inherit!important;list-style:none;}