@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&display=swap');

html {
    scroll-behavior: smooth;   /* native, tiny, zero-JS */
}

a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

		A:link {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A:visited {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A:hover {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A:active {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none;}
		
		A.large:link {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.large:visited {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.large:hover {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A.large:active {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none;}
		
		A.white:link {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white:visited {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white:hover {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A.white:active {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none;}
		
		A.white-large:link {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white-large:visited {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white-large:hover {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A.white-large:active {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none;}
		
		.active {
            text-decoration: underline;
        }
		
		
    .button-container {
    display: flex;
    justify-content: center; /* Center aligns the buttons */
    align-items: center;
    flex-wrap: wrap; /* Allows buttons to wrap onto the next line */
    margin: 0px 0px 0px 0px;
    padding: 0 20px; /* Adds padding to the container itself */
    }

    .select-buttons {
    background-color:transparent;
    }
	
	.blue-button {
    background-color: #4169e1;
	transition: background-color 0.3s;
    }

    .blue-button, .select-buttons {
    border-radius: 25px;
	border-style: solid; border-width: 2px; border-color: #ffffff;
    padding: 10px 25px; /* Adjust padding for visual balance */
    margin: 5px 5px; /* Reduced margin to better fit and center */
    cursor: pointer;
    }

    /* Style for hover effect */
    .select-buttons:hover {
    background-color: #2d3292; /* Darker shade for hover effect */
    }

    /* Style for hover effect */
    .blue-button:hover {
    background-color: #2d3292; /* Darker shade for hover effect */
    }
		
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


/* ---------- thank_you.php specific ---------- */
/* full-screen flexbox layout that centres the card */
body.thankyou-page{
    display:flex;
    align-items:center;         /* vertical centring   */
    justify-content:center;     /* horizontal centring */
    min-height:100vh;           /* fill viewport       */
    margin:0;                   /* remove default body margin */
    background:#fff;
}

/* blue card */
.thankyou-box{
    background:#4169e1;
    color:#fff;
    border-radius:25px;
    width:90%;
    max-width:900px;
    padding:60px 40px 70px;     /* bottom gap for button */
    text-align:center;
    box-sizing:border-box;
}

/* helper: space above the button */
.home-btn{
    display:inline-block;
    margin-top:35px;
}
/* ---------- thank_you.php specific ---------- */



.category-button {
    display: inline-block;
    border-radius: 25px;
	background-color: #4169e1;
    border: 2px solid #ffffff;
    padding: 10px 15px;
    margin: 0px 15px 15px 0px;
    cursor: pointer;
    transition: none;
}

.category-button a {
    color: white;
    text-decoration: none;
}

.category-button img {
    vertical-align: middle;
    margin-left: 0px;
    margin-right: 10px;
    height: 35px;
}



		
		
        #conferenceList {
            display: flex;
            flex-wrap: wrap;
        }
		
		.conference-details-container {
			width:80%;
			margin-left:10%;
			margin-right:10%;
		}
		
/* keeps a comfortable gap after we scroll */
#contactDetails {             /* tweak value to taste */
    scroll-margin-top: 35px;  /* ≈ height of the royal-blue gap */
}
		
	    .dateBox {
	margin-left:10px;
	margin-right:10px; 
	border-radius: 25px; /* Rounded corners */
	padding: 10px;
	border-style: none;
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;
}


.address-cost-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensure containers stretch to the same height */
    gap: 30px; /* Add gap between the two containers */
    margin-left: 15px; /* Add left margin to the container */
    margin-right: 15px; /* Add right margin to the container */
}


.details-address-container,
.details-cost-container {
    width: calc(50% - 30px / 2); /* Adjust width to fit both containers side by side with gap */
    padding: 25px;
	background-color: #2d3292;
    border: 2px solid #FFF;
    border-radius: 25px;
    box-sizing: border-box; /* Ensure padding is included in the width */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure the button is at the bottom */
    flex: 1; /* Make containers flexible and of equal height */
}



.button-container {
    margin-top: auto; /* Push the button to the bottom */
    text-align: right; /* Align the button to the right */
}

/* Normalize heading/body paragraph margins inside the new panel markup */
.panel .panel-head p.white-large,
.panel .panel-body p.white-large{
    margin: 0;            /* remove default paragraph gaps */
}


.details-record-title {
    margin-top:100px;
    margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	color: #FFF;
    background-color:#2d3292;
    border-radius: 25px 25px 0 0;
}

.details-record-title h2 {
    font-weight:500;
	margin: 25px 15px 25px 15px; /* Reset margin for h2 */
    padding: 0; /* Reset padding for h2 */
	font-size: 28pt;
}

.details-conference-details-container {
    /* width:80%;          */
    /* margin-left:10%;   */
    /* margin-right:10%;  */
margin-top:0px;
margin-bottom: 100px;
padding-bottom: 15px;
background-color:#4169e1;
    border-radius: 0 0 25px 25px; /* rounded corners for bottom */
}

.details-record-title,
.details-conference-details-container,
.final-action-container {
    width: 80%;
	margin-left:10%;
    margin-right:10%;
}

.details-record-title-preview {
    width: 100%;
	margin-left:0px;
    margin-right:0px;
	margin-top:100px;
    margin-bottom: 0px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	color: #FFF;
    background-color:#2d3292;
    border-radius: 25px 25px 0 0;
}

.details-conference-details-container-preview {
    width: 100%;
	margin-left:0px;
    margin-right:0px;
	margin-top:0px;
    margin-bottom: 100px;
	padding: 0px 0px 15px 0px;
	overflow: hidden;
	color: #FFF;
    background-color:#4169e1;
    border-radius: 0 0 25px 25px;
}

.details-record {
flex: 0 0 100%;
background-color: #4169e1;
color: #FFF;
border-radius: 0px 0px 0px 0px;
margin-top: 0;
margin-bottom: 0px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}

.details-record-categories {
    width: 30%;
    color: white;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 3px solid white;
    border-bottom: none;
}

.details-record-categories-preview {
    width: 30%;
    color: white;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 3px solid white;
    border-bottom: none;
}

.details-category-button {
    font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
	display: block; /* Change to block to make each button appear on its own line */
    border-radius: 0px;
    background-color:transparent;
    border: none;
    padding: 10px 15px;
    margin: 0px 0px 15px 0px; /* Adjust margin to only apply spacing below the button */
    transition: none;
}

.details-category-button a {
    color: white;
    text-decoration: none;
}

/* Premium conference category links only */
.details-record-categories .details-category-button a,
.details-record-categories-preview .details-category-button a{
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
}

.details-record-categories .details-category-button a:hover,
.details-record-categories-preview .details-category-button a:hover{
    color: #FFF;
    text-decoration: underline;
}

.details-category-button img {
    vertical-align: middle;
    margin-left: 0px;
    margin-right: 10px;
    height: 35px;
}

.details-record-info {
width: 40%;
margin: 0px 0;
padding-left: 0px;
box-sizing: border-box;
border-top: 3px solid white;
}

.details-record-image {
width: 30%;
display: flex;
align-items: flex-start;
justify-content: left;
padding: 15px 15px 15px 15px;
margin: 0px 0px 0px 0px;
overflow: hidden;
border-top: 3px solid white;
}

.details-record-info, .details-record-info * {
    text-align: left; /* Centers text and other content */
    }
.details-record-info img {
        vertical-align: middle; /* Keeps the icon aligned with the text */
        margin-right: 5px; /* Adds some space between the icon and the text */
    }
.details-record-info-date, 
.details-record-info-participants, 
.details-record-info-location,
.details-record-info-tickets,
.details-record-info-website {
        display: flex; /* Uses flexbox to center and align items */
        justify-content: center; /* Centers the contents horizontally */
        align-items: center; /* Aligns the contents vertically */
        flex-direction: row; /* Lays out the flex items in a row */
        margin-bottom: 0px; /* Adds a little space between each item */
    }
.details-record-info-date {
        margin-top: 17px;
		}

.details-record-description {
    font-weight: 300;
	text-align: left;
	font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    border-radius: 0 0 0 0;
    padding: 15px 15px 15px 15px;
	margin: 0px 0px 15px 0px;
}

.details-record-address {
    text-align: left;
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    border-radius: 0 0 25px 25px; /* rounded corners for bottom */
    padding: 15px 15px 15px 15px;
    margin: 0px 0px 0px 0px;
}

.details-record-address strong {
    font-weight: 500; /* Regular weight for "Venue address:" */
	color: #FFF;
}

.details-record-address .address-details {
    font-weight: 300; /* Light weight for actual address */
	color: #FFF;
}



.details-record-social-media {
    text-align: center;
	font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    border-radius: 0 0 25px 25px; /* rounded corners for bottom */
    padding: 15px 15px 15px 15px;
	margin: 50px 0px 0px 0px;
}


/* If there's exactly one .details-cost-container child in .address-cost-container */
.address-cost-container > .details-cost-container:only-child {
    flex: 0 0 auto;
    width: 35%;
    margin-left: auto;
    margin-right: auto;
}

.address-cost-container > .details-address-container:only-child {
    flex: 0 0 auto;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
}


/* Center the button within that container */
.address-cost-container > .details-cost-container:only-child .button-container {
    text-align: center;
}



.image-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 267px; /* Match the height of the image area */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

.error-text {
    color: red;
    font-weight: bold;
    text-align: center;
}

/* Error message styling */
.error-message {
    color: red;
	background-color:#FF0;
    font-size: 0.9em;
    margin-top: 5px;
    display: block;
}

        #filters {
			display: flex;
            flex-direction: row; /* This makes the children align horizontally by default */
            /* other styles as needed */
            justify-content: space-between;
            align-items: center; /* This ensures that the children divs are vertically centered */
            margin-bottom: 20px;
        }
		
		#filterButton {
			align-items: center; /* Vertically centers the content */
            justify-content: center; 
            background-color:#FFF;
			width: 150px; /* Adjust the initial width */
            height: 27px;
            border: 1px solid #2d3292; /* Blue border of 1px */
            border-radius: 10px; /* Rounded corners */
            font-size: 14px;
            font-family: 'Roboto Slab', serif;
            padding-left: 15px; /* Add padding for the icon */
            padding-right: 15px;
			-webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
			}
			
#filtersContainer {
    display: none;
	flex-direction: column;
    flex-wrap: nowrap;
	justify-content: space-between;
    align-items: center;
    width: 100%;
}



.final-action-container {
  background-color: #4169e1;
  border-radius: 25px;
  padding: 35px 25px 45px;
  margin: 40px auto;
  margin-bottom: 120px;
  width: 80%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.final-action-container p.white-large {
  margin: 0 0 0px;
}

.final-action-container.preview-wide{
  scroll-margin-top: 20px;
}


/* button icons */
.btn-icon       { margin-right:.55em; font-size:1.25em; line-height:0; }
.green-check    { color:#31d643; }  /* bright green */
.red-cross      { color:#ff5252; }  /* bright red  */

/* primary vs secondary */
#submitFinal    { background:#2b50e0; }      /* darker royal blue */
#submitFinal:hover { background:#1e3ab3; }

#editListing    { background:#4169e1; opacity:.9; margin-top: 20px;}
#editListing:hover { background:#2d3292; }

/* keep buttons on one line where space allows */
.action-buttons      { flex-wrap:wrap; gap:25px; margin-top: 0;}
.action-buttons form { max-width:none; margin: 0;}    /* let buttons auto-size */
.action-buttons button { width:auto; }
.action-buttons button:hover {background-color: #2d3292;}

/* tighten gap between intro paragraph and first row of buttons */
.action-buttons .preview-btn{
    margin-top: 0px;      /* use 6-10 px to taste (was 20 px) */
}
/* keep the white underline-only hover for the demoted link */
.action-buttons button.demoted:hover{ background:none; }

/* keep a gap below "Submit final" when Edit is demoted */
.action-buttons .demoted      { margin-top:25px; }

/* tighten the space between the intro text and the first button */
.action-buttons #submitFinal {         /* same specificity as the ID selector */
    margin-top: 0px;                  /* was 20px */
}



/* collapse contact details smoothly */
.contact-details {
    border: 0;
	overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .5s ease, opacity .5s ease;
	    /* NEW — remove UA padding while hidden */
    padding: 0;          /* kills the 0.35em / 0.625em */
    margin: 0;           /* (margin was already 0 top, but keep it explicit) */
}
.contact-details.open {
    max-height:850px;   /* plenty – will shrink to content */
    opacity:1;
	margin-top: 50px;
	margin-bottom: 50px;
	border: 2px solid #ffffff;    /* match address / tickets boxes */
    border-radius: 4px;           /* optional – keep if you use rounded corners elsewhere */
    padding: 0px 25px 35px 25px;           /* gives text breathing room inside the thicker border */
    box-sizing: border-box;       /* so padding doesn't add extra width */
}

/* Unique styling for the "Title" (honorific) dropdown only */
.select-honorific {
  max-width: 200px;
  width: auto;            /* override any global width:100% on .preview-input */
  display: inline-block;  /* keeps it tidy with label/line-breaks */
  box-sizing: border-box;
}

/* If .preview-input forces width:100% with high specificity, safely override: */
.contact-details .select-honorific { width: auto !important; }

/* ----------------------------------------------------
   Field labels inside the contact-details panel
   ---------------------------------------------------- */
.contact-details label > span {
    display: block;            /* forces its own line */
    margin-top: 30px;
	margin-bottom: 0px;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;           /* a bit larger */
    font-weight: 400;          /* matches your legend weight */
    color: #fff;               /* white text */
    line-height: normal;
}

/* contact-details inputs – clone the "form-text-large" look */
.contact-details .preview-input {
    /* match .form-text-large from styles_submit.css */
    width: 100%;
	max-width: 600px;
    height: 60px;
	padding: 10px 25px;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
	font-weight: 500;
    line-height: 1.4;
    color: #000;           
    background: #fff; 
    border: 2px solid #4169e1;
	outline: none;
    border-radius: 25px;
    box-sizing: border-box;
    transition: border-color .2s ease;
	margin-top: 0px;
	margin-bottom: 0px;
}
.contact-details .preview-input:focus {
    outline: #fff solid 1px;
    border-color: #4169e1;  /* subtle green highlight on focus (optional) */
}


/* Layout the three name inputs on one line; stack on narrow screens */
.contact-row.name-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr; /* title : first : last */
  gap: 10px;
  align-items: start;
}

/* Contact details: First name + Surname on the same line */
.contact-row.names-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;              /* small gap between the two fields */
  width: 100%;
  max-width: 600px;       /* MUST match .contact-details .preview-input max-width */
  margin: 0 auto;         /* centre the row */
  text-align: center;       /* keep labels aligned nicely */
}

.contact-row.names-row .preview-input{
  width: 100%;
  max-width: none;        /* let each input fill its grid column */
}

/* Optional: keeps error text aligned under each field */
.contact-row.names-row .error-message{
  text-align: left;
}


.edit-contact-tick { color:#9ef0b1; }


/* Dedicated style for the Submit Final button */
.final-button-container {
    background-color: #4169e1;
    border-radius: 25px;
    padding: 10px 25px;
    display: block;
    cursor: pointer;
    color: white;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    text-align: center;
    border: 1px solid white;
    transition: background-color 0.3s ease;
    max-width: 50%; /* Set a specific width for the button */
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    box-sizing: border-box;
    height: auto;
    line-height: normal; /* Ensure text is vertically centered */
}

.final-button-container:hover {
    background-color: #2d3292; /* Darken background on hover */
}


.final-submit-container {
    background-color: #4169e1; /* Same light blue as your preview container */
    border-radius: 25px;
    padding: 15px;
    width: 80%;           /* Match your details container width */
    margin: 20px auto 100px;  /* 20px gap above and auto centering */
    box-sizing: border-box;
    text-align: center;
}

.final-submit-container p {
    margin: 0 0 15px 0; /* Space between the message and the button */
}

		
		.gap-separator-25px {
		width: 100%;
		height: 25px;
		background-color:#FFF;	
		}

h1 {
  font-family: 'Roboto Slab', serif;
  font-weight:500; 
  font-size: 36px;
}

h2 {
  font-family: 'Roboto Slab', serif;
  font-weight:500; 
  font-size: 28px;
  margin-top: 0px;
}

.details-record-title-preview h2 {
    font-size: 28pt;
	font-weight:500;
	margin: 25px 15px 25px 15px; 
    padding: 0;
}

.record-title-free h2 {
    font-size: 24pt; /* or your desired default size for free listings */
    font-weight:400;
	margin: 25px 15px 25px 15px; 
    padding: 0;
}

.record-title-premium h2 {
    font-size: 28pt;
	font-weight:500;
	margin: 25px 15px 25px 15px; 
    padding: 0;
}


h3 {
  font-family: 'Roboto Slab', serif;
  font-weight:400; 
  font-size: 24px;
}

hr {
  border: 2px solid white;
  border-radius: 3px;
  margin: 0;
  padding: 0;
}

hr.white-hr-more-options {width: 90%; margin-top: 35px; margin-bottom: 0px; color:#FFF;}


/* cross-browser centring for "Your contact details" */
.legend-contact {
    /* layout & spacing */
    display: table;         /* key → lets margin auto centre in Firefox */
    margin: 0 auto 10px;    /* centred + same bottom gap you had */
    text-align: center;     /* centre the text inside Chrome/Edge */
    font-family: 'Roboto Slab', serif;
    font-size: 24px;
    font-weight: 500;       /* heavier than the paragraph's 400 */
    line-height: normal;
    color: #fff;
    text-shadow: none;
    text-decoration: none;
    white-space: normal;
}


.more-details-space-after {display:none;}

.more-options {
    background-color: #4169e1; /* Royal Blue color */
    border-radius: 25px; /* Rounded corners */
    padding: 0px 25px; /* Some padding around the text */
    display: inline-block; /* To fit the content's width */
    margin: 20px 0px 20px 0px;
    cursor: pointer; /* Changes cursor to indicate a clickable area */
}

/* Styles for hover effect */
.more-options:hover {
    background-color: #3658a7; /* Darker shade for hover effect */
    /* You can choose any color that suits your design */
}

.moreOptionsTextBlack {
	font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;
}

.moreOptionsTextWhite {
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; margin-top: 0px; margin-bottom: 0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
}


p {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#000; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;}
		
p.large {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;}

p.white {font-family: 'Roboto Slab', serif; font-size:14px; font-weight: 300; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;}
		
p.white-large {font-family: 'Roboto Slab', serif; font-size:18px; font-weight: 300; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;}

p.white-huge {font-family: 'Roboto Slab', serif; font-size:24px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;}


p.white-more-options {font-family: 'Roboto Slab', serif; font-size:24px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; margin-top: 35px; margin-bottom: 10px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;}


#pagination {
    text-align: right; /* Aligns the pagination links to the right */
    margin-bottom: 50px; /* Adds space below the pagination container */
}

/* Styling for pagination links */
.paginationLink, 
.paginationLink:visited {
    display: inline-block; /* Make each link an inline block for better control */
    border: 1px solid #000; /* 1px border */
    background-color: #FFF; /* White background */
    margin: 0 5px; /* Maintain spacing between links */
    padding: 5px 10px; /* Padding inside each box */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    color: #0000FF; /* Text color */
    font-family: 'Roboto Slab', serif; /* Specify the font family */
    font-size: 24px; /* Consistent font size */
}

/* Hover effect for pagination links */
.paginationLink:hover {
    background-color: #E8E8E8; /* Light grey background on hover */
    text-decoration: none; /* Optional: Ensure no underline on hover */
}

/* Style for the current page link */
.paginationLink.current {
    font-weight: bold; /* Make the current page number bold */
    background-color: #D3D3D3; /* Different background for the current page */
    color: #000; /* Text color for current page */
    pointer-events: none; /* Disable hover and click on the current page link */
}

.preview-btn {
    background-color: #4169e1;
    border-radius: 25px;
    padding: 10px 25px;
    display: block;
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
    text-align: center;
	text-decoration: none;
    border: 2px solid white;
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    box-sizing: border-box;
    height: auto;
    line-height: normal;
}

.preview-btn:hover {
    background-color: #2d3292; /* Darken background on hover */
	text-decoration: none;
}

/* 1) smooth intro fade (already referenced in JS) */
#previewActionIntro { transition: opacity .25s ease; margin-bottom: 0px;}

/* demoted "Back to edit listing" remains plain text link */
.preview-btn.demoted{
    background-color: transparent;
    border:none;
    color:#fff;
    font-size:18px;
    padding:0;
    text-decoration:none;   /* no underline by default */
    cursor:pointer;
}
.preview-btn.demoted:hover{
    background-color: transparent;
    transition: none;
	text-decoration:underline;
    color:#fff;             /* keep pure white */
}

/* Preview page: keep Edit + Upgrade side-by-side, centred, with spacing */
.preview-secondary-actions{
  display: flex;
  justify-content: center;
  align-items: flex-end;  /* <-- key change: bottom align */
  gap: 20px;
  height: 70px;
}

/* optional but helps prevent weird default spacing */
.preview-secondary-actions form{
  margin: 0;
  align-self: flex-end;
}

/* After "Continue": demoted text links should sit further apart */
.preview-secondary-actions.is-demoted{
  gap: 50px;
  align-items: center;
}

/* Hide the icons when the buttons are demoted to text links */
.preview-secondary-actions.is-demoted .btn-icon{
  display: none;
}


p.thankyou-gap {font-family: 'Roboto Slab', serif; font-size:10px; line-height:normal; color:#000; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;}


.record {
    flex: 0 0 100%;
    background-color: #4169e1;
    color: #FFF;
    border-radius: 0 0 25px 25px; /* rounded corners for bottom */
    margin-top: 0;
    margin-bottom: 90px;
    padding: 0;
    box-sizing: border-box;
    /* Ensure no overflow from child elements */
    overflow: hidden;
}

.records-container {
            background-color:#FFF;
			width: 80%;
            margin: 0 auto;
			padding: 0;
            text-align: center;
}

.records-container-preview {
            width:80%;                /* match .records-container */
            margin: 90px auto 0;
			padding: 0;
            text-align: center;
}

/* Preview page: make Basic preview full-width */
.records-container-preview .records-container {
    width: 100%;
	max-width: 1523px;
}


/* Details page (conference_details.php) – clamp basic layout width
   so it matches preview and homepage */
.details-page .records-container {
    max-width: 1523px;
    margin: 90px auto 0;   /* NEW: top gap on Basic details pages only */
}

.record a {
    overflow-wrap: anywhere;
}

.record-title {
    /* Styles for the title and horizontal line container */
    border-radius: 25px 25px 0 0; /* rounded top corners */
    border-bottom: none;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    width: 100%;
    color: #FFF;
    background-color: #2d3292;
    overflow: hidden;
}

.record-title-free {
	border-radius: 25px 25px 0 0; /* rounded top corners */
    border-bottom: none;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    width: 100%;
    color: #FFF;
    overflow: hidden;
    background-color: #4169e1; /* Light Blue */
}

.record-title-premium {
	border-radius: 25px 25px 0 0; /* rounded top corners */
    border-bottom: none;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    width: 100%;
    color: #FFF;
    overflow: hidden;
    background-color: #2d3292; /* Dark Blue */
}


.record-categories {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;     /* perfect centring */
   align-items: center;
   gap: 15px;                   /* spacing between buttons */
   width: 100%;
   box-sizing: border-box;

   background: linear-gradient(to bottom, #2d3292 0%, #4169e1 100%);
   color: white;
   padding: 15px 15px 15px 15px; /* symmetric left/right */
   margin-top: 0px;
   margin-bottom: 0px;
   border-top: 3px solid white;
   border-bottom: none;
}

.record-categories-free {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;     /* perfect centring */
   align-items: center;
   gap: 15px;
   width: 100%;
   box-sizing: border-box;

   background-color: #4169e1;   /* Light Blue */
   color: white;
   padding: 15px 15px 15px 15px; /* symmetric left/right */
   margin-top: 0px;
   margin-bottom: 0px;
   border-top: 3px solid white;
   border-bottom: none;
}

/* Preview page: prevent Basic categories strip from overflowing */
.records-container-preview .record-categories-free {
    width: auto; /* let the browser account for padding within the container */
}


/* Conference details page: prevent Basic categories strip from overflowing */
.details-page .record-categories-free {
    width: auto; /* let the browser account for padding within the details layout */
}

.record-categories-premium {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;     /* perfect centring */
   align-items: center;
   gap: 15px;
   width: 100%;
   box-sizing: border-box;

   background: linear-gradient(to bottom, #2d3292 0%, #4169e1 100%);
   color: white;
   padding: 15px 15px 15px 15px; /* symmetric left/right */
   margin-top: 0px;
   margin-bottom: 0px;
   border-top: 3px solid white;
   border-bottom: none;
}

/* Prevent button margins from skewing centring inside category strips */
.record-categories .category-button,
.record-categories-free .category-button,
.record-categories-premium .category-button{
    margin: 0 !important;
}


.record-content {
    display: flex;
	width: 100%;
	background-color:#4169e1;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.record-image {
    width: 30%; /* Or your preferred width */
    display: flex;
    align-items: flex-start; /* Vertically align the image */
    justify-content: left;
    padding: 0;
	margin: 0px 15px 15px 15px;
    background-color: #4169e1;
    /* Ensure the container doesn't squash the image */
    overflow: hidden; /* Optional: hides parts of the image that overflow the container */
}

.left-aligned-image {
    max-width: 100%; /* Ensures the image doesn't exceed its container */
    height: auto; /* Maintains the aspect ratio */
    display: block;
    /* Remove any fixed height if it's set */
}

.record-info img {
    vertical-align: middle; /* Aligns the image vertically with the text */
	margin-bottom: 1px; 
	margin-right: 10px;
}

.record-info.full-width {
    background-color:transparent; 
	width: 100%;
}

.record-info.partial-width {
    padding-top:15px;
	background-color:transparent;
	width: 35%;
}

.record-info-location,
.record-info-tickets {
    background-color:transparent;
}

#record-info-participants .venue-type {
    display: inline-block;
    margin-left: 0px; /* Default margin-left */
}


.record-description {
    width: 35%;
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    background-color: #4169e1;
    margin: 15px 50px 15px 15px;
    /* Additional styling for the description */
}

.record-description-text {
    text-align: left;
}

        .record:nth-of-type(2n) {
            margin-right: 0; /* Removes right margin for every second record */
        }


.records-info {
    text-align: center;
    margin-top: 20px; /* Adjust as necessary */
}


#recordsPerPage {
    flex: 1;
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Aligns content to the left */
    font-size: 14px; /* Smaller font size for small screens */
    font-family: 'Roboto Slab', serif; /* Keep the font consistent */
    background-color: transparent;
}

#recordsPerPageSelect {
    width: 80px;
    height: 40px; /* Match height with the other  dropdown */
    border: 1px solid #2d3292; /* Blue border of 1px */
    border-radius: 10px; /* Rounded corners */
    background-color: transparent;
    font-size: 14px; /* Smaller font size for small screens */
    font-family: 'Roboto Slab', serif; /* Keep the font consistent */
    background: url('https://futureevents.net/images/icons/sort-order-arrow-20x20px.gif') no-repeat left 10px center; 
    background-size: 20px 20px; /* Adjust the size of the icon */
    padding-left: 50px; /* Add padding for the icon on the left */
    padding-right: 10px; /* Adjust as needed */
	margin-right: 5px;
    text-align: left; /* Align the dropdown text to the left */
    -webkit-appearance: none; /* Remove default styling for select in WebKit browsers */
    -moz-appearance: none; /* Remove default styling for select in Mozilla browsers */
    appearance: none; /* Remove default styling for select */
}

/* Remove border on focus for the second dropdown */
#recordsPerPageSelect:focus {
    outline: none;
}

/* Additional browser-specific styles, if needed */
#recordsPerPageSelect::-moz-focus-inner {
    border: 0;
}



#regionDiv {
    display: flex;
	width: 100%;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    padding: 0px 0;
}

#regionDiv label {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    color: #FFF;
    margin: 5px 10px;
    cursor: pointer;
}

#regionDiv input[type="checkbox"] {
    accent-color: #4169e1; /* Styling checkboxes with the primary color */
    margin-right: 8px;
}

/* Custom checkbox styling */
#regionDiv input[type="checkbox"] + label {
    display: flex;
    align-items: center;
}


.search-box {
    width: 60%; /* Adjust as needed */
    background-color:transparent;
    border-radius: 50px; /* Rounded corners */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Vertically center child elements */
    justify-content: space-between; /* Distribute space evenly */
    padding: 0px 0px 0px 0px; /* Adjust padding as needed */
}



.search-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns children horizontally */
    justify-content: center; /* Center-aligns children vertically (optional, depends on overall layout) */
    /* Additional styles as needed */
}

.search-input-wrapper {
    width: 80%;
    background-color:#FFF;
    position: relative;
    display: flex;
    align-items: right;
    border: none;
    border-radius: 25px;
    /* Add a transparent outline to maintain layout consistency */
    outline: 1px solid transparent;
    outline-offset: -1px; /* Align the outline inside the element */
    box-shadow: 0 0 0 1px transparent; /* Transparent box-shadow for consistent layout */
}

.search-input-wrapper.focused {
    outline: 1px solid #2d3292; /* White outer outline */
    box-shadow: 0 0 0 3px #FFF; /* White inner box-shadow to create double outline effect */
    outline-offset: -2px; /* Adjust outline offset to align correctly */
}


#searchInput {
    width: 80%; /* 80% of the .search-box width */
    height: 60px; /* Taller input field */
    border:none;
    border-radius: 25px; /* Rounded corners */
    font-size: 18px; /* Font size similar to recordsPerPageSelect */
    font-family: 'Roboto Slab', serif; /* Font family similar to recordsPerPageSelect */
    padding: 0 25px 0 25px; /* Padding inside the input, with larger left padding */
    margin: 0px 0px 0px 0px; /* Removes any default margin */
    background-image:none;
    background-color:transparent;
}

#searchInput:focus {
    outline: none;
}


.search-clear-btn, .search-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    padding: 0px;
}

/* Customizing the clear button */
.search-clear-btn {
    background: url('https://futureevents.net/images/icons/search-cancel-40x40px.gif') no-repeat right;
    background-size: contain; /* Ensure the image fits within the button */
	background-color:transparent;
    border: none;
    width: 40px; /* Adjust the width as needed */
    height: 60px; /* Adjust the height as needed */
    margin-left: 10px;
	margin-right: 10px;
    cursor: pointer;
    text-indent: -9999px; /* Hide the default text/icon */
    line-height: 0; /* Remove extra height caused by line-height */
    overflow: hidden; /* Ensures nothing spills outside the button area */
}


/* Customizing the search button */
.search-btn {
    background: url('https://futureevents.net/images/icons/search-magnifying-glass-40x40px.gif') no-repeat right;
    background-size: contain; /* Ensure the image fits within the button */
	background-color:transparent;
    border: none;
    width: 40px; /* Adjust the width as needed */
    height: 60px; /* Adjust the height as needed */
    margin-left: 10px;
	margin-right: 10px;
    cursor: pointer;
    text-indent: -9999px; /* Hide the default icon/text */
    line-height: 0; /* Remove extra height caused by line-height */
    overflow: hidden; /* Ensures nothing spills outside the button area */
}

		
		#searchMessage {
    margin-top: 10px;
	margin-bottom: 30px;
    font-size: 1em;
    color: #666;
}

.socMedIcon {
margin-right: 15px;	
margin-bottom: 15px;
}
/* remove the excess 15 px gap after the very last icon */
.details-record-social-media a:last-child .socMedIcon {
    margin-right: 0;
}


#sortOrderDiv {
    flex: 1;
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: flex-end; /* Aligns content to the right */
    background-color: #FFF;
}

#sortOrderDiv select {
    width: 250px; /* Adjust the initial width */
    height: 40px;
    border: 1px solid #2d3292; /* Blue border of 1px */
    border-radius: 10px; /* Rounded corners */
    background-color: transparent;
    font-size: 14px;
    font-family: 'Roboto Slab', serif;
    background: url('https://futureevents.net/images/icons/sort-order-arrow-20x20px.gif') no-repeat right 10px center;
    background-size: 20px 20px;
    padding-left: 15px; /* Add padding for the icon */
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Remove border on focus */
#sortOrderDiv select:focus {
    outline: none;
    border: 1px solid #2d3292;
}

/* Additional styles for specific browsers, if needed */
#sortOrderDiv select::-moz-focus-inner {
    border: 0;
}

.moreOptionsDropdown {
	background-color:#FFF;
}

#statusAndDateRangeContainer {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Ensures it fills the container */
    padding: 0 15px; /* Optional: Adjust based on your design */
	margin-top: 10px;
}

#statusDiv, #dateRangeDiv {
    flex: 1; /* Allows each child to grow and fill the available space */
    min-width: 0; /* Allows the boxes to shrink if necessary */
	padding: 0 0px; /* Adds internal spacing */
    box-sizing: border-box; /* Ensures padding is included in the total width */
    display: flex; /* Ensures flex properties apply */
    align-items: center; /* Aligns items vertically within each div */
}

#statusDiv {
    justify-content: left;
	padding-left: 75px;
}

#dateRangeDiv {
    justify-content: right;
	margin-left:0px;
	margin-right:0px;
	min-width: 60%;
	padding-right: 75px;
}

.dateRangeInput {
    display: flex; /* Aligns label and input side by side */
    align-items: center; /* Centers them vertically */
    margin-right: 10px; /* Spacing between inputs */
}


#statusDiv select {
    width: 250px; /* Adjust the initial width */
    height: 40px;
    border: 1px solid #2d3292; /* Blue border of 1px */
    border-radius: 25px; /* Rounded corners */
    background-color: #FFF; /* Set background color */
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    background-image: url('https://futureevents.net/images/icons/sort-order-arrow-20x20px.gif'); /* Set background image */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    padding-left: 15px; /* Add padding for the icon */
    padding-right: 35px;
	padding-top: 0px;
	padding-bottom: 2px;
	margin-top: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* Remove border on focus */
#statusDiv select:focus {
    background-color:#FFF;
	outline: none;
    border: 1px solid #2d3292;
}

/* Additional styles for specific browsers, if needed */
#statusDiv select::-moz-focus-inner {
    border: 0;
}


strong {
    font-weight: 500; /* Font weight for strong elements */
}


#subjectsDiv {
    display: flex;
	width: 100%;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    padding: 0px 0;
}

#subjectsDiv label {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    color: #FFF;
    margin: 5px 10px;
    cursor: pointer;
}

#subjectsDiv input[type="checkbox"] {
    accent-color: #4169e1; /* Styling checkboxes with the primary color */
    margin-right: 8px;
}

/* Custom checkbox styling */
#subjectsDiv input[type="checkbox"] + label {
    display: flex;
    align-items: center;
}

.thankyou-box{
    background:#4169e1;
    color:#fff;
    border-radius:25px;
    width:90%;
    max-width:900px;
    padding:60px 40px 70px;
    text-align:center;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.thankyou-logo{
    display:block;
    text-decoration:none;
    margin:0 0 46px 0;
}

.thankyou-logo:link,
.thankyou-logo:visited,
.thankyou-logo:hover,
.thankyou-logo:active{
    text-decoration:none;
}

.thankyou-logo-img{
    display:block;
    width:auto;
    height:64px;
    max-width:100%;
}

.thankyou-box p.white-huge{
    margin:0 0 26px 0;
}

.thankyou-box p.white-large{
    margin:0;
    max-width:700px;
}

#ticketPriceContainer {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 0;
    	margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
}

.ticketPriceInput {
    display: flex;
    align-items: center;
}

.ticketPriceBox {
    width: 120px;
    height: 40px;
    margin-left: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px solid #2d3292;
    border-radius: 25px;
    background-color: #FFF;
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    color: #000;
}

.ticketPriceBox:focus {
    outline: none;
    border: 1px solid #2d3292;
}

#ticketCurrencyDiv {
    display: flex;
    align-items: center;
}

#ticketCurrencyFilter {
    width: 290px;
    height: 40px;
    border: 1px solid #2d3292;
    border-radius: 25px;
    background-color: #FFF;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    background-image: url('https://futureevents.net/images/icons/sort-order-arrow-20x20px.gif');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    padding-left: 15px;
    padding-right: 35px;
	padding-top: 0px;
	padding-bottom: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#ticketCurrencyFilter:focus {
    outline: none;
    border: 1px solid #2d3292;
}


#venueTypeDiv {
    display: flex;
	width: 100%;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    padding: 0px 0;
}

#venueTypeDiv label {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    color: #FFF;
    margin: 5px 10px;
    cursor: pointer;
}

#venueTypeDiv input[type="checkbox"] {
    accent-color: #4169e1; /* Styling checkboxes with the primary color */
    margin-right: 8px;
}

/* Custom checkbox styling */
#venueTypeDiv input[type="checkbox"] + label {
    display: flex;
    align-items: center;
}

/* =====================================================
   Advanced search options (outside hero)
   ===================================================== */

.home-page .content-shell{
  width: min(1523px, 92%);
  margin: 0 auto;
}

/* Hidden by default; shown via jQuery slideDown */
.home-page .advanced-options-wrap{
  display: none;
  margin: 14px 0 18px; /* bottom gap before recordsInfo */
}

/* Match the homepage search-box look (same width + blue + rounded corners) */
.home-page .advanced-options-box{
  width: min(980px, 100%);
  margin: 0 auto;
  background: #2d3292;
  border-radius: 25px;
  padding: 6px 0 2px;
}




        @media (max-width: 1699px) {
			
		A:link {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A:visited {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A:hover {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A:active {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#0000FF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		
		A.white:link {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white:visited {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white:hover {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A.white:active {font-family: 'Roboto Slab', serif; font-size:14px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}

		A.white-large:link {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white-large:visited {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
		A.white-large:hover {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
		A.white-large:active {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none;}
		
	.dateBox {
	margin-left:10px;
	margin-right:10px; 
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;
}

#dateRangeDiv {
    justify-content: right;
	margin-left:0px;
	margin-right:0px;
	padding-right: 102px;
	max-width: 55%;
}

.dateRangeInput {
    margin-right: 10px; /* Spacing between inputs */
    max-width: 200px;
}

.details-category-button {
    font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
	display: block; /* Change to block to make each button appear on its own line */
    border-radius: 0px;
    background-color:transparent;
    border: none;
    padding: 10px 15px;
    margin: 0px 0px 15px 0px; /* Adjust margin to only apply spacing below the button */
    transition: none;
}

.details-category-button a {
    color: white;
    text-decoration: none;
}

/* Premium conference category links only */
.details-record-categories .details-category-button a,
.details-record-categories-preview .details-category-button a{
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
    line-height: normal;
    color: #FFF;
    text-shadow: none;
    text-decoration: none;
}

.details-record-categories .details-category-button a:hover,
.details-record-categories-preview .details-category-button a:hover{
    color: #FFF;
    text-decoration: underline;
}

.details-category-button img {
    vertical-align: middle;
    margin-left: 0px;
    margin-right: 10px;
    height: 35px;
}
		
		#filtersContainer {
    display: none;
    }

.moreOptionsTextWhite {
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
}
	
	#statusDiv {
    justify-content: left;
	padding-left: 102px;
}

#statusDiv select {
    font-size: 16px;
}
		
		p.white-large {font-family: 'Roboto Slab', serif; font-size:16px; font-weight: 300; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;}

            .record {
                flex: 0 0 100%;
                margin-right: 0;
            }
	
        }










/* For screen width at least 1550px */
@media (min-width: 1550px) {
    .record-info.full-width {
        display: flex;
        flex-wrap: nowrap;
    }
    .record-info.full-width > div {
        flex: 1 1 25%; /* Each child takes up 25% of the width */
        box-sizing: border-box;
        padding: 0 15px; /* Adjust padding as needed */
    }
}

/* For screen width between 800px and 1549px */
@media (min-width: 800px) and (max-width: 1549px) {
    .record-info.two-by-two-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .record-info.two-by-two-layout > div {
        flex: 0 0 50%; /* Each child takes up 50% of the width */
        box-sizing: border-box;
        padding: 0 15px; /* Adjust padding as needed */
    }
}

/* For screen width between 1000px and 1399px */
@media (min-width: 1000px) and (max-width: 1399px) {

	.dateBox {
	margin-left:10px;
	margin-right:10px; 
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;
}

	.moreOptionsTextWhite {
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
}

}

/* For screen width between 900px and 999px */
@media (min-width: 900px) and (max-width: 999px) {

	.dateBox {
	margin-left:10px;
	margin-right:10px; 
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;
}

	.moreOptionsTextWhite {
	font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
}

}








		
@media (max-width: 1399px) {

.category-button {
    margin: 0px 15px 15px 0px;
}

#dateRangeDiv {
	justify-content: center;
    padding-left: 10px;
	padding-right: 0px;
	width: 50%;
	margin-right: 10%;
}

.dateRangeInput {
    max-width: 250px;
}

.details-category-button {
    font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#FFF;
	display: inline-block; /* Change to inline-block to keep the buttons on the same line */
    border-radius: 0px;
    background-color:transparent;
    border: none;
    padding: 10px 15px;
    margin: 0px 0px 0px 0px; /* Adjust margin to only apply spacing below the button */
    transition: none;
}

.details-record-image {
width: 50%;
display: flex;
align-items: flex-start;
justify-content: left;
padding: 15px 0px 15px 0px;
margin: 0px 0px 0px 0px;
overflow: hidden;
border-top: 3px solid white;
}

.details-record-info {
width: 50%;
margin: 0px 0;
padding-left: 0px;
box-sizing: border-box;
border-top: 3px solid white;
}

.details-record-categories {
    width: 100%;
    color: white;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 0px;
    border-bottom: none;
}

.details-record-categories-preview {
    width: 100%;
    color: white;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 0px;
    border-bottom: none;
}

.details-record-preview {
    width: 100%;
    color: white;
    padding: 15px 15px 15px 15px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 0px;
    border-bottom: none;
}

#filterButton {
			width: 135px;
            margin-top: 10px;
			}

.record-image {
        width: 50%;
		margin: 0px;
		padding-right: 15px;
        box-sizing: border-box; /* Include padding and border in the element's width and height */
		background-color:transparent;
    }

    .left-aligned-image {
    max-width: 100%; /* Ensures the image doesn't exceed its container */
    margin-top: 0px;
    margin-left: 15px;
    height: auto; /* Maintain aspect ratio */
    }
	
	.record-info {
        width: 50%;
		margin: 0px 0; /* Adjust margin as needed */
		padding-left: 0px;
		box-sizing: border-box;
		background-color:transparent;
        }

    .record-info.partial-width {
    background-color:transparent;
	padding-left: 15px;
	box-sizing: border-box;
	width: 50%;
}

    .record-description {
        width: 100%; /* Full width for the description */
        margin: 10px 15px 15px 15px; /* Adjust margin as needed */
        background-color: #4169e1;
        /* Other existing styles */
    }

    .record-content {
        flex-wrap: wrap; /* Allow items to wrap to the next line */
    }
	
	.search-box {
    width: 80%; /* Adjust as needed */
	padding: 0px 15px 0px 15px;
}

	#statusDiv {
    width: 30%;
	margin-left: 10%;
	justify-content: right;
	padding-right: 0px;
}

#statusDiv select {
    width: 150px;
}
	
}


/* 900 px and wider ── Symmetry scenarios for Address/Tickets (desktop only) + tidy the ticket panel */
@media (min-width: 900px) {

      /* Normalise paragraph margins inside the panels */
  .address-cost-container.scenario-1 .panel p.white-large,
  .address-cost-container.scenario-2 .panel p.white-large,
  .address-cost-container.scenario-3 .panel p.white-large,
  .address-cost-container.scenario-4 .panel p.white-large{
    margin: 0;
  }

  /* Base: make both panels use the same vertical rhythm */
  .address-cost-container.scenario-1 .panel,
  .address-cost-container.scenario-2 .panel,
  .address-cost-container.scenario-3 .panel,
  .address-cost-container.scenario-4 .panel{
    justify-content: center;   /* vertical centring of the panel's content */
    align-items: stretch;
    row-gap: .5em;             /* even gap between heading and body */
  }

  /* When a panel has no button, keep it vertically centred */
  .address-cost-container.scenario-2 .details-address-container.no-button,
  .address-cost-container.scenario-3 .details-cost-container.no-button,
  .address-cost-container.scenario-4 .panel.no-button{
    justify-content: center;
  }

  /* Scenario 2: Address has NO button → make the gap under "Venue address:" smaller */
  .address-cost-container.scenario-2 .details-address-container.no-button{
    row-gap: .25em;            /* tighter head→body spacing */
  }

  /* Consistent, modest gap above buttons wherever they exist
     (override the default "margin-top:auto" that pushes them to the bottom) */
  .address-cost-container.scenario-1 .panel.has-button .button-container,
  .address-cost-container.scenario-3 .details-address-container.has-button .button-container,
  .address-cost-container.scenario-2 .details-cost-container.has-button .button-container{
    margin-top: .75em !important;
  }

    /* centre the whole column and add one "line" of space
       between Tickets:  ·  FREE  ·  button                */
    /* make the two blue boxes behave identically */
    .details-cost-container,
    .details-address-container{
        display: flex;            /* column layout */
        flex-direction: column;
        align-items: center;
        justify-content: center;  /* vertically centre the content */
        row-gap: 0.5em;           /* ≈ one line of whitespace between heading and text */
        text-align: center;
    }

    /* tighten default paragraph margins for both panels */
    .details-cost-container p.white-large,
    .details-address-container p.white-large{
        margin: 0;
        text-align: center;
    }

    /* modest gap above the button in both panels
       (overrides the global .button-container { margin-top:auto }) */
    .details-cost-container .button-container,
    .details-address-container .button-container{
        margin-top: 0.75em;
        text-align: center;       /* keep button centring consistent with Tickets */
    }
}





@media (max-width: 899px) {
    A.white-large:link {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
    A.white-large:visited {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none;}
    A.white-large:hover {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:underline;}
    A.white-large:active {font-family: 'Roboto Slab', serif; font-size:16px; line-height:normal; color:#FFF; margin-left:0px; margin-right:0px; text-shadow: none;}

        /* Mobile: standardize Address/Tickets vertical rhythm */
    .address-cost-container .panel{
        display: flex;
        flex-direction: column;
        justify-content: center;   /* center head+body as a unit when no button */
        align-items: stretch;      /* keep text full-width (no centering) */
        row-gap: 0.5em;            /* single, consistent "line" between sections */
    }

    .address-cost-container .panel .panel-head,
    .address-cost-container .panel .panel-body{
        width: 100%;
    }

    /* On mobile we don't pin the button to the bottom;
       use a modest, consistent gap and center it */
    .address-cost-container .panel .button-container{
        margin-top: 0.75em;        /* overrides the global margin-top:auto; */
        text-align: center;         /* mobile: center the button */
    }

    /* If there's no button, hide any empty container cleanly */
    .address-cost-container .panel.no-button .button-container{
        display: none;
    }


    .category-button {
        margin: 5px; /* Ensure equal spacing around each button */
        flex: 0 1 auto; /* Allow buttons to resize based on content */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: auto; /* Set width to auto */
    }

    #dateRangeDiv .dateRangeInput {
        display: block; /* Stacks the label and input vertically */
        margin: 10px auto; /* Vertical margin and horizontally centered */
    }

    #dateRangeDiv label, 
    #dateRangeDiv .dateBox {
        display: inline-block; /* Aligns label and box on the same line */
        margin: 5px 0; /* Small vertical margin for spacing */
    }

    #dateRangeDiv #filterButton {
        display: block; /* Button on its own line */
        margin: 15px auto; /* Vertical margin and horizontally centered */
    }

    .address-cost-container {
        flex-direction: column; /* Stack the containers vertically */
        gap: 30px; /* Add vertical gap between the containers */
    }

    /* ── override widths now that content sits inside .records-container ── */
    .details-record-title,
    .details-conference-details-container,
    .final-action-container {
    width: 90%;
	margin-left:5%;
    margin-right:5%;
    }

    .details-address-container,
    .details-cost-container {
        width: 100%; /* Make containers full width */
        margin-left: 0; /* Remove left margin */
        margin-right: 0; /* Remove right margin */
    }

    .details-record-image {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 15px 0px 15px 0px;
        margin: 0px 0px 0px 0px;
        overflow: hidden;
        border-top: 3px solid white;
    }

    .details-record-info {
        width: 100%;
        margin: 0px 0;
        padding-left: 0px;
        box-sizing: border-box;
        border-top: 0px;
    }
	
    .more-details-space-after {display:block;}
		
    p.white-large {
        font-family: 'Roboto Slab', serif;
        font-size:16px;
        font-weight: 300;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        color:#FFF;
    }

    p.white-huge {
        font-family: 'Roboto Slab', serif;
        font-size:18px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        color:#FFF;
    }

    .left-aligned-image {
        max-width: 100%;
        height: auto;
        margin: 0px 0px 0px 0px; /* Adjust margin as needed */
        padding: 0px;
    }

    .record-categories {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Allows items to wrap onto the next line */
        margin: 0px 0px 0px 0px;
        padding: 15px 15px 0px 15px;
    }

    .record-image {
        width: 100%; /* Set each DIV to full width */
        margin: 0px 0px 0px 0px; /* Adjust margin as needed */
        align-items: center; /* Center the image vertically if needed */
        justify-content: center; /* Center the image horizontally */
        padding: 0px;
    }
	

    .record-content {
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        margin: 0px 0px 0px 0px; /* Adjust margin as needed */
    }

    .record-info, .record-info * {
        text-align: left; /* Centers text and other content */
    }

    .record-info img {
        vertical-align: middle; /* Keeps the icon aligned with the text */
        margin-right: 5px; /* Adds some space between the icon and the text */
    }

    .record-info-date, 
.record-info-participants, 
.record-info-location,
.record-info-tickets,
.record-info-website {
    display: flex; /* Uses flexbox to center and align items */
    justify-content: center; /* Centers the contents horizontally */
    align-items: center; /* Aligns the contents vertically */
    flex-direction: row; /* Lays out the flex items in a row */
    margin-bottom: 0px; /* Adds a little space between each item */
}

    .record-info-date {
        margin-top: 17px;
    }

    .record-info.partial-width {
        background-color:transparent;
        width: 100%;
        padding-left: 0px;
    }

    .record-description {
        width: 100%; /* Set each DIV to full width */
        margin: 5px 0px 0px 0px; /* Adjust margin as needed */
        align-items: center; /* Center the image vertically if needed */
        justify-content: center; /* Center the image horizontally */
        padding: 0px 15px 0px 15px;
        background-color:transparent;
    }
	
	/* Increase to 90% for smaller screens */
	.records-container,
.records-container-preview{
    width:90%;
    /* margin: 0 auto; */
    padding: 0;
    text-align: center;
}

.record-categories,
.record-categories-free,
.record-categories-premium{
    gap: 10px;
    padding-bottom: 10px;
}


/* Preserve top gap on details pages (Basic conferences) */
.details-page .records-container{
    margin: 90px auto 0;
}

#searchInput {
        width: 70%; /* 60% of the .search-box width */
    }

    #sortOrderDiv select {
        width: auto; /* Allow the dropdown to expand as needed */
        min-width: 125px; /* Ensure it doesn't become too small */
    }
}



/* For screen width between 800px and 899px */
@media (min-width: 800px) and (max-width: 899px) {
    #dateRangeDiv {
        min-width: 380px;
        justify-content: center;
        padding-left: 10px;
        padding-right: 0px;
        margin-right: 10%;
    }
	
	    #dateRangeDiv .dateRangeInput {
        margin: 0px auto; 
    }

    #statusDiv {
        min-width: 135px;
        margin-left: 10%;
        justify-content: left;
        padding-left: 0px;
        padding-right: 0px;
		padding-top: 28px;
    }
	
	#statusAndDateRangeContainer {
    margin-top: 0px;
	padding: 0px;
}


}



/* Homepage (index.php): Premium listings only — increase gap above image on 539–899px */
@media (min-width: 539px) and (max-width: 899px) {
  #conferenceList .record-categories-premium + .record .record-content {
    padding-top: 15px;
  }
}



/* For screen width between 539px and 799px */
@media (max-width: 799px) {
    
	/* If there's exactly one .details-cost-container child in .address-cost-container */
.address-cost-container > .details-cost-container:only-child {
    flex: 0 0 auto;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.address-cost-container > .details-address-container:only-child {
    flex: 0 0 auto;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
	
	#dateRangeDiv label,
    #dateRangeDiv .dateBox {
        margin: 0px 0;
    }
    		
    #dateRangeDiv {
        display: block;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
    }
	
    .dateRangeInput {
        margin-right: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #statusDiv, #statusDiv select {
        width: 100%;
        box-sizing: border-box;
        margin: auto; /* Centering if needed */
    }

    #filtersContainer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        margin-top: 20px;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }

    #regionDiv label {
        font-size: 16px; /* Slightly smaller font size for mobile */
    }

    #statusAndDateRangeContainer {
        flex-direction: column;
        width: 100%;
        max-height: 140px;
    }

    #statusDiv {
        display: block;
        width: 100%;
        height: 100px;
        max-height: 100px;
        margin-left: 0px;
        justify-content: center;
        align-items: center;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        vertical-align: middle;
    }

    #statusDiv select {
        width: 150px;
        max-height: 100px;
        min-width: 150px;
        max-width: 150px;
        vertical-align: middle;
    }

    #subjectsDiv label {
        font-size: 16px; /* Slightly smaller font size for mobile */
    }

    #ticketPriceContainer {
        flex-direction: column;
        gap: 10px;
    }

    .ticketPriceInput {
        justify-content: center;
    }

    #ticketCurrencyFilter {
        width: min(290px, 100%);
    }

    #venueTypeDiv label {
        font-size: 16px; /* Slightly smaller font size for mobile */
    }
}

/* Media query for screens 700px and below */
@media (max-width: 700px) {
    .button-container {
        flex-direction: column; /* Stacks the buttons vertically */
        align-items: center; /* Centers buttons */
        margin: 0px 0px 0px 0px;
    }
	
	.contact-row.name-row {
    grid-template-columns: 1fr; /* stack on mobile */
  }
  
  .contact-row.names-row{
    grid-template-columns: 1fr;
  }
  
      .select-buttons {
        width: auto; /* Allows natural width based on content */
        margin: 0px 10px 0px 10px;
        padding: 0px 10px 0px 10px;
        background-color:transparent;
    }

    .blue-button {
        margin: 0px 0px 0px 0px;
    }
    
    .select-container {
        display: flex;
        width: 100%; /* Full width to contain both select buttons */
        justify-content: space-evenly; /* Evenly space the select buttons */
        margin: 0px 0px 20px 0px;
    }
	
	p.thankyou-gap {font-family: 'Roboto Slab', serif; font-size:18px; line-height:normal; color:#000; margin-left:0px; margin-right:0px; text-shadow: none; text-decoration:none; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; color:#000;}
	
	  .thankyou-logo{
    margin-bottom: 34px;
  }

  .thankyou-logo-img{
    height: 52px;
  }

  .thankyou-box p.white-huge{
    margin: 0 0 22px 0;
  }

  .thankyou-box p.white-large{
    margin: 0;
  }
	
}


@media (max-width: 538px) {
    A.white-large:link {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
    }

    A.white-large:visited {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
    }

    A.white-large:hover {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:underline;
    }

    A.white-large:active {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
    }
     
	  /* ≤538px: Categories become icon-only (homepage + preview Basic + preview Premium) */
.category-button .category-label,
.details-category-button .category-label{
    display: none;
}

/* Remove "space for text" created by the icon's right margin */
.category-button img,
.details-category-button img{
    margin-right: 0;
}


	 
    #dateRangeDiv {
        display: block;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        padding-left: 0px;
        padding-right: 0px;
    }
	
    .dateRangeInput {
        margin-right: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .details-category-button {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        color:#FFF;
    }

    .details-record-image {
        padding: 15px 15px 15px 15px;
    }
		
    #filters {
        flex-direction: column; /* This stacks the children vertically */
    }
	
	.home-page .content-shell{
    width: min(1523px, 94%);
  }
		
    .left-aligned-image {
        max-width: 100%;
        height: auto;
        margin: 0px 0px 0px 0px; /* Adjust margin as needed */
        padding: 0px;
    }

    p.white-large {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        font-weight: 300;
        line-height:normal;
        color:#FFF;
        margin-left:0px;
        margin-right:0px;
        text-shadow: none;
        text-decoration:none;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        color:#FFF;
    }

    .record-image {
        width: 100%; /* Set each DIV to full width */
        margin: 15px 15px 15px 15px; /* Adjust margin as needed */
        align-items: center; /* Center the image vertically if needed */
        justify-content: center; /* Center the image horizontally */
        padding: 0px;
    }

    .record-title {
        padding: 0px 0px 0px 0px;
    }

    .record-title-free {
        padding: 0px 0px 0px 0px;
    }

    .record-title-premium {
        padding: 0px 0px 0px 0px;
    }

    #record-info-participants .venue-type {
        display: block;
        text-indent: 34px; /* Align venue type with participant count */
    }

    .search-input-wrapper {
        width: 90%;
    }

    .search-btn {
        margin-left: 0px;
    }

    #sortOrderDiv, #recordsPerPage {
        width: 100%; /* Make each DIV take the full width */
        justify-content: left; /* Center the content for better alignment */
    }
}

.record-description-text {
    text-align: left;
}


/* ─── Preview-page width (only elements marked with .preview-wide) ─── */
.final-action-container {
            background-color:#4169e1;
			width: 80%;
            margin: 35px auto 45px; /* Was previously 0px auto */
			padding: 45px 25px 45px;
            text-align: center;
			margin-bottom: 120px;         /* ↓ gap before page footer */
}


}