form {
  border-radius: 5px;
  background-color: var(--color-purple-4);
  padding: 20px;
}



form {

  .control-group
  {
    position: relative;
    margin: 15px 0 0;
  }
  
  fieldset {
    padding: 15px;
    border: 1px solid var(--color-lightblue-3);
    border-radius: 12px;
  }

  fieldset legend{
     font-size: 18px;
     font-weight: bold;
     
     padding: 5px;
  }

  label {
    display: block;
  }

  label jform_spacer-lbl
  {
    font-style: italic;
  }

  .red
  {
    color: var(--color-red-3);
  }

  input, select, textarea
  {
    width: 100%;
    color: var(--color-lightblue-3);
  border: none;
    border-bottom: 2px solid var(--color-lightblue-3);
    border-radius: 8px;
    box-sizing: border-box;
    background-color: transparent;
       padding: 5px 10px;
    margin: 8px 0;
    box-sizing: border-box;
    transition: all 1s;
    
  }

  input,
  select {
 
    
  
    display: inline-block;
  
  }

  input:focus,
  select:focus,
  textarea:focus
  {
    color: var(--color-white);
        border-bottom: 2px solid var(--color-purple-1);
    border-radius: 8px;
    outline: none;
  }

  textarea
  {
     height: 150px;
     resize: none;
  }

  
  label span.form-control-feedback{
    padding-left: 8px;
    text-decoration: underline;
  }
  
  label span.star, label span.form-control-feedback
  {
     color: var(--color-red-1);
    font-style: italic;
  }

  input[type="submit"],
  button {
    
    opacity: 0.5;
    width: 100%;
    background-color: var(--color-lightblue-3);
    color: white;
    padding: 14px;
    margin: 8px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 1s;
  }

  

  input[type="submit"]:hover,
  button:hover {
    opacity: 1.0;
    background-color: var(--color-lightblue-3);
  }
}