/* Your existing CSS */


.mar-ys5{
    margin: 0px 0px 10px 0px;
}

.btn-yt6{
    color: #4285F4
}

.et62{
    padding: 6px 0px 0px 10px
}

.mr-6t{
    margin: 0px 0px 0px 20px;
}

.ptb-76{
    margin: 10px 0px 10px 0px;
}

.tooltip {
    position: relative;
    cursor: pointer;
}

.flatpickr-disabled {
    pointer-events: none; /* Disable all pointer events (clicks, hovers, etc.) */
    opacity: 0.7; /* Optional: Visually indicate it's disabled */
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 1000;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.auto-grid-3 {
  display: grid;
  grid-gap: 4px;
  width: 100%;
  grid-template-columns: 210px auto 170px;
  align-items: center; /* Vertically align items */
  justify-items: start; /* Horizontally align items to start */
}

#send_forgot_password_email_address{
    width: 420px;
}

#send_forgot_password_btn{
    font-size: 14px;
    border-radius: 4px;
    padding: 10px;
    
}


#forgot_pw_link{
	color: blue;
    text-decoration: underline;
}

#forgot_pw_link:active{
    color: #5555ff;
    transform: scale(0.95); /* Slight shrink effect for "pressed" feel */
}

#forgot_pw_link:hover{
    font-weight: 600;
}

#forgot_note2{
    font-size: 14px;
}



#un_pw_grid{
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 145px auto;
    padding: 12px 0px 0px 0px;
}

.un-pw-text{
    margin: 8px 0px 0px 0px;
}
  

.input-field {
    width: 90%;
    margin: 0px 0px 6px 10px;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 14px;
}  


.input-nice{
    width: 90%;
    margin: 0px 0px 6px 10px;
    padding: 10px;
    border: 1px solid #555;
    border-radius: 6px;
    font-size: 15px;
}


/* Responsive styles for username/password grid - screens less than 800px */
@media (max-width: 849px) {
    .auto-grid-3{
        display: grid;
        grid-gap: 4px;
        grid-template-columns: 1fr; /* Single column layout */
    }
    #send_forgot_password_email_address{
        width: 420px;
    }
    #un_pw_grid {
        grid-template-columns: 1fr; /* Single column layout */
        grid-gap: 8px; /* Slightly larger gap for better spacing */
        padding: 10px; /* Add padding for better mobile spacing */
    }
    /* Stack labels above inputs */
    #un_pw_grid .un-pw-text {
        margin-bottom: 2px;
        font-weight: 600; /* Make labels slightly bolder */
    }
}

/* For very small screens (phones in portrait) - username/password grid */
@media (max-width: 480px) {
    #un_pw_grid {
        padding: 8px;
    }
    #un_pw_grid .un-pw-text {
        font-size: 15px;
    }
}



.email-password-grid {
    display: grid;
    grid-template-columns: 100px auto;
    grid-gap: 4px;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    padding: 5px 5px 5px 5px;
}

.vr-centered-item {
    display: flex;
    justify-content: right; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Responsive styles for screens less than 800px */
@media (max-width: 599px) {
    .email-password-grid {
        grid-template-columns: 1fr; /* Single column layout */
        grid-gap: 8px; /* Slightly larger gap for better spacing */
        padding: 10px; /* More padding for touch-friendly spacing */
    }
    
    /* Stack labels above inputs */
    .email-password-grid .vr-centered-item {
        margin-bottom: 2px;
        font-weight: 600; /* Make labels slightly bolder */
    }
    
    /* Full width inputs with better touch targets */
    .email-password-grid .input-field {
        width: 100%;
        min-height: 44px; /* Touch-friendly minimum height */
        padding: 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        box-sizing: border-box;
    }
    
    /* Ensure alignment divs don't interfere */
    .email-password-grid .al {
        width: 100%;
    }
    
    /* Better spacing for status messages */
    .email-password-grid .provider-status {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .vr-centered-item {
        justify-content: left; /* Center horizontally */
    }


}

/* For very small screens (phones in portrait) */
@media (max-width: 480px) {
    .email-password-grid {
        padding: 8px;
        font-size: 15px;
    }
    
    .email-password-grid .input-field {
        padding: 10px;
        min-height: 42px;
    }
}

.end-row-count{
    display: flex; align-items: center; justify-content: space-between;
}

.fg-74{
    margin-left: 10px; white-space: nowrap;
}


.cf-input{
    background-color: #f4f4f4;
}

.rt-f2{
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
}


.handle-funky-char-in-text {
  /* preserve newlines & spaces, but allow wrapping */
  white-space: pre-wrap;        /* CSS3 standard */
  white-space: -moz-pre-wrap;   /* Firefox older */
  white-space: -o-pre-wrap;     /* Opera older */
  word-wrap: break-word;        /* IE */
  overflow-wrap: break-word;    /* modern browsers */
}


.sub-orders-listing-grid{
    display: grid;
    grid-template-columns: 140px 140px 400px;
    font-size: 16px;
    gap: 1px; /* This creates the space for lines */
    background-color: #fff; /* This is the color of your lines */
    margin: 5px 20px 20px 20px;
    padding: 5px 20px 20px 20px;
}
  
#orders_listing{
        margin: 20px 20px 20px 20px;
}

.ru7{
    font-size: 15px;
    font-weight: 600;
}

#show_email_address{
    color: #fff;
}

#support_requests_waiting{
    color: #f00;
    font-weight: 600;
}



.ydhf{
    font-size: 16px;
    font-weight: 500;
}

.ydhf2{
    font-size: 20px;
    font-weight: 500;
}

.mar-bot-25{
    margin-bottom: 25px;
}

.vam{
    vertical-align: middle;
}


#un_pw_results{
    margin: 20px 0px 0px 0px;
}

.var-hold{
    padding-left: 20px;
}

#initial_legacy_connecting_note{
    margin: 20px 20px 20px 20px;
}


#welcome_login_signup_buttons{
    width: 90%;
  }

  #login_area{
    padding: 0px 20px 0px 20px;
    margin: 0px 20px 0px 20px;
    width: 100%;
  }
  
  #signup_area{
    padding: 20px 0px 0px 0px;
  }
  

  
.outlined-div {
    position: relative; /* Enable positioning for inner elements */
    width: 90%;
    border: 1px solid rgb(203, 203, 203);
    padding: 20px 16px 15px 16px;
    margin: 10px 10px 10px 10px;
  }
  
  
  .no-outlined-div {
    position: relative; /* Enable positioning for inner elements */
    padding: 20px 6px 6px 6px;
    margin: 0px 0px 10px 0px;
  }
  
  .corner-text {
    position: absolute; /* Position relative to the parent div */
    top: -0.5em; /* Adjust to vertically center the text */
    left: 10px; /* Position the text slightly inside the border */
    background: white; /* Cover the outline behind the text */
    padding: 0 15px; /* Add padding to the text background */
    color: #555;
    font-size: 14px;
  }
  




#below_header {
    margin: 0px 0px 0px 0px;
    padding: 20px 10px 20px 10px;
    background-color: #fff;
}

  


.conversation-detail{
    font-size: 15px;
}

#conversation_grid{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0px;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    padding: 16px 2px 6px 2px;
    margin: 0px 0px 5px 0px;    
}



.report-close-button {
    background-color: #00587a; /* marine blue */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
}

.report-close-button:hover {
    background-color: #003d5b;
}

/* Custom Magnific Popup styles */

/* 1) Base container: cap its height at 80% of the viewport and hide overflow */
.custom-popup-report {
    position: relative;
    width: 90%;
    max-width: 1600px;
    max-height: 90vh;
    margin: auto;
    background: #fff;
    overflow: hidden;   /* we’ll delegate scrolling to the body section */
    box-sizing: border-box;
  }
  
  /* 2) Sticky header */
  .popup-report-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 16px;
    font-size: 1.1em;
    border-bottom: 1px solid #ddd;
    z-index: 10;
  }
  
  /* 3) Scrollable body: subtract header (≈ 56px) + footer (≈ 56px) from 80vh */
  .popup-report-body {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(90vh - 56px - 56px);
    line-height: 1.4;
  }
  
  /* 4) Sticky footer (optional) */
  .popup-report-footer {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 16px;
    border-top: 1px solid #ddd;
    text-align: right;
    z-index: 10;
  }
  
  /* 5) Your close buttons: absolute in the corner of the container */
  .popup-report-close-top,
  .popup-report-close-bottom {
    position: relative;
    border: none;
    background: transparent;
    font-size: 1.4em;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    color: #000;
  }
  
  .popup-report-close-top {
    top: 8px;
    right: 8px;
    color: #000 !important;
  }
  
  .popup-report-close-bottom {
    bottom: 8px;
    right: 8px;
    color: #000;
  }
  




/* Override default Magnific Popup styles */
.mfp-container {
    padding: 0;
}

.mfp-content {
    vertical-align: middle;
}

.mfp-close {
    display: none; /* Hide default close button */
}

.mfp-bg {
    opacity: 0.7;
}



.wdt{
    padding: 0px 10px 0px 10px;
}

.clickable-text {
    color: blue;             /* initial color */
    font-weight: normal;     /* normal weight */
    font-size: inherit;      /* don’t change size */
    cursor: pointer;         /* hint that it’s interactive */
    transition: color 0.2s;  /* smooth color fade */
  }

  .clickable-text:hover {
    color: darkblue;         /* darker on hover */
  }

  .clickable-text:active {
    color: darkblue;            /* black only while clicking */
    font-weight: bold; 
  }



#respond_submit_grid{
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 20fr 10fr 10fr;
}


.sr-text-entry{
    border: 1px solid #ccc;
    background-color: #f4f4f4;
    width: 100%;
    margin: 0px 0px 10px 0px;
}

.blue-link{
	color: blue;
    text-decoration: underline;
}



.must-have-warning-title{
    color: #f00;
}

.must-have-warning-text{
    line-height: 1.5;
    font-size: 1.5;
}


.account-info-head-title {
    color: var(--white, #FFF);
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.5px;
}

.nice-email{
    size: 14px !important;
    font-family: 'Roboto Mono', monospace;
    color: #fff;
}


    /* ===== BUTTON TO OPEN THE POPUP ===== */
    #openPopupBtn {
        padding: 0.75rem 1.25rem;
        background-color: #2196f3; /* Nice shade of blue */
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        transition: background-color 0.3s ease;
      }
  
      #openPopupBtn:hover {
        background-color: #176da6;
      }
  
      /* ===== POPUP BACKDROP (OVERLAY) ===== */
      .popup-overlay {
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        z-index: 9999; /* Make sure it’s on top of everything */
      }
  
      /* ===== POPUP CONTENT WRAPPER ===== */
      .popup-content {
        background: #fff; 
        padding: 2rem;
        border-radius: 8px;
        max-width: 400px;
        width: 90%;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        position: relative; 
        text-align: center;
        border-top: 6px solid #2196f3; /* Blue accent line on the top edge */
      }
  
      /* ===== POPUP TITLE ===== */
      .popup-content h2 {
        margin-bottom: 1rem;
        color: #2196f3;
      }
  
      /* ===== POPUP MESSAGE ===== */
      .popup-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
      }
  
      /* ===== CLOSE BUTTON ===== */
      .closePopupBtn {
        background-color: #2196f3; 
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
        transition: background-color 0.3s ease;
      }
  
      .closePopupBtn:hover {
        background-color: #176da6;
      }
  
      /* (Optional) Add a slight "X" button in corner if you want an extra close icon:
      .close-icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.2rem;
        color: #666;
      }
  
      .close-icon:hover {
        color: #000;
      }
      */





a {
    /* color: blue; */
    /* text-decoration: underline; */
}



.sign-in-buttons{
    width: 100%;
}

.default-choice {
    border: 3px solid #333; /* 1px thick, solid line with dark gray color */
  }
  


/* Base styles for small viewports (< 600px): stack buttons vertically */
.button-container button {
    display: block;
    width: 100%;
    box-sizing: border-box; /* ensures padding/border doesn't affect width */
  }
  
  /* For viewports 600px and wider: arrange buttons side by side */
  @media (min-width: 600px) {
    .button-container {
      display: flex;
    }
    .button-container button {
      width: 100%;    /* each button takes up half of the container */
    }
  }
  



#webcast_quick_grid{
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 10fr 10fr;
}

.fs-vbs-link{
    font-size: 14px;
}



#attempts_to_add_auth_to_legacy{
    color: #555;
  }
  
  

  .section-heading{
    font-size: 18px;
    font-weight: 600;
    padding: 0px 0px 20px 0px;
  }
  
  .page-heading{
    grid-column: 1 / 3;
    text-align: center;
    font-size: 20px;
    color: #555;
  
    font-weight: 700;
    padding: 0px 0px 20px 0px;
  }
  
  
  
  .button-back-to-initial{
    margin: 10px 0;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  




  


.logo-container {
    /* Make sure the container has a defined height and width, or use relative positioning */
    position: relative;
  }
  
  .logo-img2 {
    /* Position the span absolutely within the relative container */
    position: absolute;
    /* Place it in the top right corner */
    top: 0;
    right: 0;
    /* Optional: Add some padding if you don't want it to touch the edges */
    padding: 10px;
    /* Example dimensions for the logo, adjust as needed */
    width: 50px; /* or whatever width you desire */
    height: 50px; /* or whatever height you desire */
    /* Display it as a block to make width and height effective if it's an empty span */
    display: block;
    /* Example background color or image */
    background-color: #ff0000; /* Red for demonstration, replace with your logo image or background */
  }
  
  .background-image {
    /* Ensure the div takes up the full viewport size if needed */
    height: 85vh; /* or adjust to fit content */
    width: 100%; /* or 100vw for viewport width */
    /* Set the background image */
    background-image: url('../images/grok_sailboat_4.jpg');
    /* Make the background cover the whole div without repeating */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Optional: Add some padding if the content should not touch the edges */
    padding: 20px;
    /* Optional: Ensure the background stays fixed on scroll */
    background-attachment: fixed; /* Use with caution, can affect performance */
  }
  
  
  .fixed-reset {
    position: fixed;              /* Fixes the element relative to the viewport */
    bottom: 13px;                 /* 20px from the bottom */
    right: 70px;                  /* 20px from the right */
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    color: #000;                 /* Text color */
    padding: 2px 3px;           /* Padding around the text */
    border-radius: 3px;           /* Rounded corners */
    font-size: 14px;              /* Font size */
    cursor: pointer;              /* Cursor changes to pointer on hover */
    z-index: 1000;                /* Ensures it stays above other elements */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Optional: Add box-shadow for better visibility */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .fixed-reset:hover {
    background-color: rgba(222, 222, 222, 0.9); /* Darker background on hover */
  }
  
  
.l-s-note{
    font-size: 13px;
    color: #555;
  }
  
  .l-s-button{
    background-color: #eee;
    padding: 10px 10px 10px 10px;
  }
  
  .l-s-button:hover{
    font-weight: 600;
  }
  
  #login_or_signup_grid{
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 10fr 10fr;
  }
  

  
  .block-area{
    border: 1px solid rgb(221, 221, 221);
    padding: 6px 6px 6px 6px;
    margin: 0px 0px 10px 0px;
  }
  
  .prev-text{
    font-size: 14px;
    color: #555;
    padding: 0px 0px 0px 10px;
    text-align: left;
  }
  
  .auth-text{
    font-size: 14px;
    color: #555;
    padding: 0px 0px 0px 10px;
    text-align: right;
  }
  
  .info-text{
    font-size: 13px;
    margin: 0px 5px 15px 5px;
    color: #555;
  }
  
  #login_container_top{
    max-width: 90% !important; /* Ensures it doesn't exceed viewport width on mobile */
    justify-content: center !important;
  }

  
  .container {

    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
    margin: 0px 0px 10px 0px; /* Centers the container */

    box-sizing: border-box; /* Ensures padding is included in width */
    max-width: 100%; /* Ensures it doesn't exceed viewport width on mobile */
  
  }
  
  .container2 {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
    margin: 0 auto; /* Centers the container */
    box-sizing: border-box; /* Ensures padding is included in width */
    justify-content: center;

    max-width: 80% !important; /* Ensures it doesn't exceed viewport width on mobile */
  }
  
  .container3 {
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #E0E0E0;
  
    margin: 0 auto; /* Centers the container */
    margin: 10px 10px 10px 10px;
    box-sizing: border-box; /* Ensures padding is included in width */
    justify-content: center;
    max-width: 98% !important; /* Ensures it doesn't exceed viewport width on mobile */

  }

  #login_container{
    width: 90%;
    display: flex;
    justify-content: center;
    /* align-items: center; */ /* Uncomment if you want vertical centering of inner content */

    left: 0;
    right: 0;
    min-height: auto; /* Allows it to grow based on content */
   
    overflow: auto; /* Ensures scrollability if content overflows max height */
    overflow-x: hidden; /* Avoids horizontal scrolling */
  
  }

  .sign-in-legacy-note{
    padding: 20px 0px 0px 0px;
  }

  .sign-in-button {
    display: block;
    margin: 0px 0;
    width: 100%;
    padding: 10px 0px 10px 0px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  
  
  .button {
    display: block;
    margin: 10px 0;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  
  
  .button-google {
    background-color: #4285F4;
    color: white;
    align-items: center;
    width: 95%;
    margin: 5px 5px 5px 5px;
  }
  
  .button-google-no-event {
    background-color: #4285F4;
    color: white;
    align-items: center;
    width: 95%;
    margin: 5px 5px 5px 5px;
  }


  .button-password {
    background-color: #FFA500;
    color: white;
    align-items: center;
    width: 95%;
    margin: 5px 5px 5px 5px;
  }

  .button-password-no-event {
    background-color: #FFA500;
    color: white;
    align-items: center;
    width: 95%;
    margin: 5px 5px 5px 5px;
  }

  
  .button-facebook {
    background-color: #3B5998;
    color: white;
  }
  
  
  .button-mwxc-legacy {
    background-color: #402a72;
    color: white;
  }
  
  .button-email2 {
    background-color: #FFA500;
    color: white;
    margin: 20px 0px 10px 10px;
    width: 95%;
  }
  .button-email3 {
    background-color: #FFA500;
    color: white;
  }
  .button-email-reset {
    background-color: #FFA500;
    color: white;
  }
  
  

  }

  .text1 {
    width: 90%;
    margin: 10px 0px 6px 10px;
    padding: 8px;
    font-size: 14px;
  }
  
  
  #buttons_grid{
    display: grid;
    grid-template-columns: 8fr 1fr 6fr;
    grid-gap: 4px;
    gap: 2px; /* Thin line between rows and columns */
    width: 98%;
    margin: 0px 0px 6px 10px;
  }
  
  #buttons_grid2{
    display: grid;
    grid-template-columns: 8fr 1fr 6fr;
    grid-gap: 4px;
    gap: 2px; /* Thin line between rows and columns */
    width: 98%;
    margin: 0px 0px 6px 10px;
  }
  
  
  .h-v-center {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */
  }















.qar {text-align:right;}


.cart-total-text{
    font-size: 18px;
}

.cart-promo-button {
    width: 80px;
    height: 26px;
    font-size: 14px;
    font-weight: 600;
    color: #f00;        
    background-color: #FFF; 
    border: 1px solid #000;  
    padding: 3px 5px;      /* Padding for a small button */
    border-radius: 4px;     /* Rounded edges */
    cursor: pointer;        /* Pointer cursor on hover */
    text-align: center;     /* Center text */
    text-decoration: none;  /* Remove underline if it's a link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.cart-promo-button:hover {
    background-color: #0F0;   /* green background on hover */
    color: #000;            /* White text on hover */
}




.cart-purchase-button {
    width: 80px;
    height: 26px;
    font-weight: 600;
    color: #f00;             /* Red text */
    background-color: #FFF; /* White background */
    border: 1px solid #000;  /* Red border */
    padding: 3px 5px;      /* Padding for a small button */
    border-radius: 4px;     /* Rounded edges */
    cursor: pointer;        /* Pointer cursor on hover */
    text-align: center;     /* Center text */
    text-decoration: none;  /* Remove underline if it's a link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.cart-purchase-button:hover {
    background-color: #66F;   /* Red background on hover */
    color: #FFF;            /* White text on hover */
}



#cart_totals_grid{
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
    grid-gap: 5px;
    font-size: 14px;
}

.cart-empty-button {
    width: 80px;
    height: 26px;
    font-weight: 600;
    color: red;             /* Red text */
    background-color: white; /* White background */
    border: 1px solid red;  /* Red border */
    padding: 3px 5px;      /* Padding for a small button */
    border-radius: 4px;     /* Rounded edges */
    cursor: pointer;        /* Pointer cursor on hover */
    text-align: center;     /* Center text */
    text-decoration: none;  /* Remove underline if it's a link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.cart-empty-button:hover {
    background-color: red;   /* Red background on hover */
    color: white;            /* White text on hover */
}



.cart-item-remove-button {
    display: inline-block;
    font-size: 11px;         /* Font size */
    color: red;             /* Red text */
    background-color: white; /* White background */
    border: 1px solid red;  /* Red border */
    padding: 3px 5px;      /* Padding for a small button */
    border-radius: 4px;     /* Rounded edges */
    cursor: pointer;        /* Pointer cursor on hover */
    text-align: center;     /* Center text */
    text-decoration: none;  /* Remove underline if it's a link */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.cart-item-remove-button:hover {
    background-color: red;   /* Red background on hover */
    color: white;            /* White text on hover */
}

.fs-18{
    font-size: 18px;
}

.pad-03{
    padding: 10px;
    text-align: center;
    position: relative;
}


.threads-grid{
	display: grid;
    grid-template-columns: 160px auto;
    width: 100%;
}

.ta-sr-enrty{
    font-family: Arial, sans-serif; /* Change font type */
    font-size: 15px;               /* Change font size */
    width: 100%;                   /* Optional: full width */
    padding: 10px;                 /* Optional: padding inside textarea */
    border: 1px solid #ccc;        /* Optional: border style */
    box-sizing: border-box;        /* Optional: includes padding in the element's total width and height */
    overflow: hidden; /* Hide scrollbars */
    resize: none; /* Disable manual resizing   both; */
}

.two-cols-grid{
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    grid-gap: 5px;
}


#pick_regions_two_btn_grid{
    display: grid;
    grid-template-columns: auto auto;
    width: 100%;
    grid-gap: 5px;
    font-size: 13px;
}


#append_area{
    position: relative;
}

.auto-resizing {
    display: block;
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    resize: none; /* Prevent manual resizing */
    padding: 10px;
    box-sizing: border-box;
}

.textarea-fill{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 10px; /* Optional: to add some padding inside the textarea */
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
    resize: none; /* Optional: to prevent resizing */
}


.unselectable {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;          /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
  }


.margin-top-conv{
    margin: 10px 0px 0px 0px;
}

.append-close-grid{
    display: grid;
    grid-template-columns: 10fr 3fr 7fr 3fr;
    width: 100%;
    grid-gap: 0px;
    font-size: 13px;
    font-weight: 500;
}


.btn-blue-tiny {
    border-radius: 3px;
    border: 0.5px solid var(--grey-400, #BDBDBD);
    background: var(--primary-blue-gradient, linear-gradient(180deg, #006FE2 0%, #0563C5 100%));
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.20);
    padding: 1px;
    line-height: 13px;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blue-color{
    color: #00F;
}


.span-123{
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
}


.no-wrap {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Optional: Add ellipsis for overflow */
}


/* Ensure the container is responsive */
.video-container {
    position: relative;
    width: 100%; /* Full width of parent */
    max-width: 400px;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden; /* Hide anything outside the container */
    background: #000; /* Optional: background color for container */
}


.video-header-grid{
    display: grid;
    grid-template-columns: 100px auto 100px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 10px 20px 10px;
}

/* Style the video to fit the container */
#videoPlayer {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Cover the entire container */
    z-index: 1001;
}

#below_logo_header_video{
    margin-top: 20px;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

#below_logo_header{
    margin-top: 20px;
    bottom: 0;
    width: 100%;
    z-index: 999;
}


#everything_functional {
    /* make sure it sits below any floated or positioned header */
    clear: both;

    margin: 15px 22px 15px 22px;
  }



/* Optional: style the close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 3px;
    font-size: 14px;
}




.top-right-span {
    position: absolute; /* Position the span absolutely within the parent div */
    top: 0;
    right: 0;
    background-color: #ffcc00; /* Optional: for visibility */
    padding: 5px; /* Optional: for spacing */
}

.highlight-red{
    color: #f00;
    font-weight: 600;
}


#message_board{
    min-height: 700px;
}

.regular-title{
    font-size: 21px;
}

.ahref{
    text-decoration: underline;
    color: blue;
    display: inline-block;
}

.radio-container {
    display: flex;
    align-items: center;
  }

.gitem {
    background-color: #f2f2f2;
    padding: 3px;
    text-align: center;
    position: relative;
  }


.btn-gray2 {
    border-radius: 3px;
    border: 0.5px solid var(--grey-400, #BDBDBD);
    background: linear-gradient(180deg, #FAFAFA 49.48%, #F4F4F4 100%);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.20);
    padding: 8px;
    color: var(--grey-800, #424242);
    font-size: 13px;
    font-weight: 500;
    line-height: 12px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}


.btn-01{
    padding: 5px 9px;
    margin: 10px 12px 0px 2px;
    vertical-align: middle;
    display: flex;
    align-items: center; /* Center vertically */
}

#list_journeys_grid{
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
    grid-gap: 5px;
    font-size: 16px;
    font-weight: 500;
}

.title-wide-to-btn {
    font-size: 16px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 1px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#row_title_then_button{
    display: grid;
    grid-template-columns: 10fr 10fr;
    width: 100%;
    grid-gap: 12px;
    font-size: 21px;
    font-weight: 600;
    line-height: 14px;
}

.row-height{
    height: 20px;
}

.margin-top-20{
    margin-top: 20px;
}

.margin-bottom-20{
    margin-bottom: 20px;
}

.margin-top-7{
    margin-top: 7px;
}

.larger-image {
    width: 30px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}


.link-like{
    font-size: 15px;
}
.link-like:hover {
    color: #0000ff;
}



#cf_purchase_btn{
    margin-top: 10px;
    width: 100%;
}

#cf_purchase_btn_grid{
    display: grid;
    grid-template-columns: 10fr 10fr 10fr;
    width: 100%;
    grid-gap: 12px;
    margin-top: 20px;
}





.thin-white-btn{
    border-radius: 8px;
    border: 1.201px solid var(--grey-300, #E0E0E0);
    background: var(--white, #FFF);
    padding: 16px;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
}




.cart-wrapper{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 15px 0px 0px 0px;
    overflow: hidden; /* Ensures rounded corners don't get clipped */
}




#webcasts_grid{
    display: grid;
    grid-template-columns: 10fr 10fr 10fr 10fr;
    grid-gap: 0px;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 6px 6px 6px 6px;
}

#cards_selection_grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default to 2 columns */
    gap: 10px; /* Space between grid items */
    grid-gap: 5px;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 6px 6px 6px 6px;
}

/* For medium-sized screens, use 3 columns */
@media (min-width: 700px) {
    #cards_selection_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For larger screens, use 4 columns */
@media (min-width: 1000px) {
    #cards_selection_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



.credit-card{
    width: 100%;          /* Width of the credit card */
    height: 90px;         /* Height of the credit card, making it short and squat */
    background-color: #ffffff; /* A dark background color typical for credit cards */
    border-radius: 15px;   /* Rounded corners */
    box-shadow: 2px 4px 8px 3px rgba(0,0,0,0.2); /* A subtle shadow for a 3D effect */
    color: white;          /* Text color */
    padding: 20px;         /* Padding inside the card */
    font-family: Arial, sans-serif; /* Font styling */
    box-sizing: border-box; /* Includes padding and border in the width and height */
}

/* Additional styling for the card elements can be added here */
.credit-card .card-number {
    font-size: 20px;      /* Larger font size for visibility */
    margin-bottom: 15px;  /* Spacing between elements */
}

.credit-card .card-holder {
    font-size: 16px;      /* Smaller font size for the card holder's name */
}


.remove-button {
    background-color: #ff4d4d; /* Red background color */
    color: white; /* White text color */
    border: none; /* No border */
    padding: 10px 20px; /* Padding around the text */
    font-size: 16px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    outline: none; /* Removes the outline */
}

.remove-button:hover {
    background-color: #ff3333; /* Slightly darker red on hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}



#cart_grid{
    display: grid;
    grid-template-columns: 300px 100px;
    grid-gap: 0px;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    padding: 6px 6px 6px 6px;
}

.service-information-modal{
    width: 80%;  /* Set the desired width */
    max-width: 700px; /* Maximum width */
    margin: auto;  /* Center the modal horizontally */
    position: relative; /* Relative positioning */
    top: 100px;     /* Align the top of the modal to the middle of the screen */
    transform: translateY(-50%); /* Center the modal vertically */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: add shadow for better visibility */
}

.modal-head{
    padding: 12px 12px;
}

.modal-content {
    height: 600px; /* Fixed height */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 15px; /* Inner padding */
}


.product-title{
    padding: 12px 0px 0px 0px;
    font-size: 22px;
    font-weight: 600;
}

.grid-item {
    background-color: #f0f0f0; /* Just for visibility */
    padding: 4px;
    position: relative; /* Needed for the pseudo-element positioning */
}


.subscription-grid{
    display: grid;
    grid-gap: 3px;
    grid-template-columns: 10fr 10fr 10fr;
    padding: 3px 3px 3px 3px;   
}



.purchase-grid{
    display: grid;
    grid-gap: 3px;
    grid-template-columns: minmax(70px, 500px) minmax(25px, 50px) minmax(100px, 100px) minmax(130px, 130px);
    padding: 3px 3px 3px 3px;   
    width: 100%;
}

.purchase-grid-combo{
    display: grid;
    grid-gap: 3px;
    grid-template-columns: minmax(70px, 100px) minmax(90px, 120px) minmax(65px, 120px) minmax(75px, 100px) minmax(100px, 100px) minmax(130px, 130px);
    padding: 3px 3px 3px 3px;   
}


.message-from-server{
    color: blue;
    padding: 0px 0px 0px 12px;
}


.email-send-grid{
    display: grid;
    grid-template-columns: 25fr 9fr 10fr 6fr;
    grid-gap: 0px;
    font-size: 18px;
    font-weight: 400;
    width: 100%;
}



.main-text{
    color: #fff;
    padding: 16px 16px;
    font-weight: 500;
    font-size: 16px;
    display: flex;
}

.grid-for-center{
    display: grid;
    place-items: center;     /* centers both horizontally and vertically */
    height: 50px;   
}

.juh{
    margin: 50px 0px 0px 0px !important;
}

.broadcast-message{
    display: grid;
    color: #fff;
    text-align: center;
    font-size: 24px; 
    width: 100%;
}

.broadcast-message-details{
    display: grid;
    color: #fff;
    text-align: center;
    font-size: 18px; 
}


.bm-title-grid{
    display: grid;
    grid-template-columns: 10fr 80fr 10fr;
    grid-gap: 5px;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
}

.bm-title{
    font-size: 24px; 
    padding: 0px 30px 0px 30px;
}
.bm-details{
    font-size: 16px; 
    padding: 0px 60px 20px 60px;
}

.font-light{
  color: #777;
} 

.font-bold{
    font-weight: bold;
} 

.check-size{
    font-size: 20px !important;
}


.icon-check::before {
    content: "\1F5F9"; /* Unicode character for 🗹 */
    font-size: 20px;   /* Optional: Set the size of the icon */
    margin-right: 0px 5px; /* Optional: Add some spacing if needed */
}

.icon-uncheck::before {
    content: "\2610"; /* Unicode character for  */
    font-size: 20px;   /* Optional: Set the size of the icon */
    margin-right: 0px 5px; /* Optional: Add some spacing if needed */
}


.selection-buttons{
    background-color: #dddcdc; /* Blue background */
    color: #383838;            /* White text color */
    padding: 8px 12px;         /* Padding */
    margin: 3px 6px;         /* Margin */
    border: none;              /* No border */
    border-radius: 4px;       /* Rounded corners */
    font-size: 14px;           /* Font size */
    cursor: pointer;           /* Hand cursor on hover */
    transition: 0.3s;          /* Smooth transition effects */
}

.selection-buttons-selected{
    background-color: #b6b6b6; /* Blue background */
    color: #000000;            /* White text color */
    font-weight: 600;
    padding: 8px 16px;         /* Padding */
    border: none;              /* No border */
    border-radius: 4px;       /* Rounded corners */
    font-size: 14px;           /* Font size */
    cursor: pointer;           /* Hand cursor on hover */
    transition: 0.3s;          /* Smooth transition effects */
}


.turn-off-a {
    pointer-events: none; /* Prevents clicking */
    color: grey;
    cursor: default;
}

.turn-off-btn {
    pointer-events: none; /* Prevents clicking */
    color: grey;
    cursor: default;
}

.text-area {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.lh-for-grid-gap{
    line-height: 7px;
}


.span-2-columns {
  grid-column: span 2;
}


.span-c-1-2q{
    grid-column: 1/3;
}


.span-c-1-2{
    grid-column: 1/3;
}

.span-c-1-3{
    grid-column: 1/4;
}

.span-c-1-4{
    grid-column: 1/5;
}

.span-c-1-5{
    grid-column: 1/6;
}

.span-c-1-6{
    grid-column: 1/7;
}


.span-c-3-4{
    grid-column: 3/5;
}

.span-c-5-6{
    grid-column: 5/7;
}


.add-to-cart-button-across-two-rows {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }


.previous-bought{
    font-weight: 700;
    background-color: #e0e0e0;
}

.sub-retires{
    font-weight: 400;
    font-size: 14px;
    background-color: #e0e0e0;
}

.link-style {
    color: blue;           /* Hyperlink blue color */
    text-decoration: underline; /* Underline like a hyperlink */
    cursor: pointer;       /* Pointer cursor on hover */
}

/* Optional: Change the color on hover to mimic a real link */
.link-style-div:hover {
    color: darkblue;       /* Darker color on hover */
}


.v-centered-item {
    display: flex;
    align-items: center; /* Center vertically */
}

.vc-centered-item {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}



.vl-centered-item {
    display: flex;
    justify-content: left; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.vl-centered-item2 {
    display: flex;
    justify-content: left; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 0px 0px 0px 15px;
}

.vl-centered-item3 {

    text-align: right;
    padding: 0px 6px 0px 0px;
}

.hr-text {
    display: flex;
    align-items: center;
    text-align: center;
}

.hr-text:before,
.hr-text:after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000; /* Line color and thickness */
}

.hr-text-content {
    padding: 0 10px; /* Space around the text */
}

.wide-button-margin{
    margin: 10px 22px;
}

.notice2{
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.mar-top-5{
    margin: 5px 0px 0px 0px;
}

.notice-active{
    color: black;
    background-color: lightgreen;
    border-radius: 32px;
    padding: 6px 12px;
    margin: 0px 10px 0px 0px;
    display: inline;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1px;
}

.notice-never{
    color: black;
    background-color: gray;
    border-radius: 32px;
    padding: 6px 12px;
    display: inline;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1px;
    margin-left: 10px;
}

.notice-retired{
    color: white;
    background-color: #f99;
    border-radius: 32px;
    padding: 6px 12px;
    display: inline;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1px;
    margin-left: 10px;
}

.notice-soon-retired{
    color: black;
    background-color: yellow;
    border-radius: 32px;
    padding: 6px 12px;
    display: inline;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1px;
    margin-left: 10px;
}

.top-padding-15{
    padding: 15px 0px 0px 0px;
}


.w-100-pc{
    width: 100%;
}

.slightly-bolder{
    font-weight: 550;
    font-size: calc(100% + 2px);
}

.hidden {
    display: none;
}

.hiddenI {
    display: none !important;
}


.hide {
    visibility: hidden; /* Makes the div invisible but still taking up space */
    pointer-events: none; /* The div won't capture mouse events */
}

.unclickable {
    pointer-events: none; 
    cursor: default; /* So it doesn't look clickable */
    opacity: 0.6;   /* Optional, to visually indicate "disabled" */
  }


.not-bold {
    font-weight: normal;
}


.invisible-div {
    visibility: hidden; /* Makes the div invisible but still taking up space */
    pointer-events: none; /* The div won't capture mouse events */
}

  
.b {
    font-weight: bold;
}

.ar {text-align:right;}
.al {text-align:left;}
.ac {text-align:center;}