body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #545b62;
    color: #02feff;
}


.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Adjust as needed */
}

.top-area {
    height: 8vh;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	align-items: stretch; /* Ensure all panels stretch to full height */
    height: 85vh;
    padding: 20px;
}

.left-panel, .right-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
	width: 25%;
}

.middle-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 50%; /* Middle panel occupies 50% */
}

.music-player, .battery-indicator, .date-time, .temperature, .last-mail, .reminder-list, .smart-home {
    margin-bottom: 20px;
}

.chat-box {
    width: 80%;
    height: 60%;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: scroll;
    padding: 10px;
}

.input-area {
    display: flex;
    align-items: center;
    margin-top: 10px;
	width: 80%;
}

.microphone-btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}



.type-area {
    flex-grow: 1;
    height: 40px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
}

/* Add more specific styling for the components as needed */

.email-box {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

.email-box h2 {
    margin-bottom: 10px;
}

.email-content p {
    margin: 5px 0;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}

.popup-content {
  background-color: white;
  width: 50%; /* Adjust width as needed */
  height: 50%; /* Adjust height as needed */
  margin: 10% auto; /* Center the popup vertically and horizontally */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}

.ai-heading {
  font-family: Arial, sans-serif;
  color: #3366ff;
  text-align: center;
  margin-top: 50px;
  font-size: 36px;
  text-transform: uppercase;
}

#openBtn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 8px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}

.popupai {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 9999;
}

.popup-contentai {
  background-color: transparent;
  width: auto; /* Adjust width based on content */
  height: auto; /* Adjust height based on content */
  max-width: 20%; /* Optional: Set a maximum width */
  margin: 10% auto; /* Center the popup vertically and horizontally */
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
}

.closeai {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}

        .info {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-radius: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        .left, .right {
            flex: 1;
            margin: 0 10px;
        }
        
        
        .left {
            margin-left: -100px; /* Add margin to the left */
        }
        
        .right {
            margin-left: 100px; /* Add margin to the left */
            margin-top: -100px;
        }