@font-face {
	font-family: "Poppins-Regular";
	src: url(Fonts/Poppins-Regular.ttf);
}

@font-face {
	font-family: "Poppins-SemiBold";
	src: url(Fonts/Poppins-SemiBold.ttf);
}

@font-face {
	font-family: "Poppins-Bold";
	src: url(Fonts/Poppins-Bold.ttf);
}

@font-face {
	font-family: "Poppins-Medium";
	src: url(Fonts/Poppins-Medium.ttf);
}

@font-face {
	font-family: "Poppins-Light";
	src: url(Fonts/Poppins-Light.ttf);
}

@font-face {
	font-family: "Poppins-Thin";
	src: url(Fonts/Poppins-Thin.ttf);
}

:root {
	font-size: 14px;
	--transition-speed: 600ms; /* velocidade de transição das animações */
	--text-color: #2B2A29;
	/* 
		body text color
		.form-input color
		nav-icon color
		fill dos svg dos nav-icon
		grid-table color
	*/
	--headerBar-height: 5rem;
	--footer-height: 4rem;
	--menu-width: 0; /* tamanha do menu lateral sem estar expandido */
	--menu-width-expanded: 16.5rem; /* tamanho do menu lateral quando expandido */
	--menu-bg-color: #2B2A29; /* cor de fundo do menu */
	--header-bg-color: #2B2A29; /* cor do fundo da header bar e cor principal da aplicação */

	--button-bg-color: #F37F2E;
	--button-text-color: white;
	--button-hover-color: white;
	--button-text-hover-color: #F37F2E;
	--tab-color: #1899CC;
	--link-hover-color: #F37F2E;
	--header-text-color: white; /* cor do texto da header bar */
	--pageTitle-bg-color: #dee2e6; /* cor do fundo da pageTitleBar*/
	--pageTitle-text-color: #434343; /* cor do texto da pageTitleBar */
	--svg-fill-color: white; /* cor dos icons svg */
	--svg-bg-color: #F37F2E; /* cor de fundo dos icons svg */

	--primary-text-color: #F37F2E;
	--secondary-text-color: #A0A0A0;
	--form-label-text-color: #a6a6a6;
	--form-input-border-color: #e6e6e6;
	--form-input-focus-border-color: #8c8c8c;
	--disabled-bg-color: rgba(239, 239, 239, 0.3);
}

body {
	margin: 0;
	padding: 0;
	color: var(--text-color);
	font-family: 'Poppins-Regular', sans-serif !important;
}

.font-bold {
	font-family: 'Poppins-Bold', sans-serif !important;
}

.font-semibold {
	font-family: 'Poppins-SemiBold', sans-serif !important;
}

.font-medium {
	font-family: 'Poppins-Medium', sans-serif !important;
}

/*********************** GENERAL CLASSES ***************************/

main {
	/*position: relative;*/
}

a {
	text-decoration: none;
	color: var(--text-color);
}

	a:hover {
		color: var(--link-hover-color);
	}

header, footer {
	background-color: var(--header-bg-color)
}

header {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.header-text {
	color: white;
	font-family: 'Poppins-Light';
	font-size: 12px;
}

.buttonCreateInGrid {
	margin: 2rem 0;
}

footer {
	height: var(--footer-height);
	bottom: 0;
	position: fixed;
	width: 100%;
}

.showCookiePreferences {
	display: none;
}

.row-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.subgrid-container {
	margin-top: 8rem;
	width: 100%;
	padding: 0 14rem;
	padding-bottom: 3rem;
	background: #F7F7F7;
}

.subgrid-header {
	width: 100%;
	height: 6rem;
	justify-content: space-between;
	align-items: center;
}

.sk-btn, .file-btn[type=file]::file-selector-button {
	padding: 0.6rem 0.7rem;
	border-radius: 20px;
}

.wb-button, .file-btn[type=file]::file-selector-button {
	color: #2B2B2B;
	border: 1px solid #2B2B2B;
	background-color: white;
}

	.wb-button:hover, .file-btn[type=file]::file-selector-button:hover {
		color: white;
		background-color: #2B2B2B;
	}

	.wb-button svg {
		width: 2rem;
		fill: #2B2B2B;
		padding: 5px;
	}

	.wb-button:hover svg {
		fill: white;
	}

.bw-button {
	color: white;
	border: 1px solid #2B2B2B;
	background-color: #2B2B2B;
}

	.bw-button:hover {
		color: #2B2B2B;
		background-color: white;
	}

	.bw-button svg {
		width: 1.6rem;
		fill: white;
		border: 1px solid white;
		border-radius: 50px;
		padding: 5px;
	}

	.bw-button:hover svg {
		fill: #2B2B2B;
		border: 1px solid #2B2B2B;
	}


.divVisit {
	width: 50px
}

	.divVisit svg {
		fill: #F77F00;
	}


.ow-button {
	color: white;
	border: 1px solid #F77F00;
	background-color: #F77F00;
}

	.ow-button svg {
		fill: white;
	}

	.ow-button:hover {
		color: #F77F00;
		background-color: white;
	}

		.ow-button:hover svg {
			fill: #F77F00;
		}

	.ow-button.circle svg {
		border: 0.1rem solid white;
		border-radius: 50px;
		padding: 2px;
	}

	.ow-button.circle:hover svg {
		border: 2px solid #F77F00;
	}

.wo-button {
	color: #F77F00;
	border: 1px solid #F77F00;
	background-color: white;
}

	.wo-button svg {
		fill: #F77F00;
		width: 1.6rem;
	}

	.wo-button:hover {
		color: white;
		background-color: #F77F00;
	}

		.wo-button:hover svg {
			fill: white;
		}

	.wo-button.circle svg {
		border: 0.1rem solid #F77F00;
		border-radius: 50px;
		padding: 2px;
	}

	.wo-button.circle:hover svg {
		border: 2px solid white;
	}



.w-btn-50 {
	width: 50px;
}

.w-btn-70 {
	width: 70px;
}

.w-btn-100 {
	width: 100px;
}

.w-btn-120 {
	width: 120px;
}

.w-btn-150 {
	width: 150px;
}

.w-btn-180 {
	width: 180px;
}

.w-btn-200 {
	width: 200px;
}

.w-btn-260 {
	width: 260px;
}

.fs-10 {
	font-size: 10px;
}

.fs-11 {
	font-size: 11px;
}

.fs-12 {
	font-size: 12px;
}

.b-1 {
	border: 0.1rem solid;
}

.svg-w-1 svg {
	width: 1rem;
}

.svg-w-16 svg {
	width: 1.6rem;
}

.svg-w-2 svg {
	width: 2rem;
}

.svg-w-22 svg {
	width: 2.2rem;
}

.form-label {
	margin-bottom: 0.3rem;
	margin-top: 0.5rem;
	font-size: 14px;
	color: var(--text-color);
}

.table-caption {
	position: absolute;
	color: transparent;
}

/*********************** MAIN CONTENT ***************************/
.mainContainer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 3rem;
}

.svg-button {
	background: none;
	border: none;
	padding: 0;
	/* a width do botão pode variar de acordo com o botão. Por exemplo o botão de logout tem uma width diferente dos botões de pesquisa. Mas esta classe é usada em ambos os botões*/
}

.required::after {
	content: '*';
}

.headerBar {
	background-color: var(--header-bg-color);
	width: 100%;
	display: flex;
	align-items: center;
	height: var(--headerBar-height);
}

	.headerBar .svg-button {
		width: 2.75rem;
		fill: var(--svg-fill-color);
	}

	.headerBar > .svg-button:last-of-type {
		margin: 0 3rem;
	}

	.headerBar > .header-text:first-of-type {
		margin: 0 1rem 0 0.3rem;
	}

	.headerBar .svg-button:hover {
		width: 2.75rem;
		fill: var(--svg-bg-color);
	}

	.headerBar .svg-button#language-button {
		padding-top: 3px;
	}

	.headerBar img {
		width: 2.75rem;
		cursor: pointer;
	}

.header-dropdown-btn {
	color: #fff;
	background-color: #30302e;
	border-color: #30302e;
}

.header-btn {
	background: var(--button-bg-color);
	border: 1px solid var(--button-bg-color);
	width: 120px;
	margin-left: 1rem;
}

	.header-btn:hover {
		color: var(--button-bg-color);
		background: var(--button-hover-color);
	}

.header-select {
	position: relative;
	text-align: center;
	display: inline-block;
	margin-left: auto;
	margin-right: 10px;
	color: #fff;
	background-color: #30302e;
	border-radius: 1.5rem;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	height: 38px;
	width: 120px;
}

	.header-select option {
		text-align: left;
	}

.header-search {
	display: flex;
	width: 30%;
	margin-right: 20px;
}

	.header-search input {
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		width: 1%;
		border-radius: 1.5rem;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-color: white;
		border-right: none;
	}

		.header-search input:focus {
			box-shadow: none;
			border-color: white;
		}

	.header-search .svg-button {
		width: 3.3rem;
		padding-right: 10px;
		background-color: white;
		border-radius: 1.5rem;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

		.header-search .svg-button:hover {
			width: 3.3rem;
			padding-right: 10px;
		}

		.header-search .svg-button svg {
			fill: var(--header-bg-color);
		}

		.header-search .svg-button:hover svg {
			fill: #F77F00;
		}

.appLogo, .logo {
	margin-right: 4rem;
	margin-left: 2rem;
	color: white;
}

	.appLogo img {
		width: 150px;
		cursor: pointer;
	}

	.logo:hover {
		color: var(--pageTitle-text-color);
	}

.header-submenu {
	right: 12rem;
	position: absolute;
	background: var(--link-hover-color);
	color: white;
	display: none;
	z-index: 3;
}

	.header-submenu.show {
		display: block;
	}

	.header-submenu.auth {
		right: 25rem;
	}

.user-menu {
	right: 10rem;
	width: 280px;
}

	.user-menu.auth {
		right: 19rem;
	}

.header-submenu-item {
	display: block;
	padding: 5px 10px;
	cursor: pointer;
}

	.header-submenu-item:hover, .header-submenu-item.selected {
		color: var(--link-hover-color);
		background: var(--header-text-color);
	}

.header-submenu-btn {
	display: flex;
	align-items: center;
	color: white;
	width: 100%;
	padding: 5px 10px;
}

	.header-submenu-btn span {
		margin-left: 10px;
	}

	.header-submenu-btn svg {
		width: 1.5rem;
		fill: white;
	}

	.header-submenu-btn:hover {
		color: #F77F00;
		background: white;
	}

		.header-submenu-btn:hover svg {
			fill: #F77F00;
		}

.shopping-cart-filled {
	display: flex;
	align-items: center;
}

	.shopping-cart-filled svg {
		fill: #F77F00;
		margin-right: 2px;
	}

	.shopping-cart-filled:hover svg {
		fill: white;
	}

.shopping-cart-clientform-row {
	display: flex !important;
	margin-bottom: 20px;
}

.shopping-cart-clientform-row-full {
	display: flex !important;
	margin-bottom: 20px;
}

.shopping-cart-clientform-column {
	display: flex;
	flex-direction: column;
	width: 50%;
}

.shopping-cart-clientform-column .form-input {
	margin-right: 2rem;
}

.shopping-cart-clientform-column.small {
	width: 25%;
}

.shopping-cart-clientform-column.big {
	width: 75%;
}

.shopping-cart-clientform-column.full {
	width: 100%;
	margin-right: 2.5%;
}

.shopping-cart-clientform-input {
	display: flex !important;
	flex-direction: column;
	width: 95%;
}

.shopping-cart-clientform-input-full {
	display: flex !important;
	flex-direction: column;
}

.tour-Btn {
	background-color: transparent;
	color: #F77F00;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	font-weight: bold;
	text-transform: uppercase;
	border: 2px solid #F77F00;
}

.wb-button.circle svg {
	border: 0.1rem solid #2B2B2B;
	border-radius: 50px;
	padding: 2px;
}

.wb-button.circle:hover svg {
	border: 2px solid #2B2B2B;
}


.slide-image-container.tour {
	padding: 2rem 0 3rem 0;
}

	.slide-image-container.tour .slide-next {
		right: 1rem;
	}

/*********************** HOMEPAGE ***************************/
.banner-slider {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
}

.theme-banner-bg {
	background-color: Black;
	height: 550px;
}

	.theme-banner-bg img {
		opacity: 0.5;
		width: 100%;
		height: auto;
	}

.logo_section {
	position: absolute;
	z-index: 2;
}

.logo {
	width: 100%;
	text-align: center;
	padding: 30px 0px;
}

@media only screen and (max-width: 800px) {
	.hidden-mobile {
		display: none;
	}

	.imgSizeL {
		display: none;
	}

	.imgSizeM {
	}

	.appLogo img {
		width: 50px;
		cursor: pointer;
	}
}

@media only screen and (max-width: 950px) {
	.header-text {
		display: none;
	}
}

@media only screen and (min-width: 800px) {
	.temas {
		display: none;
	}

	.imgSizeL {
	}

	.imgSizeM {
		display: none;
	}

	.appLogo img {
		width: 150px;
		cursor: pointer;
	}
}

/*********************** BANNER SLIDER ***************************/
.banner_section {
	width: 100%;
}

.carousel-caption {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

	.carousel-caption h1 {
		font-size: 60px;
	}

	.carousel-caption h5 {
		line-height: 1.7;
	}

.slider-btn {
	color: #F37F2E;
	background-color: transparent;
	border: 1.5px solid #F37F2E;
	width: 50%;
	padding: 0.4rem 0.7rem;
	text-transform: uppercase;
	font-weight: bold;
}

	.slider-btn:hover {
		color: white;
		background-color: #F37F2E;
	}

	.slider-btn.banner-btn {
		width: 170px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 3rem;
	}

#theme_slider .carousel-item.active, #theme_slider .carousel-item-next, #theme_slider .carousel-item-prev {
	display: block;
}

#theme_slider .carousel-control {
	width: 40px;
	height: 40px;
	background-color: transparent;
	border-radius: 50px;
	opacity: 1;
	z-index: 0;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid white;
}

	#theme_slider .carousel-control:hover {
		border: 1px solid #F37F2E;
	}

		#theme_slider .carousel-control:hover svg {
			fill: #F37F2E;
		}

#theme_slider .carousel-control-next {
	right: 100px;
}

#theme_slider .carousel-control-prev {
	left: 100px;
}

#theme_slider .carousel-control svg {
	fill: white;
	width: 30px;
	height: 30px;
}

#theme_slider .carousel-control-prev svg {
	margin-left: -2px;
}

#theme_slider .carousel-control-next svg {
	margin-right: -2px;
}

/*********************** PRODUTOS SLIDER ***************************/
.product-slider {
	background-color: #F7F7F7;
	width: 100%;
	padding: 3rem 0;
}

.product-slider-title {
	justify-content: center;
	margin-bottom: 3rem;
}

#sold_slider .carousel-item.active, #sold_slider .carousel-item-next, #sold_slider .carousel-item-prev,
#sold_slider1 .carousel-item.active, #sold_slider1 .carousel-item-next, #sold_slider1 .carousel-item-prev {
	display: flex !important;
	justify-content: center;
	column-gap: 3rem;
}

.item-container {
	background-color: white;
	align-items: center;
	padding: 2rem 2rem;
	row-gap: 10px;
}

	.item-container img {
		height: 250px;
		width: 220px;
	}

	.item-container .line-through-label {
		font-size: 9px;
		margin-bottom: -10px;
		height: 1rem;
	}

#sold_slider .carousel-control,
#sold_slider1 .carousel-control {
	width: 40px;
	height: 40px;
	background-color: #F37F2E;
	border-radius: 50px;
	opacity: 1;
	z-index: 0;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid #F37F2E;
}

	#sold_slider .carousel-control:hover,
	#sold_slider1 .carousel-control:hover {
		background-color: white;
	}

		#sold_slider .carousel-control:hover svg,
		#sold_slider1 .carousel-control:hover svg {
			fill: #F37F2E;
		}

#sold_slider .carousel-control-next,
#sold_slider1 .carousel-control-next {
	right: 100px;
}

#sold_slider .carousel-control-prev,
#sold_slider1 .carousel-control-prev {
	left: 100px;
}

#sold_slider .carousel-control svg,
#sold_slider1 .carousel-control svg {
	fill: white;
	width: 30px;
	height: 30px;
}

#sold_slider .carousel-control-prev svg,
#sold_slider1 .carousel-control-prev svg {
	margin-left: -2px;
}

#sold_slider .carousel-control-next svg,
#sold_slider1 .carousel-control-next svg {
	margin-right: -2px;
}

/*********************** GRID TEMAS ***************************/
.background-gray {
	/* para usar no body. Se for acrescentado a outro elemento aparece branco por detrás quando a lista é menor que a página */
	background-color: #F7F7F7;
}

.background-transparent, .background-transparent-hover:hover {
	background-color: transparent;
}

.grid-content-margin {
	width: 100%;
}

h1.pagetitle {
	text-align: center;
	margin: 2.5rem auto 4rem;
	font-weight: bold;
}

/* GRID CARDS */
.card { /*para overwrite*/
	border-radius: 0;
}

.card-title {
	height: 63px !important;
}

.card-img-top { /*para overwrite*/
	border-radius: 0;
	object-fit: cover;
	height: 16rem;
	width: 100%;
}

.card.product-grid-card {
	width: 16rem;
}

.card.shop-grid-card {
	width: 22rem;
}

.card.theme-grid-card {
	width: 22rem;
}



button.btn-details {
	border: 0.2rem solid var(--button-bg-color);
	background: #ffffff;
	color: var(--button-bg-color);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
	border-radius: 50px;
	width: 130px;
	padding: 0.3rem 0.5rem;
	margin: 1rem auto;
	/* maybe later*/
	/* display: flex;
    align-items: center;
    justify-content: space-evenly;*/
}

.discount-tag.hover {
	position: absolute;
	align-self: flex-end;
	top: 2rem;
	right: -0.1rem;
	width: 80px;
	padding: 0.8rem 1rem;
}

.product-grid-card .line-through-label {
	font-size: 10px;
	text-decoration: line-through;
}

/*********************** FORM TEMAS ***************************/
.banner {
	height: 450px;
	width: 100%;
}

.description-container {
	row-gap: 20px;
	padding: 3rem 8rem;
}

.description-text {
	justify-content: center;
	align-items: center;
}

	.description-text p {
		text-align: center;
		margin-top: 10px;
		line-height: 1.8;
	}

.slide-image-container {
	position: relative;
	min-width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 5rem;
}

.container {
	position: relative;
}

.image-slides {
	display: none;
}

.slide-prev svg, .slide-next svg {
	fill: white;
	width: 2rem;
}

.slide-prev,
.slide-next {
	cursor: pointer;
	position: absolute;
	border-radius: 0 3px 3px 0;
}

.slide-prev {
	margin-left: 10px;
}

.slide-next {
	right: 6rem;
	border-radius: 3px 0 0 3px;
}

.slide-count {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	font-weight: bold;
}

.caption-container {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
}

	.caption-container p {
		margin: 5px 0;
	}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.column {
	padding: 0;
}

	.column img {
		height: 90px;
	}

.slide-thumbnail-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}

.slide-thumbnail-img {
	opacity: 0.6;
	cursor: pointer;
}

	.active,
	.slide-thumbnail-img:hover {
		opacity: 1;
	}

/*********************** FORM PRODUTOS ***************************/
.left-container {
	width: 50%;
	padding: 0 3rem;
	padding-top: 5rem;
}

.form-form, .right-container {
	width: 50%;
	padding: 5rem 15rem 0 2rem;
}

.row-flex {
	display: flex;
}

.form-price-row {
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}

.col-flex {
	display: flex;
	flex-direction: column;
}

.title-label {
	font-size: 2.5rem;
}

.shop-label {
	font-size: 1.2rem;
	color: #F77F00;
}

.title-label-md {
	font-size: 2rem;
}

.small-label {
	font-size: 11px;
}

.small-label-sm {
	font-size: 10px;
}

.line-through-label {
	text-decoration: line-through;
}

.discount-tag {
	background: #F77F00;
	color: white;
	font-size: 18px;
	font-weight: bold;
	padding: 1rem;
	border-radius: 50px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	text-align: center;
	width: 80px;
}

	.discount-tag.small {
		position: absolute;
		align-self: flex-end;
		margin-right: -2rem;
		padding: 0.8rem 1rem;
	}

.row-product-form {
	background: #F8F8F8;
	padding: 1rem 2rem;
	margin-top: 1rem;
}

	.row-product-form .editor-field {
		margin-bottom: 10px;
	}

		.row-product-form .editor-field select {
			width: 100%;
			padding: 5px 0;
			padding-left: 5px;
			border: none;
		}

.qty-btn {
	width: 1.75rem;
	padding: 5px;
	background: white;
}

	.qty-btn.minus {
		margin-right: -4px;
	}

	.qty-btn.plus {
		margin-left: -4px;
	}

.qty-input {
	border: 0;
	padding: 5px 5px;
	width: 50px;
	text-align: center;
}

.qtygrid-btn {
	/*width: 1.75rem;*/
	padding: 2px;
	text-align: center;
	transform: scale(0.85);
}

	.qtygrid-btn.minus {
		margin-right: 0px;
	}

	.qtygrid-btn.plus {
		margin-left: 0px;
	}

.qtygrid-input {
	border-radius: 15%;
	padding: 5px 5px;
	width: 20%;
	border-width: thin;
	text-align: center;
}

.product-submit {
	margin: 10px 0;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0.2rem 0.7rem;
	padding-right: 1rem;
	background: var(--button-bg-color);
	border: 1px solid var(--button-bg-color);
}

	.product-submit span {
		text-transform: uppercase;
		font-weight: bold;
	}

	.product-submit:hover {
		color: var(--button-bg-color);
		background: var(--button-hover-color);
	}

	.product-submit svg {
		width: 2rem;
		fill: white
	}

	.product-submit:hover svg {
		fill: var(--button-bg-color);
	}

.item-description {
	margin-top: 20px;
}

.comment-tr td {
	background-color: transparent !important;
}

.comment-rating {
	width: 100%;
	padding-left: 25% !important;
	border: none;
	padding-top: 1rem !important;
	padding-bottom: 0 !important;
}

.comment-evaluation {
	vertical-align: middle;
	margin-left: 5px;
}

.comment-right, .comment-left {
	padding-top: 0;
	border: none;
}

.comment-label {
	color: #A2A2A2;
	font-weight: normal;
}

.comment-left {
	background-color: transparent !important;
	width: 25%;
	justify-content: space-evenly;
	align-items: center;
	font-size: 13px;
}

	.comment-left div, .comment-right {
		flex-direction: column;
	}

	.comment-left div {
		justify-content: center;
		height: 100%;
		row-gap: 3px;
		color: #A2A2A2;
	}

.comment-right {
	width: 75%;
	padding-left: 0 !important;
}

.comment-star-rating svg {
	width: 2rem;
	margin-left: -6px;
}

.comment-title {
	font-weight: bold;
	margin-top: 10px;
}

.comment-text {
	margin-top: 5px;
	color: #707070;
}

.comment-response {
	width: 100%;
	padding-left: 25% !important;
}

	.comment-response div {
		padding: 5px 1rem;
		border-left: 2px solid #AAAAAA;
		margin-bottom: 1rem;
	}

	.comment-response .comment-text {
		margin-top: 1rem;
	}

.create-comment {
	background: transparent;
	color: #2B2B2B;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 130px;
	justify-content: space-evenly;
	border-radius: 50px;
	padding: 0.3rem 0.7rem;
}

	.create-comment svg {
		width: 2rem;
	}

	.create-comment:hover {
		background-color: white;
	}

.load-more {
	justify-content: center;
}

.more-comments-btn {
	background-color: #2B2B2B;
	border: 1px solid #2B2B2B;
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	color: white;
}

	.more-comments-btn:hover {
		background-color: white;
		color: #2B2B2B;
	}

/*FORM PRODUTOS SLIDER */
.form-banner-bg {
	display: flex;
	justify-content: center;
	height: 450px;
}

#form_slider .carousel-item.active, #form_slider .carousel-item-next, #form_slider .carousel-item-prev {
	display: block;
}

#form_slider {
	position: relative;
}

	#form_slider .carousel-indicators {
		list-style-type: none;
		bottom: -7rem;
		z-index: 1;
	}

		#form_slider .carousel-indicators li,
		#form_slider .carousel-indicators li.active {
			width: 50px;
			height: 50px;
			background-color: transparent;
			border-radius: 1px;
			margin-right: 5px;
			margin-left: 5px;
		}

		#form_slider .carousel-indicators .slider-thumbnail {
			width: 50px;
			height: 50px;
			overflow: hidden;
			opacity: 0.5;
			display: block;
			padding: 0;
			margin-bottom: 0;
			background-color: #fff;
			border: none;
			border-radius: 2px;
			transition: all 550ms ease-out;
			border: 1px solid transparent;
		}

			#form_slider .carousel-indicators .slider-thumbnail:hover {
				position: relative;
				display: block;
				border: 1px solid transparent;
				opacity: 1;
				transform: scale(1.5);
				z-index: 1;
			}

			#form_slider .carousel-indicators .slider-thumbnail.active,
			#form_slider .carousel-indicators .slider-thumbnail.active:hover {
				opacity: 1;
			}

	#form_slider .svg-button svg {
		width: 2.5rem;
	}

/*********************** FORM LOJA ***************************/
.tenant-info {
	margin: 1rem 6rem 0 6rem;
	width: 100%;
}

	.tenant-info:last-of-type {
		margin-bottom: 2rem;
	}

	.tenant-info p {
		color: #707070;
		padding: 1.5rem;
		display: none;
	}

		.tenant-info p.open {
			display: block;
		}

.tenant-info-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #C9C9C9;
	padding: 1rem;
}

	.tenant-info-title button svg {
		width: 2.5rem;
		rotate: 90deg;
	}

	.tenant-info-title button.open svg {
		rotate: -90deg;
	}

/*********************** CARRINHO DE COMPRAS ***************************/
.shop-bc span:not(.current) {
	color: #BEBDBC
}

.shopping-cart-container {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: 0 4rem;
	margin-bottom: 3rem;
	flex-wrap: wrap;
	display: flex;
	flex: 2;
}

.shopping-cart-right {
	width: 69%;
	border: 1px solid #CCCCCC;
	min-width: 800px;
	margin-top: 10px;
	flex: 2;
}

@media only screen and (max-width: 830px) {
	.shopping-cart-right {
		min-width: 661px;
	}

	.shopping-cart-left {
		min-width: 635px;
	}

	.shopping-cart-left-2 {
		min-width: 635px;
	}
}

@media only screen and (max-width: 530px) {
	.shop-bc {
		font-size: 12px;
	}
}

.field-validation-error {
	/*margin-bottom: 10px;*/
	color: red;
	font-size: 10px !important;
	font-weight: bold;
	/*        float: left;*/
	overflow: hidden;
	width: 50%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 3px;
	margin-top: 2px;
}

	.field-validation-error span {
		color: red;
		font-size: 13px;
		font-weight: bold;
	}

.grid-table {
	width: 98%;
	margin-bottom: 0;
}

	.grid-table thead {
		text-transform: uppercase;
		font-size: 12px;
	}

		.grid-table thead th {
			font-weight: 500;
		}

	.grid-table tbody tr:last-of-type {
		border-bottom: none;
	}

		.grid-table tbody tr:last-of-type td {
			border-bottom: none;
		}

	.grid-table tr {
		vertical-align: middle;
		font-size: 13px;
		font-weight: 500;
	}

		.grid-table tr svg {
			width: 1.5rem;
			cursor: pointer;
		}

		.grid-table tr td:first-child {
			padding-left: 1rem;
		}

.group-grid {
	font-size: 12px;
	padding-left: 1rem;
}

.shopping-cart-left {
	margin-left: 20px;
	margin-top: 10px;
	width: 30%;
	min-height: 350px;
	display: flex;
	flex: 1;
	min-width: 450px;
	position: relative;
	flex-direction: column;
}

	.shopping-cart-left button {
		margin-top: 1rem;
		text-transform: uppercase;
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-weight: 600;
		padding-right: 2rem;
		padding-left: 2rem;
	}

	.shopping-cart-left button svg {
		width: 1.6rem;
	}

.shopping-cart-left-2 {
	margin-left: 20px;
	margin-top: 10px;
	width: 30%;
	height: 400px;
	display: flex;
	flex: 1;
	min-width: 450px;
	position: relative;
}

	.shopping-cart-left-2 button {
		color: white;
		background-color: #F77F00;
		max-height: 60px;
		min-width: 150px;
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 1rem;
		padding: 0.5rem 1rem;
		font-weight: bold;
		text-transform: uppercase;
		border: 1px solid #F77F00;
		position: absolute;
		margin-bottom: 10px;
		margin-left: 10px;
		bottom: 50px;
	}

		.shopping-cart-left-2 button svg {
			width: 2rem;
			border: 2px solid white;
			border-radius: 50px;
			padding: 2px;
			fill: white;
		}

		.shopping-cart-left-2 button:hover {
			background-color: white;
			color: #F77F00;
		}

			.shopping-cart-left-2 button:hover svg {
				border: 2px solid #F77F00;
				fill: #F77F00;
			}

.button-back button {
	display: flex;
	flex-direction: row-reverse;
	position: absolute;
	bottom: 0px;
	margin-right: 30px;
	right: 0px;
}

.button-back2 button {
	display: flex;
	flex-direction: row-reverse;
	position: absolute;
	bottom: 0px;
	margin-right: 10px;
	right: 0px;
}

.cart-resume {
	border: 1px solid #CCCCCC;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.resume-section {
	display: flex;
	padding: 1rem;
	flex-direction: column;
	row-gap: 1rem;
}

	.resume-section.title, .resume-section.middle {
		border-bottom: 1px solid #CCCCCC;
	}

	.resume-section div {
		display: flex;
		justify-content: space-between;
	}

	.resume-section.middle {
		margin: 1rem 1rem 0 1rem;
		padding: 0;
		padding-bottom: 1rem;
	}

/* DATEPICKER */
.ui-datepicker {
	background: white;
	border: 1px solid var(--primary-text-color);
	border-radius: 10px;
	padding: 5px 10px;
	display: none;
}

.ui-datepicker-header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
}

	.ui-datepicker-header a {
		flex: 50%;
		cursor: pointer;
	}

.ui-datepicker-title {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

	.ui-datepicker-title select {
		flex: 50 %;
		border: none;
		border-bottom: 2px solid var(--form-input-border-color);
		color: var(--text-color);
	}

.ui-datepicker-calendar {
	border-collapse: inherit;
}

	.ui-datepicker-calendar thead tr {
		color: var(--primary-text-color);
		text-align: center;
	}

	.ui-datepicker-calendar tbody tr {
		color: var(--header-bg-color);
		text-align: center;
	}

/************************ MAPA *******************/
.carousel-control.disabled {
	width: 40px;
	height: 40px;
	background-color: #CBCBCB;
	border-radius: 50px;
	opacity: 1;
	z-index: 0;
	margin-top: auto;
	margin-bottom: auto;
	border: 1px solid white;
	cursor: default !important;
	position: relative;
}

.carousel-control-next.disabled {
	right: 100px;
}

.carousel-control-prev.disabled {
	left: 100px;
}

.carousel-control.disabled svg {
	fill: white;
	width: 30px;
	height: 30px;
}

.carousel-control-prev.disabled svg {
	margin-left: -2px;
}

.carousel-control-next.disabled svg {
	margin-right: -2px;
}

.carousel-item.map .item-container {
	max-width: 300px;
}

.slider-btn.map {
	width: auto;
}

.product-slider.map {
	background-color: transparent;
}

.empty-carosel-text {
	color: #B1B1B1;
	font-size: 1.5rem;
}

#comboSearch {
	height: 35px;
	border-radius: 20px;
	padding-left: 5px;
	color: #9A9A9A;
	border-color: #D7D7D7;
}

#map-canvas {
	height: 700px;
	max-height: none !important;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-bottom: 3rem;
}

.infowindow {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

	.infowindow .title {
		font-weight: bold;
		font-size: 15px;
	}

	.infowindow .item {
		padding: 5px 0;
	}

	.infowindow .link-btn {
		width: 100%;
		border-radius: 10px;
	}

	.infowindow #images {
		display: flex;
		justify-content: center;
	}

		.infowindow #images img {
			max-width: 150px;
			border-radius: 10px;
		}

	.infowindow svg {
		width: 25px;
		height: 25px;
		fill: var(--svg-bg-color);
	}

#legend {
	background: #F7F7F7;
	padding: 10px;
	margin: 10px;
	font: caption; /*para dar override a fonte que vem do css da google*/
}

	#legend img {
		vertical-align: middle;
	}

.label-report-filter {
	display: block;
	font-size: 13px;
	margin-bottom: 0.25rem;
}

.report-multiselect-btn {
	height: 35px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: transparent;
	border: 1px solid #D7D7D7;
	color: #9A9A9A;
	border-radius: 20px;
	padding: 0.2rem 0.5rem;
}

	.report-multiselect-btn svg {
		width: 12px;
		fill: #9A9A9A;
	}

	.report-multiselect-btn.show svg {
		transform: rotate(90deg);
	}

.multiselect-group {
	padding: 0 1rem 0 0;
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	cursor: pointer;
}

/************************Grid sugestions*******************/
.form-formSug, .right-container {
	width: 100%;
}

.SugIntPoint-left {
	width: 85%;
	margin-top: 7rem;
	margin-left: 4rem;
	margin-right: 4rem;
}



.SugIntPoint-right {
	margin-left: 1rem;
	margin-right: 4rem;
	width: 75%;
}


.SugIntPoint-div {
	border: 2px solid;
	border-color: #CCCCCC;
	margin-bottom: 11px;
	padding: 1rem 2rem;
}

/************************Grid Encomendas*******************/

.purchase-order-container {
	display: flex;
	width: 100%;
	margin: 0 4rem;
	margin-bottom: 3rem;
	column-gap: 2rem;
}

.titleClass {
	margin: 2rem 0;
	font-size: 35px;
}

.purchase-order-left {
	width: 85%;
	margin-top: 7rem;
	margin-left: 4rem;
	margin-right: 4rem;
}

.purchase-order-center {
	margin-top: 7rem;
	margin-left: 1rem;
	margin-right: 1rem;
	text-align: center;
}


.purchase-order-right {
	margin-left: 1rem;
	margin-right: 4rem;
	width: 75%;
}

.purchase-div {
	border: 2px solid;
	border-color: #CCCCCC;
	margin-bottom: 11px;
	padding: 1rem 2rem;
}

.user-side-menu {
	background-color: #EFEFEF;
	padding: 1rem;
}

.user-side-menu-btn {
	font-size: 17px;
	color: #8E8D8C;
	border: 0px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	column-gap: 1rem;
	margin-bottom: 10px;
}

	.user-side-menu-btn:last-child {
		margin-bottom: 0;
	}

	.user-side-menu-btn svg {
		width: 2rem;
		fill: #8E8D8C;
	}

	.user-side-menu-btn.active {
		color: #2B2A29;
	}

		.user-side-menu-btn.active svg {
			fill: #2B2A29;
		}

	.user-side-menu-btn:hover:not([disabled]) {
		color: #2B2A29;
	}

		.user-side-menu-btn:hover:not([disabled]) svg {
			fill: #2B2A29;
		}

.user-menu-grid-btn {
	border-radius: 50px;
	background-color: #ffffff;
	border: 0.1rem solid;
	border-color: #2B2B2B;
	padding: 5px 10px;
}

	.user-menu-grid-btn svg {
		width: 1.7rem;
		border: 0.1rem solid #2B2B2B;
		border-radius: 50px;
	}

	.user-menu-grid-btn:hover {
		color: white;
		background-color: #2B2B2B;
	}

		.user-menu-grid-btn:hover svg {
			fill: white;
			border: 2px solid white;
		}

/*********************** Form Encomendas *********************/
.square {
	border: 1px solid #CCCCCC;
	padding: 20px;
	row-gap: 5px;
	flex: 1;
	flex: 0 0 50%;
	border-bottom: none;
}



	.square:nth-last-child(2n + 2) { /* 2º, 4º, 6º, 8º, etc*/
		border-right: none;
	}

	.square.full {
		flex: 0 0 100%;
		border-right: 1px solid #CCCCCC;
	}

.square-sc-clientdata {
	border: 1px solid #CCCCCC;
	padding: 0px;
	row-gap: 5px;
	flex: 1;
	flex: 0 0 50%;
	border-bottom: none;
}

	.square-sc-clientdata.full {
		flex: 0 0 100%;
		border-right: 1px solid #CCCCCC;
	}

.square-form {
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC !important;
}

.square-title span {
	font-size: 19px;
}

.subsquare-sc-clientdata {
	padding: 20px;
	row-gap: 5px;
	flex: 1;
	flex: 0 0 50%;
	border-bottom: none;
	border: 1px solid #CCCCCC;
}

.purchaseOrder-btn {
	background-color: #2B2B2B;
	border: 1px solid #2B2B2B;
	font-size: 12px;
}

	.purchaseOrder-btn:hover {
		background-color: white;
		color: #2B2B2B;
		fill: #2B2B2B;
	}

	.purchaseOrder-btn.back {
		width: 70px;
		margin-top: 1rem;
	}

	.purchaseOrder-btn.svg-btn {
		border-radius: 50px;
		padding: 0;
		width: 40px;
		border: none;
	}

		.purchaseOrder-btn.svg-btn svg {
			fill: white;
		}

			.purchaseOrder-btn.svg-btn svg .svg_add_circle {
				stroke: white;
			}

		.purchaseOrder-btn.svg-btn:hover svg {
			fill: #2B2B2B;
		}

			.purchaseOrder-btn.svg-btn:hover svg .svg_add_circle {
				stroke: #2B2B2B;
			}

	.purchaseOrder-btn.next {
		width: 120px;
		margin-top: 1rem;
	}

		.purchaseOrder-btn.next svg {
			width: 1.6rem;
			fill: white;
			border: 1px solid white;
			border-radius: 50px;
			padding: 5px;
		}

		.purchaseOrder-btn.next:hover svg {
			fill: #2B2B2B;
			border: 1px solid #2B2B2B;
		}

.purchase-order-product-div {
	border: 1px solid #CCCCCC;
}

.message-row {
	background: #F2F2F2;
}

	.message-row:hover, .message-row:hover > * {
		background: #F2F2F2 !important;
		--bs-table-bg-state: #F2F2F2 !important;
	}

	.message-row:first-of-type {
		border: 2px solid #F37F2E;
		margin-top: 0 !important;
	}

.select-product {
	color: #F37F2E;
	background-color: white;
	border: 2px solid #F37F2E;
	border-radius: 50px;
	column-gap: 1rem;
	padding: 0.5rem 1rem;
}

	.select-product svg {
		fill: #F37F2E;
	}

	.select-product:hover, .select-product.selected {
		color: white;
		background-color: #F37F2E;
	}

		.select-product:hover svg, .select-product.selected svg {
			fill: white;
		}

.td-align-middle {
	vertical-align: middle;
}

.above-combo-row, .above-combo-row td {
	border-bottom: none !important;
}

.combo-row, .combo-row td {
	border-top: none !important;
}

.grid-action {
	width: 2rem;
	margin: auto;
	cursor: pointer;
}

	.grid-action.map {
		margin: 0;
	}

		.grid-action.map svg {
			border: 0.1rem solid #F77F00;
			border-radius: 50px;
			padding: 2px;
			fill: #F37F2E;
		}

		.grid-action.map:hover svg {
			fill: white;
			background-color: #F37F2E;
		}

.grid-actionleft {
	width: 2rem;
	margin: auto;
	cursor: pointer;
	float: left;
}

.done-back {
	border: 2px solid #F37F2E;
	color: #F37F2E;
	background-color: white;
	width: 50%;
}

	.done-back:hover {
		color: white;
		background-color: #F37F2E;
	}

.add-item {
	border: 1px solid #2B2B2B;
	color: #2B2B2B;
	background-color: white;
	width: 200px;
}

	.add-item:hover {
		color: white;
		background-color: #2B2B2B;
	}

/* PAGINACAO */
.grid-helper-pagination {
	font-size: 11px;
}

	.grid-helper-pagination.center {
		align-self: center;
	}

	.grid-helper-pagination select {
		margin: 0 40px 0 10px;
		height: 22px;
		text-align: center;
		border: none;
		border-bottom: 2px solid var(--form-input-border-color);
	}

	.grid-helper-pagination .svg-button {
		width: 1.4rem;
		fill: var(--primary-text-color);
	}

		.grid-helper-pagination .svg-button:hover {
			fill: var(--svg-bg-color);
		}

.grid-helper-pagination-comments {
	font-size: 11px;
	display: flex;
	justify-content: center;
}


.records {
	margin-left: 5px;
	font-size: 8pt;
}


.grid-action.select:hover svg {
	fill: white;
	background: #2B2B2B;
	border-radius: 50px;
}
/*********************** Editar Conta *********************/
.form-border {
	border: 1px solid #CCCCCC;
}

.form-input {
	border: 1px solid #D7D7D7;
	padding: 0.4rem 0.6rem;
	border-radius: 5px;
}
/*********************** MODAIS ***************************/
#dialog-modal .comment-star-rating svg {
	width: 3rem;
	cursor: pointer;
}

#dialog-modal form {
	padding: 1rem;
}

#dialog-modal {
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}

	#dialog-modal.show, #dialog-modalSecondLevel.show, #dialog-search-modal.show {
		position: fixed; /* Stay in place */
		z-index: 2; /* Sit on top */
		display: flex;
		flex-direction: column;
	}

	#dialog-modal.hide, #dialog-modalSecondLevel.hide, #dialog-search-modal.hide {
		display: none;
	}

.form-modal-container { /* form de cada modal */
	position: relative;
	background-color: #fefefe;
	padding: 0;
	border-radius: 1rem;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	/* Para centrar */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: auto;
}

.form-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 16px;
	background-color: var(--pageTitle-bg-color);
	color: black;
	height: 4rem;
	/* arredondar os cantos de acordo com a box container */
	border-top-left-radius: calc(1rem - 1px);
	border-top-right-radius: calc(1rem - 1px);
}

	.form-modal-header h4 {
		margin: 0;
		font-size: 1.1rem;
	}

.form-modal-body {
	padding: 16px;
}

.form-modal-footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	padding: 0 30px;
	/* arredondar os cantos de acordo com a box container */
	border-bottom-left-radius: calc(1rem - 1px);
	border-bottom-right-radius: calc(1rem - 1px);
}

.form-modal-btn {
	margin-left: 10px;
	border: 0;
	/*padding: .375rem .75rem;
	border-radius: 10px;*/
	border-radius: 50px;
	width: 100px;
	padding: 0.5rem 0;
}

	.form-modal-btn:not(:disabled) {
		background: #2B2B2B;
		color: var(--header-text-color);
		border-radius: 50px;
		width: 100px;
		padding: 0.5rem 0;
		border: 1px solid #2B2B2B;
	}

		.form-modal-btn:not(:disabled):hover {
			background: white;
			color: #2B2B2B;
		}

/* The Close Button */
.form-modal-close {
	font-size: 28px;
	font-weight: bolder;
	cursor: pointer;
	float: right;
	margin-top: -10px;
}

	.form-modal-close:hover,
	.form-modal-close:focus {
		color: #000;
		text-decoration: none;
	}

/* HELPER */
.modal-helper {
	overflow-y: overlay;
	overflow-x: overlay;
}

.textAreaNumCharactersModal {
	display: inline-block;
	float: right;
}

/*********************** SIDE MENU ***************************/
.sideMenu {
	position: fixed;
	transition: width 600ms ease;
	box-shadow: 2px 0 10px grey;
	z-index: 3;
	overflow-y: hidden;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	/* a width está definida nas media queries */
}


.nav {
	background-color: var(--menu-bg-color);
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: calc(100vh - 112px - 1rem);
	overflow-y: auto;
	overflow-x: hidden;
	flex-wrap: nowrap;
}

	.nav::-webkit-scrollbar {
		width: 0.25rem;
	}

	.nav::-webkit-scrollbar-track {
		background: #434343;
	}

	.nav::-webkit-scrollbar-thumb {
		background: #F77F00;
	}

.nav-logo {
	height: var(--headerBar-height);
}

@-webkit-keyframes slide {
	100% {
		left: var(--menu-width);
	}
}

@keyframes slide {
	100% {
		left: var(--menu-width);
	}
}

@-webkit-keyframes opacity {
	100% {
		opacity: 1;
	}
}

@keyframes opacity {
	100% {
		opacity: 1;
	}
}

.nav-item, .nav-item-dropdown {
	width: 100%;
}

	.nav-item-dropdown a:hover {
		color: white;
	}

.helper-icon { /*ultimo botao*/
	background-color: var(--menu-bg-color);
	margin-top: auto;
}

.nav-icon {
	display: flex;
	align-items: center;
	height: 4rem;
	color: var(--primary-text-color);
	text-decoration: none;
	cursor: pointer;
	justify-content: flex-start;
}

	.nav-icon svg {
		width: 3rem;
		margin: 0 1rem;
		fill: #F77F00;
	}

	.nav-icon:hover {
		background: var(--header-bg-color);
		color: white;
	}

/*.nav-icon:hover svg {
            fill: white;
        }*/

.nav-icon-arrow svg {
	width: 1rem;
	margin-left: auto;
}

.nav-icon-arrow:hover svg {
	fill: white;
}

.nav-icon-arrow svg.expanded {
	transform: rotate(90deg);
}

.nav > li {
	padding-left: 1.5rem
}

.nav .nav-icon {
	min-height: 2rem;
	height: auto; /*para overwrite*/
	padding: 0.5rem 0;
}

.nav .nav-dropdown-item {
	padding: 0; /*para overwrite*/
}

ul.nav-dropdown.expanded {
	padding-bottom: 1.5rem;
	padding-left: 1.5rem;
}

.nav-icon-text {
	display: flex;
	opacity: 0;
	/*position: absolute;*/ /*estas duas linhas são para quando os menus faziam slide quando se abre o menu */
	/*left: -999px;*/
	font-weight: bold;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - var(--menu-width));
}

	.nav-icon-text svg {
		width: 1rem;
		margin-left: auto;
	}

		.nav-icon-text svg.expanded {
			transform: rotate(90deg);
		}

	.nav-icon-text.expanded {
		width: 100%;
		-webkit-animation: opacity var(--transition-speed) forwards;
	}

.nav-dropdown {
	display: none;
	font-size: 14px;
	list-style: none;
}

	.nav-dropdown.expanded {
		display: block;
	}

.nav-dropdown-item {
	padding: 0.25rem 0.5rem;
}

/*********************** ACCOUNT VIEWS ***************************/
.account-container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: calc(100vh - var(--footer-height) - var(--headerBar-height)); /*os 200px são o tamnho do footer + header*/
	overflow-x: hidden;
	background-color: white;
}

.loginContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	overflow-x: hidden;
	min-height: 60vh;
	background-color: white;
	border: 1px solid white;
	border-radius: 20px;
	padding: 30px 30px 30px 30px;
}

	.loginContainer h1 {
		color: var(--header-bg-color);
	}

	.loginContainer h4 {
		color: var(--header-bg-color);
	}

.loginTitle {
	width: 100%;
}

.account-form {
	width: 85%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.account-form-cart {
	width: 85%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
}

.account-input {
	margin-top: 10px;
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #A2A2A2;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s
}

.account-input-terms {
	margin-right: 5px;
}

.account-input-terms-lable {
	/*font-weight: bold;*/
}

.account-btn-row {
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.account-btn {
	padding: 10px;
	border: 3px solid white;
	box-sizing: border-box;
	border-radius: 35px !important;
	width: 300px;
	text-transform: uppercase;
	font-weight: bold;
}

	.account-btn.register {
		margin-top: 12px;
	}

	.account-btn:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--button-text-color);
	}

		.account-btn:not(:disabled):hover {
			border: 3px solid var(--button-bg-color);
			background: var(--button-hover-color);
			color: var(--button-text-hover-color);
		}

	.account-btn.alt-btn {
		border: 3px solid var(--button-bg-color);
		background-color: var(--button-hover-color);
		color: var(--button-text-hover-color);
	}

		.account-btn.alt-btn:not(:disabled):hover {
			border: 3px solid var(--button-bg-color);
			background: var(--button-bg-color);
			color: var(--button-text-color);
		}


.account-btn-shpcart {
	padding: 10px 40px;
	border: 3px solid white;
	box-sizing: border-box;
	border-radius: 35px !important;
	width: 100%;
}

	.account-btn-shpcart.register {
		margin-top: 12px;
	}

	.account-btn-shpcart:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--button-text-color);
	}

		.account-btn-shpcart:not(:disabled):hover {
			border: 3px solid var(--button-bg-color);
			background: var(--button-hover-color);
			color: var(--button-text-hover-color);
		}

.rememberMe-holder {
	width: 100%;
}

.rememberMe-row {
	display: flex;
	text-align: center;
	justify-content: space-between;
}

.rememberMe-row-register {
	display: flex;
	margin-top: 15px;
}

.rememberMe {
	margin: 10px 0 10px 3px;
	font-size: 12px;
}

.account-link {
	color: var(--primary-text-color);
	font-size: 10px;
}

	.account-link:last-of-type {
		margin-top: 3px;
		margin-bottom: 20px;
	}

	.account-link:first-of-type {
		margin-top: 10px;
		font-size: 10px;
	}

	.account-link:hover {
		color: var(--menu-bg-color);
	}

.loginSKLogo {
	margin-top: auto;
	margin-bottom: 20px;
}

.g-recaptcha {
	display: inline-block;
	margin-top: 20px;
}

.recaptcha-message {
	margin-bottom: 20px;
	font-size: 12px;
	color: red;
}

/*********************** GRITTER ***************************/
#gritter-wrapper {
	z-index: 2;
	position: fixed;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 10px;
}

	#gritter-wrapper .alert {
		width: 60%;
	}

.account-gritter {
	top: 10%;
}

.alert p {
	margin-bottom: 0;
}

/*********************** MEDIA QUERIES ***************************/
/* Large screens */
@media only screen and (min-width: 750px) {
	/* GRID TEMAS */
	.grid-content-margin {
		padding: 0 17rem;
	}

	/* ACCOUNT VIEWS */
	.loginContainer {
		width: 40%;
	}

	.account-form span {
		font-size: 13px;
	}

	/* SIDE MENU */
	.sideMenu {
		top: 0;
		width: var(--menu-width);
		height: 100vh;
	}

		.sideMenu.expanded {
			width: var(--menu-width-expanded);
		}

	/* PAGE TITLE BAR */
	.pageTitleBar.page-scroll {
		width: calc(100% - var(--menu-width));
	}
}

/* Small screens */
@media only screen and (max-width: 750px) {
	main {
		margin: 0;
	}

	/* ACCOUNT VIEWS */
	.loginContainer {
		width: 90%;
	}

	.account-form span {
		font-size: 11px;
	}

	/* SIDE MENU */
	.sideMenu {
		/*bottom: 0;*/
		width: 0px;
		height: 4rem;
		box-shadow: 0 0 0;
		background: transparent;
		position: absolute;
	}

		.sideMenu.expanded {
			width: 30vw;
			height: 100%;
			background-color: var(--menu-bg-color);
		}

	.logo {
		display: none;
	}

	.nav {
		flex-direction: column;
	}

	.nav-logo {
		width: 50px;
		margin-bottom: 0px;
	}

		.nav-logo .nav-icon {
			color: var(--header-text-color);
		}

			.nav-logo .nav-icon:hover {
				color: var(--header-text-color);
			}

	.sideMenu.expanded .nav-logo {
		width: 100%;
		background: var(--header-bg-color);
	}

	.nav-icon {
		background: transparent;
	}

		.nav-icon:hover {
			background: transparent;
			color: var(--text-color);
		}

			.nav-icon:hover svg {
				fill: var(--text-color);
			}

	.nav-link {
		justify-content: center;
	}

	/* HEADER BAR */
	.header-text {
		display: none;
	}

	.headerBar img {
		margin-right: 10px;
	}

	.simulate {
		margin-right: 20px;
	}

	.logout-form {
		margin-right: 1rem;
		margin-left: 0;
	}

	/* PAGETITLE BAR*/
	.pageTitleBar {
		padding-left: 1rem;
	}

	.pageTitleButtons button {
		margin-right: 0;
	}

		.pageTitleButtons button:last-child {
			margin-right: 1rem;
		}

	/* GRID */
	.grid-content {
		overflow-x: auto;
		padding: 1rem;
	}

	.grid-helper-search-input.form-input {
		width: 200px;
	}

	.grid-helper-search .svg-button {
		width: 2rem;
		fill: var(--primary-text-color);
	}

	.grid-action {
		width: 20px;
		height: 20px;
	}

	.grid-helper-rowsPerPage {
		display: none;
	}

	/* SUBGRID */
	.subgrid-header h5 {
		margin-left: 1rem;
	}

	.subgrid-header button {
		margin-right: 5px;
		font-weight: normal;
		padding: 0.5rem 0.6rem;
		font-size: 11px;
	}

		.subgrid-header button:last-child {
			margin-right: 1rem;
		}

	/* FORM */
	.form-form {
		padding: 1rem;
	}

	.form-tabs {
		border-bottom: 0;
	}

		.form-tabs li.active, .form-tabs li.ui-state-active {
			margin-bottom: 0;
		}

		.form-tabs li {
			border-bottom: 6px solid var(--menu-bg-color);
		}

	/* FORM MODAL */
	.form-modal-container {
		width: auto !important;
		height: auto !important;
	}

	/* REPORTS */
	.reports-content {
		flex-direction: column;
	}

	.report-menu-container {
		width: 100%;
	}

	.report-graphs-container {
		width: 100%;
	}
}