.sp_top {margin-Top: 7px;}
.sp_right {margin-right: 7px;}
.sp_color {color: var(--color-l);}

body[id="myBody"] {background: var(--color-j); && a {text-decoration: none;}}

.container-pesquisa {font: 400 16px Oswald; background: var(--color-p); justify-content: center; margin-Top: 95px;}
.sp_flex {display: flex;}
.sp_label {font: 500 13pt Oswald; color: var(--color-s); letter-spacing: 0.4px; margin: 20px 0;}
/* CSS PARA DIV CONTAINER-PARAGRAPH **************************************************************************** */
/* ************************************************************************************************************* */
.container-paragraph {display: flex; flex-direction: column; font-family: 'Outfit', sans-serif; color: var(--color-s); align-items: center; margin: auto; padding-bottom: 10px; width: fit-content;}
.container-paragraph p.paragraph1 {font-size: 26pt; font-weight: bold;}
.container-paragraph p.paragraph2 {font-size: 16pt; font-weight: bold; line-height: 1;}
/* CSS PARA DIV CONTAINER-INPUTPADRAO ************************************************************************** */
/* ************************************************************************************************************* */
.form-control {position: relative; margin: 15px 15px; font: 500 14pt Oswald;}
.form-control label {position: absolute; left: 0; bottom: 10px; cursor: text; transition: all 0.5s; color: var(--color-t); letter-spacing: 0.4px;}
.form-control input.classPesquisa {width: 100%; border: 0; border-bottom: 2px solid var(--color-s); font: 500 14pt Oswald; padding: 2px; outline: 0;}
.form-control input:focus {border-bottom: 2px solid var(--color-r);}
.form-control input:focus ~ label,
.form-control input:valid ~ label {transform: translateY(-18px); font-size: 10pt; color: var(--color-r);}

.form-control.optional input {border-bottom: 2px solid var(--color-i);}
.form-control.success input {border-bottom: 2px solid var(--color-h);}
.form-control.error input {border-bottom: 2px solid var(--color-g);}

.form-control.optional small {color: var(--color-i); visibility: visible;}
.form-control.error small {color: var(--color-g); visibility: visible;}

.form-control small {position: absolute; display: flex; visibility: hidden; font-family: 'Outfit', sans-serif; font-size: 12px; text-align: right; letter-spacing: 0.4px;}
/* CSS PARA DIV CONTAINER-INPUTBUTTON ************************************************************************** */
/* ************************************************************************************************************* */
.container-inputButton {display: flex; flex-direction: row; align-items: center; gap: 28px; margin: 0 auto; width: fit-content;}

.sp_btnResetar {background-color: var(--color-a); border: none; }
.sp_btnPesquisar1 {background-color: var(--color-c); border: none; }
.sp_btnPesquisar2 {background-color: var(--color-b); border: none; }

.container-inputButton input.sp_btnResetar,
.container-inputButton input.sp_btnPesquisar1,
.container-inputButton input.sp_btnPesquisar2 {width: 186px; padding: 10px 0; font: 700 16px Oswald; color: var(--color-j); letter-spacing: 0.4px; border-radius: 10px; cursor: pointer;}

.container-inputButton input.sp_btnResetar:hover {background-color: var(--color-d);}
.container-inputButton input.sp_btnPesquisar1:hover {background-color: var(--color-f);}
.container-inputButton input.sp_btnPesquisar2:hover {background-color: var(--color-e);}
/* CSS PARA RESULTADO DA PESQUISA ****************************************************************************** */
/* ************************************************************************************************************* */
.spW100 {width: 100%;} 
.spW15_100 {width: 15%;} .spW35_100 {width: 35%;} .spW50_100 {width: 50%;}

.sp_rightColor1 {margin-right: 7px; font-size: 14pt; color: var(--color-l);}
.sp_rightColor2 {margin-right: 7px; font-size: 14pt; color: var(--color-n);}

.sp_sessao {width: 100%; background: var(--color-j); display: flex; justify-content: center;}
.sp_body {margin-top: 15px; background: var(--color-j); border-radius: 10px;}
.sp_card {width: 90%; margin-top: 20px; padding: 15px 25px 10px 25px; background: var(--color-q); border-radius: 10px;}
.sp_rows {margin: 0 auto; text-align: left;}
.sp_flexBox {display: flex; justify-content: center;}
.sp_result {font: 400 20pt Oswald; font-weight: bold; color: var(--color-s); margin: 20px 0 0 0;}
.sp_message {font: 400 16pt Oswald; font-weight: bold; color: var(--color-n); margin: 0;}
.sp_titulo {font: 400 20pt Oswald; font-weight: bold; color: var(--color-s);}
.sp_texto {font-size: 12pt; font-weight: bold; color: var(--color-l); display: inline-block;}
.sp_valor {font-size: 12pt; font-weight: normal; color: var(--color-m); display: inline-block;}

.container-span {display: flex; flex-direction: row; margin: 15px 0 10px 0; width: 100%;}
.container-span span.sp_span1 {font-size: 12pt; font-weight: bold;}
.container-span span.sp_span2 {margin-left: 7px; font-size: 12pt; font-weight: normal; color: var(--color-m); display: inline-block; letter-spacing: 0.4px;}
/* APLICANDO MEDIA QUERY PARA SITES RESPONSIVOS **************************************************************** */
/* ************************************************************************************************************* */
@media all and (max-width: 660px){
	.container-pesquisa {margin-Top: 90px;}
	.container-paragraph p.paragraph1 {font-size: 22pt;}
	.container-paragraph p.paragraph2 {font-size: 12pt;}

	.form-control {position: relative; margin: 15px 15px; font: 500 10pt Oswald;}
	.form-control label {position: absolute; left: 0; bottom: 10px; cursor: text; transition: all 0.5s; color: var(--color-t); letter-spacing: 0.4px;}
	.form-control input.classPesquisa {width: 100%; border: 0; border-bottom: 2px solid var(--color-s); font: 500 10pt Oswald; padding: 2px; outline: 0;}
	.form-control input:focus {border-bottom: 2px solid var(--color-r);}
	.form-control input:focus ~ label,
	.form-control input:valid ~ label {transform: translateY(-18px); font-size: 8pt; color: var(--color-r);}

	.container-inputButton {display: flex; flex-direction: row; align-items: center; gap: 28px; margin: 0 auto; width: fit-content;}
	.container-inputButton input.sp_btnResetar,
	.container-inputButton input.sp_btnPesquisar1,
	.container-inputButton input.sp_btnPesquisar2 {width: 136px; padding: 10px 0; font: 700 12px Oswald; color: var(--color-j); letter-spacing: 0.4px; border-radius: 10px; cursor: pointer;}

	.sp_label {font: 500 10pt Oswald;}
}
@media all and (max-width: 800px){
	.spW15_100, .spW35_100, .spW50_100 {width: 100%;}
}
@media all and (max-width: 1320px){
	.sp_card {margin: 20px; padding: 15px 25px 20px 25px;}
	.sp_flexBox {display: inline-block; line-height: 1;}
	.sp_result, .sp_titulo {font: 400 14pt Oswald; font-weight: bold;}
	.sp_texto, .sp_valor {font-size: 8pt;}
	.container-span {display: flex; flex-direction: column; margin: 15px 0 0 0; line-height: 1.2;}
	.container-span span.sp_span2 {margin-left: 0; margin-right: 15px; font-size: 9pt; text-align: justify;}
}