/* GENERAL */
#pageloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #363636; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; transition: all ease-in-out .4s; font-size: 1.5rem; }


.text-info { color: var(--bluelight) !important; }
.text-beige { color: var(--beige) !important; }
.text-darkblue { color: var(--darkblue) !important; }

#langs { position: fixed; z-index: 9; top: 1rem; left: 1rem; }
#langs.place-right { left: auto; right: 1rem; }




#configurator #rooms-menu-wrapper { display: block; position: fixed; left: -20px; top: 0; height: 99vh; width: 300px; z-index: 99; padding: 1rem 0; transform: scale(.9); }
#room-menu { background: rgba(255,255,255,.5); padding: 1rem; border-top-right-radius: 1rem; width: 100px; }
#room-menu ul { padding-left: 3rem; position: relative; }
#room-menu ul:before { content: ''; width: 2px; height: calc(100% - 20px); position: absolute; left: 23px; top: 10px; background: white; }
#room-menu ul li { margin: 2rem 0; position: relative; }
#room-menu ul li span { color: var(--darkblue); position: absolute; left: 4rem; font-weight: 500; width: 150px; display: none; font-size: 1.15rem; }
#room-menu ul li:before { content: ''; width: 15px; height: 15px; position: absolute; left: -26px; top: calc(50% - 7.5px); background: white; border-radius: 50%; }
#room-menu ul li.active:before { background: var(--red); outline: 1px var(--red) solid; outline-offset: 3px; }
#room-menu ul li.active:after { content: ''; position: absolute; right: -16px; top: 0; width: 4px; background: var(--red); height: 100%; }
#room-menu ul li.active span { display: inline-block; color: var(--red); }

#materials-menu-wrapper { display: block; position: fixed; right: 0; top: 125px; height: 99vh; width: 450px; z-index: 99; padding: 1rem 0; }

#materials-menu-wrapper .accordion-item { background: transparent; border: none; }
#materials-menu-wrapper .accordion-body { padding: 0; }

#materials-menu-wrapper .cnf-mats-header ul { width: 300px; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; float: right; clear: both; }
#materials-menu-wrapper .cnf-mats-header ul li { display: inline-block; padding: .5rem; margin: 0; }
#materials-menu-wrapper .cnf-mats-header ul li:first-child { background-color: var(--red); text-align: center; padding: 0; margin-top: 0; width: 55px; height: 48px; line-height: 1; display: flex; align-items: center; justify-content: center; }
#materials-menu-wrapper .cnf-mats-header ul li:last-child { background-color: white; color: var(--red); flex-grow: 1; }

#materials-menu-wrapper .materials-single ul li { background: rgba(255,255,255,.5); padding: .75rem 1rem; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 1rem; transform: translateX(77%); font-weight: 500; transition: transform ease-in-out 300ms; }
#materials-menu-wrapper .materials-single ul li.active { transform: translateX(0); }
#materials-menu-wrapper .materials-single figure.cnf-singlemat-img { width: 75px; height: 75px; border-radius: 1rem; box-shadow: 1px 1px 5px 0px rgba(0,0,0,.5) !important; }

.cnf-single-mat-selector a { margin-right: 1rem; }

figure#s1-fig { background-image: url('../../private/materiales/solados/solado_op1.jpg'); }
figure#s2-fig { background-image: url('../../private/materiales/solados/solado_op2.jpg'); }
figure#s3-fig { background-image: url('../../private/materiales/solados/solado_op3.jpg'); }

figure#c1-fig { background-image: url('../../private/materiales/carpinterias/C1.jpg'); }
figure#c2-fig { background-image: url('../../private/materiales/carpinterias/C2.jpg'); }

/*figure#a1-fig { background-image: url('../../private/materiales/A1.jpg'); }
figure#a2-fig { background-image: url('../../private/materiales/A2.jpg'); }

figure#b11-fig { background-image: url('../../private/materiales/B1-1.jpg'); }
figure#b21-fig { background-image: url('../../private/materiales/B2-1.jpg'); }
figure#b22-fig { background-image: url('../../private/materiales/B2-2.jpg'); }*/


#iframe-container { overflow: hidden; }




#poweredby { color: white; font-size: 75%; position: fixed; bottom: 1rem; right: 1rem; z-index: 999; }







#room-menu ul li {
    margin: 1.5rem 0;
}
#configurator #rooms-menu-wrapper {
	top: 0px;		
	width: 200px;
	overflow-x: hidden;
	direction: rtl;
	overflow-y: auto;	
}	
#materials-menu-wrapper {
  top: 75px;
  width: auto;
  height: auto;
}		
#room-menu {
	position: relative;
	left: -100px;
}	
#materials-menu-wrapper .cnf-mats-header ul {
	width: 220px;
}		
#materials-menu-wrapper .materials-single ul li {
	transform: translateX(calc(100% - 100px));	
}	

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #DE003A gray;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: gray;
}

*::-webkit-scrollbar-thumb {
  background-color: #DE003A;
  border-radius: 20px;
  border: 3px solid gray;
}

@media only screen and (max-width: 1024px){
	#materials-menu-wrapper .accordion-item.mt-5{
		margin-top: 1rem !important;
	}
}

@media only screen and (max-width: 768px){
}


@media only screen and (max-width: 576px){
	#configurator #rooms-menu-wrapper {
		width: 100px;
	}	
	#room-menu {
		left: 0px
	}		
	#materials-menu-wrapper .cnf-mats-header ul {
		width:60px;
		height:60px;
		display: unset;
	}
	#materials-menu-wrapper .cnf-mats-header ul.reset li.h2 {
		visibility: hidden;
	}
}