/* style.css */

/*navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 24px;
  background-color: #ffffff;
  border-radius: 70px;
}

.logo {
  background: transparent url("img/TestLogo.png") 0% 0% no-repeat padding-box;
  opacity: 1;
  display: flex;
}

/*Middle */
.middle ul {
  display: flex;
  list-style-type: none; /* Remove bullets */
  top: 23px;
  left: 473px;
  width: 663px;
  height: 63px;

  opacity: 1;
  align-items: center;
}

.middle li {
  padding: 11px 16px;
  border-radius: 41px;
  display: flex;
  gap: 6px;
}
.middle li:hover,
.middle li.active {
  background-color: #01f0d0;
}

/* Right side*/
.rightside {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: space-between; /* Space out items */
  gap: 10px;
}

.small-pic {
  top: 32px;
  left: 1309px;
  width: 44px;
  height: 44px;
  background: transparent
    url("img/senior-woman-doctor-and-portrait-smile-for-health-2023-11-27-05-18-16-utc.png")
    0% 0% no-repeat padding-box;
  opacity: 1;
}

.text-container {
  display: flex;
  flex-direction: column; /* Stack text vertically */
  align-items: center; /* Center text */
}

.text-icon {
  font-size: 14px; /* Adjust font size */
  color: #333; /* Text color */
}
.line {
  top: 32px;
  left: 1502px;
  width: 1px;
  height: 44px;
  background: var(--unnamed-color-ededed) 0% 0% no-repeat padding-box;
  background: #ededed 0% 0% no-repeat padding-box;
  opacity: 1;
}
.small-icon {
  top: 44px;
  left: 1515px;
  width: 19px;
  height: 20px;
  background: transparent url("img/settings_FILL0_wght300_GRAD0_opsz24.png") 0%
    0% no-repeat padding-box;
}

.circle-icon {
  width: 30px; /* Adjust size as needed */
  height: 30px; /* Adjust size as needed */
  border-radius: 50%; /* Make it circular */
  background-color: #007bff; /* Circle color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Icon color */
  align-items: center;
}

.leftcard-header {
  margin-top: 20px;
  width: 367px;
  height: 1020px;
  background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 16px;
  opacity: 1;
}

.heading {
  top: 142px;
  left: 38px;
  width: 100px;
  height: 33px;
  font: var --unnamed-font-weight-800 var--unnamed-font-size-24 var
    unnamed-font-style-normal var--unnamed-line-spacing-33
    var--unnamed-font-family-manrope;
}

.search-icon {
  width: 18px;
  height: 18px;
}

.icon-container {
  background-color: white; /* Change to white on hover */
  padding: 16px 20px;
}

.icon-container:hover {
  background-color: #d8fcf7; /* Set background color */
}

/* hero*/

.hero {
  top: 122px;
  left: 417px;
  width: 766px;
  height: 673px;
  /* UI Properties */
  background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 16px;
  opacity: 1;
  margin-top: 20px;
}

.hero {
  padding: 20px;
}

.chart {
  padding: 20px;
  top: 215px;
  left: 437px;
border-radius: 20PX;
  height: 298px;
  background: #f4f0fe 0% 0% no-repeat padding-box;
}

.mychart {
  margin-top: 35px;
  margin-left: -27px;
width: 500px;
  height: 600px;
}


.right-card{
 margin-top: 20px;
left: 1216px;
width: 367px;
height: 740px;
background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 16px;
opacity: 1;
}


.herolower{
margin-top: 30px;
padding: 20px;
width: 766px;
height: 349px;

background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 16px;
opacity: 1;

margin-left: -17px;
}