/*.sheets-output-summary-container p {
text-align:left;
font-size:1em;
margin-top: 0em; 
margin-bottom: 0em;
}

#sheets-output-details-container p
{
text-align:left;
font-size:1em;
margin-bottom: 10px;
}*/

.mbrupev-rsvp-request {
    color:var(--prc-color-pri);
    font-weight:600;
    
    
}


/* Custom Classes with -mbu */
.h1-mbu {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.h2-mbu {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.h3-mbu {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.h4-mbu {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.h5-mbu {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.h6-mbu {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.p-mbu {
    font-size: var(--font-size-p);
    font-weight: var(--font-weight-normal);
    color: var(--text-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: block;
}

.tabletitle-mbu {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    font-family: var(--prc-font-family);
    margin: var(--margin-default);
    display: inline-block;
}


.a-mbu {
    color: var(--link-color);
    font-family: var(--prc-font-family);
    text-decoration: none;
}

    .a-mbu:hover {
        color: var(--link-hover-color);
        text-decoration: underline;
    }

/* List Styles */
.ul-mbu {
    display: block;
    list-style-type: disc;
    margin: var(--margin-default);
    padding-left: 40px;
    font-family: var(--prc-font-family);
}

.ol-mbu {
    display: block;
    list-style-type: decimal;
    margin: var(--margin-default);
    padding-left: 40px;
    font-family: var(--prc-font-family);
}

.li-mbu {
    display: list-item;
    font-family: var(--prc-font-family);
}

.strong-mbu {
    font-weight: var(--font-weight-bold);
    font-family: var(--prc-font-family);
}

.em-mbu {
    font-style: italic;
    font-family: var(--prc-font-family);
}

.button-mbu {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--prc-font-family);
}


.signups-container {
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.signup-header {
    background: linear-gradient( to bottom, white 0%, var(--prc-color-pri) 10%, var(--prc-color-pri) 90%, white 100% );
    color: white;
    padding: 8px;
    cursor: pointer;
}

.signup-content {
    display: block;
    background-color: #fff;
}

.validation-error {
    border: 2px solid red !important;
    background-color: #ffeeee !important;
}

#form-error-container {
    display: none;
}



.apptlength-container input {
    width: 20%; /* Ensures consistent width */
}

.apptlength-container label {
    width: 70%; /* Ensures consistent width */
}

a:focus {
    outline: none;
}


/* Prevent icon from intercepting clicks - clicks will go to button instead */
/*[id^="prc-toggle-event-editor-btn"] i {
    pointer-events: none;
}*/

.prc-button-clicked {
    opacity: 0.6;
    transform: scale(0.98); /* Slight press effect */
    transition: opacity 0.2s, transform 0.1s;
}
.center-table {
    border-collapse: collapse; /* Ensures borders collapse into one */
    width: 100%; /* You can adjust the width as needed */
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0;
    border:none;
    outline:none;
}

    .center-table, .center-table th {
        border: 1px solid #ddd; /* Light grey fine border */
        font-size: 16px;
        padding: 0;
    }

        .center-table td {
            border: 1px solid #ddd; /* Light grey fine border */
            font-size: 16px;
            padding: 0 4px;
            font-weight:500;
        }

        .center-table th {
            padding: 0px 4px; /* Adjust padding as needed */
            font-size: 16px;
            font-weight: 600;
        }



.prc-signups-toggle-container {
    max-width: 700px; /* Max width for the card */
    width: 100%; /* Ensure it is responsive */
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: flex-end; /* Ensure content stretches across the card */
    justify-content: end;
    background-color: transparent;
}

/* Container for the second button and its tooltip */
/*.prc-signups-toggle-container {
    display: flex;*/ /* Keeps button and tooltip in a row */
    /*justify-content: flex-end;*/ /* Aligns the button and tooltip to the right */
    /*align-items: center;*/ /* Vertically centers the button and tooltip */
/*}*/



.prc-signups-toggle-container button {
  
    background:none;
}
   

.prc-esm-toggle-container {
    max-width: 700px; /* Max width for the card */
    width: 100%; /* Ensure it is responsive */
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items:flex-end; /* Ensure content stretches across the card */
    justify-content:end;
  
}


#prc-toggle-event-manager-btn-tooltip,
#prc-signups-toggle-btn-tooltip,
#add-new-eventgroup-btn-tooltip {
    position: absolute; /* Position the tooltip absolutely relative to the container */
    bottom: 60px; /* Adjust to position it above the button */
    /*right: 0; /* Align right */
    background-color: var(--prc-color-pri); /* Dark background for the tooltip */
    color: #fff; /* White text */
    padding: 5px 10px; /* Add some padding */
    border-radius: 5px; /* Optional: rounded corners */
    font-size: 16px; /* Adjust text size */
    font-weight: 600;
    white-space: nowrap; /* Prevent text from wrapping */
    visibility: hidden; /* Hide tooltip by default */
    opacity: 0; /* Make it invisible initially */
    transition: opacity 0.3s ease, visibility 0.3s ease 0.3s; /* Delay hiding */
    z-index: 10; /* Ensure it appears above other elements */
    pointer-events: none; /* Prevent the tooltip from interfering with hover */
}

/*[id^=prc-signups-list-container],
.signups-container {
    width: 100% !important;
    max-width: 100% !important;
}
*/
#prc-toggle-event-manager-btn-tooltip,
#prc-signups-toggle-btn-tooltip
 {
    right: 0;
}

#add-new-eventgroup-btn-tooltip {
    left: 0;
    bottom: 70px; /* Adjust to provide more space above the button */
}

/* Show the tooltip on hover */
.add-event-button-container {
    position: relative; /* Position tooltips relative to this container */
}

    .prc-esm-toggle-container button:hover + #prc-toggle-event-manager-btn-tooltip,
    .prc-signups-toggle-container button:hover + #prc-signups-toggle-btn-tooltip,
    .add-event-button-container button:hover + #add-new-eventgroup-btn-tooltip {
        visibility: visible;
        opacity: 1;
    }
.prcev-form {
    font-size: 20px;
    font-weight:500;
    display: flex;                /* Make the parent a flex container */
    flex-direction : column ;
    justify-content: center;      /* Center child elements horizontally */
    align-items: center;          /* Center child elements vertically */
    width: 100%;                  /* Make sure it takes full width */
}

    .prcev-form .event-header {
        display: flex;
        flex-direction: column
    }

        .prcev-form .event-header p {
            margin: 2px 0;
        }

.form-group .btn-warning {
    background-color: var(--prc-color-maybe);
    color:white;
}

.form-group .btn-info {
    background-color: #0094dd;
    color: white;
}


.form-group .btn-success {
    background-color: var(--prc-color-yes);
    color: white; /* Ensure text is readable */
}

.form-group .btn-danger {
    background-color: var(--prc-color-no);
    color: white; /* Ensure text is readable */
}
    .prcev-form .signup-summary, .eventgroup-card .signup-summary, #prc-eventsignups-eventTable .oldsignup-summary, .form-group .signup-summary{
        cursor: pointer; /* Indicate clickable */
        background-color: var(--prc-editor-back); /* Subtle base color */
        color: white; /* Black text for better contrast */
        padding: 10px 15px; /* Balanced padding */
        border-radius: 6px; /* Slightly rounded corners */
        border: 1px solid lightgray; /*var(--prc-color-maybe); /* Matching border */
        display: flex; /* Align icon and text */
        align-items: center;
        gap: 8px; /* Space between icon and text */
        transition: background-color 0.3s, transform 0.2s, color 0.3s;
    }

        .prcev-form .signup-summary:hover,
        .eventgroup-card .signup-summary:hover,
        #prc-eventsignups-eventTable .oldsignup-summary:hover,
        .form-group .signup-summary:hover {
            background-color: var(--prc-editor-back); /* highlight on hover */
            border-color: var(--prc-editor-back); /* Border matches hover state */
            color: white; /* White text on hover for contrast */
            transform: translateY(-2px); /* Slight lift effect */
        }



        [id^=prc-signup-list-container] .signup-summary h4,
        [id^=signupslisttable] .signup-summary h4,
        details .signup-summary h4,
        .prcev-form .signup-summary h4,
        .eventgroup-card .center-table .signup-summary h4,
        #prc-eventsignups-eventTable oldsignup-summary h4 {
            margin: 0;  /*Remove default margin */
           font-size: 20px; /* Slightly smaller text */
            font-weight: 500;  /*Medium font weight */
        }
        .prcev-form .signup-summary thead,
        .eventgroup-card .signup-summary thead,
        #prc-eventsignups-eventTable .oldsignup-summary thead {
            background-color: transparent!important; 
            color:black!important;
            font-size: 1em; /* Slightly smaller text */
            font-weight: 600; /* Medium font weight */
        }

        .prcev-form .signup-summary {
            align-items:center;
        }

        .prcev-form .signup-summary::before,
        .eventgroup-card .signup-summary::before,
        [id^='signupslisttable'] .signup-summary::before,
        #prc-eventsignups-eventTable .oldsignup-summary::before {
            content: '\1F4CB'; /* Unicode clipboard icon */
            font-size: 1.2em; /* Icon size */
            color: var(--prc-editor-back); /* Match theme */
            display:inline-block;
            margin-right:0.5em;
        }

    .prcev-form details summary,
    .eventgroup-card details summary,
    #prc-eventsignups-eventTable olddetails summary,
    .form-group .details summary{
        display: block; /* Full width clickable area */
        list-style: none; /* Remove default marker */
        cursor: pointer;
        outline: none;
        font-style: italic; /* Subtle italic for hinting interactivity */
        color: lightgray; /* var(--prc-color-maybe); /* Align color with the base */
    }

.signup-summary h4 {
    display: inline; /* Ensures the text stays inline with the icon */
    font-style: italic;
    margin: 0; /* Removes extra margins */
}

[id^="mbrupev_signups-summary-text"] {
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth animation */
}

    [id^="mbrupev_signups-summary-text"]:hover {
        transform: scale(1.02);
    }

#prc-eventsignups-eventTable .group-header {
    display:flex;
    padding: 5px 10px;
    font-weight: 500;
    font-size: 1.2em;
    width:80%;
    flex-wrap: wrap;
}

    #prc-eventsignups-eventTable .group-header label {
     
        padding: 5px 10px;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        max-width: 100%; /* Ensure it doesn’t exceed container width */
        word-wrap: break-word; /* Allow long words to break and wrap */
        white-space: normal; /* Ensure the text wraps instead of staying on a single line */
    }

#prc-eventsHeading {
    color:var(--prc-color-pri);
    font-weight:700;
    font-size:1.2em;
}


#mbrupev_SPA {
    max-width: 700px;
    width: 100%;
    margin: 0 auto; /* Horizontally center */
    padding: 0;
    display:block;
}
#prc-shortcode-atts {
    max-width: 700px;
    width: 100%;
    margin: 0 auto ; /* Horizontally center */
    padding: 0;
    display: block;
 /*   flex-direction:column;
    justify-content:center;*/
}

.prcev-form .card-wrapper
 {
    max-width: 700px;
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontally center the cards */
    flex-direction: column; /* Stack the cards vertically */
    align-items: center; /* Align items in the center */
    padding: 0; /* Add some padding */
    margin: auto auto;
}
.prcev-form     .form-container p {
        margin-bottom:5px;
    }

    /* Card container */
    .prcev-form .eventgroup-card {
        max-width: 700px; /* Max width for the card */
        width: 100%; /* Ensure it is responsive */
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        padding: 5px;
        display: flex;
        border:2px solid var(--prc-color-pri);
        border-radius:10px;
        flex-direction: column;
        align-items: stretch; /* Ensure content stretches across the card */
        position:relative;
    }

@media (max-width: 768px) {
    .prcev-form .eventgroup-card {
        border: 0;
        border: none;
        border-bottom: 2px solid var(--prc-color-pri);
           border-top: 2px solid var(--prc-color-pri);
           margin-bottom:0;
        border-radius: 10px;
        box-shadow: none;
        background-color: white;
    }
}

.date-time-details {
    display: block;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    /*height: 100vh;*/ /* Optional: ensures full height */
}


@media screen and (max-width: 768px) {
    .event-signups-summary-container {
        width: 98%!important; /* Ensure it takes up most of the width */
      /*  min-width: 98%!important;*/ /* Ensure it's not smaller than 98% */
        max-width:98%;
        padding: 2px 2px; /* Reduce padding */
        margin: 0!important; /* Remove any margin for narrow screens */
        box-sizing: border-box; /* Prevents padding from increasing the width */
    }


}

.event-signups-summary-container {
    width: 75%; /* Ensure it is responsive */
   /* min-width: 75%;*/
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto 2px auto; /* Centers horizontally */
    /*margin-left: 20px;
    margin-bottom: 2px;*/
    padding: 5px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    cursor: default;
    box-sizing: border-box; /* Make sure padding doesn't increase the container's width */
}

    /* Flex container for form elements */
    .prcev-form .form-container {
      /*  display: flex;  */
        margin-bottom: 5px;
        flex-wrap: wrap; /* Allow wrapping to avoid overflow */
        max-width:100%;
    }

    /* Left and right sections within the card */
    .prcev-form .form-left {
        width: 60%; /* Adjust to fit within the card */
        max-width: 60%;
        box-sizing: border-box; /* Include padding and border in width */
    }

    .prcev-form .form-right {
        width: 38%; /* Adjust to fit within the card */
        max-width: 38%;
        box-sizing: border-box; /* Include padding and border in width */
    }

    .prcev-form .form-left {
        text-align: left;
    }

    .prcev-form .form-right {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Vertically center the content */
        align-items: center; /* Align items to the center */
        text-align: center;
    }

    /* Centering the outlineme div and chips container */
    .prcev-form .form-center {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content horizontally */
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    /* Style for the outlineme div */
    .prcev-form .outlineme {
        padding: 5px;
        margin-bottom: 10px;
        width: 80%; /* Adjust width as needed */
        text-align: center;
        border-radius: 5px; /* Optional: rounded corners */
        background: #fff; /* Ensure the background is visible */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }


    .prcev-form .chips-container {
        display: flex; /* Use flexbox to layout chips */
        flex-direction: column;
        justify-content: center; /* Center the chips */
        margin: 5px 0; /* Add margin for spacing */
        align-items: center;
    }

        .prcev-form .chips-container .options {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center
        }
    /* Comments section styles */
    .prcev-form .comments-section {
        width: 100%; /* Full width */
        margin-top: 10px; /* Space above the comments section */
    }

.deleted-user-display {
    color: #999 !important;
    font-style: italic;
    opacity: 0.8;
}

/* Apply to table cells containing deleted users */
td.deleted-user,
.user-name.deleted-user,
.placement-user.deleted-user {
    color: #999 !important;
    font-style: italic;
}

td.deleted-user
 {
    color: #dcdcdc !important;
    font-style: italic;
}


/* Make sure the gray styling is prominent */
.signups-table .deleted-user,
.placement-grid .deleted-user {
    color: white !important;
}
    /* =============================================================================
   CHIP COMPONENT STYLES
   Base styles for chip components used across different contexts
   ============================================================================= */
    /* -----------------------------------------------------------------------------
   Base Chip Styles & Color Variants
   ----------------------------------------------------------------------------- */
    /* Common base styles for all chips */
    .chip-base, .eventgroup-card .priorresponsechip, .prcev-form .chip {
    display: inline-block;
    padding: 10px 5px;
    margin: 5px 5px;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
    width: auto;
    min-width: 90px;
    max-width: 90px;
    justify-content: center;
}

    /* Interactive chip hover effects */
    .prcev-form .chip:hover {
        transform: scale(1.05);
        font-weight: 700;
    }

/* Disabled chip styles */
.prcev-form .chip-disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Static chip styles (non-interactive, for previously selected options) */
.prcev-form .chip-static {
    display: inline-block;
    padding: 5px 5px;
    margin: 0 0;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    width: auto;
    pointer-events: none;
    opacity: 0.95;
    cursor: default;
    transform: none;
}

    .prcev-form .chip-static:hover {
        transform: none;
        font-weight: 700;
    }

/* -----------------------------------------------------------------------------
   Flex Layout for Chips with Icons
   ----------------------------------------------------------------------------- */

/* Default styles - show icons and text */
.eventgroup-card .priorresponsechip.green,
.eventgroup-card .priorresponsechip.red,
.eventgroup-card .priorresponsechip.yellow,
.eventgroup-card .priorresponsechip.blue,
.prcev-form .chip.green,
.prcev-form .chip.red,
.prcev-form .chip.yellow,
.prcev-form .chip.blue {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 25px;
    margin: 5px;
    font-size: 16px;
}
/* Icon spacing for all colored chips */
.eventgroup-card .priorresponsechip i,
.prcev-form .chip i,
.prcev-form .chip-static i {
    margin-right: 8px;
}
/* -----------------------------------------------------------------------------
   Color Variants
   ----------------------------------------------------------------------------- */
/* Green chips */
.eventgroup-card .priorresponsechip.green,
.prcev-form .chip.green,
.prcev-form .chip-static.green {
    background-color: var(--prc-color-yes);
    color: white;
}
/* Red chips */
.eventgroup-card .priorresponsechip.red,
.prcev-form .chip.red,
.prcev-form .chip-static.red {
    background-color: var(--prc-color-no);
    color: white;
}
/* Yellow chips */
.eventgroup-card .priorresponsechip.yellow,
.prcev-form .chip.yellow,
.prcev-form .chip-static.yellow {
    background-color: var(--prc-color-maybe);
    color: white;
}
/* Blue chips */
.eventgroup-card .priorresponsechip.blue,
.prcev-form .chip.blue,
.prcev-form .chip-static.blue {
    background-color: var(--prc-editor-back);
    color: white;
    width: auto; /* Allow wider width for longer text */
    min-width: 160px; /* Increased to prevent wrapping of "Please Respond" */
    white-space: nowrap; /* Prevent text wrapping */
}

    /* Desktop: Larger dashicon for blue chips */
    .eventgroup-card .priorresponsechip.blue i,
    .prcev-form .chip.blue i {
        font-size: 20px; /* Larger than default 16px for better visibility */
    }
/* Selected state */
.eventgroup-card .priorresponsechip.selected,
.prcev-form .chip.selected {
    border: 4px solid black;
    filter: brightness(120%);
}
/* -----------------------------------------------------------------------------
   Mobile Responsive Styles (< 768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .prcev-form .chip,
    .eventgroup-card .priorresponsechip {
        min-width: unset; /*Minimum width to ensure consistency, adjust as needed */
        max-width: unset;
    }


    /* Mobile: Base chip adjustments */
    .eventgroup-card .priorresponsechip {
        min-width: 50px;
        width: 50px;
    }

        .eventgroup-card .priorresponsechip.green,
        .eventgroup-card .priorresponsechip.red,
        .eventgroup-card .priorresponsechip.yellow,
        .eventgroup-card .priorresponsechip.blue,
        .prcev-form .chip.green,
        .prcev-form .chip.red,
        .prcev-form .chip.yellow,
        .prcev-form .chip.blue {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        /* Mobile: Reset eventgroup card specific overrides */
        .eventgroup-card .priorresponsechip.green,
        .eventgroup-card .priorresponsechip.red,
        .eventgroup-card .priorresponsechip.yellow,
        .eventgroup-card .priorresponsechip.blue {
            height: 50px;
            max-height: 50px;
            padding: 0 !important;
            display: inline-flex;
        }

        /* Mobile: Force blue chips to be circular too */
        .eventgroup-card .priorresponsechip.blue {
            width: 50px !important;
            min-width: 50px !important;
        }
            /* Mobile: Adjust icon size and remove margin */
            .eventgroup-card .priorresponsechip.green i,
            .eventgroup-card .priorresponsechip.red i,
            .eventgroup-card .priorresponsechip.yellow i,
            .eventgroup-card .priorresponsechip.blue i,
            .prcev-form .chip i,
            .prcev-form .chip.green i,
            .prcev-form .chip.red i,
            .prcev-form .chip.yellow i,
            .prcev-form .chip.blue i {
                font-size: 24px;
                margin: 0 !important;
            }

            /* Mobile: Special centering for blue chip dashicon */
            .eventgroup-card .priorresponsechip.blue i,
            .prcev-form .chip.blue i {
                font-size: 28px !important;
                position: absolute;
                top: 43%;
                left: 50%;
                transform: translate(-50%, -50%);
                margin: 0 !important;
                width: auto;
                line-height: 1;
            }

        /* Mobile: Make blue chip position relative for absolute positioning */
        .eventgroup-card .priorresponsechip.blue,
        .prcev-form .chip.blue {
            position: relative;
            vertical-align: middle;
        }
            /* Mobile: Hide text, keep only icons */
            .eventgroup-card .priorresponsechip.green span,
            .eventgroup-card .priorresponsechip.red span,
            .eventgroup-card .priorresponsechip.yellow span,
            .eventgroup-card .priorresponsechip.blue span,
            .prcev-form .chip.green span,
            .prcev-form .chip.red span,
            .prcev-form .chip.yellow span,
            .prcev-form .chip.blue span {
                display: none;
            }

   
}



    /* Input field styling */
    .prcev-form .text-input {
        width: 100%; /* Make input field span across both columns */
        margin-top: 10px;
        height: 30px;
        font-size: 24px;
    }

    /* Submit button styling */
    .prcev-form .submit-button {
        margin: 15px auto; /* Center the submit button */
        display: none; /* block; /* Change to block to respect margin auto */
        padding: 15px 40px; /* Add padding for a larger clickable area */
        font-size: 18px; /* Adjust font size */
        font-weight: 600;
        color: white; /* Text color */
        background-color: var(--prc-color-yes); /* Primary background color (green) */
        border: none; /* Remove default border */
        border-radius: 10px; /* Round the corners */
        cursor: pointer; /* Change cursor on hover */
        transition: background-color 0.3s ease, transform 0.2s ease; /* Add transitions for hover effects */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    }

    @media (max-width:768px) {
        .prcev-form .submit-button {
            font-size:14px;
            padding:10px 10px;
        }
      
       
    }

        /* Hover effects */
        .prcev-form .submit-button:hover {
            filter: brightness(1.03); /* Lighten the button */
            transform: translateY(-2px) scale(1.05);
            ; /* Lift effect on hover */
        }

        /* Disabled state */
        .prcev-form .submit-button.disabled {
            /* background-color: #ccc; /* Gray out the button */
            cursor: not-allowed; /* Change the cursor */
            opacity: 0.6; /* Optional: further gray out */
            background-color: #f9f9f9;
            color: #f9f9f9;
            box-shadow: none;
        }

        /* Focus state */
        .prcev-form .submit-button:focus {
            outline: none; /* Remove outline */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add shadow on focus */
        }

    /* Add some margin between the cards */
    .prcev-form .eventgroup-card + .event-groupcard {
        margin-top: 20px;
    }

    /* Comments label styling */
    .prcev-form .comments-label {
        text-align: left; /* Align comments label to the left */
        margin-top: 15px; /* Add some space above the label */
        font-size: 1.2em;
        font-weight: 600;
    }

.acknowledge-overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position for centering */
    top: 35%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    z-index: 3000; /* Ensure it appears above other content */
    background-color: var(--prc-editor-back); /* Semi-transparent background */
    opacity: 0.95;
    color: white; /* Text color */
    font-weight: 600; /* Bold text */
    padding: 20px 40px; /* Add spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional shadow for depth */
    text-align: center; /* Center text */
    width: 60%; /* Adjust width for responsiveness */
    max-width: 500px; /* Set a max width */
    max-width: none !important; /* Override any max-width constraint */
    margin-left: 0 !important; /* Override margin-left to ensure full width */
    margin-right: 0 !important; /* Override margin-right to ensure full width */
}


    .thank-you-overlay {
        display: none; /* Initially hidden */
        position: fixed; /* Fixed position for centering */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust for exact centering */
        z-index: 1000; /* Ensure it appears above other content */
        background-color: var(--prc-editor-back); /* Semi-transparent background */
        opacity: 0.95;
        color: white; /* Text color */
        font-weight: 600; /* Bold text */
        padding: 20px 40px; /* Add spacing */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Optional shadow for depth */
        text-align: center; /* Center text */
        width: 80%; /* Adjust width for responsiveness */
        max-width: 500px; /* Set a max width */
        max-width: none !important; /* Override any max-width constraint */
        margin-left: 0 !important; /* Override margin-left to ensure full width */
        margin-right: 0 !important; /* Override margin-right to ensure full width */
    }
    /* The overlay that grays out the rest of the screen */
    /*#overlay {
        display: none;*/ /* Initially hidden */
        /*position: fixed;*/ /* Fixed to cover the whole viewport */
        /*top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh;*/ /* Ensure it covers the full height of the viewport */
        /*background-color: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent gray */
        /*z-index: 999 !important;*/ /* Ensures it appears above other content */
        /*max-width: none !important;*/ /* Override any max-width constraint */
        /*margin-left: 0 !important;*/ /* Override margin-left to ensure full width */
        /*margin-right: 0 !important;*/ /* Override margin-right to ensure full width */
    /*}*/

/* Loading Indicator Styles */
/*.loadingIndicatorWrapper {
    display: flex;
    justify-content: center;*/ /* Center horizontally */
    /*align-items: center;*/ /* Center vertically */
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;*/ /* Full screen height */
    /*background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);*/
  /*  background-color: rgba(200, 200, 200, 0.2); *//* Optional overlay */
    /*z-index: 9999;
}



#loadingIndicator {
    display: none;
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-right: 10px;
    position: relative;
    display: flex;
    align-items: center;*/ /* Align vertically */
    /*justify-content: center;*/ /* Align horizontally */
/*}



 #loadingIndicator::before {
        content: "";
        position: absolute;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--prc-color-pri);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        animation: membersup_spin 2s linear infinite;
        box-sizing: border-box;*/ /* Make sure the border doesn't affect the overall size */
    /*}

  #loadingIndicator::after {
        content: "";
        position: absolute;
        width: 90%;
        height: 90%;
        background-image: var(--img-loading), none;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;*/ /* Use flex to help center */
        /*align-items: center;*/ /* Center vertically */
        /*justify-content: center;*/ /* Center horizontally */
    /*}*/

/* Keyframes for loading spinner */
/*@keyframes membersup_spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}*/

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* Changed to white with transparency */
    backdrop-filter: blur(5px); /* Add glass blur effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 999999 !important; /* Higher than wrapper */
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.loadingIndicatorWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* Changed to white with transparency */
    backdrop-filter: blur(5px); /* Add glass blur effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 999998; /* Lower than overlay */
}

#loadingIndicator {
    /* Remove display: none - keep only one display property */
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-right: 10px;
    position: relative;
    display: flex; /* Only this one */
    align-items: center;
    justify-content: center;
}

    #loadingIndicator::before {
        content: "";
        position: absolute;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--prc-color-pri);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        animation: membersup_spin 2s linear infinite;
        box-sizing: border-box;
    }

    #loadingIndicator::after {
        content: "";
        position: absolute;
        width: 90%;
        height: 90%;
        /* Use a fallback image URL instead of CSS variable */
        background-image: var(--img-loading);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Remove display properties from ::after pseudo-element */
    }



#overlayBody {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* Changed to white with transparency */
    backdrop-filter: blur(5px); /* Add glass blur effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 999999 !important; /* Higher than wrapper */
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.loadingIndicatorWrapperBody {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.1); /* Changed to white with transparency */
    backdrop-filter: blur(5px); /* Add glass blur effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    z-index: 999998; /* Lower than overlay */
}

#loadingIndicatorBody {
    /* Remove display: none - keep only one display property */
    width: 60px;
    height: 60px;
    margin-top: 20px;
    margin-right: 10px;
    position: relative;
    display: flex; /* Only this one */
    align-items: center;
    justify-content: center;
}

    #loadingIndicatorBody::before {
        content: "";
        position: absolute;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--prc-color-pri);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        animation: membersup_spin 2s linear infinite;
        box-sizing: border-box;
    }

    #loadingIndicatorBody::after {
        content: "";
        position: absolute;
        width: 90%;
        height: 90%;
        /* Use a fallback image URL instead of CSS variable */
        background-image: var(--img-loading);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Remove display properties from ::after pseudo-element */
    }
@keyframes membersup_spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

    
    
    
    
    
    
    
    
    
    
    
    
    
    /* ORIGINA spinner */
    /*#loadingIndicator {
        position: fixed;*/ /* Fixed to always stay in the viewport */
        /*top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 4px solid #f3f3f3;*/ /* Light grey */
        /*border-top: 4px solid #3498db;*/ /* Blue color */
        /*border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
        z-index: 1000 !important;*/ /* Above the overlay */
    /*}*/


    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    [id^="prc-toggle-event-editor-btn"],
    #prc-toggle-event-manager-btn {
       /* margin-bottom: 10px;*/
      /*  margin-right: 10px;*/
        background-color: transparent;
        outline: none;
        border: none; /* Border to define the button's boundary */
        border-radius: 4px; /* Rounded corners */
      /*  padding: 4px 4px; */
        /* Padding to give the button more size */
        color: #007bff; /* Text color matching the border */
        font-size: 16px; /* Font size for the text */
        cursor: pointer; /* Make the cursor pointer to indicate it's clickable */
        transition: all 0.3s ease; /* Smooth transition for background and color change */
        /* Flexbox to center the image */
        /*   display: flex;*/
        justify-content: end; /* Center horizontally */
        display: inline-block;
        align-items: flex-end; /* Center vertically */
    }

        [id^="prc-toggle-event-editor-btn"]:hover,
        #prc-toggle-event-manager-btn:hover {
            background-color: var(--prc-editor-back); /* Blue background on hover */
            color: white; /* Change text color to white */
            border-color: #0056b3; /* Darken the border on hover */
            transform: scale(1.2); /* Grow the button by 20% */
        }

        [id^="prc-toggle-event-editor-btn"]:active,
        #prc-toggle-event-manager-btn:active {
            background-color: var(--prc-editor-back); /* Even darker background when clicked */
            border-color: #003f73; /* Dark border when the button is clicked */
        }

        [id^="prc-toggle-event-editor-btn"]:focus,
        #prc-toggle-event-manager-btn:focus {
            outline: none; /* Remove outline on focus */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle focus shadow */
        }

    .prc-editor-buttons-container {
        display: flex;
        justify-content: space-between; /* Distributes buttons across the row */
        align-items: center; /* Aligns buttons vertically */
        margin-bottom: 20px;
        border: solid 2px var(--prc-editor-back);
        border-radius: 10px;
        padding: 5px;
        position: relative;
        background-color: white;
    }

    .prc-editor-title {
        position: absolute; /* Position the title */
        left: 50%; /* Move it to the center */
        transform: translateX(-50%); /* Center it horizontally */
        font-size: 1.1em; /* Adjust the font size */
        font-weight: bold; /* Optional: Make the title bold */
        white-space: nowrap; /* Prevent text wrapping */
        color: var(--prc-editor-back);
        filter: brightness(0.9);
    }

.eventgroup-card details[open] summary .msum,
.eventgroup-card details[open] summary .h4-mbu {
    display: none;
}

/* Keep the title visible */
.eventgroup-card details[open] summary .h3-mbu {
    display: block;
    margin-bottom: 10px;
}
.eventgroup-card details[open] summary .h4-mbu {
    display: block;
    margin-bottom: 15px;
}

.raleway {
        font-family: 'Raleway', sans-serif; /* Use a cleaner font */
   
}

[id^="prc-EventSignups"] .msum {
    font-family: 'Raleway', sans-serif; /* Use a cleaner font */
    color: var(--prc-color-pri);
    font-weight: 700;
    margin-left: 20px;
}

    [id^="prc-toggle-event-editor-btn-tooltip"] {
        position: absolute;
        right:5%;
        visibility: hidden;
        background-color: var(--prc-color-pri);
        color: white;
        text-align: center;
        border-radius: 5px;
        padding: 5px;
        z-index: 1;
        width: 150px;
        /* top: 5%;*/
        /* right: 9%;*/
        transform: translateY(-100%);
        opacity: 0;
        transition: opacity 0.3s;
        font-size: .9em;
    }

    .prc-stageDisplay {
        font-size: 1em;
        font-weight: 600;
        display: inline-block; /* Only occupies space of the text */
        padding: 0 10px; /* Add slight padding for aesthetics */
        border-radius: 4px; /* Optional: Rounded corners */
    }


    #prc-event-stage {
        font-weight: 700; /* Bold */
    }




        #prc-event-stage[stage="booked"],
        .prc-stageDisplay[data-stage-code="2"] {
           /* background-color: var(--prc-color-yes);*/
            color: var(--prc-color-yes);
        }

        #prc-event-stage[stage="polling"],
        .prc-stageDisplay[data-stage-code="1"] {
          /*  background-color: var(--prc-color-maybe);*/
            color: var(--prc-color-maybe);
        }

        #prc-event-stage[stage="cancelled"],
        .prc-stageDisplay[data-stage-code="0"] {
          /*  background-color: var(--prc-color-no);*/
            color: var(--prc-color-no);
        }

        #prc-event-stage option {
            background-color: white;
            color: black;
        }


            /* Finalized options (stage_code = 2) - Green */
            #prc-event-stage option[data-stage-code="2"] {
                background-color: var(--prc-color-yes); /* Green */
                color: black;
            }

            /* Polling options (stage_code = 1) - Yellow */
            #prc-event-stage option[data-stage-code="1"] {
                background-color: var(--prc-color-maybe); /* Yellow */
                color: black;
            }

            /* Cancelled option (stage_code = 0) - Red */
            #prc-event-stage option[data-stage-code="0"] {
                background-color: var(--prc-color-no); /* Red */
                color: white;
            }




            #prc-event-stage option[value="booked"] {
                background-color: var(--prc-color-yes);
                color: black;
            }

            #prc-event-stage option[value="polling"] {
                background-color: var(--prc-color-maybe);
                color: black;
            }

            #prc-event-stage option[value="cancelled"] {
                background-color: var(--prc-color-no);
                color: white;
            }


    #prc-event-stage-display[stage="booked"] {
        background-color: var(--prc-color-yes);
        color: black;
        font-weight: 700; /* Bold */
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
    }

    #prc-event-stage-display[stage="polling"] {
        background-color: var(--prc-color-maybe);
        color: black;
        font-weight: 700; /* Bold */
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
    }

    #prc-event-stage-display[stage="cancelled"] {
        background-color: var(--prc-color-no);
        color: white;
        font-weight: 700; /* Bold */
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
    }





    details .signup-summary {
        list-style: none; /* Remove default marker */
    }

    details .signup-summary {
        cursor: pointer; /* Change the cursor to indicate clickable */
        background-color: var(--prc-editor-back); /* Light background color */
        color: white;
        padding: 10px; /* Padding for spacing */
        border-radius: 5px; /* Slightly rounded corners */
        border: 1px solid #ccc; /* Light border */
        outline: none;
        margin: 0;
        border-collapse: collapse;
        transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
    }

        details .signup-summary:hover {
            background-color: var(--prc-editor-back);
            /* Darker background on hover */
            transform: scale(1.02); /* Slightly enlarge on hover */
        }

        details .signup-summary h4 {
            margin: 0; /* Remove default margin */
            will-change: transform;
            backface-visibility: hidden;
            font-size: 1.2em; /* Slightly larger font size */
            cursor: pointer; /* Ensure it's clickable */
            transform: scale(1.02); /* Slightly enlarge on hover */
        }

    details summary {
        display: block; /* Make the summary take the full width */
        list-style: none; /* Remove default bullet points */
        cursor: pointer; /* Ensure the cursor indicates it's clickable */
        outline: none; /* Remove focus outline */
        border: none;
    }



    details .signup-summary::marker {
        content: ''; /* Remove the marker */
        display: none;
    }



    /*.signup-summary h4 {
    font-size: 1.5rem;*/ /* Static override */
    /*line-height: 1.4;*/ /* Optional */
    /*}*/

    #prc-eventUpdate.prc-editor-container {
        max-width: 700px;
        width: 100%;
        margin: auto auto;
        padding: 5px 10px 30px 10px; /*20px; */
        align-content: center;
        font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
        /* font-size: 24px;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: relative; /* To position the button inside the container */
    }

    #prc-eventUpdate #prc-tooltip-closeButton {
        position: absolute; /* Position the tooltip absolutely relative to the container */

        top: -130px; /* Adjust this to move the tooltip above or below the button */
        right: 0; /* Align it with the button's right edge */
        /* bottom: 50px; /* Adjust to position it above the button */
        /*right: 0; /* Align right */
        background-color: var(--prc-color-pri); /* Dark background for the tooltip */
        color: #fff; /* White text */
        padding: 5px 10px; /* Add some padding */
        border-radius: 5px; /* Optional: rounded corners */
        font-size: 16px; /* Adjust text size */
        font-weight: 600;
        white-space: nowrap; /* Prevent text from wrapping */
        visibility: hidden; /* Hide tooltip by default */
        opacity: 0; /* Make it invisible initially */
        transition: opacity 0.3s ease, visibility 0.3s ease 0.3s; /* Delay hiding */
        z-index: 10; /* Ensure it appears above other elements */
        pointer-events: none; /* Prevent the tooltip from interfering with hover */
    }



    #prc-eventUpdate .prc-tooltip-saveButton {
        position: absolute; /* Position the tooltip absolutely relative to the container */
        outline: none;
        top: -130px; /* Adjust this to move the tooltip above or below the button */
        left: 0; /* Align it with the button's right edge */
        /* bottom: 50px; /* Adjust to position it above the button */
        /*right: 0; /* Align right */
        background-color: var(--prc-color-pri); /* Dark background for the tooltip */
        color: #fff; /* White text */
        padding: 5px 10px; /* Add some padding */
        border-radius: 5px; /* Optional: rounded corners */
        font-size: 16px; /* Adjust text size */
        font-weight: 600;
        white-space: nowrap; /* Prevent text from wrapping */
        visibility: hidden; /* Hide tooltip by default */
        opacity: 0; /* Make it invisible initially */
        transition: opacity 0.3s ease, visibility 0.3s ease 0.3s; /* Delay hiding */
        z-index: 10; /* Ensure it appears above other elements */
        pointer-events: none; /* Prevent the tooltip from interfering with hover */
    }

    #prc-tooltip-closeButton {
        right: 0;
    }

    .prc-editor-close-btn,
    .prc-editor-save-btn {
        position: relative;
        /* top: 10px;*/
        /* right: 10px;*/
        background: none;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
        padding: 0;
        transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth animation */
    }

    .prc-editor-close-btn {
        right: 10px;
    }

    .prc-editor-save-btn {
        left: 0px;
    }

        .prc-editor-close-btn:hover, .prc-editor-save-btn:hover {
            color: #f00; /* Change color on hover */
            transform: scale(1.1); /* Slightly enlarge the button */
        }


    #prc-eventUpdate .prc-editor-save-btn:hover ~ .prc-tooltip-saveButton {
        visibility: visible;
        opacity: 1;
    }

    .large-input {
        font-size: 1em; /* Make the text inside larger */
        padding: 5px; /* Add space inside the input */
        width: 100%; /* Make the input take up the full width of its container */
        max-width: 300px; /* Set a maximum width if needed */
        border: 2px solid #ccc; /* Add a border */
        border-radius: 5px; /* Rounded corners */
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    }

        .large-input:focus {
            outline: none; /* Remove default focus outline */
            border-color: #007BFF; /* Highlight border on focus */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add glow on focus */
        }

    #prc-eventUpdate .prc-editor-close-btn:hover ~ #prc-tooltip-closeButton {
        visibility: visible;
        opacity: 1;
    }


    .prc-editor-close-btn:focus,
    .prc-editor-save-btn:focus {
        outline: none;
    }

    #prc-eventUpdate .form-field {
        margin-bottom: 15px;
    }

    #prc-eventUpdate label {
        display: flex;
        align-items: center;
    }

    #prc-eventUpdate .required {
        color: red;
    }

    .underline-row {
        display: block; /* Ensures the div is treated as a block-level element */
        border-bottom: 2px solid var(--prc-editor-back); /* Creates the underline */
        padding-bottom: 5px; /* Adds spacing between the text and the underline */
        color: var(--prc-editor-back);
    }


#prc-eventUpdate .form-group-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px; /* Reduced space between rows */
    margin-top: 10px;
}

#prc-eventUpdate .form-group-vertical label {
    width: auto; /* Adjust width as needed */
   
    font-weight: bold;
    font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
}

    #prc-eventUpdate .form-group-vertical input[type="text"],
    #prc-eventUpdate .form-group-vertical input[type="date"],
    #prc-eventUpdate .form-group-vertical input[type="time"],
    #prc-eventUpdate .form-group-vertical select,
    #prc-eventUpdate .form-group-vertical textarea {
        flex: 1;
        padding: 6px;
        font-size: 1em;
        font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
        font-weight: 500;
    }

    #prc-eventUpdate .form-group-vertical textarea {
        width:90%;
        margin-left:5%;
        resize: vertical; /* Allow vertical resizing */
    }

    #prc-eventUpdate .form-group {
        display: flex;

        align-items: center;
        margin-bottom: 8px; /* Reduced space between rows */
        margin-top: 10px;
    }

        #prc-eventUpdate .form-group label {
            width: 175px; /* Adjust width as needed */
            margin-right: 10px; /* Spacing between label and input */
            font-weight: bold;
            font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
        }

        #prc-eventUpdate .form-group input[type="text"],
        #prc-eventUpdate .form-group input[type="date"],
        #prc-eventUpdate .form-group input[type="time"],
        #prc-eventUpdate .form-group select,
        #prc-eventUpdate .form-group textarea {
            flex: 1;
            padding: 6px;
            font-size: 1em;
            font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
            font-weight: 500;
            
        }

        #prc-eventUpdate .form-group textarea {
            resize: vertical; /* Allow vertical resizing */
        }

    #prc-eventUpdate .info-icon {
        color: #666;
        cursor: pointer;
        margin-left: 5px;
        font-weight: 400;
    }

    #prc-eventUpdate .prc-event-editor-tooltip {
        display: none;
        background-color: #FFFACD;
        border: 1px solid #ddd;
        padding: 5px;
        font-size: 16px;
        font-weight: 500;
        position: absolute;
        margin-left: 100px;
        margin-top: 80px;
        max-width: 300px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        z-index: 10;
    }

    textarea#prc-event-program {
        min-height: 200px; /* Set your desired height in pixels */
        resize: vertical; /* Allow vertical resizing by the user, if desired */
    }


 /*   #prc-eventSaveChangesButtonOLD,
    #prc-eventCancelChangesButtonOLD {
        background-color: var(--prc-color-pri);
        color: var(--prc-color-sec);
        align-self: center;
        display: block;
    }*/

#prc-createEventButton {
    background-color: var(--prc-color-yes);
    color: white;
}

#prc-eventCancelChangesButton {
    background-color: var(--prc-color-no);
    color: white;
}

    #prc-createEventButton, #prc-eventSaveChangesButton, #prc-eventCancelChangesButton {
   /* background-color: var(--prc-color-pri);
    color: var(--prc-color-sec);*/
    border: none;
    padding: 10px 20px; /* Add padding for better click area */
    font-size: 16px; /* Set a clear, readable font size */
    font-weight: bold; /* Make the text stand out */
    border-radius: 5px; /* Rounded corners for a modern look */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Change the cursor to a pointer on hover */
    text-transform: uppercase; /* Make text uppercase for uniformity */
}

        #prc-createEventButton:hover,
        #prc-eventSaveChangesButton:hover,
        #prc-eventCancelChangesButton:hover {
            filter: brightness(1.2);
            /* border-color: var(--prc-color-sec); /* Change the border color on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect on hover */
        }

        #prc-createEventButton:focus,
        #prc-eventSaveChangesButton:focus,
        #prc-eventCancelChangesButton:focus {
            outline: none; /* Remove default focus outline */
            box-shadow: 0 0 5px var(--prc-color-pri); /* Add a border glow effect on focus */
        }

        #prc-createEventButton:active,
        #prc-eventSaveChangesButton:active,
        #prc-eventCancelChangesButton:active {
            background-color: var(--prc-color-pri); /* Keep background on click */
            color: var(--prc-color-sec);
            transform: scale(0.98); /* Slightly shrink the button on click for a tactile effect */
        }

    .remove_appt_date, .remove_appt_time,
    #prc-eventUpdate .show-alternate-datetime-menu {
        font-size: 20px;
        position: relative;
        background: none;
        outline: none;
        background-color: transparent; /* Default background color */
        color: darkred; /* Text color */
        border: none; /* Remove border */
        padding: 4px 4px; /* Add padding for a better look */
        /* margin-left: 2px;*/ /* Space to the left */
        cursor: pointer; /* Change the cursor to pointer */
        border-radius: 4px; /* Optional: rounded corners */
        transition: all 0.3s ease; /* Smooth transition for background and transform */
    }

.form-group .alternate-datetime {
    display: flex; /* Make sure it's a flex container */
    gap: 8px; /* Adjust the gap size as needed */
}

    .remove_appt_date, .remove_appt_time {
        color: transparent;
        border: none;
    }

        .remove_appt_date:hover, .remove_appt_time:hover,
        #prc-eventUpdate .show-alternate-datetime-menu:hover {
            filter: brightness(1.2);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow effect on hover */
        }

        .remove_appt_date:focus, .remove_appt_time:focus, .remove_appt_time i:focus,
        #prc-eventUpdate .show-alternate-datetime-menu:focus {
            outline: none; /* Remove outline when focused */
            box-shadow: 0 0 0 2px var(--prc-color-pri); /* Optional: add a subtle focus ring */
        }

        .remove_appt_date:active, .remove_appt_time:active, .remove_appt_time i:active,
        #prc-eventUpdate .show-alternate-datetime-menu:active {
            outline: none;
            background: none; /* Keep background on click */
            transform: scale(0.98); /* Slightly shrink the button when clicked for a pressed effect */
        }

        .remove_appt_time:focus,
        .remove_appt_time:focus-visible,
        .remove_appt_time i:focus,
        .remove_appt_time i:focus-visible {
            outline: none !important; /* Force remove outline */
            box-shadow: none !important; /* Prevent any focus ring */
        }

    .prc-editor-list-signups {
        color: var(--prc-editor-back);
        opacity: 0.7;
        margin-top: 15px;
        margin-left: 10px
    }
    /* Style for the "Add Alternate Date and Time" button */
    [id^=prc-add-subcat],
    #prc-add-reservation-datetime,
    #prc-add-alternate-datetime,
    .view-signups {
        margin-top: 10px;
        background-color: var(--prc-editor-back); /* Blue background */
        color: #fff; /* White text */
        border: 2px solid var(--prc-editor-back); /* Border with the same color as background */
        border-radius: 6px; /* Rounded corners */
        padding: 8px 16px; /* Smaller padding inside the button */
        font-size: 14px; /* Smaller font size */
        font-weight: bold; /* Bold text */
        display: inline-flex; /* Use flexbox to align icon and text */
        align-items: center; /* Center align the icon and text */
        transition: all 0.3s ease; /* Smooth transition for hover effect */
        cursor: pointer; /* Change cursor to pointer */
    }

    /*.datetime-table {
        border-collapse:collapse;
        border:0;
        outline:none;
    }*/

.datetime-table,
.datetime-table th,
.datetime-table td,
.datetime-table thead,
.datetime-table tbody,
.datetime-table tr {
    border: none !important; /* Force removal of all borders */
    outline: none !important;
    box-shadow: none !important;
    border-collapse: collapse;
}



    .alternate-datetime-display {
        font-weight: 600;
    }

    [id^=prc-add-subcat] {
        background-color: var(--prc-color-yes); /* Blue background */
        color: #fff; /* White text */
        border: 2px solid var(--prc-color-yes); /* Border with the same color as background */
        margin-right: 50px;
        font-size: 1em;
    }


        [id^=prc-add-subcat] i,
        #prc-add-alternate-datetime i,
        .view-signups i {
            font-weight: bold;
            margin-right: 8px; /* Slightly less space between the icon and text */
            font-size: 16px; /* Smaller icon size */
        }

    #prc-add-alternate-datetime:hover,
    .view-signups:hover {
        background-color: #0056b3; /* Darker blue background on hover */
        border-color: #0056b3; /* Darker border on hover */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        transform: scale(1.05); /* Slightly grow on hover */
    }


    [id^=prc-add-subcat]:hover {
        background-color: green;
        border-color: green;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        transform: scale(1.05); /* Slightly grow on hover */
    }

    [id^=prc-add-subcat]:focus,
    #prc-add-alternate-datetime:focus,
    .view-signups:focus {
        outline: none; /* Remove default outline on focus */
        box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.5); /* Add a glowing blue outline */
    }


    #prc-eventUpdate .form-group.alternate-datetime {
        display: flex;
        gap: 0
    }



    /* Alternate buttons */
    .alternate-date,
    .alternate-time {
        border: 2px solid #007BFF;
        border-radius: 5px;
        background-color: #f8f9fa;
        padding: 8px 12px;
        cursor: pointer;
        width:35%;
        margin-top:5px;
        
    }

        .alternate-date:focus,
        .alternate-time:focus {
            border-color: #0056b3;
            background-color: white;
        }

    #prc-eventUpdate .alternate-time {
        max-width: 25%;
    }


    #prc-eventEditor {
        max-width: 700px;
        width: 100%;
        padding: 0;
        margin: 0 0 0 30px;
        display: flex;
        justify-content: flex-start;
    }



    .mbrupev_eventselect-menu {
        /* background-color: var(--prc-editor-back);*/
        font-family: var(--prc-font-family); /* 'Raleway', sans-serif; */
        font-size: 20px;
        font-weight: 500;
        padding: 0 0;
        margin-bottom: 2px;
        border-radius: 10px;
        border: none;
        outline: none;
    }

        .mbrupev_eventselect-menu ul {
            display: flex; /* Arrange items in a row */
            justify-content: space-between;
            list-style: none; /* Remove default list styles */
            margin: 0;
            padding: 0;
        }

            .mbrupev_eventselect-menu ul li {
                margin: 0 10px; /* Add some space between menu items */
            }

                .mbrupev_eventselect-menu ul li a {
                    color: rgba(240, 240, 240, 0.8); /* White text with 0.8 opacity */
                    text-decoration: none; /* Remove underline from links */
                    padding: 5px 10px; /* Add padding for better click area */
                    display: block;
                }

                    .mbrupev_eventselect-menu ul li a.active {
                        color: rgba(255, 255, 255, 1.0); /* Ensure active state is persistent */
                        filter: brightness(1.5);
                        font-weight: bold;
                    }

                    .mbrupev_eventselect-menu ul li a:hover {
                        cursor: pointer;
                        color: rgba(255, 255, 255, 1.0); /* Keep hover effect but not override active */
                    }

    /* Main menu styles */
    #prc-eventEditor .prc-event-editor-menu {
        display: flex;
        list-style: none;
        padding: 0 10px;
        margin: 0;
        background-color: #f4f4f4;
        border: none;
        outline: none;
        position: relative;
    }

        #prc-eventEditor .prc-event-editor-menu li {
            margin-right: 25px;
        }

        /* Main menu item styling */
        #prc-eventEditor .prc-event-editor-menu a {
            text-decoration: none;
            color: gray;
            font-weight: bold;
            font-size: 0.8em;
            border: none;
            outline: none;
        }

            /* Hover effect for menu items */
            #prc-eventEditor .prc-event-editor-menu a:hover {
                color: black;
                font-weight: bold;
            }

            /* Active state for menu items */
            #prc-eventEditor .prc-event-editor-menu a:active {
                color: black;
                font-weight: bold;
            }

    /* Submenu styles - initially hidden */
    #prc-eventEditor .prc-event-editor-submenu-events,
    #prc-eventEditor .prc-event-editor-submenu-polls {
        display: none;
        list-style-type: none;
        padding-left: 20px;
        margin: 0;
        font-weight: 400;
        z-index: 10;
        position: absolute; /* Position submenu absolutely within the parent menu item */
        top: 100%; /* Position the submenu directly below the parent item */
        left: 0; /* Align to the left of the parent item */
        z-index: 10; /* Ensure the submenu appears above the main menu */
    }

        /* Submenu items */
        #prc-eventEditor .prc-event-editor-submenu-events li,
        #prc-eventEditor .prc-event-editor-submenu-polls li {
            background-color: #dbd9d9;
            font-weight: 400;
        }

            #prc-eventEditor .prc-event-editor-submenu-events li a,
            #prc-eventEditor .prc-event-editor-submenu-polls li a {
                display: block; /* Make the link fill the entire width */
                padding: 8px;
                background-color: #dbd9d9;
                color: black;
                text-decoration: none;
                font-weight: 400;
            }

                /* Hover effect for submenu items */
                #prc-eventEditor .prc-event-editor-submenu-events li a:hover,
                #prc-eventEditor .prc-event-editor-submenu-polls li a:hover {
                    background-color: #eff0f1;
                    font-weight: 700 !important;
                }

    /* Display submenu on hover */
    #prc-eventEditor .prc-event-editor-menu li:hover .prc-event-editor-submenu-events,
    #prc-eventEditor .prc-event-editor-menu li:hover .prc-event-editor-submenu-polls {
        display: block;
    }

    #prc-eventUpdate input[type="checkbox"] {
        display: block;
        width: 20px;
        height: 20px;
    }

    /*  Hide default checkbox */
    #prc-eventUpdate input[type="checkbox"] {
        display: none; /* Hide the default checkbox */
    }

        /* Custom checkbox label */
        #prc-eventUpdate input[type="checkbox"] + label {
            position: relative;
            padding-left: 35px; /* Space for the custom checkbox */
            cursor: pointer;
            display: inline-block;
            line-height: 20px;
            font-size: 16px;
            color: black; /*var(--prc-color-no, #999); /* Default color (inactive) */
        }

            /* Custom checkbox appearance (box) */
            #prc-eventUpdate input[type="checkbox"] + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 20px;
                height: 20px;
                border: 2px solid black; /*var(--prc-color-no, #999); /* Border color (inactive) */
                border-radius: 5px; /* Rounded corners */
                background-color: white;
                transition: all 0.3s ease-in-out;
            }

        /* Change the color and border of the checkbox when checked */
        #prc-eventUpdate input[type="checkbox"]:checked + label:before {
            background-color: var(--prc-color-yes); /* Background color when checked */
            border-color: var(--prc-color-yes); /* Border color when checked */
        }

        /* Add a tick mark for when the checkbox is checked */
        #prc-eventUpdate input[type="checkbox"]:checked + label:after {
            content: '\2713'; /* Unicode checkmark symbol */
            position: absolute;
            left: 5px;
            top: 2px;
            font-size: 16px;
            color: white; /* White checkmark */
        }


    .inhtmleventmanager-wrapper {
        width: 100%;
        max-width:100%;
       /* overflow-x: auto;*/ /* Enables horizontal scrolling */
    }


#inhtmleventmanager {
    width: 100%;
    max-width: 100%;
   padding:1px;
 box-sizing:border-box;
    display: flex; /* Helps with proper alignment */
    justify-content: center; /* Centers the table inside */
}

    @media screen and (max-width: 768px) {
        #prc-eventsignups-eventTable > th, #prc-eventsignups-eventTable > td, .mbrupev_eventselect-menu {
            padding: 1px;/* Reduce padding for better fit */
            font-size: 12px; /* Adjust font size */
        }
    }



    /* Style for the menu */
    .alternate-datetime-menu {
        position: absolute;
        display: none;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        width: 50px;
        padding: 10px;
        z-index: 1000; /* Ensure it's on top of other elements */
        /*top: 0;*/ /* Align top of menu with top of the button */
        /*left: 100%;*/ /* Position the menu to the right of the button */
        /*margin-left: 10px;*/ /* Optional, for spacing between the button and the menu */
    }

        .alternate-datetime-menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .alternate-datetime-menu ul li {
                padding: 10px;
            }

                .alternate-datetime-menu ul li button {
                    width: 100%;
                    background: none;
                    border: none;
                    text-align: left;
                    cursor: pointer;
                }

                    .alternate-datetime-menu ul li button:hover {
                        /*background-color: #f0f0f0;*/
                    }

    [id^="eventEditor"] {
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        width: 100%;
    }

.prcbutton {
    cursor: pointer; /* Pointer cursor on hover */
    transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth animation */
}

    .prcbutton:hover {
        transform: scale(1.05); /* Slightly enlarge the button */
    }

    .prcbutton:focus {
        outline:none;
    }

    .cool-button {
        display: inline-block; /* Ensure proper alignment */
        padding: 12px 10px; /* Increased padding for larger clickable area */
        font-size: 18px; /* Increase font size for better readability */
        font-weight: bold; /* Make text stand out */
        border: none; /* Remove default borders */
        border-radius: 8px; /* Slightly larger rounded corners */
        cursor: pointer; /* Pointer cursor on hover */
        transition: transform 0.2s ease, background-color 0.2s ease; /* Smooth animation */
        margin: 8px 0; /* Add margin to create space between buttons */
        min-width: 100px; /* Ensure the button has a minimum width */
        text-align: center; /* Ensure the icon is centered */
    }

        /* Hover effect */
        .cool-button:hover {
            transform: scale(1.1); /* Slightly enlarge the button */
        }

        /* Remove outline when focused */
        .cool-button:focus {
            outline: none;
        }

    .prc-editor-button-container {
        display: flex; /* Flexbox container */
        /* justify-content: space-between; /* Push buttons to opposite ends */
        gap: 10px 20px;
        align-items: center; /* Center buttons vertically */
        width: 90%; /* Ensure container spans full width */
        padding: 20px; /* Add spacing around the container */
        margin-bottom: 20px;
        margin-left: 0;
    }

    #prc-esm-close .tooltip {
        visibility: hidden;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--prc-color-pri);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 100;
        opacity: 0.9;
        transition: opacity 0.3s;
    }

    /* Show tooltip when hovering over the button */
    #prc-esm-close:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }

#prc-custom-confirm-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform-origin: center center !important;
    rotate: none !important;
    scale: none !important;
    translate: none !important;
    contain: layout style paint !important;
    isolation: isolate !important;
}

/* Default: no transform */
#prc-custom-confirm-dialog {
    transform: none !important;
}

/* Landscape mode with maximum specificity */
html body.prc-dialog-landscape-mode #prc-custom-confirm-dialog.prc-landscape-dialog {
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    width: 100vh !important;
    height: 100vw !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -50vw !important;
    margin-left: -50vh !important;
}

/*#prc-custom-confirm-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;*/
    /* Only reset transforms when NOT in landscape mode */
    /*transform-origin: center center !important;
    rotate: none !important;
    scale: none !important;
    translate: none !important;
    contain: layout style paint !important;
    isolation: isolate !important;
}*/

    /* Only apply transform reset when NOT in landscape mode */
    /*#prc-custom-confirm-dialog:not(.prc-landscape-dialog) {
        transform: none !important;
    }*/

/* Landscape mode styles */
/*body.prc-dialog-landscape-mode #prc-custom-confirm-dialog {
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    width: 100vh !important;
    height: 100vw !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -50vw !important;
    margin-left: -50vh !important;
}*/


/*#prc-custom-confirm-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;*/
    /* Force no transforms */
    /*transform: none !important;
    transform-origin: center center !important;
    rotate: none !important;
    scale: none !important;
    translate: none !important;*/
    /* Break out of any transformed context */
    /*contain: layout style paint !important;
    isolation: isolate !important;
}*/

    /* Also ensure the dialog content doesn't inherit transforms */
    #prc-custom-confirm-dialog .dialog-content {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        width: 300px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        /* Additional reset */
        transform: none !important;
        position: relative !important;
    }

#prc-custom-confirm-dialog .dialog-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    column-gap: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    #prc-custom-confirm-dialog .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

#prc-custom-confirm-dialog .btn-yes {
    background-color: #28a745;
    color: white;
    display: inline-block;
}

#prc-custom-confirm-dialog .btn-no {
    background-color: #dc3545;
    color: white;
    display: inline-block;
}

/* Optional: Add responsive adjustments for landscape */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #prc-custom-confirm-dialog .dialog-content {
        width: 280px;
        padding: 15px;
    }

    #prc-custom-confirm-dialog .dialog-buttons {
        margin-top: 15px;
    }
}




#user-selection-container,
#notifyuser-selection-container {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap into multiple lines */
    gap: 2px;
    margin-top: 20px;
    width: 100%; /* Ensure the container takes full width */
    box-sizing: border-box; /* Prevents padding/border issues */
}

    #user-selection-container div,
    #notifyuser-selection-container div {
        flex: 1 1 33%; /* 3 columns by default */
        box-sizing: border-box;
    }

    #user-selection-container label,
    #notifyuser-selection-container label {
        white-space: normal; /* Allow wrapping of long names */
        word-wrap: break-word; /* Break the words if necessary */
        margin-right: 5px;
    }

/* For screens up to 768px wide (2 columns) */
@media (max-width: 768px) {
    #user-selection-container div,
    #notifyuser-selection-container div {
        width: 50%; /* Two columns on medium screens */
        box-sizing: border-box; /* Ensure box model consistency */
    }
}

/* For screens up to 480px wide (1 column) */
@media (max-width: 480px) {
    #user-selection-container,
    #notifyuser-selection-container {
        display: flex;
        justify-content: center; /* Centers the child elements horizontally */
        align-items: center; /* Centers the child elements vertically (optional) */
    }



        #user-selection-container div,
        #notifyuser-selection-container div {
            width: 100%; /* One column on smaller screens */
            /*margin-left: 15px;*/ /* Add margin to the left for more space */
            margin-bottom: 20px; /* Increase space between rows */
            min-width:60%;
            margin-left:20%;
        }
}


    

    /* Hide default radio button */
    #prc-eventUpdate input[type="radio"] {
        display: none;
    }

        /* Style the custom radio button */
        #prc-eventUpdate input[type="radio"] + label {
            position: relative;
            cursor: pointer;
            font-size: 18px;
            color: black;
            padding-left: 35px; /* Space for the custom radio button */
            line-height: 24px;
            display: inline-flex;
            align-items: center;
        }

            /* Radio circle (unselected state) */
            #prc-eventUpdate input[type="radio"] + label::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                border: 2px solid #333;
                border-radius: 50%;
                background-color: white;
                transition: all 0.3s ease-in-out;
            }

        /* Radio circle (selected state) */
        #prc-eventUpdate input[type="radio"]:checked + label::before {
            background-color: #4CAF50;
            border-color: #4CAF50;
        }

        /* Checkmark inside the radio button */
        #prc-eventUpdate input[type="radio"]:checked + label::after {
            content: '\2713'; /* Unicode checkmark */
            position: absolute;
            left: 8px; /* Adjust inside the radio button */
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            color: white;
        }

    /* Container for both buttons */
    .add-event-button-container {
        display: flex; /* Keeps button aligned horizontally */
        justify-content: flex-start; /* Aligns the button to the left */
        align-items: center; /* Vertically centers the button */
    }

  

    .prc-esm-button-container {
        display: flex;
        justify-content: space-between; /* Distribute space between buttons */
        align-items: center; /* Vertically center the buttons */
        width: 100%;
    }

    .time-slot-grid {
        display: grid;
        grid-template-columns: .75fr 2fr .25fr ; 
        gap: 15px;
        margin-left:-15px;
        align-items: center;
        text-align: center;
        width: 100%;
        padding: 2px 0;
        border-bottom: 1px solid #ccc;
    }

.time-slot-grid-proxy {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 15px;
    margin-left: -15px;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 2px 0;
    border-bottom: 1px solid #ccc;
}

    .select-time-slot {
        background-color: var(--prc-color-yes);
        color: white;
        width: 100px;
        padding: 4px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        justify-self: center;
    }

    .spot-taken {
        font-weight: 700;
        font-size: 0.9em;
        color: black;
    }

    .change-reservation {
        background-color: var(--prc-editor-back);
        color: white;
    }


.col3-grid {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr; /* Last column set to 8% of the overall width */
    gap: 5px;
    margin-left: -5px;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 2px 0;
    border-bottom: 1px solid #ccc;
    /*  box-sizing:border-box;*/
}

  


    .member-list {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

        .member-list th, .member-list td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .member-list th {
            background-color: #f4f4f4;
            font-weight: bold;
        }

        .member-list tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .member-list a {
            color: #0073aa;
            text-decoration: none;
        }

            .member-list a:hover {
                text-decoration: underline;
            }


/* Target any div with an ID starting with 'printableDiv' */
[id^="eventsheetcontainer_"] {
    position: relative;
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
}

.prcmu-print-buttons-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: flex-end; /* Align to the right */
    margin-top: 10px;
}

/* Target any button with an ID starting with 'printButton' */
[id^="prcprintButton"] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    color: var(--prc-color-pri);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    outline: none; /* Remove default focus outline */
}

    /* Hover effect */
    [id^="prcprintButton"]:hover {
        transform: scale(1.1);
    }

/* Prevent outline when the button is clicked (focused) */
[id^="prcprintButton"]:focus {
    outline: none;
    box-shadow: none;
}

.prcmu-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Circle colors */
.prcmu-green {
    background-color: var(--prc-color-yes);
}

.prcmu-yellow {
    background-color: var(--prc-color-maybe);
}

.prcmu-red {
    background-color: var(--prc-color-no);
}
/* Hide the button when printing */
@media print {
    [id^="prcprintButton"] {
        display: none;
    }
}

/* Deleted user styling */
.placement-user-deleted {
    opacity: 0.6 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: #999 !important;
    font-size:0.75em !important;
}

    /*.placement-user-deleted .placement-user-name {
        text-decoration: line-through !important;
        text-decoration-color: #999 !important;
    }*/

    .placement-user-deleted .deleted-indicator {
        font-size: 0.8em;
        color: #666;
        font-style: italic;
    }

/* Updated eventgroup-card styling for modern appeal */
.prcev-form .eventgroup-card {
    max-width: 700px;
    width: 100%;
    background-color: #f8f9fa; /* Light faded gray */
    border-radius: 16px; /* Increased from 10px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); /* Enhanced layered shadows */
    margin-bottom: 20px; /* Keep original spacing */
   /* padding: 5px; */
    /* Keep original padding */
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border without CSS variable */
    flex-direction: column;
    align-items: stretch;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth material design transition */
    overflow: hidden; /* For potential pseudo-element effects */
}

    /* Add a subtle accent line */
    .prcev-form .eventgroup-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(to right, color-mix(in srgb, var(--prc-color-pri) 40%, transparent 60%) 0%, var(--prc-color-pri) 50%, color-mix(in srgb, var(--prc-color-pri) 40%, transparent 60%) 100%);
        border-radius: 16px 16px 0 0;
    }

    /* Enhanced hover effect */
    .prcev-form .eventgroup-card:hover {
        transform: translateY(-4px); /* Subtle lift */
        background-color: #ffffff; /* White when selected/hovered */
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
        border-color: var(--prc-color-pri);
        border-color: color-mix(in srgb, var(--prc-color-pri) 30%, transparent 70%);
    }

/* Mobile responsive updates */
@media (max-width: 768px) {
    .prcev-form .eventgroup-card {
        border-radius: 12px; /* Slightly less rounded on mobile */
        margin-bottom: 16px; /* Add space between containers on mobile */
      /*  padding: 12px; */
        /* Slightly more padding on mobile for better spacing */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
        background-color: #f8f9fa; /* Light faded gray on mobile */
        border: 1px solid rgba(var(--prc-color-pri), 0.2);
    }

        .prcev-form .eventgroup-card::before {
            height: 3px;
            border-radius: 12px 12px 0 0;
        }

        .prcev-form .eventgroup-card:hover {
            transform: translateY(-2px); /* Reduced lift on mobile */
        }
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transform: translateY(-10px);
    opacity: 0;
    /* Fast hide transition */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .accordion-content.open {
        max-height: 800px; /* Much smaller, more realistic height */
        opacity: 1;
        transform: translateY(0);
        transition: max-height 1.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    }