/* General CSS*/
body {
	color: #333;
	font: 14px Sans-Serif;
	padding: 50px;
	background: #eee;
	width: 100%;
}

h1 {
	text-align: center;
	margin: 0;
	color: #005b78;
	font-weight: bold;
	margin-top: 10px !important;
}

h2 {
	font-size: 20px !important;
	text-align: center;
	color: #005b78;
	margin-top: 10px !important;
	margin-bottom: 20px !important;
}

h3 {
	font-size: 16px !important;
	margin-top: 10px !important;
	text-align: center;
	color: #005b78;
}

p {
	font-size: 14px !important;
	text-align: center;
	color: #005b78;
}

/* Site container */
#container {
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
	position: relative;
	background: white; 
	width: 100%;
	min-width: 1200px;
}

/* Google search container */
#googleSearch {
    background-color: #ffffff; /* Set a background color */
    padding: 10px; /* Add some padding to the search container */
}

/* Google search table settings */
#googleTable table {
    border-collapse: collapse;
}

#googleTable h2 {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
}

#googleTable th {
    color: #005b78;
    cursor: pointer;
    text-align: center;
    padding: 5px 10px;
}

#googleTable td {
    text-align: center;
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

/* Hide columns header and body TRUE/FALSE */
#myTable th:nth-child(2) {
	display: none;
  }
  #myTable td:nth-child(2) {
	display: none;
  }
  .googleInfo th:nth-child(2) {
	display: table-cell;
  }
  .googleInfo td:nth-child(2) {
	display: table-cell;
  }

  .googleInfo {
	margin: auto;
	margin-bottom: 10px;
}

/* Searchbars and placement */

#searchBars {
	width: 50%;
	display: flex;
	flex-direction: column;
	margin: auto;
}

#defaultSearch {
	width: 100%;
	order: 1;
	display: flex;
	flex-direction: row;
}

#searchBar {
	width: 100%;
	align-items: center;
	order: 1;
}

#searchButton {
	align-items: center;
	order: 2;
}

#advancedSearch {
	width: 100%;
	order: 2;
	display: flex;
	flex-direction: row;
}

#googleSearch {
	width: 100%;
	align-items: center;
	order: 1;
}

#googleInfo {
	align-items: center;
	order: 2;
}

#info {
	width: 100%;
	order: 3;
	padding-top: 5px;
}

/* Default searchbar settings */

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none !important; 
}

input {
	width: 100% !important;
	outline: none !important;
	background: #ededed url(./images/search.png) no-repeat 9px center !important;
	border: solid 1px #ccc !important;
	padding: 9px 10px 9px 32px !important;
	
	-webkit-appearance: textfield !important;
	-webkit-box-sizing: content-box !important;
	font-family: inherit !important;
	font-size: 100% !important;
	
	-webkit-border-radius: 10em !important;
	-moz-border-radius: 10em !important;
	border-radius: 10em !important;
	
	-webkit-transition: all .5s !important;
	-moz-transition: all .5s !important;
	transition: all .5s !important;
}

input:focus {
	background-color: #fff !important;
	border-color: #66CC75 !important;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5) !important;
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5) !important;
	box-shadow: 0 0 5px rgba(109,207,246,.5) !important;
}

input:-moz-placeholder {
	color: #999 !important;
}
input::-webkit-input-placeholder {
	color: #999 !important;
}

/* Google searchbar settings */

/* Adjust the height and width of the search bar */
#___gcse_0 {
    max-height: 42px !important;
    width: 100% !important;
}

/* Hide the search button */
.gsc-search-button {
    display: none !important;
}

/* Adjust padding and max-height for the entire search control */
.gsc-control-cse {
    padding: 0px !important;
    max-height: 42px !important;
}

/* Adjust max-height for the search control wrapper */
.gsc-control-wrapper-cse {
    max-height: 42px !important;
}

/* Adjust padding for the search input box */
.gsib_a {
    padding: 4px !important;
}

/* Reset the font size of the input field to default */
.gsc-input {
    font-size: 100% !important;
}

/* Add padding to the right of the input field to prevent overlap */
.gsc-input input {
    padding-right: 17px !important;
}

/* Reset margins and adjust width for the search box form */
form.gsc-search-box {
    margin: 0px !important;
    width: 100% !important;
}

/* Remove padding for the input field within the search box */
table.gsc-search-box td.gsc-input {
    padding: 0px !important;
}

/* Remove unwanted margins for the search box */
table.gsc-search-box {
    margin: 0 !important;
	width: 98% !important;
}

/* Styling for Google Programmable Search results overlay */
div.gsc-results-wrapper-overlay.gsc-results-wrapper-visible {
    position: fixed;
    top: 26%;
    left: 15%;
    width: 70%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    overflow-y: auto; /* Enable vertical scrolling if necessary */
}

/* Hide the existing close buttons */
a.gsst_a,
a.gsst_b {
    display: none;
}

/* Style the new close button */
#customCloseButton {
    position: fixed;
    top: 20px; /* Adjust the top position as needed */
    right: 20px; /* Adjust the right position as needed */
    z-index: 1000; /* Ensure the button is above other content */
    background-color: #fff; /* Background color of the button */
    border: 1px solid #ccc; /* Border for the button */
    border-radius: 50%; /* Make the button circular */
    padding: 5px; /* Add some padding to the button */
    text-align: center;
    text-decoration: none;
    color: #333; /* Text color of the button */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Style the new close button on hover */
#customCloseButton:hover {
    background-color: #ccc; /* Change the background color on hover */
}

/* Hide the element with class gsc-positioningWrapper */
div.gsc-positioningWrapper {
    display: none;
}

/* Styling for the sorting table */
table.gsc-above-wrapper-area-container {
    width: 100%; /* Ensure the table expands to the full width */
    border-collapse: collapse; /* Collapse table borders */
    margin-bottom: 10px; /* Add some space below the table */
}

/* Styling for table cells (td) */
table.gsc-above-wrapper-area-container td {
    padding: 5px 10px; /* Adjust cell padding as needed */
    border: 1px solid #ccc; /* Add borders to cells */
}

/* Styling for the "Sort by:" label */
div.gsc-orderby-label {
    font-weight: bold; /* Make the label bold */
    margin-right: 10px; /* Add some space to the right of the label */
}

/* Styling for sorting options (e.g., "Relevance" and "Date") */
div.gsc-option {
    cursor: pointer;
    padding: 5px 10px; /* Adjust option padding as needed */
    border: 1px solid #ccc; /* Add borders to options */
    margin-right: 5px; /* Add some space to the right of options */
}

/* Styling for the search results container */
div.gsc-results {
    max-width: 90%; /* Adjust to your preferred maximum width */
    margin: 0 auto;
    padding: 20px;
    background-color: #fff; /* White background for search results */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Box shadow for a subtle depth effect */
    border-radius: 5px;
}

/* Styling for individual search result items */
div.gsc-webResult {
    margin-bottom: 20px; /* Spacing between search results */
    overflow: hidden; /* Clear floats inside result elements */
}

/* Styling for search result titles */
div.gsc-webResult .gs-title {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Adjust text color to your preference */
}

/* Styling for search result snippets/descriptions */
div.gsc-webResult .gs-snippet {
    font-size: 14px;
    color: #666; /* Adjust text color to your preference */
}

/* Styling for search result links */
div.gsc-webResult a.gs-title, div.gsc-webResult a.gs-title:visited {
    color: #0073e6; /* Link color */
    text-decoration: none;
}

/* Style the image box within each search result */
div.gsc-webResult .gs-image-box {
    width: 30%; /* Set the width of the image box */
    float: left; /* Float it to the right */
    margin-right: 10px; /* Add some spacing between text and image */
}

/* Style the container for the page links */
div.gsc-cursor {
    text-align: center; /* Center the page links */
    margin-top: 20px; /* Add some spacing from the search results */
}

/* Style each individual page link */
div.gsc-cursor-page {
    display: inline-block; /* Display the page links in a row */
    margin: 0 5px; /* Add spacing between page links */
    font-size: 16px; /* Adjust the font size */
    color: #0073e6; /* Link color */
    cursor: pointer; /* Add a pointer cursor on hover */
    padding: 5px 10px; /* Add padding for better clickability */
    border: 1px solid #0073e6; /* Add a border */
    border-radius: 5px; /* Add rounded corners */
    text-decoration: none; /* Remove underlines */
}

/* Style the current page link */
div.gsc-cursor-page.gsc-cursor-current-page {
    background-color: #0073e6; /* Background color for the current page */
    color: #fff; /* Text color for the current page */
    border: 1px solid #0073e6; /* Border for the current page */
}

/* Advanced search button settings */

.collapseButton {
  background-color: #eee;
  background: #fff url(./images/advancedB.png) no-repeat center;
  color: #000;
  transition: all 0.5s;
  cursor: pointer;
  margin: 3px;
  padding: 15px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
	
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

.collapseButton:hover {
	background: #005b78 url(./images/advancedW.png) no-repeat center;
	border-color: #66CC75;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Info button settings */

.infoButton {
  background: #fff url(./images/infoB.png) no-repeat center;
  color: #fff;
  transition: all 0.5s;
  cursor: help;
  margin-top: 17px;
  margin-left: 10px;
  padding:  15px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
	
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

.infoButton:hover {
	background: #005b78 url(./images/infoW.png) no-repeat center;
	border-color: #66CC75;
	color: #000;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Show info on hover */
button span {
	display: none;
}

button.collapseButton:hover span {
	border: #ccc 2px solid;
	padding: 5px 5px 5px 5px;
	display: block;
	z-index: 1000;
	background: #fff;
	color: #005b78;
	margin: 15px;
	width: auto;
	position: absolute;
	text-decoration: none;
  }

button.infoButton:hover span {
	border: #ccc 2px solid;
	padding: 5px 5px 5px 5px;
	display: block;
	z-index: 1000;
	background: #fff;
	color: #005b78;
	margin: 15px;
	width: auto;
	position: absolute;
	text-decoration: none;
  }

a span {
	display: none;
}

a:hover span {
	border: #ccc 2px solid;
	padding: 5px 5px 5px 5px;
	display: block;
	z-index: 1000;
	background: #fff;
	color: #005b78;
	margin: 15px;
	width: auto;
	position: absolute;
	text-decoration: none;
  }

/* Survey reports table */
#myTable {
	margin-top: 10px;
	width: 100%;
}

#myTable table {
	background-color: #F3F3F3;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
	empty-cells: hide;
}

#myTable th {
	background-color: #005b78;
	color: #FFF;
	cursor: pointer;
	text-align: center;
	padding: 5px 10px;
}


#myTable th small {
	font-size: 9px; 
}

#myTable td {
	text-align: center;
	overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

#myTable a {
	text-decoration: none;
}

#myTable td a {
	color: #663300;
	display: block;
	padding: 5px 10px;
}

#myTable td:nth-child(1) {
	font-weight: bold;
}

#myTable td:nth-child(8) {
	font-style: italic;
	text-align: left;
}

#myTable td:nth-child(7) {
	text-align: left;
}

#myTable th a {
	padding-left: 0
}

#myTable td:not(:first-of-type) a {
	background-image: none !important;
} 

#myTable tr:nth-of-type(odd) {
	background-color: #E6E6E6;
}

#myTable tr:hover td {
	background-color:#CACACA;
}

#myTable tr:hover td a {
	color: #000;
}

/* Table hover tooltips */
td span {
	display: none;
}

td:hover span {
	border: #ccc 2px solid;
	padding: 5px 5px 5px 5px;
	display: block;
	z-index: 1000;
	background: #fff;
	color: #005b78;
	margin: 15px;
	width: auto;
	position: absolute;
	text-decoration: none;
  }

td .notFound {
	cursor: not-allowed;
}

/* Styling for filter labels */
label {
    font-size: 14px;
    color: #005b78;
    font-weight: bold;
    margin-right: 10px;
}

/* Styling for dropdowns */
select {
    width: 100%;
    max-width: 200px;
    padding: 8px;
    background-color: #ededed;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 10em;
    font-size: 14px;
    transition: all .5s;
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.2);
}

select:focus {
    background-color: #fff;
    border-color: #66CC75;
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}

/* Styling for checkboxes */
input[type="checkbox"] {
    accent-color: #005b78;
    margin-right: 5px;
}

input[type="checkbox"]:hover {
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}

/* Wrapper container for centering filter boxes */
.filters-wrapper {
    display: flex;
    justify-content: center; /* Center the filter containers horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if there's not enough space */
    margin: 20px auto; /* Center the wrapper on the page */
    max-width: 800px; /* Set a max-width to control the centered area */
    width: 100%;
}

.filter-container {
    display: flex;
    flex-direction: column; /* Stack label and select box vertically */
    align-items: center; /* Center elements inside each container */
    width: 20%; /* Adjust width for linear layout */
    padding: 5px;
    margin: 10px 0px; /* Space between filter boxes */
    background-color: #fff;
    border: 0px solid #ccc;
}

/* Center label and selection box in filter-container */
.filter-container label {
    margin-bottom: 5px; /* Space between label and select box */
    font-weight: bold; /* Optional: make the label text bold */
    text-align: center; /* Center the label text */
}

/* Style the select elements */
.filter-container select {
    padding: 5px; /* Add some padding to the select boxes */
    width: 100%; /* Make the select box take the full width */
}

/* Responsive filter container spacing */
@media screen and (max-width: 768px) {
    .filter-container {
        width: 100%; /* Stacks full width on smaller screens */
        margin: 8px 0; /* Adjusts spacing for smaller screens */
    }
}

#clear-filters {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the button */
    align-items: center; /* Center text vertically */
    padding: 5px; /* Increased padding for a comfortable click area */
    margin: 5px 0px auto; /* Space around the button and center it */
    background: #fff no-repeat center; /* Add an image or just use a solid color */
    color: #005b78; /* Text color */
    border: 1px solid #ccc; /* Border to match the filter containers */
    border-radius: 10em; /* Rounded corners for consistency */
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
    width: 15%; /* Make the button full-width of the container */
	height: 20%; /* Set the maximum height of the button */
}

/* Change background color and border color on hover */
#clear-filters:hover {
    background-color: #005b78; /* Background color on hover */
    border-color: #66CC75; /* Change border color on hover */
    color: #fff; /* Change text color on hover */
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5); /* Add a subtle shadow on hover */
}