<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <style>
        .Messages{

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid whitesmoke;
}

.sidebarOption {
  display: flex;
  align-items: center;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
  color: #818181;
   margin-top:100px;
}

.sidebarOption .material-icons {
  padding: 5px;
}

.sidebarOption h3 {
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
}
.sidebarOption:hover,
.sidebarOption:hover h3{
width:100px;
}
.sidebarOption:hover,
.sidebarOption:hover h3,
.sidebarOption:hover .material-icons,
.sidebarOption__active,
.sidebarOption__active h3,
.sidebarOption__active .material-icons {
  background-color: #fcecec;
  color: #c04b37;

}

.sidebar__footer {
  display: flex;
  justify-content: center;
}

.sidebar__footerIcons .material-icons {
  margin: 7px;
  cursor: pointer;
}
.header__middle {
  display: flex;
  flex: 0.7;
  align-items: center;
  background-color: whitesmoke;
  padding: 10px;
  border-radius: 5px;
}

.material-icons {
  color: gray;
  border-radius:50%;
}

.header__middle input {
  border: none;
  width: 100%;
  padding: 10px;
  outline: none;
  font-size: medium;
  border-radius:50%;
  background-color: transparent;
}

.header__right {
  display: flex;
  padding-right: 20px;
}

.header__right span {
  padding: 10px;
  cursor: pointer;
}
.compose {
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
  text-transform: capitalize;
  color: gray;
  padding: 8px;
  border-radius: 30px;
  background-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  transition: background-color 0.3s, color 0.3s;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
}

.compose span {
  margin-right: 5px;
}
.compose.active {
    background-color: #43A6C6;
    color: black; /* Highlighted text color */
}

.compose:hover {
    opacity: 0.9; /* Optional hover effect */
}
}
    </style>
</head>
<div class="Messages">
<body style="width:100px;">
    <div class="header" style="margin-top:100px;width:80.5%; margin-left:300px;">
        <div class="header__middle">
            <span class="material-icons">search</span>
            <input type="text"  style="border-radius: 50%;"  placeholder="Search mail">
        </div>
        <div class="header__right">
            <span class="material-icons">apps</span>
            <span class="material-icons">notifications</span>
            <span class="material-icons">account_circle</span>
        </div>
    </div>

    <div class="main__body" style="margin-left: 300px; margin-top: 30px;">

      <div class="" style="margin-top:200px;">
        <button class="compose active"><span class="material-icons"  > add </span>Compose</button>
    </div>
        <div class="inbox" style="margin-top:-135px; margin-left:150px;">
        <div class="sidebarOption sidebarOption__active" style="width:100px;">
          <span class="material-icons"> inbox </span>
          <h3>Inbox</h3>
        </div>

        <div class="sidebarOption" style=" margin-top:-32px; margin-left:130px;">
          <span class="material-icons" > near_me </span>
          <h3>Sent</h3>
        </div>

        <div class="sidebarOption" style=" margin-top:-37px; margin-left:250px;">
        <span class="material-icons">delete</span>
          <h3>Trash</h3>
        </div>
        </div>
</div></div>
        </div></body>
</html>
</body>
</html>