@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;
}

.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: 45px;
		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:6px;
			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:6px;
			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 {
// 	// color: #6abc45;
// 	// font-family: "Sofia Pro Light";
// 	// font-size: 1.9em;
// 	// font-weight: bold;
// }

.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;
}
// .green-button {
// 	background-color: #559537;
// 	color: white;
// 	border: none;
// 	font-family: "Sofia Pro Light";
// 	font-size: 1.5em;
// 	padding: 12px;
// 	cursor: pointer;
// }

.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;
}
// @import "root.css";

//  .chemical-info {
// 	display: none;
// 	position: fixed;
// 	z-index: 1;
// 	padding-top: 120px;
// 	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);
// }

// .chemical-content {
// 	background-color: #fefefe;
// 	margin: auto;
// 	padding: 20px;
// 	width: 100%;
// 	height: 65%;
// 	padding-left:14%;
// 	padding-right:14%;
// 	padding-top:3%;
// 	padding-bottom:3%;
// }
// .left-menu{
// 	position: relative;
// 	width: 270px;
// 	height: 80%;
// 	max-height: 80%;
// 	border-radius: 2px;
// 	overflow: auto;
// }


















// .search-and-close{
// 	border:2px solid black;
// }


.close-wrapper {
	top: 0;
	padding-right: 2.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: bold;
}

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

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



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



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

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

// .left-table {
// 	width: 100%;
// 	height: auto;
// 	border-collapse: collapse;
// }

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

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

// .left-table-cas-number {
// 	font-family: "Sofia Pro Light";
// 	font-size: 0.9em;
// 	font-weight: bold;
// 	color: #757B81;
// 	padding-bottom: 1em;
// 	.chem-title{
// 		font-weight: bolder;
// 	}
// }

// .popup-main-right {
// 	// width: 75%;
// 	// /* width: 100%; */
// 	// /* background-color: blue; */
// 	// height: inherit;
// 	// padding-left: 15px;
// 	// padding-right: 15px;

//     // display: flex;
//     // flex-direction: column;
// 	border:2px solid black;
// 	position:absolute;
// 	top:10px;
// 	left:0;
// }

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

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

// .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-wrapper {
//     width: auto;
// 	/* padding-top: 1.2em;
//     padding-bottom: 1.2em; * / 

//     padding-left: 1.2em;
//     padding-right: 1.2em;

//     overflow: auto;

//     /* background-color: violet; */
// }

// .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;
// }