/******************************************************************************/
/* coronadelmar.css                                                           */
/*                                                                            */
/* Date     Description                                          Name         */
/* -------- --------------------------------------------------   ------------ */
/* 20260921 Initial coding.                                      Rodney       */
/******************************************************************************/
/******************************************************************************/
/* Global Element Settings                                                    */
/******************************************************************************/
/* #region Global Elements Settings */
a
{
  color: blue;
}

h1
{
  font-family: Verdana;
  padding-top: 20px;
}

h2
{
  font-family: Verdana;
  padding-top: 20px;
}

h3
{
  font-family: Verdana;
  padding-top: 20px;
}

p
{
  font-family: Verdana;
  padding-top: 20px; 
}

ul
{
  font-family: Verdana;
  padding-left: 25px;
}
/* #endregion */
/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */

.clsImageBanner
{
  /****************************************************************************/
  /* The display CSS property sets whether an element is treated as a block   */ 
  /* or inline box and the layout used for its children, such as flow layout, */ 
  /* grid or flex.  The default value for this property is block.             */
  /*                                                                          */
  /* Setting the display property to block ensures that the image is centered */
  /* horizontally within the parent <div>.                                    */
  /****************************************************************************/
  display:block;
  
  /****************************************************************************/
  /* The CSS margin properties are used to create space around elements,      */
  /* outside of any defined borders.                                          */
  /*                                                                          */
  /* The browser selects a suitable margin to use. For example, in certain    */ 
  /* cases this value can be used to center an element.                       */
  /****************************************************************************/
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 20px;
}
.clsHR
{
  background-color: rgb(201, 201, 201);
  border: none;
  height: 1px;
  margin-top: 20px;
  width: 100%;
}
.clsDivRolodex
{
  float: right;         /* Shifts image to the right side */
  width: 300px;
}
.clsImgRolodex
{
  max-width: 100%;      /* Ensures responsiveness on mobile */
  width: inherit;
}
.clsRolodexCaption
{
  font-family: Verdana;
  font-size: 10px;
  text-align:center;
  width: inherit;
}

.clsImageWithinDiv
{
  max-width: 100%;                        /* Ensures responsiveness on mobile */
  width: inherit;
}
.clsImageContainer200px
{
  float: left;         /* Shifts image to the left side */
  margin: 20px 20px 0px 0px;
  width: 200px;
}

.clsImageCaption
{
  font-family: Verdana;
  font-size: 10px;
  text-align: center;
  width: inherit;
}

.image-container {
  display: flex;         /* Enables Flexbox */
  justify-content: ease; /* Centers or spreads items evenly */
  gap: 15px;            /* Adds space between the images */
  width: 100%;          /* Spans the full width of the page */
}

/* Styling for the individual images */
.image-container img 
{
  flex: 1;              /* Makes all three images take up equal width */
  width: 100%;          /* Forces the image to fill its flex space */
  height: auto;         /* Maintains the aspect ratio so images aren't distorted */
  object-fit: cover;    /* Crops neatly if images have different aspect ratios */
}
.chat-container 
{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
  margin: 20px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Base styling common to all message bubbles */
.message 
{
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.4;
  max-width: 75%;
  /* shrink-wraps the bubble tightly to the text size */
  width: max-content; 
  box-sizing: border-box;
}
/* Received messages aligned to the left */
.message.received 
{
  background-color: #e9e9eb;
  color: #000000;
  align-self: flex-start;
  /* Top-left corner is square; others are rounded */
  border-radius: 4px 18px 18px 18px; 
}

/* Sent messages aligned to the right */
.message.sent 
{
  background-color: #007aff;
  color: #ffffff;
  align-self: flex-end;
  /* Top-right corner is square; others are rounded */
  border-radius: 18px 4px 18px 18px; 
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs */
#idDivMainPage
{
  margin-left: 100px;
  margin-right: 100px;
}
/* #endregion */