:root {
    /* Primary Colors */
    --main-blue: #1C5E9B;
    --white: #ffffff;
    --black: #000000;
    --main-pale: white; /* #f0f0e4; */

    /* Grays */
    --gray-1: #333333; 
    --gray-2: #555555;
    --gray-3: #a0a0a0; 
    --gray-4: #cccccc;
    --gray-5: #eeeeee;
    --gray-6: #b0b0b0;

    --light-gray: #f5f5f5;

    /* Neutrals */
    /* --neutral-1: #faf8f4; */
    /* --neutral-2: #c2b8a4; */
    --neutral-2: white ;
    /* #fcfcfa; */
    
    /* Browns */
    --brown: #93815d;

    /* Greens */
    --green-light: #e6ffed;
    --green-medium: #a3cca3;
    --green-dark: #1a531b;
    --green: green;

    /* Reds */
    --red-light: #ffe6e6;
    --red-medium: #cca3a3;
    --red-dark: #531b1a;

    /* Pinks */
    --pink-light: #fbe2e6;
    --pink-medium: #8a4d5e;

    /* Other */
    --alt-blue: #007bff;
}

body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    height: 100%;
}

.full-height-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body, h1, h2, h3, h4, h5, h6, p  {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }




.main-container {
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background-color: white;
}


.main-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

.frame-content  { 
        margin-top: 0rem;          
        padding: 1rem;               
        text-align: justify;         
        border-radius: 0;     
        width: 100%;              
        background-color: white;
        box-sizing: border-box;
    }
    
    .align-container-column {
        display: flex;
        flex-direction: column;
        margin-left: 2rem;  /* adjust as needed */
        margin-right: 2rem; /* adjust as needed */
        border: none; /* Removing the frame */
    }


.frame-content h2{
    margin: 1.5rem 0rem 0;
    font-size: 1.5em;
    color: var(--main-blue);
    text-align: left;
    font-weight: bold;   
}

.frame-content h3{
  font-size: 1.3rem;
  margin: 1.3rem 0rem 0;
  font-weight: bold;
  text-align: left;
}

.frame-content h4 {
  font-size: 1.2rem;
  margin: 1.2rem 0rem 0;
  font-weight: bold;
  text-align: left;
  color: var(--main-blue);
}



.main-row h2{
  margin: 1.5rem 0rem 0;
  font-size: 1.5em;
  color: var(--main-blue);
  text-align: left;
  font-weight: bold;   
}


.main-row h3{
    font-size: 1.3rem;
    margin: 1.3rem 0rem 0;
    font-weight: bold;
    text-align: left;
}

.frame-content p{
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0rem;
    margin-bottom: 1rem;
    color: var(--gray-1); 
    text-align: left;
    box-sizing: border-box;
}


.main-row strong {
    color: var(--black);              
    font-weight: bold;           
}

.main-row  em {
    font-style: italic;          
    color:black;
    /* ?\ var(--gray-2);                  */
}

.main-row p{
    font-size: 1.2rem;
    line-height: 1.6;
    padding: 0rem;
    margin-bottom: 1rem;
    color: var(--gray-1); 
    text-align: left;
    box-sizing: border-box;
}


.frame-content strong {
    color: var(--black);              
    font-weight: bold;           
}

.frame-content  em {
    font-style: italic;          
    color: black;
    /* var(--gray-2);                  */ 
}


.core-form-submit button {
    padding: 0.75rem 1.5rem;
    background-color: var(--main-blue);
    border: none;
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.3s;
}

.core-form-submit button:hover {
  background-color: var(--main-blue);
}


@keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  #flash-message-container {
    pointer-events: none; 
    list-style: none;  /* Explicitly remove any list styles */
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 3s ease-in-out forwards;
    animation-delay: 3s;
  }
  
  .flash-message {
    pointer-events: none; 
    padding: 0.5rem 1rem;
    border: 1px solid;
    border-radius: 0;
    font-weight: 600;  /* Increase font weight */
  }
  
  .flash-message.success {
    background-color: var(--neutral-2);
    border-color: var(--gray-4);
    color: var(--main-blue);
  }
  
  .flash-message.error {
    background-color: var(--main-pale);
    border-color: var(--gray-3);
    color: var(--gray-1);
  }
  
  @media (max-width: 768px) {
    #flash-message-container {
      top: 10%; /* Position it closer to the top so it doesn't obscure as much content */
      left: 50%;
      width: 90%; /* Limit width to 90% of the screen */
      transform: translateX(-50%); /* Adjust the transform so it only affects the X-axis */
    }
  
    .flash-message {
      padding: 0.4rem 0.8rem; /* Slightly smaller padding */
      font-size: 0.9rem; /* Reduce font size for mobile devices */
    }
  }

  @media (max-width: 768px) {

    .align-container-column {
      margin-left: 0.2rem; /* Reducing left and right margin */
      margin-right: 0.2rem;
    }
  
    .frame-content,
    .main-row {
      padding: 0.5rem; /* Reducing padding */
    }
  
    .frame-content h2,
    .main-row h2 {
      font-size: 1.2em; /* Adjusting font size */
      margin: 1rem 0; /* Adjusting margin */
    }
    
    .frame-content h3,
    .main-row h3,
    .frame-content h4 {
      font-size: 1.1rem; /* Adjusting font size */
      margin: 1rem 0; /* Adjusting margin */
    }
    
    .frame-content p,
    .main-row p {
      font-size: 1rem; /* Adjusting font size */
      margin-bottom: 0.5rem; /* Adjusting bottom margin */
    }
    /* Adjusting list items for a lighter look */
    .frame-content ul,
    .main-row ul {
      list-style-type: disc;
      padding-left: 0.3rem; /* Reduced padding for mobile */
    }
  
    .frame-content li,
    .main-row li {
      margin-left: 0.5rem; /* Reduced margin for a tighter look */
    }
    table {
      width: 100%; /* Ensures the table spans the full width of its container */
      overflow-x: auto; /* Adds horizontal scrolling if the table is too wide for the viewport */
  }

  table th, table td {
      font-size: 0.8rem; /* Reducing the font size */
      padding: 0.5rem; /* Adjusting padding for better spacing */
      text-align: left; /* Optional: You can adjust text alignment if needed */
  }
  

  
  }