@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

/* @media (min-width:600px) {
	.btnRa {
		display: none;
	}
} */

@font-face {
	font-family: 'GothamBold';
	src: url('/assets/Fontes/GothamBold.ttf');
}

@font-face {
	font-family: 'GothamBook';
	src: url('/assets/Fontes/GothamBook.ttf');
}

@font-face {
	font-family: 'OptimaMedium';
	src: url('/assets/Fontes/Optima-Medium.ttf');
}

@font-face {
	font-family: 'OptimaOld';
	src: url('/assets/Fontes/OPTIMA-old.TTF');
}

@font-face {
	font-family: 'Optima';
	src: url('/assets/Fontes/OPTIMA.TTF');
}


body {
	margin: 0;
}

button {
	-webkit-appearance: button;
	padding: 1px 6px !important;
}

.hidden {
	display: none !important;
}

.dot {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
	background: linear-gradient(180deg, #B64C70 0%, #5B0DAF 100%);
	--min-hotspot-opacity: 0;
	border: 0px;
}

.valor {
	border-radius: 4px;
	color: #52468F;
	display: block;
	font-family: Futura, Helvetica Neue, sans-serif;
	font-size: 0.5rem;
	font-weight: 700;
	max-width: 128px;
	max-height: 30px;
	padding: 3px;
	overflow-wrap: break-word;
	position: absolute;
	width: max-content;
	height: max-content;
	transform: translate3d(-50%, -50%, 0);
	--min-hotspot-opacity: 0;
	border: 1px solid;
	border-image: linear-gradient(to right, darkblue, darkorchid) 1;
	line-height: 1;
}

html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #E5E5E5;
	font-family: 'Inter', sans-serif;
}

.icones {
	width: 40px;
	height: 46px;
}

.text {
	position: fixed;
	color: black;
	font-size: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	left: 50%;
	top: 10px;
	text-shadow: 0 20px 10px rgba(0, 0, 0, 0.3);
	transform: translateX(-50%);
}

.label {
	position: absolute;
	width: 30%;
	height: 100vh;
	display: flex;

	align-items: flex-start;
	flex-direction: column;
	min-width: 20%;
	min-height: 100px;
	background-color: white;
	padding: 1%;

	right: 0%;
	top: 0px;


}

.cabecalho {
	width: 100%;
	padding-top: 5vh;
	margin-bottom: 5%;
	color: #52468F;

}

.cabecalho::before {
	content: "Escolha aqui um módulo a ser inserido ";
	font-size: 12px;
	line-height: 5px;
	width: 100%;
	color: #52468F;
	font-family: 'Inter', sans-serif;
	position: relative;
	bottom: 15px;
	left: 5px;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0px;
	width: 100%;
	cursor: pointer;

	background: linear-gradient(182.59deg, #FDF7F9 2.16%, #FFFFFF 2.17%, #F4F6FA 97.84%);
	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 30px;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 3%;
	padding: 1%;
	height: 40px;
	font-size: 18px !important;
	font-weight: 500;
	color: #52468F;
	font-family: 'Inter', sans-serif;
	appearance: none;
	background-image: url(assets/arrow-select.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 20px);
	padding-left: 15px;
}

select:focus {
	background-image: url(assets/arrow-select-up.svg);
}

.botaoEscolhaText {
	margin-left: 20px;
}

.botaoEscolhaTextWrapper {
	display: flex !important;
	flex-direction: row-reverse;
	justify-content: start;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #52468F;
	margin-right: 20px;
}

.botaoEscolhaTextWrapper>div>h4 {
	font-size: 18px;
	white-space: nowrap;
}

.botaoEscolhaTextWrapper>div>p {
	font-size: 15px;
	line-height: 1;
	width: 300px;
}

.botaoEscolha {
	background-color: transparent;
	border: 0px;
	width: 150px;
	height: 150px;
	cursor: pointer;

	background: linear-gradient(182.59deg, #FDF7F9 2.16%, #FFFFFF 2.17%, #F4F6FA 97.84%);
	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 30px;
	background-size: 100% !important;
}

.btnAtivo {
	border: 2px solid #bc42b8;
}

.botaoFechar {

	position: absolute;
	top: 30px;
	right: 30px;
	background-color: transparent;
	border: 0px;
	width: 30px;
	height: 30px;

	cursor: pointer;

	background: linear-gradient(182.59deg, #FDF7F9 2.16%, #FFFFFF 2.17%, #F4F6FA 97.84%);
	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 5px;
	font-size: 15px;
	color: #52468F;
}

.cadaModelo {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	min-height: 220px;
	width: 100%;
	padding: 1%;
	margin-top: 2%;
	padding-left: 3%;
	padding-right: 3%;
}

#color {
	background-color: rgb(153, 132, 94);
	width: 24px;
	height: 24px;
	border-radius: 15px;
}

#divColor {
	background: linear-gradient(182.59deg, #E83C76 2.16%, #69509B 97.84%),
		linear-gradient(0deg, #99845E, #99845E);
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	margin-left: 10px;
}

.divColorWrapper {
	width: 160px;
	height: 40px;
	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 969px;
	display: flex;
	justify-content: left;
	align-items: center;
	margin-top: 20px;
	cursor: pointer;
	margin-right: 10px;
}

.colorsWrapper {
	position: relative;
	left: -3%;
	width: 103%;
}

.divColorWrapper.active {
	border: 2px solid #bc42b8;
}

#divColorText {
	position: relative;
	left: 10px;
}

#checkboxList {
	position: absolute;
	right: 20px;
}

#labelCheckbox {
	height: 50px;
	width: 80px;
	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 60px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#labelCheckbox>img {
	height: 20px;
	width: 20px;
}

#labelCheckbox {
	cursor: pointer;
}

h1:not(.title) {
	line-height: 29px;
	font-size: 20px;
	color: #52468F;
	border-bottom: 1px solid rgba(0, 0, 0, 0.123);
	width: 100%;
	border-bottom: 2px solid #E5E5E5;
}

.button-scroll:last-child {
	margin-left: auto;
}

.scrollButtonsContainer {
	padding: 0;
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
	height: 50px;
	top: -300px;
	margin-right: 200px;
}

.cadaBotao {
	display: flex;
	width: 100%;
	flex-direction: row;
	padding: 1%;
	height: 200px;
	justify-content: flex-start;
	overflow: auto;
}

.cadaBotao::-webkit-scrollbar-track {
	background-color: #F4F4F4;
}

.cadaBotao::-webkit-scrollbar {
	height: 5px;
	width: 2px;
	background: #F4F4F4;
}

*::-webkit-scrollbar-track {
	background-color: #F4F4F4;
}

*::-webkit-scrollbar {
	height: 5px;
	width: 2px;
	background: #F4F4F4;
}

.conteudo {
	width: 100%;
	height: calc(100vh - 200px);
	overflow-x: hidden;
	overflow: auto;

}

.conteudo::-webkit-scrollbar-track {
	background-color: #F4F4F4;
}

.conteudo::-webkit-scrollbar {
	height: 5px;
	width: 2px;
	background: #F4F4F4;
}

::-webkit-scrollbar-thumb {
	background: #dad7d7;
}

.btnCompartilhar {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	border: 0px;

	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 100%;
	border: 0px;
	position: absolute;
	top: 2%;
	right: calc(30% + 20px);
	z-index: 1000;
	cursor: pointer;
	background-image: url("./assets/shared.svg");
}

.btnMedida {
	width: 50px;
	height: 50px;

	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 100%;
	border: 0px;
	position: absolute;
	top: 2%;
	right: calc(30% + 100px);
	z-index: 1000;
	cursor: pointer;
	background-image: url("./assets/medida.png");
}

.backgroundImage {
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;
	background-attachment: scroll;
	-webkit-background-size: 50%;
	-moz-background-size: 50%;
	-o-background-size: 50%;
}

.btnRemove {

	width: 20px;
	height: 20px;
	border: 0px;
	background-color: transparent;

	/* sombrinha 

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 100%;
	cursor: pointer;
	background-image: url('./assets/delete.svg');
	*/

}

.btnAdd {

	width: 18px;
	height: 18px;
	border: 0px;
	background-color: transparent;
	z-index: 99;

	/* sombrinha 

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 100%;
	cursor: pointer;
	/*background-image: url('./assets/add.svg');*/

}

.btnMedida:hover,
.btnCompartilhar:hover,
.botaoEscolha:hover,
.btnVoltar:hover,
.btnRa:hover,
#selectConjuntos:hover,
#labelCheckbox:hover,
.divColorWrapper:hover,
.compartilha button:hover,
.button-scroll:hover {
	border: 1px solid;
	background-color: rgba(255, 255, 255, 0.247);
	border-color: #B5A0CC;
	box-shadow: 0px -4px 20px rgba(124, 61, 192, 0.15), 0px 2px 15px rgba(255, 255, 255, 0.75), inset 0px 0px 10px #FFFFFF, inset 0px 0px 15px #FFFFFF, inset 0px 0px 20px rgba(82, 70, 143, 0.33), inset 3px 3px 20px rgba(181, 160, 204, 0.48);
}

.compartilha button:disabled {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 21px 10px 20px;
	gap: 13px;

	/* box-shadow: 0px -4px 20px rgba(124, 61, 192, 0.15), 0px 2px 15px rgba(255, 255, 255, 0.75), inset 0px 0px 10px #FFFFFF, inset 0px 0px 15px #FFFFFF, inset 0px 0px 20px rgba(82, 70, 143, 0.33), inset 3px 3px 20px rgba(181, 160, 204, 0.48); */
}

.btnAdd:hover {
	border: 1px solid;
	background-color: transparent;
	border-color: transparent;
	box-shadow: 0px -4px 20px rgba(124, 61, 192, 0.15), rgba(181, 160, 204, 0.48);
}

.btnVoltar {
	background-image: url("./assets/back.svg");
	top: 2%;
	left: 1%;
	z-index: 1000;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	border: 0px;
}

.btnVoltarCompartilha {
	background-image: url("./assets/back.svg");
	top: 2%;
	left: 20px;
	z-index: 1000;
	cursor: pointer;
}

.hide {
	display: none;
}

.show {
	display: flex;
}

.addMain {

	width: 30px;
	height: 30px;
	border: 0px;
	background-color: white;

	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 100%;
	cursor: pointer;
	background-image: url('./assets/add.svg');

}

#infoTamanho {
	font-weight: 600;
	color: #52468F;
	position: absolute;
	top: 100px;
	font-family: 'Inter';
	margin-left: 20px;
}

#container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	align-items: center;
	z-index: 99999;
	background: linear-gradient(0deg, #e5c314, #e5c314);
}

.title {
	font-family: 'Optima';
	font-style: normal;
	font-size: 36px;
	line-height: 40px;
	font-weight: 500;
}

h3 {
	font-family: 'Calibri';
	font-style: normal;
	font-weight: 400;
	font-size: 1.325rem !important;
	line-height: 29px;
	margin-bottom: 30px !important;
	max-width: 350px;
}

.bignumber {
	font-family: 'Calibri';
	font-style: normal;
	font-weight: 400;
	font-size: 56px !important;
	line-height: 29px;
	margin-bottom: 30px !important;
}

.btn-comecar {
	width: 150px;
	height: 40px;
	border: none;
	background: linear-gradient(180deg, #E6E6E6 0%, #FFFFFF 59.32%);
	border-radius: 400px;
	color: rgb(62 60 68);
	position: relative;
	/**font-family: 'Titillium Web';**/
	font-weight: 700;
	font-size: 16px;
}

.onboard {
	display: flex !important;
	justify-content: flex-start;
	flex-direction: row;
	height: 500px;
}

.onboard-tuto {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.onboard-tuto div {
	flex: 0 0 auto;
	width: 40%;
	padding-right: 15px;
	padding-bottom: 20px;
}

.onboard-tuto h3 {
	font-size: 60px;
	margin: 0 !important;
	line-height: 0.8;
}

.onboard-tuto img {
	width: auto;
	max-height: 200px;
	border-radius: 34px;
}

.onboard-tuto b {
	font-family: 'Calibri';
	font-weight: 500;
	font-size: 20px;
	display: flex;
	align-items: end;
	text-transform: uppercase;
	line-height: 1;
	margin-left: 5px;
}

.onboard-tuto b:nth-child(4) {
	word-wrap: unset;
}

ul {
	list-style-type: none;
	padding: 0 !important;
}

li {
	word-break: keep-all;
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
}

li p {
	margin-bottom: 0px !important;
	margin-left: 15px;
	display: flex;
	align-items: center;
	font-size: 18px;
}

.btn-comecar:hover {
	transform: scale(1.05);
}

.img-bugaboo {
	/* bottom: calc(50% + 50px); */
	width: 100px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.onboard-tuto img {
	max-height: 150px;
}

.img-simplexr {
	position: relative;
	width: 350px;
}

.img-pwd-simplexr {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 150px;
}

.baronesa {
	display: none;
}

.compartilha button {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 10px 21px 10px 20px;
	gap: 13px;
	margin: 20px 0;
	width: 100%;
	height: 50px;

	/* planta */

	background: linear-gradient(182.59deg, #FDF7F9 2.16%, #FFFFFF 2.17%, #F4F6FA 97.84%);
	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 969px;
	border: none;
	text-align: center;
	justify-content: center;
	font-weight: 600;
	background: -webkit-linear-gradient(182.59deg, #E83C76 2.16%, #69509B 97.84%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.compartilha p {
	font-size: 16px;
	width: 100%;
	color: #52468F;
	font-family: 'Inter', sans-serif;
	margin-top: 20px;
	margin-bottom: 40px;
	text-align: center;
}

.compartilha div:not(first-child) {
	margin: 2rem 0;
}

.realidadeAumentadaDiv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 21px 10px;
	gap: 21px;

	width: 100%;
	height: 240px;

	/* strok */

	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
	/* sombrinha */

	box-shadow: 0px -4px 10px #F2F1F7, 0px 8px 15px rgba(82, 70, 143, 0.15);
	border-radius: 30px;

}

.realidadeAumentadaP {
	display: flex;
	justify-content: center;
	margin-bottom: 10px !important;
}

.realidadeAumentadaDivImg {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 0px !important;
	align-items: center;

}

.img-border-rx {
	width: 90px;
	height: 90px;
	background-position: center;
	position: absolute;
	background-repeat: no-repeat;
	animation: rotation 2s infinite linear;
}

.img-rx {
	width: 60px;
	height: 35px;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
}

#logo-nesher {
	height: 80px;
	position: absolute;
	right: 50px;
	top: 50px;
}

.button-scroll {
	margin-top: 160px;
	float: left;
	height: 50px;
	width: 50px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
	box-shadow: 0px -4px 10px #f2f1f7, 0px 8px 15px rgb(82 70 143 / 15%);
	background-image: url(/assets/arrow-select.svg);
	border-radius: 100%;
	border: 0px;
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;
}

.button-scroll-right {
	transform: rotate(270deg);
}

.button-scroll-left {
	transform: rotate(90deg);
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.cor-camp {
	background-image: url(assets/cor-camp.svg);
}


@media only screen and (max-width: 600px) {
	.label {
		position: absolute;
		width: 100%;
		height: 40% !important;
		display: flex;

		align-items: flex-start;
		flex-direction: column;
		min-width: 20%;
		min-height: 100px;
		background-color: white;
		padding: 1%;
		bottom: 0px;
		top: 60%;
		overflow: scroll;
		border-radius: 15px;
	}

	.btnMedida {
		left: 15px;
		top: 80px;
	}

	.btnCompartilhar {
		left: 15px;
		top: 145px;
	}

	.btnVoltar {
		left: 15px;
		top: 15px;
	}

	#infoTamanho {
		top: 15px;
		right: 15px;
		text-align: right;
	}

	.btnRa {
		right: 15px;
		background-image: url("./assets/ra-btn.svg");
		z-index: 999 !important;
		cursor: pointer;
		width: 50px;
		height: 50px;
		border-radius: 100%;
		border: 0px;
		bottom: calc(40% + 20px);
		right: 15px;
	}

	.btnCloseMobileLabel {
		right: calc(50vw - 13px);
		background-image: url("assets/arrow-select.svg");
		z-index: 999 !important;
		cursor: pointer;
		width: 25px;
		height: 25px;
		border-radius: 100%;
		border: none;
		bottom: calc(40% - 12px);
	}

	.btnVoltarCompartilha {
		top: 10px;
	}

	.cabecalho {
		padding-top: 3vh;
		margin-bottom: 0px;
	}

	.divColorWrapper {
		margin-top: 15px;
		height: 30px;
	}

	#labelCheckbox {
		height: 30px;
	}

	.botaoEscolha {
		width: 75px;
		height: 75px;
		border-radius: 15px;
	}

	select {
		height: 30px;
		line-height: 1.11 !important;
	}

	.botaoEscolhaTextWrapper {
		margin-right: 0px;
	}

	.cadaBotao {
		height: auto;
		flex-wrap: wrap;
		justify-content: flex-start;
		flex-direction: row;
	}

	.divTitulos {
		margin-top: 10px;
		display: flex;
	}

	.divTitulos>h1 {
		text-align: center;
	}

	.conteudo {
		height: auto;
	}

	/* .conteudo :nth-child(3):not(h1), */
	/* .conteudo :nth-child(5),
	.conteudo :nth-child(6) {
		display: none;
	} */

	.divTexto {
		flex: 0 0 auto;
		width: 25%;
	}

	.cadaModelo {
		margin-top: 0px;
	}

	.divTitulos>h1 {
		border-bottom: 1px solid #E5E5E5;
		font-size: 12px;
	}

	.divTitulos .active {
		color: #E83C76;
		border-bottom: 1px solid #E83C76;
	}

	.botaoEscolhaTextWrapper {
		justify-content: center;
	}

	#divColor {
		width: 25px;
		height: 25px;
	}

	#color {
		width: 20px;
		height: 20px;
	}

	.title {
		font-size: 40px;
		line-height: 40px;
		margin-bottom: 20px;
	}

	.cabecalho::before {
		content: "";
	}

	.cabecalho {
		padding-top: 1vh;
	}

	.inicio {
		text-align: left;
	}

	#container {
		padding: 25px;
		padding-top: 0px;
	}

	.onboard {
		display: none !important;
		position: absolute;
		background: #313131E5;
		height: 100vh;
		width: 100vw;
		display: flex;
		z-index: 99999;
		top: 0;
	}

	.onboard b {
		color: white;
		font-weight: 700;
		font-size: 12px;
	}

	.onboard h3 {
		color: white;
	}

	#interrogacao {
		display: block !important;
		position: absolute;
		right: 20px;
		top: 20px
	}

	h3,
	ul {
		margin-bottom: 20px !important;
	}

	li {
		margin-bottom: 10px;
	}

	.onboard-tuto {
		position: absolute;
		top: calc(50% - 250px);
		height: 100px;
		left: 0;
	}

	#close {
		position: absolute;
		top: 20px;
		right: 20px;
		color: white;
		font-size: 30px;
		font-weight: 800;
	}

	#logo-nesher {
		display: none !important;
	}

	.onboard-tuto img {
		max-height: 150px;
		border-radius: 34px;

	}

	.onboard-tuto div {
		margin: auto;
		margin-top: 0;
		padding: 0;
		padding-top: 20px;
	}
}