@import "root.css";

.disabled {
	pointer-events: none;
	/* Evita que se pueda hacer clic en el elemento */
	opacity: 0.5;
	/* Cambia la opacidad para dar la apariencia de deshabilitado */
	cursor: not-allowed;
	/* Cambia el cursor para mostrar que no se puede interactuar */
}

.new-modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 50px;
	padding-bottom: 50px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
}

.new-content {
	background-color: #fefefe;
	width: 100%;
	/* height: 85%; */
	height: 800px;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-right: 8%;
	padding-left: 8%;
	box-sizing: border-box;
	/* overflow: scroll; */
	display: none;
}

.chem-table-title {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.search-and-close {
	display: flex;
	flex-direction: row;
	/* // border:2px solid black; */
	height: 100px;
	justify-content: space-between;

	.search {
		/* // border:2px solid black; */
		width: 435px;
		height: 55px;
		display: flex;
		align-items: center;

		.icon-container {
			position: relative;

			.search-icon {
				position: absolute;
				font-size: 1.3em;
				color: rgb(37, 37, 37);
				left: 30px;
				top: -11px;
				font-weight: bolder;
			}
		}

		.custom-input {
			border: none;
			padding: 5px;
			text-align: center;
			font-family: "Sofia Pro Light";
			border: 2px solid #eaecf0;
			border-radius: 3px;
			height: 48px;
			min-width: 400px;
			font-weight: 500;
			font-size: 0.9em;
			left: 0;
		}

		.custom-input::placeholder {
			color: rgb(175, 175, 175);
			transform: translateY(-2px);
			/* Ajusta el valor para elevar o bajar el placeholder */
			transform: translateX(10px);
			/* Ajusta el valor para elevar o bajar el placeholder */

		}

		.placeholder-line {
			position: relative;
			bottom: -15px;
			left: -393px;
			height: 1.7px;
			min-width: 370px;
			background-color: rgb(158, 158, 158);
			transform-origin: bottom left;
			transition: transform 0.3s ease-in-out;
		}
	}

	.close {
		/* // border:2px solid black; */
		width: 90px;
		height: 90px;
	}

	.close:hover,
	.close:focus {

		.close-x,
		.close-text {
			color: #549b33;
		}
	}
}

.main-content {
	display: flex;
	flex-direction: row;
	height: 86%;
}

.left-menu {
	/* // border:2px solid black; */
	min-width: 250px;
	max-width: 250px;
	height: auto;

	.left-table {
		width: 100%;
		height: auto;
		border: 2px solid #eeecec;
		border-collapse: collapse;

		.left-table-tr {

			.left-table-td {
				border-bottom: 2px solid #eeecec;
			}

			.left-table-td:last-child {
				border-top: none;
			}
		}

		.left-table-tr:last-child {
			border-top: none;
		}
	}

	.left-table-chem-data-wrapper {
		display: flex;
		flex-direction: column;
		padding-left: 1em;
		cursor: pointer;
	}

	.left-table-chem-name {
		font-family: "Sofia Pro bold";
		font-weight: bolder;
		font-size: 0.9em;
		color: black;
		padding: 1em 0em 0.5em 0em;
	}

	.left-table-chem-name-selected {
		font-family: "Sofia Pro bold";
		font-weight: bolder;
		font-size: 0.9em;
		color: black;
		padding: 1.6em 0em 1.3em 0em;
	}

	.left-table-cas-number {
		font-family: "Sofia Pro light";
		font-size: 0.8em;
		/* // font-weight: bold; */
		color: #484848;
		padding-bottom: 1em;
	}

	.left-table-synonims {
		font-family: "Sofia Pro light";
		font-size: 0.8em;
		/* // font-weight: bold; */
		color: #484848;
		padding-top: 1em;
		padding-bottom: 2em;
	}

}

.right-menu {
	/* // border:2px solid black;
	// min-width:300px; */
	width: 100%;
	height: auto;

	.title {
		display: flex;
		flex-direction: column;
		/* // border:2px solid black; */
		width: 100%;
		height: 90px;
		padding-left: 35px;

		.chem-name {
			font-family: "Sofia Pro Light";
			font-weight: bold;
			font-size: 2.9em;
		}
	}

	.request-buttons {
		/* // border:2px solid black; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 520px;
		height: 70px;
		padding-top: 20px;
		padding-left: 35px;

		.green-button {
			background-color: #6abc45;
			padding: 8px 20px 8px 20px;
			color: white;
			border: none;
			font-family: "Sofia Pro light";
			font-size: 1.5em;
			cursor: pointer;
		}
	}

	.nav-buttons {
		/* // border:2px solid black; */
		width: 700px;
		height: 35px;
		padding-top: 30px;
		padding-left: 35px;
		margin-bottom: 30px;
		display: flex;
		flex-direction: row;

		.nav-button {
			font-family: "Sofia Pro bold";
			border: 2px solid #eeecec;
			border-radius: 2px;
			text-decoration: none;
			height: 33px;
			width: 200px;
			background-color: white;
			padding-left: 10px;
			padding-top: 2px;
			user-select: none;
		}

		.nav-button-selected {
			font-family: "Sofia Pro bold";
			border: 2px solid #eeecec;
			border-radius: 2px;
			text-decoration: none;
			height: 33px;
			width: 200px;
			background-color: #eeecec;
			padding-left: 10px;
			padding-top: 2px;
			user-select: none;
		}

		.documents,
		.properties {
			border-left: none;
			/* o border-left: 0; */
		}

		.documents:hover,
		.properties:hover,
		.overview:hover {
			cursor: pointer;
		}
	}

	.request-sample {
		/* // border:2px solid black; */
		height: auto;
		width: auto;
		padding: 40px 0 30px 35px;

		.sample-form {

			border: 2px solid #eeecec;
			border-radius: 2px;
			height: auto;
			width: 460px;
			display: flex;
			flex-direction: column;

			.box {
				padding: 20px;
				display: flex;
				flex-direction: column;
				height: auto;
				width: auto;
				border-bottom: 2px solid #eeecec;

				.boxes-container {
					height: auto;
					width: auto;

					/* // border: 2px solid #333; */
					.box-title {
						font-family: "Sofia Pro light";
						color: #515151;
						font-size: 1em;
						padding-left: 15px;
						position: relative;
						top: -8px;
						font-weight: bold;
					}
				}

				.custom-checkbox {
					margin: 7px 0 7px 0;
					flex-grow: 0;
					/* Ocultar los estilos por defecto del checkbox */
					appearance: none;
					-webkit-appearance: none;
					-moz-appearance: none;

					/* Definir el tamaño deseado para el checkbox */
					width: 15px;
					height: 15px;

					/* Establecer bordes cuadrados */
					border-radius: 0;

					/* Agregar bordes y estilo al checkbox */
					border: 1.8px solid #333;
					cursor: pointer;
				}

				.custom-checkbox:checked {
					background-color: #6abc45;
				}
			}

			.name-title,
			.email-title,
			.docs-title {
				font-family: "Sofia Pro light";
				font-weight: 600;
				font-size: 1.3em;
				padding-bottom: 15px;
			}

			.name-input,
			.email-input {
				border: none;
				border-bottom: 2px solid rgb(151, 151, 151);
				outline: none;
				/* Elimina el contorno al enfocar el input */
				height: 30px;
			}

			.name-input::placeholder {
				font-family: "Sofia Pro light";
				font-size: 1.3em;
				color: rgb(151, 151, 151);
				transform: translateY(-3px);
				/* Ajusta el valor para elevar o bajar el placeholder */

			}

		}

		.inquire {
			font-family: "Sofia Pro light";
			border: 2px solid #0BA14A;
			text-decoration: none;
			background-color: #0BA14A;
			color: white;
			font-size: 1.1em;
			font-weight: bold;
			width: 145px;
			height: 43px;
			justify-content: center;
			letter-spacing: 1px;
			margin-top: 30px;
			cursor: pointer;
		}
	}

	.overview-view,
	.documents-view,
	.properties-view {
		/* // border:2px solid black; */
		font-family: "Sofia Pro bold";
		width: 700px;
		height: auto;

		padding-left: 45px;
		display: flex;
		flex-direction: column;

		.divider {
			height: 1.2px;
			background-color: #dedede;
			color: #eeecec;
			border: none;
		}

		.fst-block,
		.snd-block,
		.thd-block {
			display: flex;
			flex-direction: row;
			/* // border:2px solid black; */
			width: calc(100% -100px);
			height: auto;
			margin-bottom: 0;

			.first,
			.second {
				flex: 1;
				/* // border:2px solid black; */
				height: auto;
				padding: 10px 0px 10px 0px;

				.product-name-title {
					font-family: "Sofia Pro bold";
				}

				.first-title {
					/* // border:2px solid black; */
					font-family: "Sofia Pro bold";
					font-size: 0.9em;
					font-weight: 300;
					color: #484848;
					margin-top: none;
					padding-top: 0;
				}

				.first-product-name {
					/* // border:2px solid black; */
					font-family: "Sofia Pro light";
					font-size: 0.9em;
					font-weight: 550;
					color: #484848;
					position: relative;
					top: -10px;
					padding-top: 0;
					padding-bottom: 0;
					margin-bottom: 0;
					line-height: 20px;
					/* Ajusta este valor según tus necesidades */
				}

				.description {
					/* // border:2px solid black; */
					font-family: "Sofia Pro light";
					font-size: 0.9em;
					font-weight: 550;
					color: #484848;
					position: relative;
					top: -10px;
					line-height: 26px;
					/* Ajusta este valor según tus necesidades */
				}
			}
		}

	}

	.properties-view,
	.documents-view {
		.chem-data-wrapper {
			.properties-table {
				border-collapse: collapse;
				width: 100%;
				background-color: white;

				.properties-table-tr {
					font-family: "Sofia Pro bold";
					text-align: left;
					height: 30px;
					font-size: 0.8em;
				}

				.properties-table-th-download {
					text-align: center;
				}

				.properties-table-td,
				.properties-table-td-download {
					font-family: "Sofia Pro light";
					color: #484848;
					text-align: left;
					height: 35px;
					font-size: 0.8em;
					border-top: 1px solid #e6e6e6;
					/* // border:1px solid black; */

				}

				.properties-table-td-download {
					text-align: center;
					align-items: center;

					cursor: pointer;

					.arrow-right-download {
						height: 16px;
						padding: 0px 8px 3px 8px;
						border-bottom: 2px solid #57B427;
						border-width: 2px 8px 2px 8px;
					}

					.border-line {
						height: 1px;
						width: 20px;

					}
				}
			}

		}

	}
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 50px;
	padding-bottom: 50px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding-top: 4%;
	padding-bottom: 4%;
	padding-right: 10%;
	padding-left: 10%;
	border: 1px solid #888;
	width: 100%;
	height: 80%;
}

.close-wrapper {
	padding-right: 2.5em;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.close-wrapper:hover,
.close-wrapper:focus {
	text-decoration: none;
	cursor: pointer;
}

.close:hover,
.close:focus {
	color: #549b33;
}

.close-text {
	color: #6abc45;
	font-family: "Sofia Pro Light";
	font-size: 1em;
	width: 6em;
	text-align: center;
}

.close-text:hover,
.close-text:focus {
	color: #549b33;
}

.popup-text {
	padding-top: 15px;
	padding-left: 20px;
	font-size: 1.35em;
}

.popup-main-content {
	display: flex;
	flex-direction: row;
	padding-top: 5em;
	height: inherit;

}

.popup-main-left {
	flex: 1.3;
	max-width: 250px;
	top: 0;
	/* background-color: red; */
	height: inherit;

	overflow: auto;

}


.popup-main-right {
	margin-left: 30px;
	flex: 5.8;
	/* width: 100%; */
	/* background-color: blue; */
	max-width: 1100px;
	height: inherit;
	padding-left: 15px;
	padding-right: 15px;

	display: flex;
	flex-direction: column;
}

#chem-title {
	font-family: "Sofia Pro Light";
	font-weight: bold;
	font-size: 2.9em;
}

.button-container {
	display: flex;
	justify-content: space-between;
	width: 560px;
}

.sample-request {
	font-family: "Sofia Pro Light";
	font-size: 1.5em;
	padding: 12px;
	cursor: pointer;
}

.popup-navbar {
	width: 100%;
	padding-top: 1.5em;
	padding-bottom: 1.5em;

	/* background-color: blue; */
}



.chem-data-block-title {
	font-family: "Sofia Pro Bold";
	font-size: 1.1em;
	color: black;
}

.chem-data-block {
	width: inherit;
	max-height: 36em;
	min-height: 8em;
	display: flex;
	justify-content: space-evenly;

	margin-top: 1em;
}

.chem-data-block div {
	width: 50%;

	display: flex;
	flex-direction: column;
}

.chem-data-block p {
	margin: 0;
	text-align: justify;
}

.chem-data-block p,
.chem-data-block span {
	font-family: "Sofia Pro Light";
	font-size: 1em;
	color: #757B81;
}

.close-x {
	color: #6abc45;
	font-family: "Sofia Pro Light";
	font-size: 1.9em;
	font-weight: bolder;
	text-shadow: 0px 0px 1px #6abc45;

}

@media (320px <=width < 768px) {
	.new-content {
		padding: 1% 2%;
	}

	.search-and-close {
		width: 100%;
		flex-direction: column-reverse;
		align-items: end;
		margin-bottom: 25px;
	}

	.search {
		width: 100% !important;
	}

	.search .custom-input {
		min-width: 100% !important;
		width: 100%;
		padding-left: 25px !important;
	}

	.placeholder-line {
		left: -300px !important;
		min-width: 290px !important;
	}

	.icon-container {
		left: -20px;
	}

	.left-menu {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.close {
		width: 50px !important;
		height: auto !important;
		margin-bottom: 10px;
	}

	.close-wrapper {
		padding: 0px;
		width: inherit;
	}

	.close-text {
		width: inherit;
	}

	.main-content {
		height: unset !important;
		width: 100% !important;
		flex-direction: column;
	}

	.left-menu {
		margin-bottom: 25px;
	}

	.left-table {
		display: flex !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		height: 150px !important;
	}

	.left-table-tr {
		height: 100% !important;
	}

	.left-table-td {
		height: 100% !important;
		display: block !important;
	}

	.left-table-chem-data-wrapper {
		height: 100% !important;
		padding: 2px !important;
		width: 300px !important;
		align-items: start !important;
		padding-left: 20px !important;
	}

	.left-table-synonims {
		display: none !important;
	}

	.left-menu
	.left-table
	.left-table-tr
	.left-table-td {
		border-right: 2px solid #eeecec;
		border-bottom: none;
	}

	.left-menu
	.left-table
	.left-table-tr
	.left-table-td:last-child {
		border-left: none;
	}

	.title {
		padding-left: 10px !important;
		font-size: .7em !important;
		height: auto !important;
	}

	.request-buttons {
		padding-left: 10px !important;
		padding-right: 10px !important;
		width: 300px !important;
		font-size: .5em !important;
	}

	.green-button,
	.sample-request {
		margin: auto !important;
	}

	.nav-buttons {
		padding-left: 10px !important;
		padding-right: 10px !important;
		width: 100% !important;
		margin-bottom: 50px !important;
		justify-content: center !important;
	}

	.overview-view,
	.properties-view,
	.documents-view {
		padding-left: 15px !important;
		padding-right: 15px !important;
		width: 100% !important;
	}

	.fst-block,
	.snd-block,
	.thd-block {
		flex-direction: column !important;
	}

	.request-sample {
		padding-left: 15px !important;
		padding-right: 15px !important;
		width: 100% !important;
	}
}

@media (768px <= width < 1024px) {
	.new-content {
		padding: 1% 2%;
	}

	.search-and-close {
		width: 100%;
		flex-direction: column-reverse;
		align-items: end;
		margin-bottom: 25px;
	}

	.search {
		width: 100% !important;
	}

	.search .custom-input {
		min-width: 100% !important;
		width: 100%;
		padding-left: 25px !important;
	}

	.placeholder-line {
		left: -300px !important;
		min-width: 290px !important;
	}

	.icon-container {
		left: -20px;
	}

	.left-menu {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}

	.close {
		width: 50px !important;
		height: auto !important;
		margin-bottom: 10px;
	}

	.close-wrapper {
		padding: 0px;
		width: inherit;
	}

	.close-text {
		width: inherit;
	}

	.main-content {
		height: unset !important;
		width: 100% !important;
		flex-direction: column;
	}

	.left-menu {
		margin-bottom: 25px;
	}

	.left-table {
		display: flex !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		height: 150px !important;
	}

	.left-table-tr {
		height: 100% !important;
	}

	.left-table-td {
		height: 100% !important;
		display: block !important;
	}

	.left-table-chem-data-wrapper {
		height: 100% !important;
		padding: 2px !important;
		width: 300px !important;
		align-items: start !important;
		padding-left: 20px !important;
	}

	.left-table-synonims {
		display: none !important;
	}

	.left-menu
	.left-table
	.left-table-tr
	.left-table-td {
		border-right: 2px solid #eeecec;
		border-bottom: none;
	}

	.left-menu
	.left-table
	.left-table-tr
	.left-table-td:last-child {
		border-left: none;
	}

	.request-buttons {
		padding-left: 10px !important;
		width: 560px !important;
	}

	.green-button,
	.sample-request {
		margin: auto !important;
	}
}