/* Lay out infoWindows in GMP app.  This is using predefined class names that
   GMP will use.  They are subject to change by GMP, so it is recommended to use a custom class for
   for the infoWindows. 
   */

   /*The "chrome" container — wraps the close button and edges of the InfoWindow.*/
   .gm-style .gm-style-iw-chr {  
      position: absolute;
      display: flex;
      top: 0;
      right: 0;
   }

   /*Container inside the main InfoWindow — contains the content and background. */
   .gm-style .gm-style-iw-c { /* Controls top and edge styles. */
      overflow: visible !important;
      height: auto !important;        /* let it grow */
      max-height: none !important;
      padding: 15px !important; /* Remove default padding */
      background-color: FloralWhite;
      border: 1px solid black;
   }

   /*The content wrapper div that contains your HTML (set via infoWindow.setContent()).*/
   .gm-style .gm-style-iw-d {
      overflow: visible !important; /* Hide scrollbars */
      max-height: none !important;
      background-color: FloralWhite;
      top: 0px !important; /* Suppress space at top of infowindow. */
   }

   /*Targets the small triangular tail/callout pointer of the InfoWindow (appears to connect the window to the map marker).*/
   .gm-style .gm-style-iw-tc:after {
      background-color: FloralWhite !important;
   }

   /*Classes for InfoWindows. */
   .custom-info-window {
     font-family: Calibri;
     display: inline-block;
     width: 100%;
     box-sizing: border-box;
     width: auto; /* Auto size the infoWindow. */
     max-width: 90vw; /* Do not exceed width of map window. */
     background-color: floralwhite;
     border-radius: 6px;
     overflow: visible;
     position: relative;
     padding-bottom: 6px;
   }

   .info-header {
     padding: 5px 5px 0px 5px; /* top, right, bottom, left */
     font-size: 20px;
     font-weight: bold;
     display: flex;
     justify-content: space-between;
     align-items: center; /* Aligns text baselines. */
   }

   .close-btn {
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     color: #444;
     line-height: 1;
     padding-left: 25px;
   }

   .close-btn:hover {
     color: red;
   }

   .info-divider {
     border-top: 2px solid black;
     margin: 0 5px 0 5px; /* top, right, bottom, left */
   }

   .info-body {
     padding: 5px 5px 5px 5px; /* top, right, bottom, left */
     font-size: 16px;
     font-weight: bold;
   }

   .custom-info-window .info-table {
     border-collapse: collapse;
     width: 100%;
     margin-top: 5px;
   }

   .custom-info-window td {
     font-size: 14px;
     font-weight: normal;
     padding: 2px 6px;        /* spacing inside cells */
     text-align: left;         /* start-aligned text */
     border-bottom: 1px solid #ccc; /* optional row divider */
   }

   .custom-info-window th {
     font-size: 16px;
     font-weight: bold;
     background-color: #f0f0f0; /* optional header shading */
   }