p[id^="more-"] {
  display: none;
}

p[id^="more-"]:target {
  display: block;
}

/* 1. Force this specific label to stay inline with the checkbox */
.responsive-form label.inline-label {
    display: inline;
}

/* 2. Hide this specific content div by default */
.toggle-content-tickets {
    display: none;
}

/* 3. Target ONLY this specific checkbox ID and its matching div sibling */
#toggle-max-tickets:checked ~ .toggle-content-tickets {
    display: block;
}

body, p, a, td, h1 
{ 
  font-size: 15;
  font-family: Averta, helvetica, arial, sans-serif;
}

h1 {
  font-size: 25;
}
	
a
{
  color: 024DDF;
}
body 
{ 
  background: url("/sponsor/pics/admin_back.jpg") no-repeat fixed center; 
  background-color: #FAFAFA;
}

img
{
  max-width: 90%;
}

.admin-header {
  font-size: 40;
  color: #FFFFFF;
}
	
.footer {
  font-size: 13;
  color: #f6f1e9;
}

.topinfo {
  font-size: 18;
}

.topinfo a {
  font-size: 18;
}
	
.buttondesign{
 background-color:#024DDF;
 color: #FFFFFF;
 font-family: Averta, helvetica, arial, sans-serif;
 font-weight:bold;
 font-size: 17px;
 border:1px solid #dbdbdb;
 padding:4px;
 width:200px;
 height:40px;
 -webkit-border-radius:7px;
 -moz-border-radius:7px;
}

.buttondesign_small{
 background-color:#024DDF;
 color: #FFFFFF;
 font-family: Averta, helvetica, arial, sans-serif;
 font-weight:bold;
 border:1px solid #dbdbdb;
 padding:4px;
 width:50px;
 height:28px;
 -webkit-border-radius:7px;
 -moz-border-radius:7px;
}

.buttondesign_large {
 background-color:#024DDF;
 color: #000000;
 font-family: Averta, helvetica, arial, sans-serif;
 font-weight:bold;
 border:1px solid #dbdbdb;
 padding:4px;
 width:165px;
 height:40px;
 -webkit-border-radius:7px;
 -moz-border-radius:7px;

  a:link {
   text-decoration: none;
   color: #FFFFFF;
  }  
  a:visited {
   text-decoration: none;
   color: #FFFFFF;
  }  
}

/* --- Content Block Container for the Table --- */
.table-container {
  /* Set maximum width for the container on large screens */
  max-width: 75%; 
  /* Center the container on the page */
  margin: 2em auto; 
  /* Add padding inside the container */
  padding: 1.5em; 
  
  /* Styling for the block itself */
  background-color: #ffffff; /* White background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for lift */
  border: 1px solid #e0e0e0; /* Subtle border */
  
  /* *** Crucial for Responsiveness *** */
  /* If the content (the table) is wider than the container, 
     create a horizontal scrollbar. */
  overflow-x: auto; 
  /* Improve scroll smoothness on touch devices */
  -webkit-overflow-scrolling: touch; 
}

/* 1. Default Mobile Styles (Stacked Vertically) */
.table-container.logos {
  display: flex;
  flex-direction: column;  /* Stacks logos vertically */
  justify-content: center; /* Centers logos vertically */
  align-items: center;     /* Centers logos horizontally */
  gap: 30px;               /* Keeps the space between logos */
}

/* 2. Desktop Styles (Side-by-Side) */
@media (min-width: 600px) {
  .table-container.logos {
    flex-direction: row;   /* Switches logos to horizontal */
  }
}

/* --- Global Table Reset and Base Styles --- */
.responsive-table {
  /* Ensure it takes up the available width */
  width: 100%;
  /* Collapse border for a clean look */
  border-collapse: collapse; 
  /* Space out the table content */
  margin: 1.5em 0; 
  /* Set a nice, legible font size */
  font-size: 0.9em; 
  /* Subtle shadow for depth */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); 
}

/* --- Table Header (thead) Styles --- */
.responsive-table thead tr {
  /* Primary brand color for the header */
  background-color: #009879; 
  color: #ffffff;
  /* Align text */
  text-align: left;
}

/* --- Table Cells (th and td) Styles --- */
.responsive-table th,
.responsive-table td {
  padding: 12px 15px; /* Consistent padding */
}

/* --- Table Body (tbody) Styles: Alternating Rows (Zebra Stripping) --- */
.responsive-table tbody tr {
  border-bottom: 1px solid #dddddd; /* Subtle separator */
}

.responsive-table tbody tr:nth-of-type(even) {
  /* Light gray background for even rows */
  background-color: #f3f3f3; 
}

.responsive-table tbody tr:last-of-type {
  /* No border on the last row */
  border-bottom: 2px solid #009879; 
}

/* --- Hover Effect --- */
.responsive-table tbody tr:hover {
  /* Slight background change on hover for better UX */
  background-color: #e8f5e9; 
  cursor: pointer;
}


/* ####################################################################### */
/* --- RESPONSIVENESS: CARD LAYOUT FOR SMALL SCREENS (e.g., Smartphones) --- */
/* ####################################################################### */

@media screen and (max-width: 600px) {
  
  /* 1. Hide the table header completely */
  .responsive-table thead {
    display: none;
  }
  
  /* 2. Set the table and main components to block for vertical stacking */
  .responsive-table, 
  .responsive-table tbody, 
  .responsive-table tr {
    display: block;
    width: 100%;
  }

  /* 3. Style the table rows to look like cards */
  .responsive-table tr {
    /* Separate the "cards" */
    margin-bottom: 15px; 
    /* The main card background and padding */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  /* 4. Style the table cells (td) */
  .responsive-table td {
    display: flex; /* CRUCIAL: Use flex to align label and content horizontally */
    justify-content: space-between; /* CRUCIAL: Pushes label to left, content to right */
    align-items: center; /* Vertically center them */
    
    padding: 10px 15px; /* Adjust padding */
    text-align: right; /* Default text alignment */
    position: relative; /* Not strictly necessary with flex, but good for context */
    
    border: none; /* Remove default cell borders */
    border-bottom: 1px dashed #eee; /* Light separator between data points */
  }

  /* 5. Insert the Data-Label as a Pseudo-Element (no need for absolute positioning anymore) */
  .responsive-table td::before {
    /* Get the content from the data-label attribute */
    /* content: attr(data-label); */
    
    /* Style the label (it's now on the left thanks to 'justify-content: space-between') */
    font-weight: bold;
    color: #333;
    /* Ensure the label doesn't wrap unnecessarily */
    flex-shrink: 0; 
    padding-right: 15px;
    text-align: left;
  }

  /* 6. Clean up the last cell in the card */
  .responsive-table td:last-child {
      border-bottom: none; /* Remove the dashed border on the last item in the card */
  }
  
  /* 7. Ensure hover state is maintained */
  .responsive-table tbody tr:hover {
    background-color: #e8f5e9; 
  }
  
  /* Ensure the background on the card is consistent, not alternating */
  .responsive-table tbody tr {
      background-color: #ffffff !important;
  }
}

/* --- Button Wrapper (Optional) --- */
.button-wrapper {
  margin: 0.2em 0;
  text-align: center;
}

/* --- Base Button Styles (Smaller & Simpler) --- */
.simple-button {
  /* Smaller Padding */
  padding: 0.6em 1.2em; 
  /* Smaller Font Size */
  font-size: 1.0em; 
  width: 80px;
  
  /* Basic Appearance */
  border: none;
  border-radius: 5px; /* Less rounded corners */
  cursor: pointer;
  
  /* Text styling */
  font-weight: 500; /* Lighter weight */
  text-transform: none; /* No forced uppercase */
  
  /* Simple, fast transition */
  transition: background-color 0.15s ease;
}

/* --- Primary Button Color Scheme --- */
.simple-button.primary {
  background-color: #024DDF; /* Simple blue */
  color: #ffffff;
  /* Remove box shadow for a flatter look */
}

/* --- Inactive Button Color Scheme --- */
.simple-button.inactive {
  background-color: #ee1337; /* Simple red */
  color: #ffffff;
  /* Remove box shadow for a flatter look */
}

/* --- Hover and Active States --- */
.simple-button:hover {
  /* Slightly darken the background */
  background-color: #006699; 
}

.simple-button:active {
  /* Even darker on click */
  background-color: #004466; 
  transform: translateY(1px); /* Simple push down effect */
}


/* ####################################################### */
/* --- RESPONSIVENESS: Clean Mobile Full-Width --- */
/* ####################################################### */

@media screen and (max-width: 400px) {
  .simple-button {
    /* Full width on very small screens */
    width: 100%; 
    display: block; 
    margin: 0.5em 0; /* Add vertical margin for spacing */
  }
}

/* --- Form Group (Label + Input) --- */
.form-group {
  margin-bottom: 20px;
}

/* --- Label Styling --- */
.responsive-form label {
  display: block; /* Makes the label take its own line */
  margin-bottom: 5px;
}

/* --- Input, Textarea, and Select Base Styles --- */
.responsive-form input[type="text"],
.responsive-form input[type="email"],
.responsive-form input[type="number"],
.responsive-form input[type="date"],
.responsive-form input[type="datetime-local"],
.responsive-form select,
.responsive-form textarea {
  /* Key for responsiveness: 100% width */
  width: 100%; 
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box; /* Ensures padding doesn't push the field wider than 100% */
  font-size: 1em;
  color: #333;
  max-width: 300px;
  
  /* Smooth transition for border and box-shadow */
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* --- Textarea specific styles --- */
.responsive-form textarea {
  resize: vertical; /* Allows resizing only vertically */
  min-height: 120px;
  max-width: 500px;
}

/* --- Focus State (The 'Nice' part) --- */
.responsive-form input:focus,
.responsive-form select:focus,
.responsive-form textarea:focus {
  border-color: #024DDF; /* Bright blue border when focused */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle glowing effect */
  outline: none; /* Remove default browser outline */
}

/* --- Select Dropdown specific styling (improving cross-browser look) --- */
.responsive-form select {
  /* Ensure consistent height across browsers */
  appearance: none; 
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Add custom arrow background */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-24.8%200L146.2%20185.6%2030.4%2069.4a17.6%2017.6%200%200%200-24.8%2024.8l130.2%20130.2a17.6%2017.6%200%200%200%2024.8%200l130.2-130.2a17.6%2017.6%200%200%200%200-24.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px; /* Make space for the custom arrow */
}

/* --- Navigation Container and List Reset --- */
.responsive-nav {
  /* Ensure the nav container takes full width */
  width: 100%;
  background-color: #333; /* Dark background for contrast */
}

.nav-list {
  /* Remove default list styling */
  list-style: none;
  padding: 0;
  margin: 0;
  
  /* Flexbox for horizontal layout on desktop */
  display: flex;
  justify-content: space-around; /* Distributes items evenly */
  align-items: center;
}

.nav-list li {
  /* Allows list items to grow/shrink based on space */
  flex-grow: 1; 
  text-align: center;
}

/* --- Navigation Button (Anchor Tag) Styles --- */
.nav-button {
  display: block; /* Make the whole area clickable */
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  padding: 15px 10px; /* Generous padding for easy clicking */
  font-size: 1em;
  
  /* Smooth transition for hover effects */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Hover and Active States --- */
.nav-button:hover {
  background-color: #555; /* Slightly lighter background on hover */
  color: #fff;
}

/* Style for the current active page button */
.nav-button.active {
  background-color: #024DDF; /* Highlight color (Primary Blue) */
  color: #fff;
  font-size: 20px;
}

/* ####################################################### */
/* --- RESPONSIVENESS: Stacking for Small Screens --- */
/* ####################################################### */

@media screen and (max-width: 600px) {
  .nav-list {
    /* CRUCIAL: Change flex direction to stack items vertically */
    flex-direction: column; 
    justify-content: flex-start; /* Align stacked items to the top */
  }
  
  .nav-list li {
    /* Ensure each item takes full width of the parent nav */
    width: 100%; 
    border-bottom: 1px solid #444; /* Subtle divider between stacked items */
  }

  /* Remove the border from the last item */
  .nav-list li:last-child {
    border-bottom: none;
  }
  
  .nav-button {
    /* Increase padding slightly for a better tap target */
    padding: 12px 10px; 
    text-align: left; /* Optional: Align text left when stacked */
  }
}

/* EVENT LISTING */

body {
    margin: 0;
    padding: 20px;
}

.thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers thumbnails in the available space */
    gap: 20px; /* Adds space between thumbnail boxes */
}

.thumbnail-box {
    display: flex;
    flex-direction: column;

    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    max-width: 300px;
    flex: 1 1 calc(33.333% - 20px);

    box-sizing: border-box;
    transition: transform 0.2s;

    padding-bottom: 20px;
}

/* Image */
.thumbnail-box img {
    max-width: 305px;
    max-height: 225px;
}

/* Title */
.thumbnail-title {
    font-size: 18px;
    color: #333333;
    margin: 10px 10px 5px 10px;
}

/* Date */
.thumbnail-date {
    font-size: 17px;
    font-weight: normal;
    color: #333333;

    /* More spacing below date */
    margin: 0 10px 25px 10px;
}

/* Description */
.thumbnail-description {
    font-size: 12px;
    color: #666666;
    margin: 0 10px 50px 10px;
}

/* Event text */
.thumbnail-eventtext {
    font-size: 12px;
    color: #666666;
    margin: 0 10px 50px 10px;
}

/* Hide empty descriptions completely */
.thumbnail-description:empty {
    display: none;
}

/* Tickets section */
.thumbnail-tix {
    font-size: 17px;
    font-weight: normal;
    color: #333333;

    margin-top: auto;
    margin-bottom: 15px;
/*    padding-top: 30px; */
}

/* Button */
.thumbnail-link {
    display: inline-block;
    background-color: #007BFF;
    color: #ffffff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;

    align-self: center;

    transition: background-color 0.3s;
    font-weight: bold;
}

.thumbnail-link:hover, .thumbnail-link:focus {
    background-color: #0056b3;
}

/* Responsiveness for smaller screens */
@media (max-width: 800px) {
    .thumbnail-box {
        flex: 1 1 calc(50% - 20px); /* Two columns on medium screens */
    }
}

@media (max-width: 600px) {
    .thumbnail-box {
        flex: 1 1 100%; /* One column on small screens */
    }
}

p:empty{
    height: 0;
   display: none;
}

/* LOGIN FORM */

/* Main form container styling */
.login-container {
    width: 90%;
    max-width: 400px;
    padding: 20px;
    margin: 20px; /* Ensures space on small screens */
    background-color: #ffffff; /* White form background */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	font-size: 17px;
}

.login-form h2 {
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 20px;
    /* Ensure good contrast */
    color: #111; 
}

.loginform-group {
    margin-bottom: 15px;
}

.loginform-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
    /* Ensure good contrast */
    color: #000;
}

.loginform-group input {
    width: 90%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    font-size: 16px;
}

/* WCAG: Visual focus indicator for keyboard navigation */
.loginform-group input:focus {
    outline: 2px solid #0056b3; 
    outline-offset: 2px;
    border-color: #0056b3;
}

.loginbutton {
    width: 91%;
    padding: 12px;
    background-color: #007BFF; /* Primary button color */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.loginbutton:hover {
    background-color: #0056b3; /* Darker shade on hover for feedback */
}

/* WCAG: Visual focus indicator for the button */
.loginbutton:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

.loginform-footer {
    text-align: center;
    margin-top: 15px;
}

.loginform-footer a {
    color: #007BFF;
    text-decoration: none;
    font-size: 17px;
}

.loginform-footer a:hover, .loginform-footer a:focus {
    text-decoration: underline;
    outline: none; /* Focus handled by underline/browser default */
}

/* Responsive design for small screens */
@media (max-width: 500px) {
    .login-container {
        margin: 10px;
        padding: 15px;
    }

    .loginform-group input, button {
        padding: 10px;
        font-size: 16px;
    }
}

.details {
  display: none;
}