body {
    background: rgb(29,89,32);
    background: -moz-linear-gradient(39deg, rgba(29,89,32,0.2) 29%, rgba(2,0,36,0) 100%);
    background: -webkit-linear-gradient(39deg, rgba(29,89,32,0.2) 29%, rgba(2,0,36,0) 100%);
    background: linear-gradient(39deg, rgba(29,89,32,0.2) 29%, rgba(2,0,36,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1d5920",endColorstr="#020024",GradientType=1);
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

.chat {
    border-radius: 30px;
    background: linear-gradient(215.32deg, #EFF6F2 0%, #BDDACB 100%);
    width: 400px;
    height: calc(100vh - 300px);
    margin: 150px auto;
}
#responses {
    height: calc(100vh - 420px);
    padding: 30px;
    overflow-y: auto;
    border-radius: 30px 30px 0 0;
}

.chat_box input {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(208, 213, 221, 1);
    width: calc(100% - 75px);
    display: block;
    float: left;
}

.user {
    padding: 10px;
    background-color: rgba(72, 130, 101, 1);
    color: #fff;
    border-radius: 5px 0 5px 5px;
    margin-bottom: 20px;
    margin-top: 5px;
}

.chat_box {
    padding: 10px;
}
.harmony {
    width: 100%;
    background-image: url("/assets/Avatar.png");
    background-position: 0% 0%;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}
.alabel {
    padding-left:50px;
}
.assistant {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 0px 5px 5px 5px;
    width: 270px;
    margin-left: 50px;
    margin-top: 10px;
}

.calendar-button {
    height: 35px;
    width: auto;
    padding: 0 15px;
    border-radius: 5px;
    border: 0;
    background-color: rgba(72, 130, 101, 1);
    color: #fff;
    display: block;
    text-align: center;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

.button-row {
    display: flex;
    justify-content: space-between;
}

.chatbutton {
    height: 35px;
    width: 35px;
    border-radius: 5px;
    border: 0px;
    background-color: rgba(72, 130, 101, 1);
    background-image: url("/assets/send-01.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: block;
    float: left;
    margin-left: 10px;
}

mealplan {
    border-bottom: 1px solid #aaa;
    display: block;
    padding: 10px;
    margin-bottom: 5px;
}
day {
    width: 100%;
    display: block;
    font-weight: bold;
}
meal {
    width: 100%;
    display: block;
    margin-top: 5px;
}
description {
    font-size: .8em;
    display: block;
    margin-bottom: 10px;
    margin-top: 5px;
}

mealplan a {
    display: inline-block;
    padding: 5px;
    color: #fff;
    background-color: rgba(72, 130, 101, 1);
    text-decoration: none;
    font-size: .8em;
    
}

flightoption {
    border-bottom: 1px solid #aaa;
    display: block;
    padding: 10px;
    margin-bottom: 5px;

}
price,legs,departs,flights,number,airports,times {
    width: 100%;
    display: block;
}
departs {
    font-size: 0.8em
}

.calendar {
    width: 400px;
    background: #fff;
    border-radius: 10px;
    position: fixed;
    left: 40px;
    padding: 10px;
}

.familyprofile {
    width: 400px;
  background: #fff;
  border-radius: 10px;
  position: fixed;
  right: 40px;
  padding: 10px;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear;
    margin-left:20px;
  }
  @keyframes l5 {
      0%  {box-shadow: 20px 0 #0000, -20px 0 #0000;background: #0000 }
      25% {box-shadow: 20px 0 #0000, -20px 0 #000;background: #0000}
      50% {box-shadow: 20px 0 #0000,-20px 0 #0000; background: #000}
      75%{box-shadow: 20px 0 #000,-20px 0 #0000; background: #0000 }
      100%{box-shadow: 20px 0 #0000,-20px 0 #0000; background: #0000 }
  }