@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --martinique-22: 
  rgba(47, 48, 85, 1);
    --martinique2: 
  rgba(47, 49, 85, 1);
    --rhino: 
  rgba(60, 62, 103, 1);
    --royal-blue: 
  rgba(71, 79, 236, 1);
    --dolphin: 
  rgba(100, 101, 117, 1);
    --cornflower-blue: 
  rgba(116, 148, 229, 1);
    --waterloo-: 
  rgba(123, 126, 162, 1);
    --spun-pearl: 
  rgba(171, 172, 190, 1);
    --gray-suit: 
  rgba(193, 194, 206, 1);
    --bleach-white: 
  rgba(250, 243, 217, 1);
    --alabaster: 
  rgba(251, 251, 253, 1);
    --hit-pink: 
  rgba(255, 167, 129, 1);
    --white: 
  rgba(255, 255, 255, 1);
  
    --font-size-xs: 11px;
    --font-size-s: 14px;
    --font-size-m: 16px;
    --font-size-l: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 26px;
    --font-size-xxxl: 32px;
  }

.group-267 {
  align-items: flex-start;
  display: flex;
  min-width: 324px;
}

.group-211 {
  align-items: flex-start;
  display: flex;
  height: 87px;
  left: 0;
  position: absolute;
  top: 0;
}

.overlap-group1 {
  align-items: flex-start;
  background-color: 
#fac747;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  /*min-width: 324px;*/
  /*padding: 10px; */
}

.group-255 {
  align-items: flex-start;
  display: flex;
  height: 36px;
  left: 8px;
  padding: 3.0px;
  position: absolute;
  top: 8px;
}

.overlap-group2 {
  align-items: center;
  background-color: var(--white);
  border-radius: 14px;
  display: flex;
  height: 21px;
  justify-content: center;
  min-width: 126px;
  margin: 10 px;
  padding: 0 9.3px;
}
.group-263 {
  align-items: flex-end;
  background-color: var(--martinique-22);
  border-radius: 8px;
  display: flex;
  height: 42px;
  min-width: 304px;
  padding: 9px 9.0px;
}
  /* above: generated */

  /* my css */
  html {
    background-color: #fff;
    font-size: 16px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    min-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  *, ::after, ::before {
    box-sizing: inherit;
  }

  body{
    font-family:'Open Sans' , sans-serif;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
  }
  /* @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url('http://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
  } */

  table{
    border-collapse: collapse;
    border-spacing: 0;
  }
  td{
    color: #2F3155;
  }
  tbody{
    display:block;
    overflow:auto;
    height:35vh;
    width:84vw;
    min-width:84vw;
  }
  span {
    font-style: inherit;
    font-weight: inherit;
}
  a{
    color:#000000;
    font-weight:300;
  }

  footer{
    margin: 20px 0;
    position: fixed;
    left: 8vw;
    bottom: 0;
  }

  .button-container{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 25px;
}
  .account-button-container,
  .setting-button-container,
  .alternatives-container{
      display:flex;
      flex-direction: column;
      row-gap: 15px;
      width:84vw;
      margin: 0 auto;
      text-align:left;
  }

  .button-for-lookup,.button-for-report, .not-ready, .ready, .button-for-report-normal-blue{
    display: flex;
    column-gap: 10px;
    color: #2F3155;
    font-size: var(--font-size-l);
    font-weight: 700;
    font-style: normal;
    padding-top: 2px;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 8px;
    height: 42px;
    min-width: 84vw;
    border: 1px solid #2F3155;
    text-transform: uppercase;
}
.not-ready{
  color: #aaaaaa;
  font-weight:500;
  border: 1px solid #dbdbdb;
  text-transform: none;
}
.ready, .button-for-report-normal-blue{
  color: #000000;
  font-weight:500;
  border: 1px solid #000000;
  text-transform: none;
}
.button-for-report-normal-blue{
  color: #2F3155;
}
  .button-for-report {
    color: #ffffff;
    background-color: var(--martinique-22);
    border:1px solid #2F3155;
  }
  .button-for-report-normal-blue {
    justify-content: center;
    background-color: #ffffff;
    border:1px solid #2F3155;
    font-size: 18px;
    font-weight:700;
    color: #2F3155;
  }

  .button-reported {
    display: flex;
    justify-content: center;
    background-color: #4750ED;
    border-radius: 8px;
    color:#ffffff;
    height: 42px;
    min-width: 84vw;
    padding: 9px;
    font-size: 18px;
    font-weight:700;
  }

  .goal-text, .msg-text {
    /*position: absolute; */
    width: 84vw;
    height: 22px;
    left: 59px;
    top: 173px;

    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    margin:10px auto;
    /* identical to box height */

    color: #2F3155;
    text-align: center;
  }
  .msg-text{
    font-weight:600;
    font-size:16px;
    margin: 0px;
  }
  .msg-date{
    color:#2F3155;
  }
  .msg-box{
    display:flex;
    flex-direction: column;
    padding: 0 20px 10px 20px;
}
.msg-container .notif-border{
    /* top, right, bottom, and left */
    margin: 0 auto;
    background-color: #E8E9F2;
    width: 84vw;
}
.msg-container .text-1{
    color:#646575;
    text-align: left;
}
.msg-container .header-text{
    text-align:left;
    margin: 10px auto;
    width:84vw;
}
.msg-container .msg-text{
    width:auto;
    height: auto;
    text-align:left;
}

.header-flex .header-text {
  font-size: 20px;
}
  .header-text, .alter-header-text {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    padding: 7px 0px;
    color: #2F3155;
    width: auto; 
    text-align: center;
  }
  .alter-header-text{
    color:#000000;
}
  .serving-text{
    color:#7B7EA3;
  }

  .is-low-sodium,.is-medium-sodium,.is-high-sodium {
    padding: 10px 0;
    width: 90vw;
    text-align: center;
    background-color: #36C65E;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 1vw;
    font-size:18px;
    font-weight:700;
  }
  
  .is-medium-sodium {
    background-color: #FAC747;
  }
  
  .is-high-sodium {
    background-color: #E8564D;
  }

.look-up-item {
  color: #7393e5;
  font-family: var(--font-family-open_sans-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
  letter-spacing: 0;
  min-height: 19px;
  min-width: 94px;
  /* text-align: right; */
}
.vector {
  height: 30px;
  width: 30px;
}

.button-task {
  align-items: flex-start;
  display: flex;
  margin-top: 8px;
}

.text-2 {
  color: #2F3155;
  font-size: var(--font-size-s);
  letter-spacing: 0;
  min-height: 17px;
  min-width: 104px;
  text-align: center;
}


/* general reusable component */
.left-button{
  width:36px;
  float:left;
}

.profile-image{
  width:36px;
  float:right;
}

.list-item {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #E8E9F2;
  color: #2F3155;
}


.button,
.input{
  -webkit-appearance: none;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: none;
  display: inline-flex;
  font-size: 1rem;
  height: 2.5em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(.5em - 1px);
  padding-left: calc(.75em - 1px);
  padding-right: calc(.75em - 1px);
  padding-top: calc(.5em - 1px);
  position: relative;
  vertical-align: top;
}

  .text-1 {
    color:#2F3155;
    font-weight:400;
    letter-spacing: 0;
    min-height: 22px;
    text-align: left;
    width: 100%;
  }
  .gray-text{
    color:#2F3155;
    font-size:16px;
  }
  .gray-text-attribution{
    margin-top:7px;
    text-align:center;
    color:#C1C2CE;
    font-size:14px;
}
  
  .bold-white-18px {
    color: var(--white);
    font-size: var(--font-size-l);
    font-weight: 700;
    font-style: normal;
    text-align: center;
  }
  .semibold-black-18px{
    font-weight:500;
    color: #000000;
  }
  .bold-white-32px {
    color: var(--white);
    font-size: var(--font-size-xxxl);
    font-weight: 700;
    font-style: normal;
  }

  .bold-blue-16px{
    font-size: 16px;
    font-weight: 700;
    color: #2F3155;
  }
  .normal-blue-20px{
    font-size: 20px;
    color: #2F3155;
  }

  .section-header-container {
    align-items: center;
    background: #2F3155;
    /* background-color: var(--white); */
    display: flex;
    flex-direction: column;
    /*height: 640px; */
    padding-top: 21px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: -21px;
    /*width: 360px; */
  }

  .header-container {
    align-items: center;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    /*height: 640px; */
    padding: 21px 5px;
    /*width: 360px; */
  }
  .header-flex{
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    align-items: center;
    width: 84vw;
}
  .gray-vector{
    width:25%;
    align-self: center;
    padding-top: 7px;
    padding-left: 4px;
  }
  .group-117 {
    align-items: flex-start;
    display: flex;
    height: 107px;
    min-width: 156px;
  }
  
  .overlap-group {
    align-items: center;
    background-color: var(--white);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    width: 90%;
    /* min-height: 100px; */
    /* padding: 13px 0; */
    
  }
  
  .image-2 {
    height: 44px;
    margin-right: 2.0px;
    margin-top: 4px;
    object-fit: cover;
    width: 44px;
  }
  
  .search-items {
    letter-spacing: 0;
    margin-top: 11px;
    min-height: 22px;
    min-width: 120px;
    text-align: center;
  }
  .image {
    display: block;
    position: relative;
  }
  .image-36 {
    height:36px;
    width:36px;
    max-width: 36px;
  }
  .m-10{
    margin:10px;
  }
  .min-width-46{
    min-width:46%;
  }
  .width-15{
    width:15%;
  }
  .width-20{
    width:20%;
  }
  .width-25{
    width:25%;
  }
  .width-30{
    width:30%;
  }
  .width-50{
    width:50%;
  }
  .width-75{
    width:75%;
  }
  .width-75{
    width:75%;
  }
  .width-84{
    width:84%;
  }
  .width-100{
    width:100%;
  }
  .to-left{
    float:left;
  }
  .to-right{
    float:right;
  }

  /* Connect and Setting Button */
  button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
  }
  .connect-button{
    align-items: center;
    justify-content: space-between;
    background-color: #d3d4e2;
    display: flex;
    align-self: center;
    border-radius: 12px;
    height: auto;
    padding: 12px;
    color: var(--martinique-22);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 600;
    width: 76vw;
}
.connected-button{
  background-color: #36C65E;
  color:#ffffff;
}

  .button-setting, .button-blue-border,.button-gray-border {
    align-items: center;
    justify-content: flex-start;
    background-color: var(--white);
    display: flex;
    align-self: center;
    border-radius: 12px;
    height: auto;
    width:76vw;
    padding: 12px;
    border: 1px solid var(--gray-suit);
}
.button-blue-border{
  border-color: #62648B;
  /* height:15vh;  */
  height:auto; 
  border-radius: 4px;
}
.button-gray-border{
  border-color: #E8E9F2;
  height:auto; 
  border-radius: 4px;
  color:#2F3155;
  
}
.connect-button-setting{
  display: flex;
  justify-content: center;
  align-content: flex-end;
  flex-direction: column;
  row-gap: 20px;
}
/* blue background section */
.section-background{
  background: #2F3155;
  padding: 0 5vw 10px 5vw;
}
.section-container {
  display: flex; 
  justify-content: center;
  color:#ffffff;
}
.section-texts{
  padding: 3vh 0 0 0;
  margin: 0; 
}
.section-text{
  font-size: 18px;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 0 0 10px 0;
}
.section-period-container .fa{
  font-size: 17px;
  align-self: auto;
  padding-top: 2px;
}
.section-period-container{
  display: flex;
  padding: 0 0 10px 0;
  width: 160px;
}
.section-period{
  font-size:14px;
  text-align:center;
  width:100%;
}

.section-data{
  display: flex; 
  justify-content: center;
  margin-top:20px;
}
.section-data th{
  display: none;
}
.section-data td{
  width:100%;
  border-bottom: 1px solid #dbdbdb;
  padding: 15px 10px 15px 2px;
}
/* tbody td:first-child{
  padding-top: 5px;
} */

.goals{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: end;
  padding: 0 5vw;
}
.weekly-text,
.daily-text{
  color:#ffffff;
  display: flex;
  flex-direction: column;
}
.weekly-goal,.daily-goal{
  color: #6DBFED;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  justify-content: right;
  column-gap: 12px;
}
.text-goal{
  align-self: flex-start;
}
.goal-suffix{
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  text-align: initial;
  justify-content: center;
}
/* notification */
.notif-border{
  align-items: flex-start;
  background-color: #fac747;
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  padding: 8px!important;
}
.notif-content{
  display: flex;
  padding: 4px 0;
  margin: 0px 12px 12px 12px;
}
.notif-content:last-child{
  margin-bottom: 0.5px;
}
.notif-icon{
  width:18%;
}
.notif-text{
  width:82%;
}
.notif-text .text-1{
  margin: 0;
}
.notif-img{
  height:30px;
  width:auto;
}
.cancel{
  color: #5883D6;
  align-self: center;
  text-align: right;
}
.subheader,.alter-subheader{
  font-size: 24px;
  color:var(--martinique-22);
  margin:20px 0;
}
.alter-subheader{
  color:#000000;
  font-weight:100;
}
.help-icon{
  text-align: end;
}
/* The Modal (background) */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
  text-align:center;
}

/* Modal Content/Box */
.modal-content {
  background-color: #ffffff;
  margin: 20vh auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  width: 80%;
}
.record-modal .modal-content{
  display:flex;
  flex-direction: column;
  padding: 40px 20px 40px 20px;
}
.modal-title{
  display: flex;
  margin-bottom: 15px;
}
.modal-title-text{
  display:flex;
  flex-direction: row;
  justify-content: center;
  color:#3C3E67;
  font-weight: 600;
  font-size: 20px;
}
/* The Close Button */
.close{
  width: 30px;
  align-self: flex-start;
}

.close:focus {
  cursor: pointer;
}
.heart-info{
  display:flex;
  flex-direction: row;
  column-gap: 10px;
  margin-bottom: 10px;
  color: #2F3155;
}

.heart-collectiion {
    width: 80vw;
    padding: 5vw 0px 5vw 5vw;
}
.inner-msg{
  background-color: #E8E9F2;
  border-radius: 8px;
  display:flex;
  flex-direction: row;
}
.serving-modal{
  align-self: center;
}