/*
	For font sizes use EM not REM, to scale with the size of the container
*/

form {
	margin: 0;
	padding: 0;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
}

button,
input {
	overflow: visible;
}

button {
	cursor: pointer;
	padding: 14px;
	font-size: 1em;
}

input,
select {
	font-size: 1em;
	margin: 0.25rem 0;
	padding: 0.5rem 0.25rem;
	vertical-align: baseline;
}


input[type=submit],
input[type=button],
input[type=reset] {
	padding: 0.25rem 0.75rem;
	cursor: pointer;
	margin-left: 1px;
}


input[type=radio],
input[type=checkbox] {
	transform: scale(1.25);
}

textarea {
	width: 50%;
	padding: 0.5rem;
	font-size: 1rem;
}

label {
	display: block;
	margin: 0.25rem 0 0 0;
}

fieldset {
	padding: 1.25rem;
	margin: 0.25em 0;
	clear: both;
	background: #eee;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.99) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.99));
	border: 1px solid #ddd;
	border-radius: 0.25em;
}

fieldset p:first-child {
	padding-top: 0;
	margin-top: 0;
}

legend {
	border: 1px solid #ddd;
	padding: 0.25em 0.75em;
	background: #fff;
	border-radius: 0.25em;

}

/*
	=======================================
	FIELDSET
	Redifine the above styles for Form elements by using the fieldset element
	- You can then use or remove the fieldset element for 2 different sets of styles
	=======================================
*/

fieldset select,
fieldset input[type=email],
fieldset input[type=text],
fieldset input[type=password] {
	padding: 0.6rem 0.2rem;
	margin: 0.1rem 0;
	width: 85%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

fieldset input[name=entered] {
	padding: 0.1rem;
	width: 3rem !important;
}

fieldset input[type=file],
fieldset input[type=submit],
fieldset input[type=button],
fieldset input[type=reset] {
	padding: 1em;
	cursor: pointer;
	background-color: #ddd;
	background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
}

fieldset input[type=submit]:hover,
fieldset input[type=button]:hover,
fieldset input[type=reset]:hover {
	background-color: aqua;
	background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
}

fieldset input[type="radio"],
fieldset input[type="checkbox"] {
	transform: scale(1.8);
	margin: 0.5rem;
}

fieldset textarea {
	width: 98%;
	padding: 0.5rem;
	font-size: 1em;
}

.fieldset_flex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-between;
	align-items: stretch;
	vertical-align: top;
	gap: 10%;
}

.fieldset_flex>* {
	flex: content;
	vertical-align: text-top;
}

/*
	Place fieldsets in a Grid
*/

@media only screen and (min-width: 768px) {
	.form_fieldsets_grid {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr 1fr;
		column-gap: 0.25rem;
		align-items: stretch;
		margin: 0 auto;
	}


	.form_inputs_grid {
		display: grid;
		width: 100%;
		grid-template-columns: 1fr 3fr;
		column-gap: 0.25rem;
		align-items: center;
	}

	.form_inputs_grid label {
		line-height: 100% !important;
        vertical-align: middle;
	}

	.form_inputs_grid select,
	.form_inputs_grid input[type=email],
	.form_inputs_grid input[type=text],
	.form_inputs_grid input[type=password] {
		width: 98%;
	}

	fieldset select,
	fieldset input[type=email],
	fieldset input[type=text],
	fieldset input[type=password] {
		width: 60%;
	}
}

/*	
	===========================================================
	Merge together Text/Email/Password Input with Submit Input
		.search_top for specific use
		.merge_inputs for generic use anywhere
		Don't use fieldset
		Use [type=] to replace default definitions
	===========================================================
*/

.search_top,
.merge_inputs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

/*	SPECIFIC USE: .search_top
	Search form on the Top, where the values of sizes 
	must be Set in EM (NOT in REM) 
	for the inputs to scale with the parent font size 
	(increase and decrease between mobile and desctop)
*/

.search_top input[type=text] {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-right: 0;
	margin: 0;
	border-radius: 8px 0 0 8px;
	font-size: 1.2rem;
	width: 15em;
    padding:0.5rem
}

.search_top button {
	position: relative;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-color: var(--top-search_bg);
	background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0));
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-left: 0;
	width: 2.6em;
	border-radius: 0 8px 8px 0;
}

.search_top button::after {
	content: url('../imgPG/sx_svg/sx_svg_white/sx_search.svg');
	position: absolute;
	left: 12px;
	top: 2px;
	height: 1.7em;
	width: 1.7em;
}

.search_top button:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.25));
}

@media only screen and (min-width: 1200px) {
    .search_top input[type=text] {
        font-size: 0.9rem;
        width: 10em;
        padding: 0.3rem 0.2rem;
        border-radius: 6px 0 0 6px;
    }
    
    .search_top button {
        width: 2.4em;
        border-radius: 0 6px 6px 0;
    }
    
    .search_top button::after {
        left: 8px;
        top: 2px;
            height: 1.5em;
        width: 1.5em;
    }
    
}

/*	GENERAL USE: .merge_inputs
	The class can be places in a parent element (form or DIV) 
	that includes the two inputs, without fieldset
*/

.merge_inputs input[type=email],
.merge_inputs input[type=text],
.merge_inputs input[type=password] {
	padding: 0.6rem 0.2rem;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 6px 0 0 6px;
}

.merge_inputs input[type=submit] {
	padding: 0.6rem 0.2rem;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 0 6px 6px 0;
	color: rgba(255, 255, 255, 0.75);
	background-color: var(--footer-bg);
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
}

.merge_inputs input[type=submit]:hover {
	color: rgba(255, 255, 255, 1);
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
}

/*
	===================================
	Various Classes related to forms
	===================================
*/
.input_text {
	display: none
}

.five_stars {
	position: relative;
	display: inline-block;
	width: 128px;
	height: 32px;
	background: #ddd;
	vertical-align: text-bottom;
	margin: 0 0.5rem;
}

.five_stars::before {
	content: url('../imgPG/sx_svg/sx_svg_bg/sx_star_five.svg');
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/*
	The width is determined by the ratio of vote results
*/
.five_stars span {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	bottom: 0;
	background: #f90;
}