/*
  File:      appointments.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for Nancy's Liv-N-Rejuvenate site's Appointments page
  Created:   29 Sep 2026  From livnrejuvenate.css by splitting off page-specific code
  Revisions: 
  Comments:  
*/
  #idAPContentContainer {     /* The default (mobile-first) view is a column-based flexbox container */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;          /* EXPERIMENT WITH NOWRAP */
  }
  #idAPForm {
    background-color: #EEEEEE;
    border: thin solid black;
    margin-left: 0%;
    margin-top: 50px;
    padding: 10px;
    width: auto;      /* 40%; */
  }
@media screen and (min-width:760px) {
  #idAPContentContainer {             /* On larger screens, the parent container is a two-column grid */
    display: grid;
    grid-template-columns: 40% 40%;
    justify-content: space-evenly;
    row-gap: 1em;                     /* Space between images on the horizontal plane */
  }
  #idAPForm {
    background-color: #EEEEEE;
    border: thin solid black;
    margin-left: 0%;
    margin-top: 50px;
    padding: 10px;
    width: auto;      /* 40%; */
  }
}
#idAPTestimonials {
  text-align: center;
}
/*
  The following four classes are also used for the question submittal form on the podcast page and the event request form on the bookings page
*/
.clsFormTitle {                     /* I used the inspector to get all of these! */
  border: 1px solid black;
  font-size: larger;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 3px 0px;                 /* T&B L&R */
  text-align: center;
}
.clsFormTextInput {                 /* For Name and E-mail TEXT fields */
  box-sizing: border-box;
  width: 80%;                       /* Leave space for LABELs and asterisks */
}
.clsFormTA {                        /* For Notes TEXTAREA field */
  box-sizing: border-box;
  width: 90%;
}
.clsFormButtons {
  margin-bottom: 1em;
  margin-top: 2em;
  text-align: center;
}
#idApptsOfficePhotos {              /* This is the encompassing pane */
  background-color: #EEEEEE;
  border: thin solid black;
  margin-top: 50px;
  padding: 10px;
  width: auto;      /* 40%; */
}
.clsApptsOfficePhotos {             /* Specifics for the photos */
  background-color: yellow;
  border: 4px solid black;          /* Create a "picture frame" */
  padding: 4px;
  width: 46%;       /* 100px; */
}
#idApptsOfficePhotosTitle {         /* I used the inspector to get all of these! */
  border: 1px solid black;
  font-size: larger;
  font-weight: bold;
  margin-bottom: 32px;
  padding: 3px 0px;                 /* T&B L&R */
  text-align: center;
}