@charset "utf-8";
/* CSS Document */
body{
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 80;
}

  input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(79,79,79,1.00);


  }

  input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(71,71,71,1.00);

  }
  
  input[type="range"]::-ms-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(116,116,116,1.00);

  }

  input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #2F2F2F;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  position: relative;
  bottom: 8px;
  background: #FFFFFF;
  background-size: 50%;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  cursor: grab;
  }
	input[type="range"]::-webkit-slider-thumb:active {
	cursor: grabbing;
	}



  input[type="range"]::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #323232;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #E7E7E7;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
     }
    input[type="range"]::-moz-range-thumb:active {
      cursor: grabbing;
    }
 

  input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #262626;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #D8D8D8;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
    }  
    input[type="range"]::-ms-thumb:active {
      cursor: grabbing;
    }

.accordion-button {
	font-size: 0.9rem;
	font-weight: 500;
	vertical-align: bottom
}

.accordion{
    --bs-accordion-border-color: white;
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: 0px;
    --bs-accordion-btn-padding-x: 0.5rem;
    --bs-accordion-btn-padding-y: 0.5rem;
    --bs-accordion-btn-bg: rgb(230,230,230);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20PD.%20Made%20by%20Mary%20Akveo%3A%20https%3A%2F%2Fmaryakveo.com%2F%20--%3E%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22plus%22%20data-name%3D%22Line%20Color%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20line-color%22%3E%3Cpath%20id%3D%22primary%22%20d%3D%22M5%2C12H19M12%2C5V19%22%20style%3D%22fill%3A%20none%3B%20stroke%3A%20rgb(0%2C%200%2C%200)%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202%3B%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    --bs-accordion-btn-icon-width: 1rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20PD.%20Made%20by%20Mary%20Akveo%3A%20https%3A%2F%2Fmaryakveo.com%2F%20--%3E%3Csvg%20fill%3D%22%23000000%22%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%2024%2024%22%20id%3D%22minus%22%20data-name%3D%22Flat%20Color%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20flat-color%22%3E%3Cpath%20id%3D%22primary%22%20d%3D%22M19%2C13H5a1%2C1%2C0%2C0%2C1%2C0-2H19a1%2C1%2C0%2C0%2C1%2C0%2C2Z%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%3B%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    --bs-accordion-body-padding-x: 0.5rem;
    --bs-accordion-body-padding-y: 0.5rem;
    --bs-accordion-active-bg: rgb(230,230,230);
	z-index: 80;
	position: relative
}
.typeLabel{
	font-size: 0.7rem;
	text-transform: uppercase;
}
.sign {
	font-size: 2rem;
	vertical-align: -8px;
		padding: 0 10px
}
#config > div:first-of-type {
	background-color: black;
	color: white;
	border-radius: 0px 0px 0 0;
	z-index: 140;
	-webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.39);
	box-shadow: 0 5px 10px 0px rgba(0,0,0,0.39);
	position: relative;
}
#config h4{
	font-size : 1rem;
	padding: 15px;
	margin: 0px;
}
#config {
	border-radius: 0px;
	border: rgba(181,181,181,1.00) solid thin;
	-webkit-box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
	box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
}
 .form-check .form-check-input:checked {
            background-color: black;
            border-color: black;
        }
.form-check-input:focus  {
	 box-shadow: none;
	border-color: #9E9E9E;
}
.form-switch .form-check-input{
	background-image : url(../images/switch.svg)
}
#tittleInfo {
	position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
    text-transform: uppercase;
    text-decoration: underline;
}

#sliderContainer{
	position: absolute;
	bottom: 55px;
	right: 30px;
	width: 300px;
	text-align: center;
	padding: 5px;
	background-color: rgba(255,255,255,0.70);
	border-radius: 4px;
	border: rgba(181,181,181,1.00) solid thin;
	-webkit-box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
	box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
}
.slider {
	width: 60%;
}
#sliderContainer > p {
	font-size: 0.8rem
}
#typeTailles{
	padding: 0 0 0 20px;
}
#error {
	width: 100%;
	max-width: 400px;
	text-align: center;
	background-color: #ffffffdd;
	border-radius: 16px;
	padding: 16px;
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translate3d(-50%, -50%, 0);
	transition: visibility 2s, opacity 1s 1s;
	opacity:0.8;
  }
  #error.hide {
    opacity: 0;
    visibility: hidden;
  }
#AR_popup{
	z-index: 2000;
	position: absolute;
	top:0px;
	width: 100%;
	height: 100vh;
	background-color: rgba(195,195,195,0.2);
	text-align: center;
	backdrop-filter: blur(10px);

}
.dispOn, .affOn, .btOn{
	display: inline-block
}
.dispOff, .affOff, .btOff{
	display: none !important
}
#AR_popup > div{
	display: inline-block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	max-width: 500px;
}

#ARbtn{
	z-index: 120;
	position: absolute;
	bottom : 20px;
	left: 20px;
	padding: 5px 5px ;
	text-transform: uppercase;
	cursor: pointer;
	color: gray;
	font-size: 14px;
}
.ARbtn_img{
    content: url("../../clients/nicolazi/RA_ico.svg");
    width: 40px;
    display: inline-block;
    margin: 0 10px;
}
#ARbtn> div{
	display: inline-block;
}
#ARbtn:hover{
	color: Black
}
.activeT , .modelPict:hover {
	border: solid black 2px !important;
}

.activeM {
	font-weight: 500;
	font-size: 1rem;
	text-decoration: underline
}

#model-variant > div > p {
	background-color: black;
	width: 100%;
	height: 100%;
    text-align: center;
	text-transform: uppercase;
    border-radius: 50%;
	cursor: pointer;
	color: white;
}
#model-variant > li {

}
li > p {
	text-align: center
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
#scroller{
	position: absolute;
	right : 0px;
	top: 0px;
	width : 40px;
	height: 80%;
	z-index: 200;
			}

.model-menu, .model-menu-mob{
	background-color: white;
	width: 300px;
	position: absolute;
	z-index: 500;
    bottom: 150px;
    left: CALC(100% - 330px);
		
}

.modelPict {
    border: solid 1px gray;
    cursor: pointer;
    width: 25px;
    height: 25px;
    padding: 2px;
    margin: 2px;
}

.modelPict img {
}
.model-menu-mf {
	display: flex;
	width: 100%;
}

.model-menu-shape {
	display: flex;
	margin: 20px 20px 0;
	padding: 15px;
	background-color: rgba(255,255,255,0.3);
	flex-direction: column;
}

hr {
	border-color: #646464;
	width: 100%;
}
model-viewer {
		width:  100%;
        min-height: 99vh;
		z-index: 100;
		position: relative;
/*	background-color: slategrey;*/
      }

 @media only screen and (max-width: 576px) {
		.model-menu, .model-menu-mob{
		  bottom : 0px;
		  left: 50%;
		  transform: translateX(-50%);
		  width: 100%;
		  padding: 0;
		  position: absolute;
		   }

		 model-viewer {
			 top:0px;
			width: 100%;
			min-height: CALC(100vh - 110px);
			  }
		.model-menu-shape {

				margin: 0px;
				padding: 0px;
		}
		.modelPict {
				  width: 23px;
				  height: 23px;
		}
		 .ARbtn_img{
				content: url("../../clients/nicolazi/RA_ico.svg");
				width: 30px;
				display: inline-block;
				margin: 0 10px;
			}
		#ARbtn{
			z-index: 120;
			bottom : 80px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 0.7rem;
		}
	 	#tittleInfo {
		position: absolute;
		top: 330px;
		width: 100%;
		text-align: center;
		}
		#sliderContainer{
			position: absolute;
			bottom: 80px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 60%;
			text-align: center;
			padding: 2px;
			background-color: rgba(255,255,255,0.70);
			border-radius: 4px;
			border: rgba(181,181,181,1.00) solid thin;
			-webkit-box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
			box-shadow: 0 0px 10px 5px rgba(0,0,0,0.18);
		}
		.slider {
			width: 50%;
		}
	 .sign {
		 font-size: 1rem;
		 vertical-align: -4px		 
	 }

	 
}