<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Inter', sans-serif;
	margin: 0px;
  }
  .formbold-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: x-large;
	padding-left: 8px;
	padding-right: 8px;
  }

  .formbold-form-wrapper {
    margin: 0 auto;
    max-width: 570px;
    width: 100%;
    background: white;
    padding: 40px;
  }


.formbold-form-wrapper-prize {
    margin: 0 auto;
    max-width: 570px;
    width: 100%;
    background: white;
  }
 

  


 

  .formbold-form-input {
    width: 100%;
    padding: 13px 22px;
    border-radius: 5px;
    border: 1px solid #dde3ec;
    background: #ffffff;
    font-weight: 500;
    font-size: 16px;
    color: #07074d;
    outline: none;
    resize: none;
  }
  .formbold-form-input::placeholder {
    color: #536387;
  }
  .formbold-form-input:focus {
    border-color: #6a64f1;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
 

 .formbold-btn {
    text-align: center;
    width: 100%;
    font-size: 18px; /* Slightly larger font size for prominence */
    border-radius: 5px;
    padding: 16px 30px; /* Increased padding for a larger button */
    border: none;
    font-weight: 500;
    background-color: #856690; /* Deeper shade of purple */
    color: white;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.formbold-btn:hover {
    background-color: #9477a1; /* Lighter shade of purple for hover */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); /* More pronounced shadow on hover */
}


  
table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Apply a lighter grey background to every 2nd row */
tr:nth-child(even) {
    background-color: #f2f2f2; /* You can adjust the color as needed */
}

table * {
  position: relative;
}
table td, table th {
  padding-left: 8px;
}
table thead tr {
  height: 60px;
  background: #8EAADB;
  font-size: 16px;
}
table tbody tr {
  height: 48px;
  border-bottom: 1px solid #E3F1D5;
}
table tbody tr:last-child {
  border: 0;
}
table td, table th {
  text-align: left;
}
table td.l, table th.l {
  text-align: right;
}
table td.c, table th.c {
  text-align: center;
}
table td.r, table th.r {
  text-align: center;
}

.select2-search__field {
	font-size: large;
}


@media screen and (max-width: 768px) {
    .select2-container--default .select2-selection--single {
        height: 40px; /* Larger height for the select box */
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px; /* Adjust line height to match the height of the select box */
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px; /* Adjust arrow height */
    }
	
	.formbold-form-wrapper {
    padding: 0px;
  }
}


@media screen and (max-width: 768px) {
    /* Increase the size of the Select2 element */
    .select2-container--default .select2-selection--single {
        font-size: medium; /* Even larger font size */
        height: 50px; /* Taller select box */
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 50px; /* Center the text vertically */
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 50px; /* Ensure the arrow size matches */
    }

    /* Adjust the size of the dropdown */
    .select2-container .select2-dropdown {
        font-size: small; /* Larger font size for dropdown items */
    }

    /* Increase the size of the dropdown items */
    .select2-results__option {
        padding: small; /* Larger padding for each dropdown item */
    }
}




.center-container {
   display: flex;
   justify-content: center;
   padding-top: 20px;
   padding-bottom: 20px;
}

.btn-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.three-way-switch {
    display: inline-flex;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 26px;
    overflow: hidden;
    background: #E0E0E0;
    width: 210px;  /* Adjust as needed */
}

.three-way-switch input[type="radio"] {
    display: none;
}

.switch-label {
    flex: 1;
    text-align: center;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    color: #424242;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Style for the slider */
.slider {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 33.33%;  /* One-third of the container width */
    background-color: #D0D0D0;
    border-radius: 26px;
    z-index: 1;
    transition: left 0.3s ease;
}

/* Change text color and position when the slider is under the label */
#name_switch:checked ~ .slider + label[for="name_switch"],
#date_switch:checked ~ .slider + label[for="date_switch"] + label[for="date"],
#section_switch:checked ~ .slider + label[for="section_switch"] + label[for="section"] + label[for="section"] {
    color: white;
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* Adjust position of the slider based on selection */
#name_switch:checked ~ .slider {
    left: 0;
}

#date_switch:checked ~ .slider {
    left: 33.33%;
}

#section_switch:checked ~ .slider {
    left: 66.66%;
}


.program_details {
	font-size: large;
	width: 100%;

  }
  
  .table_container {
	    display: flex;
   flex-direction: column;
   align-items: flex-start; /* Keeps items aligned to the start */
   max-width: 800px; /* Maximum width of 800px */
   margin: 0px auto; /* Centers the container horizontally */
   padding-left: 8px;
   padding-right: 8px;
  
  }
  
  
  
  
 /* Center the form */
.pdf_button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
	margin-bottom: 10px;
}

/* Style the submit button */
.pdf_button button {
    background-color: #757575; /* Medium grey */
    border: none;
    color: white;
    padding: 8px 16px; /* Smaller padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px; /* Smaller font size */
    margin: 2px;
    cursor: pointer;
    border-radius: 4px;
    position: relative; /* Required for the pseudo-element positioning */
    overflow: hidden; /* Ensures the pseudo-element doesn't go outside the button */
}

/* Keyframes for the moving vertical line */
@keyframes moving-line {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Style when button is in loading state */
.loading_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px; /* Width of the vertical line */
    background-color: white; /* Color of the vertical line */
    animation: moving-line 2s linear infinite;
}




/* Change button appearance on hover */
.pdf_button button:hover {
    background-color: #5a5a5a; /* Slightly darker grey */
}


button:disabled {
    cursor: not-allowed;
}



.inline-dropdown-container {
    display: flex;
    align-items: center; /* This will vertically align the elements if they have different heights */
	padding-top: 12.5px;
}


.winners_row {
		border-collapse: collapse; /* Recommended for consistent styling */
		border-radius: 0 0 8px 8px; /* Top-left and top-right corners with a radius */        overflow: hidden; /* Ensures the border-radius applies to the table */
        border-top: 0;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
		text-align: center;
		padding-top: 8px;
		padding-bottom: 8px;
    }



    .info-table {
        width: 100%;
		border-collapse: collapse; /* Recommended for consistent styling */
		border-radius: 8px 8px 0 0; /* Top-left and top-right corners with a radius */        overflow: hidden; /* Ensures the border-radius applies to the table */
        border: 1px solid #ddd; /* Lighter border color for a softer look */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
    }

    .info-table td, .info-table th {
        border: 1px solid #ddd; /* Lighter border color for a softer look */
        padding: 8px; /* Increased padding for better spacing */
        text-align: left;
    }

    .info-table .date-row {
        font-size: 1.5em; /* Larger font size for the date */
        text-align: center;
        background-color: #e5e5e5; /* Soft background color for the date row */
    }
	
	
	@media screen and (max-width: 600px) {
    .info-table .date-row {
        font-size: x-large; /* Smaller font size for mobile screens */
    }
	
	.program_details {
		font-size: small;
	}
	
	.info-cell {
		font-size: small;
	}
	
	table {
		font-size: small;
	}
	
	.formbold-btn {
		font-size: medium;
	}
}
	
	
	
	

    .info-table .info-cell {
        width: 50%;
		text-align: center;
    }
	
	.info-table .info-cell-break {
        width: 100%;
		text-align: center;
    }




#prize-button:hover {
  background-color: #7B1FA2; /* Lighter or darker purple for hover */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow for depth */
}

#prize-button:active {
  background-color: #4A0072; /* Even darker purple for a "pressed" button effect */
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Inner shadow for "pressed" effect */
}


a:visited{
  color:#856690;
}




/* New wrapper to center the container */
.banner-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff3cd;
  z-index: 9999;

  /* Start hidden above the page */
  transform: translateY(-100%);
  opacity: 0;

  /* Animation */
  animation: slideDown 0.5s ease forwards;
}

@keyframes slideDown {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.banner-container {
  max-width: 570px;
  position: relative;
}

.banner {
  min-width: 300px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dismiss {
  background: none;
  border: none;
  font-size: 18px;
  color: #856404;
  cursor: pointer;
}

.popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #ffeeba;
  border-radius: 5px;
  margin-top: 5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 10;
}

.popup a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: #856404;
}

.popup a:hover {
  background-color: #fff8dc;
}





    </style>