.form_ai input[type=text] {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  outline: none;
}
#time-text,
#life-text,
#act-text{
  color: white;
  display:block;
  text-align: center;
  margin-bottom: 5px;
  font-weight: bold;
  text-align: center;
  font-family: inherit;
  font-size: 20pt;
}

#lifestyle span,
#activities span {
  display: block;
    margin-bottom: 5px;
    font-weight: inherit;
    text-align: center;
    padding: 10px 20px;
}
/* #activities */
.timerad label {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #ddd;
  cursor: pointer;
}
.timerad,
.liferad{
  display: none;
}
.label{
  padding: 7px 18px 10px;
  margin: 4px;
  background-color: #37beb1;
  color: white;
  font-weight: 400;
/*   border-radius: 50px; */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out; /* Add a transition effect to the background color */
}

.label:hover{
  background-color: #70e9dd; /* Change the background color on hover */
}

#wpai-luxhome-input-1:checked ~ .label-1,
#wpai-luxhome-input-2:checked ~ .label-2,
#wpai-luxhome-input-3:checked ~ .label-3,
#wpai-luxhome-input-8:checked ~ .label-4{
  background-color: #37be64;
}

#time,
#lifestyle{
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.lifelabel{
  padding: 7px 18px 10px;
  margin: 4px;
  background-color: #eecd13;
  color: white;
  font-weight: inherit;
/*   border-radius: 50px; */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out; /* Add a transition effect to the background color */
}

.lifelabel:hover{
  background-color: #c2df44; /* Change the background color on hover */
}

#wpai-luxhome-input-9:checked ~ .lab-1,
#wpai-luxhome-input-10:checked ~ .lab-2,
#wpai-luxhome-input-11:checked ~ .lab-3{
  background-color: rgb(238, 191, 129);
}
#activities label{
  cursor: pointer;
}
#activities{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin : 0 auto;
  margin-bottom: 10px;
}
.button input[type="checkbox"]{
  display: none;
}
#list{
   position: relative;
   display: inline-block;
   background-color: #288fcd;
   padding: 15px 30px;
   color: white;
/*    border-radius: 50px; */
   margin : 5px;
   transition: background-color 0.3s ease-in-out;
}
#list:hover{
   background-color: #1e5b81;
}
.button input[type="checkbox"]:checked ~ #list{
  background-color: #28c8cd;
}
.generate {
  background-color: #288fcd;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.generate:hover {
  background-color: #64d864; /* Bright green */
}
#copiAi{
  font-family: inherit;
  width: 681px;
  padding: 12px 15px;
  border-radius: 6px;
  border: none; 
  margin-top: 15px;
  height: auto;
  font-size: 18px;
  overflow: hidden;
}
textarea:focus::placeholder {
  outline: none;
}

textarea:focus {
  outline: none;
}
#generating {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border-top: 0.3rem solid #71c9ff;
  border-right: 0.3rem solid transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}