/*------------------------------------------------------------------
PADRAO BEGIN - ESTRUTURA CSS

1. CONFIGURAÇÕES HEADER AND FOOTER
    1.0 Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Footer Style
5.  Inject Index Body
-------------------------------------------------------------------*/


/* INICIO CONFIGURAÇÕES HEADER AND FOOTER 1.0 Template default CSS 	1.1	Variables 	1.2	Mixins	1.3	Flexbox	1.4	Reset */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

/* Estilizando o menu */
.header__menu ul {
	list-style: none;
	display: flex;
	align-items: center;
}

/* Links do menu */
.header__menu ul li {
	position: relative;
	margin: 0 15px;
}

/* Estilizando a imagem do perfil */
.profile-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.3s ease;
}

/* Animação na imagem do perfil ao abrir o dropdown */
.profile-dropdown.active .profile-icon {
	transform: scale(1.1);
}

/* Dropdown oculto inicialmente */
.dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	width: 200px;
	border-radius: 8px;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	list-style: none;
	padding: 10px 0;
	display: none;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Links dentro do dropdown */
.dropdown-menu li {
	font-size: 14px !important;
	padding: 10px 15px;
}

/* Estilo dos links */
.dropdown-menu a {
	font-size: 14px !important;
	text-decoration: none;
	color: #333;
	display: block;
	transition: background 0.3s ease;
}

/* Efeito hover no dropdown */
.dropdown-menu a:hover {
	background: #f1f1f1;
}

/* Quando ativo, mostrar dropdown */
.profile-dropdown.active .dropdown-menu {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Lato", sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Lato", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 20px;
	font-family: "Lato", sans-serif;
	color: #5c5c5c;
	font-weight: 400;
	line-height: 25px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 80px;
	text-align: center;
}

.section-title h2 {
	font-weight: 700;
	color: #323232;
	line-height: 46px;
	margin-bottom: 20px;
}

.section-title P {
	margin-bottom: 0;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */


.primary-btn {
	display: inline-block;
	font-size: 15px;
	padding: 14px 40px 12px;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 700;
	background: #004aad;
	border-radius: 2px;
	letter-spacing: 1px;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px 12px;
	background: #004aad;
	border: none;
	letter-spacing: 1px;
	border-radius: 2px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}

	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}

	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header__top {
	background: #182143;
}

.header__top__widget {
	padding: 11px 0 14px;
}

/* Cor a letra*/
.header__top__widget li {
	font-size: 15px;
	color: #004aad;
	display: inline-block;
	margin-right: 50px;
	position: relative;
	list-style: none;
}

.header__top__widget li::after {
	position: absolute;
	right: -32px;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	content: "";
}

.header__top__widget li:last-child {
	margin-right: 0;
}

.header__top__widget li:last-child:after {
	display: none;
}

.header__top__widget li i {
	font-size: 18px;
	color: #004aad;
	margin-right: 8px;
}

.header__logo {
	padding: 5px 0;
}

.header__logo a img {
	max-width: 450px;
	height: auto;
	transition: all 0.3s ease-in-out;
}

.header__logo a {
	display: inline-block;
}

.header__nav {
	text-align: right;
	padding: 38px 0 33px;
}

.header__menu {
	display: inline-block;
	/*text-transform: uppercase;*/
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 65px;
	position: relative;
}

.header__menu ul li.active a:after {
	width: 100%;
	opacity: 1;
}

.header__menu ul li:hover a:after {
	width: 100%;
	opacity: 1;
}

/*.header__menu ul li:hover .dropdown {*/
/*	top: 36px;*/
/*	opacity: 1;*/
/*	visibility: visible;*/
/*}*/

/* Cor fundo*/
.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 180px;
	background: #FFFFFF;
	text-align: left;
	padding: 5px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

/* Cor a letra*/
.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #004aad;
	font-weight: 400;
	padding: 10px 20px;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

/* Cor a letra*/
.header__menu ul li a {
	font-size: 22px;
	color: #004aad;
	font-weight: 700;
	display: block;
	padding: 5px 0;
	position: relative;
}

/* Cor do fundo*/
.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0%;
	background: white;
	content: "";
	opacity: 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.header__search {
	display: inline-block;
}

.header__search i {
	font-size: 18px;
	color: #323232;
	cursor: pointer;
}


.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}


/*---------------------
  Footer
-----------------------*/
/* fundo*/
.footer {
	background: #ffffff;
	padding-top: 40px;
}

.footer__about {
	margin-bottom: 30px;
}

/*letra*/
.footer__about p {
	color: #004aad;
	text-align: center;
}

.footer__logo {
	margin-bottom: 25px;
}

.footer__logo a img {
	width: 262px;
	height: 86px;
}

.footer__logo a {
	display: inline-block;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget.footer__widget--social li a {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*fundo*/
.footer__widget.footer__widget--social li a:hover {
	color: #ffffff;
}

.footer__widget.footer__widget--address p {
	margin-bottom: 10px;
}

/*letra*/
.footer__widget.footer__widget--address li {
	line-height: 30px;
	font-size: 15px;
	color: #004aad;
}

/*letra*/
.footer__widget h5 {
	font-size: 20px;
	font-weight: 700;
	color: #004aad;
	margin-bottom: 26px;
}

.footer__widget ul li {
	list-style: none;
}

/*letra*/
.footer__widget ul li a {
	font-size: 15px;
	color: #004aad;
	line-height: 38px;
}

.footer__widget ul li a i {
	margin-right: 6px;
}

/*letra*/
.footer__widget p {
	color: #004aad;
}

.footer__copyright {
	border-top: 1px solid rgba(112, 112, 112, 0.1);
	padding: 18px 0 15px;
	margin-top: 20px;
}

.footer__copyright__links li {
	list-style: none;
	display: inline-block;
	line-height: 20px;
	position: relative;
	margin-right: 45px;
}

.footer__copyright__links li:last-child {
	margin-right: 0;
}

.footer__copyright__links li:last-child::after {
	display: none;
}

/*letra*/
.footer__copyright__links li:after {
	position: absolute;
	right: -28px;
	top: 0;
	height: 100%;
	width: 1px;
	background: #004aad;
	content: "";
}

/*letra*/
.footer__copyright__links li a {
	font-size: 15px;
	color: #004aad;
}

.footer__copyright__text {
	text-align: right;
}

.footer__copyright__text p {
	color: #004aad;
	margin-bottom: 0;
}

.footer__copyright__text i {
	color: #941515;
}

.footer__copyright__text a {
	color: #004aad;
}


/*---------------------
 SECTION INDEX DEFAULT
-----------------------*/
/* Fundo degradê no Main PADRAO*/
.main-container-index {
	display: flex;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #004aad, #0b93f2, #ffffff);
	padding: 20px;
}

.form-wrapper-custom {
	max-width: min-content !important;
	margin: 50px auto !important;
	padding: 30px !important;
	background: white !important;
	border-radius: 12px !important;
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.4) !important;
	font-family: 'Arial', sans-serif !important;
	text-align: center !important;
}

.title-custom {
	font-size: 24px !important;
	font-weight: bold !important;
	text-align: center !important;
	color: #004aad !important;
	font-family: 'Lato', sans-serif !important;
	/* Ajuste o valor conforme necessário */
}

/* PADRAO END */

/* REGISTER PROFILE */
#rentItemsContainer {
	max-width: 45vw;
	overflow-x: scroll;
	scroll-behavior: smooth;
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

#rentItemsContainer::-webkit-scrollbar {
	height: 12px;
}

#rentItemsContainer::-webkit-scrollbar-track {
	background: #0b93f2;
	border-radius: 20px;
}

#rentItemsContainer::-webkit-scrollbar-thumb {
	background-color: #0056b3;
	border-radius: 20px;
}

.rentItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 10px;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: border 0.3s;
	width: 150px;
	flex-shrink: 0;
}

.rentItem img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
}

.rentItem label {
	margin-top: 10px;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	margin-bottom: 10px;
	border-radius: 10px;
}


.rentItem.selected {
	border: 2px solid #007BFF;
	width: 163px;
	height: 148px;
	border-radius: 10px;
}

.bodyFormCard {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #007BFF;
	/* Fundo azul */
	display: flex;
	justify-content: left;
	align-items: center;
	min-height: 25vh;
	/* Ajusta a altura para ocupar toda a tela */
	padding: 20px;
	/* Adiciona espaçamento interno para evitar bordas cortadas */
	box-sizing: border-box;
}

.card {
	position: relative;
	background-color: #FFFFFF;
	border: 4px solid #D3D3D3;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	padding: 20px;
	/* Aumenta o espaçamento interno */
	width: 100%;
	/* Adapta-se ao contêiner */
	text-align: left;
}

.card h1 {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: 1rem;
	/* Tamanho relativo */
	margin: 0;
	font-family: "Lato", sans-serif;
	font-weight: normal;
}

.card p {
	margin-top: 10px;
	font-size: 0.8rem;
	/* Tamanho relativo */
	color: #333333;
}

.form-wrapper-custom .button-group-custom {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-top: 25px !important;
}

.form-wrapper-custom .submit-btn-custom,
.back-btn-custom {
	padding: 12px 25px !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	cursor: pointer !important;
	transition: background 0.3s, transform 0.2s !important;
}

.form-wrapper-custom .submit-btn-custom {
	background: #007BFF !important;
	color: white !important;
}

.form-wrapper-custom .submit-btn-custom:hover {
	background: #0056b3 !important;
	transform: scale(1.05) !important;
}

.form-wrapper-custom .back-btn-custom {
	background: #004aad !important;
	color: white !important;
}

.form-wrapper-custom .back-btn-custom:hover {
	background: #999 !important;
	transform: scale(1.05) !important;
}

.section-custom.top-right {
	position: relative;
	/*background: white; */
	padding: 10px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.top-left-icon {
	position: absolute;
	left: 10px;
	top: 1px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-bottom: 20px !important;
}

.form-wrapper-custom .section-custom {
	padding: 20px !important;
	margin-bottom: 20px !important;
	border-bottom: 1px solid #ddd !important;
}


.validation-options {
	display: flex;
	align-items: center;
	gap: 15px;
}

.validation-options label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: #333;
}

.validation-options .validate {
	font-weight: bold;
	margin-right: 10px;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
/* Responsividade Index Section RegisterProfile */


/* Responsividade */
@media (max-width: 768px) {
	.form-wrapper-custom {
		width: 90% !important;
		padding: 20px !important;
	}

	.title-custom {
		font-size: 20px !important;
	}
}

/* Consulta de mídia para telas menores */
@media (max-width: 768px) {
	.card {
		padding: 15px;
		border: 2px solid #D3D3D3;
		/* Reduz a espessura da borda */
	}

	.card h1 {
		font-size: 1rem;
		/* Reduz o tamanho da fonte */
	}

	.card p {
		font-size: 0.9rem;
		/* Reduz o tamanho da fonte */
	}
}

/* Responsividade */
@media (max-width: 1024px) {
	.form-wrapper-custom .input-group-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.form-wrapper-custom {
		width: 90% !important;
		padding: 20px !important;
	}

	.form-wrapper-custom .input-group-container {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.form-wrapper-custom .button-group-custom {
		flex-direction: column !important;
		gap: 10px !important;
	}

	.form-wrapper-custom .submit-btn-custom,
	.back-btn-custom {
		text-align: center !important;
	}
}



@media (max-width: 480px) {
	.form-wrapper-custom .title-custom {
		font-size: 18px !important;
	}

	.form-wrapper-custom .input-group-custom label {
		font-size: 14px !important;
	}

	.form-wrapper-custom .input-group-custom input,
	.form-wrapper-custom .input-group-custom select {
		font-size: 14px !important;
		padding: 10px !important;
	}
}

@media (max-width: 1024px) {
	.form-wrapper-custom .input-group-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.form-wrapper-custom {
		width: 90% !important;
		padding: 20px !important;
	}

	.form-wrapper-custom .input-group-container {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.form-wrapper-custom .button-group-custom {
		flex-direction: column !important;
		gap: 10px !important;
	}

	.form-wrapper-custom .submit-btn-custom,
	.back-btn-custom {
		text-align: center !important;
	}
}

@media (max-width: 480px) {
	.form-wrapper-custom .title-custom {
		font-size: 18px !important;
	}

	.form-wrapper-custom .input-group-custom label {
		font-size: 14px !important;
	}

	.form-wrapper-custom .input-group-custom input,
	.form-wrapper-custom .input-group-custom select {
		font-size: 14px !important;
		padding: 10px !important;
	}
}



@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 40px;
	}
}

/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.footer__copyright__links li {
		margin-right: 30px;
	}

	.footer__copyright__links li:after {
		right: -20px;
	}

	.header .container {
		position: relative;
	}

	.header__top {
		display: none;
	}

	.header__nav {
		display: none;
	}
}

/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
	.footer__copyright__links {
		text-align: center;
		margin-bottom: 20px;
	}

	.footer__copyright__text {
		text-align: center;
	}

	.header .container {
		position: relative;
	}

	.header__top {
		display: none;
	}

	.header__nav {
		display: none;
	}

	@media (max-width: 768px) {
		.header__logo img {
			max-width: 140px;
		}
	}

	@media (max-width: 480px) {
		.header__logo img {
			max-width: 120px;
		}
	}

	@media (max-width: 768px) {

		.rentItem {
			width: 120px;
			/* Reduz o tamanho dos contêineres em telas menores */
			margin: 5px;
		}

		.rentItem img {
			width: 80px;
			/* Reduz o tamanho das imagens em telas menores */
			height: 80px;
		}
	}
}


/* - - - 2 - Card Header - - - */

/* 2.1 - Default Layout */

#title-searchItems {
	justify-content: center;
	grid-column: span 4;
}

.button-swipeItems {
	margin: 0px 10px;
	width: 50px;
	height: 50px;
	padding: 6px;
	border-radius: 24px;
	font-size: 25px;
	font-weight: bolder;
	color: #007BFF;
	background-color: #fff;
	border: 2px solid #007BFF;
}

/* - - - 3 - Card Body - - - */

/* 3.1 - Card */
#search-card {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* 3.2 - Form grid */
#container-searchInputs {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 24px;
}

/* 3.3 - Form grid */
#container-rentItemName {
	grid-column: span 4;
	text-align: justify;
}

/* 3.4 - Input */
.newSearchInput {
	width: 100%;
	position: relative;
}

.newSearchInput input,
.newSearchInput select {
	width: 100%;
	padding: 15px;
	font-size: 20px;
	color: #000000;
	border: 2px solid #007BFF;
	border-radius: 5px;
	outline: none;
	background: transparent;
}

.newSearchInput label {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #777777;
	transition: 0.3s;
	pointer-events: none;
}

.newSearchInput input:focus+label,
.newSearchInput select:focus+label,
.newSearchInput input:not(:placeholder-shown)+label,
.newSearchInput select:not(:placeholder-shown)+label {
	top: -1px;
	font-size: 16px;
	color: #777777;
	background: #ffffff;
	padding: 0 5px;
}

.container-rentItemPrice input {
	width: auto;
}

/* 3.5 - Item Type Container */
option {
	color: #000000;
	background-color: #ffffff;
}


/* 3.6 - Item Rating Container */
.container-searchRating {
	border-color: #007BFF;
}

#input-searchRating {
	min-width: 100px;
	max-width: 200px;
	text-align: center;
}

#container-searchRating {
	grid-column: span 2;
}

.newSearchStarContainer {
	display: flex;
	align-items: center;
	gap: 5px;
}

.star {
	margin: 16px 0px 0px 5px;
	cursor: pointer;
	font-size: 34px;
	color: #cccccc;
}

.star.selectedStar {
    color: #0b93f2 !important;
}

/* 3.7 - Date field */

#span-showRentPeriod {
	text-align: center;
}

#input-rentMonths {
	min-width: 100px;
	max-width: 200px;
}

#label-rentMonths {
	font-size: 12px;
}

#container-showRentPeriod {
	text-align: center;
	grid-column: span 4;
}

/* 3.8 - Search Button Container */
#container-rentFormButtons {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 100%;
}

button {
	padding: 10px 14px;
	font-size: 18px;
	color: #ffffff;
	background-color: #007BFF;
	border: none;
	border-radius: 7px;
	cursor: pointer;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #1478bf;
}

#container-divSeeMore {
	position: absolute;
	left: 0;
	bottom: 0;
}

#moreItemFieldsSpan {
	font-family: "Lato", sans-serif;
	color: #1478bf;
	font-size: 14px;
	text-decoration: underline;
}

#moreItemFieldsButton {
	width: 36px;
	height: 36px;
	padding: 0px 5px 1px 5px;
	text-align: center;
	font-size: 23px;
	font-weight: bold;
}

/* 3.9 - Hidden elements */

.newSearchRowContainer {
	display: flex;
	gap: 10px;
}

.onlyColumnItem {
	grid-column: span 1;
}

.input-valueControl {
	color: #007BFF;
	background-color: #fff;
	border: 2px solid #007BFF;
	text-align: center;
	display: inline-block;
	font-size: 16px;
	font-weight: bolder;
	cursor: pointer;
	width: 40px;
	height: 22px;
	margin-top: 1px;
}

.increaseQuantityField {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.decreaseQuantityField {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.rentitems-switch {
	margin-top: 8px;
	position: relative;
	display: inline-block;
	min-width: 53px;
	height: 32px;
}

.rentitems-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.rentitems-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 20px;
}

.rentitems-slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked+.rentitems-slider {
	background-color: #007BFF;
}

input:checked+.rentitems-slider:before {
	transform: translateX(20px);
}

.container-rowRentItem {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.container-columnRentItem {
	display: flex;
	flex-direction: column;
}

/* 3.10 - Text Error Message */

#newSearchErrorText {
	grid-column: span 4;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 14px;
	color: #a60000;
}

/* 3.11 - Input field */

.input-field {
	display: flex;
	align-items: baseline;
	flex-direction: column;
}

.input-field label {
	font-size: 12px;
	font-weight: 500;
	color: #2e2e2e;
	margin-bottom: 5px;
}

input {
	font-size: 12px;
	color: #0b0b0b;
}

input,
select {
	outline: none;
	font-size: 14px;
	color: #333;
	border-radius: 5px;
	border: 1px solid #aaa;
	padding: 10px;
	width: 100%;
}

input:focus,
select:focus {
	border-color: #004aad;
	box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
}

input::placeholder {
	font-size: 14px;
	/* Tamanho da fonte do placeholder */
	color: #000;
	/* Cor do placeholder */
}

/* - - - 4 - Card Loading - - - */

/* 4.1 - Animation Keyframes */
@keyframes moveVehicle {
	0% {
		left: 0%;
	}

	100% {
		left: 90%;
	}
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
	}

	25% {
		opacity: 1;
	}

	75% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* 4.2 - Animation Classes */
.slideRightContainer {
	animation: slideRight 1s forwards;
}

.slideLeftContainer {
	animation: slideLeft 1s forwards;
}

/* 4.3 - Elements */
#loading-card {
	display: none;
	width: 80%;
	height: 270px;
	width: 380px;
	margin-top: 200px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
	flex-direction: column;
	text-align: center;
	justify-items: center;
}

#newSearchAnimationBackground {
	position: relative;
	height: 230px;
	width: 380px;
	border-radius: 10px 10px 0px 0px;
	background-color: #929fad;
	background-size: cover;
	background-position: 50% 50%;
}

#newSearchLoadingText {
	padding: 2px;
	font-size: 24px;
	color: #454545;
}

#newSearchActorContainer {
	position: absolute;
	animation: fadeInOut 5s linear infinite, moveVehicle 5s linear infinite;
}

/* - - - 4 - Responsivity Queries - - - */

@media(max-width: 1300px) {

	#container-searchRating {
		grid-column: span 4;
	}

	.onlyColumnItem {
		grid-column: span 2;
	}
}

@media(max-width: 800px) {

	#moreItemFieldsSpan {
		visibility: hidden;
	}

	#span-showRentPeriod {
		font-size: 16px;
	}

	#input-rentMonths {
		max-width: 450px;
	}

	.input-field {
		grid-column: span 4;
	}

	.onlyColumnItem {
		grid-column: span 4;
	}

	.newSearchInput label {
		font-size: 14px;
	}

	.newSearchInput input:focus+label,
	.newSearchInput select:focus+label,
	.newSearchInput input:not(:placeholder-shown)+label,
	.newSearchInput select:not(:placeholder-shown)+label {
		font-size: 12px;
	}
}

@media(max-width: 600px) {

	.input-field label {
		font-size: 12px;
	}

	.newSearchInput input:focus+label,
	.newSearchInput select:focus+label,
	.newSearchInput input:not(:placeholder-shown)+label,
	.newSearchInput select:not(:placeholder-shown)+label {
		font-size: 10px;
	}
}