body {
			font-family: Arial, sans-serif;
            margin: 5px;
            background-color: #eaeced;
			display: flex;
			height: 100vh;
        }

        .container {
			max-width: 1200px;
            margin: 0 auto;
            padding: 4px;
        }
 
		header {
			text-align: center;  /* Centers the text */
			padding: 5px;       /* Adds space around text */
			margin: 0px;
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
		} 

	   h2 {
            text-align: center;
            margin-bottom: 20px;
        }
		h2 span {
		  font: inherit;
		  margin-bottom: inherit;
		}
	    h3{margin: 5px;
		}
		h4 {
            margin-bottom: 5px;
        }	
        .form-group, .form-groupss {
			position: relative;
			display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
		
		.filter-group {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center; /* Centers children horizontally */
			justify-content: center; /* Centers children vertically if height is defined */
			margin-bottom: 20px;
			margin-left: auto; /* Horizontal centering */
			margin-right: auto; /* Horizontal centering */
			text-align: center; /* Ensures label text aligns properly */
		}
		.filter-container {
			display: flex;
			align-items: center;
			gap: 10px; /* Space between select box and button */
		}

		#contentFilter {
			flex: 1;
			min-width: 120px;
		}

		#showButton {
			white-space: nowrap;
			display: inline-block;
			padding: 5px 10px; 
			min-width: 120px; 
			text-align: center;
		}
		label {
            margin-bottom: 8px;
            font-weight: bold;
            text-align: center;
        }
        input[type="text"] {
			width: 80%;
            min-width: 300px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
		#suggestions {
			list-style: none;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			border: 1px solid #ccc;
			background: white;
			z-index: 1000;
			display: none;
		}

		#suggestions li {
			font-size: 12px;
			padding: 6px;
			cursor: pointer;
		}

		#suggestions li:hover {
			background: #f0f0f0;
		}
        .button-group {
			display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 10px;
        }
        button, select {
            padding: 8px;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
            border-radius: 4px;
        }
        button:hover, select:hover {
            background-color: #e0e0e0;
        }
        select {
            width: 100%;
            max-width: 200px;
            margin-top: 1px;
        }
        .filters {
            display: flex;
            justify-content: center;
            gap: 35px;
            margin-top: 20px;
        }
		span{
		font-size: 13px;
		}
		p {
			padding-top: 10px;
			text-align: center;
			font-size: 10px;
		}
		#amazonSearchButton {
			background-color: #ffa41c; 
			border: 1px solid #e68a00; 
			padding: 10px 15px;
			border-radius: 4px; 
			cursor: pointer; 
			transition: background-color 0.3s ease;
		}

		#amazonSearchButton:hover {
			background-color: #e68a00; 
			color: white; 
		}
		#googleSearchButton,#homeButton {
			background-color: #4285F4; 
			border: 1px solid #34A853; 
			padding: 10px 15px;
			border-radius: 4px; 
			cursor: pointer; 
			transition: background-color 0.3s ease;
			color: white;
		}

		#googleSearchButton:hover,#homeButton:hover {
			background-color: #34A853; 
			color: white; 
		}
		#bingSearchButton,#shareButton {
			background-color: #f26522; 
			border: 1px solid #34A853; 
			padding: 10px 15px;
			border-radius: 4px; 
			cursor: pointer; 
			transition: background-color 0.3s ease;
			color: white;
		}
		#bingSearchButton:hover,#shareButton:hover {
			background-color: #A3A3A3; 
			color: white; 
		}
		#combinedSearchButton,#showButton,#resultsButton {
			background-color: #008373; 
			border: 1px solid #34A853; 
			padding: 10px 15px;
			border-radius: 4px; 
			cursor: pointer;  
			transition: background-color 0.3s ease;
			color: white; 
		}
		#combinedSearchButton:hover,#showButton:hover,#hideButton:hover,#resultsButton:hover {
			background-color: #FFB900;
		}
		.hidden {
		  display: none;
		}
		
		box {
			display: flex;
			flex-direction: column; 
			gap: 10px;
		}
		list {
			display: flex;
			align-items: center; 
			gap: 10px;	
		}
		.side-panel {
			width: 400px;
			background-color: #f4f4f4;
			padding: 15px;
			box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			/* Initially move the side panel off-screen */
			transform: translateX(-100%);
			transition: transform 0.4s ease; /* This makes the sliding effect smooth */
		}
		.side-panel.open {
			transform: translateX(0); /* Bring the panel back to its normal position */
		}
		#mainContent {
			margin-left: 20px;
			padding: 20px;
			flex-grow: 1;
		}
		.btnContain {
			display: flex;
			justify-content: flex-end;
			padding: 0px; 
	    }	
		#hideButton {
			display: block;
			margin-top: 5px;
			background-color: #d9534f;
		}
		.gsc-above-wrapper-area {
		    display: block !important;
			visibility: visible !important;
		}
		#gsc-i-id1, #searchQuery {
			width: 100% !important;
			min-width: 300px !important;
			max-width: 800px !important;
			min-height: 0px !important;
			height: auto !important;
			max-height: none !important; /* Allow unlimited height */
			padding: 10px !important;
			font-size: 16px !important;
			line-height: 1.5 !important;
			border: 1px solid #ccc !important;
			border-radius: 4px !important;
			box-sizing: border-box !important;
			resize: none !important; /* Allows manual resizing */
			overflow-y: hidden !important; /* Allow content to expand */
			white-space: pre-wrap !important; /* Wrap text */
			word-wrap: break-word !important; /* Prevent long words from breaking layout */
		}

		textarea {
			font: inherit; /* Inherits the default input font from the browser */
			color: inherit; /* Ensures text color remains consistent */
			border: 1px solid #ccc; /* Matches default input field border */
			border-radius: 4px; /* Gives a rounded border like inputs */
			/* padding: 10px; /* Matches spacing inside input fields */
			/* box-sizing: border-box; /* Prevents width from changing due to padding */
		}
		
/* Footer */
		footer {
			display: flex;
			justify-content: center;  /* Centers text horizontally */
			align-items: center;      /* Centers text vertically */
			font-size: 12px;
			padding: 10px;
			height: 20px;  /* Ensures consistent height */
			background-color: var(--bg-color, #f9f9f9);
			color: var(--text-color, #121212);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}