model-viewer{
	width: 100%;
	height: 100%;
overflow: hidden;
}

#model-viewer{overflow: hidden;overflow-y: hidden;position: absolute;top: 0;bottom: 0;width: 100%;height: 100%;left: 0;right: 0;}
#left-side-logo{
	position: fixed; 
	z-index: 999;
	top: 35px;
	left: 5px;
}


#color-variants{
	position:absolute;
	padding-bottom: 1px;
	padding-left: 1px;
	z-index: 99;
	box-shadow: 1px 1px 10px -3px rgb(0 0 0 / 50%);
	border-radius: 8px;
	background-color: #fff;
}

#color-variants ul > li{
	list-style-type: none;
	padding: 4px 4px;
	margin: 1px;
	display:inline-block;
	border-radius: 50%;
max-width: 40px;
		max-height: 40px;
border-width:medium;
	 
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }


#color-variants ul > li > a{
	 text-decoration: none;
	 cursor: pointer;
}

#color-variants ul > li > a img{
	 max-width: 40px;
	 max-height: 40px;
	 display: block;	
	 border-radius: 50%;
}  

#color-variants ul > li.active{
	 border: 1px solid black;
	background: #fff;
	 

}

#variant-color-name{
	border: 1px solid black;
	background: transparent;
border-color: transparent;
		position:relative;
		text-align: left;
padding-left: 45px;
padding-bottom:1px;
	margin: 0.5px;
	font-size: 25px;
font-style:normal;
text-decoration: none;	
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}

#display_qr_btn{position: fixed;top: 50px;right: 20px;z-index: 10;margin-bottom: 50px;background: #fff;/* border-color: #070a4f; */color: #000;padding: 5px 10px;border-radius: 8px;cursor: pointer;transition: all .3s;font-size: 15px;font-style:normal;text-decoration: none;font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";/* border: 1px solid #000; */box-shadow: 1px 1px 10px -3px rgb(0 0 0 / 50%);}

#display_qr_btn:hover , #hide_qr_btn:hover{
background: #000000;
		border-color: #000000;
		color: #B5B5B5;
}

#hide_qr_btn{position: fixed;top: 50px;right: 20px;z-index: 10;display: none;background: #fff;color: #000;text-align: center;padding: 5px 10px;border-radius: 8px;/* border: 1px solid #000; */cursor: pointer;transition: all .3s;font-size: 15px;font-style:normal;text-decoration: none;font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";box-shadow: 1px 1px 10px -3px rgb(0 0 0 / 50%);}

#qr-code-image{
display: none;
}

#left-side-logo{
position: fixed; 
top: 35px;
left: 5px;
}

#qr-code-image {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 60;
	background-color: #FFFFFF;
	padding: 25px 5px;
	border-radius: 8px;
	box-shadow: 1px 1px 10px -3px rgba(0,0,0,.5);
	transform: translate(-50%,-50%);
	text-align: center;
	width: 210px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#qr-code-image .qr-title {
	font-weight: 600;
	font-size: 17px;
}
#qr-code-image .dr-instruction {
	font-size: 14px;
	line-height: 15px;
	display: inline-block;
}
#model-page-wrapper{
background-color: #f0f8ff; 
position: absolute; 
z-index: 10; 
width: 90%; 
height: 100%;
		margin: auto;
}

#clickndrag{
position: absolute; 
z-index: 10; 
left: 50%; 
top: 53%; 
transform: translate(-50%, -50%); 
padding: 10px 20px; 
border: ;
}

button.ar-button2 {
	position: absolute;
	width: 41px;
	height: 41px;
	border-radius: 50%;
 
 
	line-height: 56px;
	transition: all ease 0.6s;
	text-align: center;
	text-decoration: none;
	background-image: url(https://inplaceclient.s3.ap-southeast-2.amazonaws.com/GREENS+TAPWARE+/GREENSTAPWARE/AR+BUTTON+IMAGE+/Gren+ar+button-01.jpg);
	background-size: contain;
	background-position: center;
	object-fit: contain;
	border: none;
}



#loading-spinner {
	width: 50%;
	height: 2px;
	position: absolute;
	bottom: 6px;
	overflow: hidden;
	background-color: #ddd;
	margin: 0 auto;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
}


#loading-spinner.ar-active {
	content: "";
	position: absolute;
	left: 50%;
	height: 3px;
	width: 50%;
	background-color: coral;
	-webkit-animation: lineAnim 1s linear infinite;
	-moz-animation: lineAnim 1s linear infinite;
	animation: lineAnim 1s linear infinite;
	transform: translateX(-5%);
}
@keyframes lineAnim {
	0% {
		left: 20%;
}

}

/* This keeps child nodes hidden while the element loads */
:not(:defined) > * {
		display: none;
}

model-viewer {
		overflow-x: hidden;
} 

#clickndrag {
	position: fixed;
		border-radius:10px;
	border-radius:10px;
		background-color:#FFFFFF;
	Bopacity: 0.2;
	border-width:1px;
	border-color:#000000;
	cursor:pointer;
	text-decoration: none;
	font-size: 15px;
	font-style:normal;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}

#clickndrag:active {
		background-color:#BDBDBD;
		border-width:1px; 
}

#clickndrag:focus {
		outline: none;
}

#clickndrag:focus-visible {
		outline: 1px solid #000000;
}

#ar-button {
		background-image: url(https://inplaceclient.s3.ap-southeast-2.amazonaws.com/domusliving/domuslivingclient/NEW+AR+BUTTON+/NEW+AR+BUTTON.png);
		background-repeat: no-repeat;
		background-size: 60px;
		background-position: center;
		background-color: #fff;
		position: absolute;
		transform: translateX(-50%);
		white-space: nowrap;
		padding: 0;
		font-family: Roboto Regular, Helvetica Neue, sans-serif;
		font-size: 14px;
		color:#fff;
		height: 60px;
		width: 60px;
		line-height: 36px;
		border-radius: 20%;
		border-width:thin;
		border-color:#000000;
		border: none;
		/* overflow: hidden; */
		border-width: 1px;
		box-shadow: 1px 1px 10px -3px rgb(0 0 0 / 50%);
}

@media(min-width:400px){
	#ar-button{
		width: 70px;
		height: 70px;
	}
	#loading-spinner {

    bottom: 14px;

}
}

#ar-button:active {
		background-color: #E3E3E3;
		border-width:2.5px;
}

#ar-button:focus {
		outline: none;
}

#ar-button:focus-visible {
		outline: 1px solid #2f3038;
}

@keyframes circle {
		from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
		to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
		from { transform: translateX(100px); }
		to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
		position: absolute;
		left: 50%;
		bottom: 175px;
		animation: elongate 2s infinite ease-in-out alternate;
		display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
		display: block;
} 

model-viewer > #ar-prompt > img {
		animation: circle 4s linear infinite;
}

 model-viewer::part(default-progress-bar) {
        height:4px;
	    background-color:#000000;
    }

    model-viewer::part(default-progress-bar)::before {
        background-color:#000000;
    }

.slider {
		width: 100%;
		text-align: center;
		overflow: hidden;
		position: absolute;
		bottom: 16px;
}

.slides {
	 display: flex;
	 overflow-x: auto;
	 scroll-snap-type: x mandatory;
	 scroll-behavior: smooth;
	 -webkit-overflow-scrolling: touch;
}

.slide {
		scroll-snap-align: start;
		flex-shrink: 0;
		width: 100px;
		height: 100px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #fff;
		margin-right: 10px;
		border-radius: 10px;
		border: none;
		display: flex;
}

.slide.selected {
		border: 2px solid #2f3038;
}

.slide:focus {
		outline: none;
 }

.slide:focus-visible {
		outline: 1px solid #2f3038;
}

@media screen and (max-width: 2800px) {
#left-side-logo{
	position: fixed; 
	top: 35px;
	padding-left:5px;
	
}

#color-variants{
		bottom:60px!important;
		left: 30px!important;
}

#ar-button{
	bottom: 85px!important;
		right: 60px!important;
}

#color-variants ul > li{
		width: 130px;
		height: 140px;
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
}
@media screen and (max-width: 1600px) {


#color-variants{
		bottom:60px!important;
		left: 30px!important;
}

#ar-button{
	bottom: 85px!important;
		right: 60px!important;
}

#color-variants ul > li{
		width: 130px;
		height: 140px;
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
}
@media screen and (max-width: 1750px) {


#color-variants{
		bottom:60px!important;
		left: 30px!important;
}

#ar-button{
	bottom: 85px!important;
		right: 60px!important;
}

#color-variants ul > li{
		width: 130px;
		height: 140px;
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
}
@media screen and (max-width: 1600px) {


#color-variants{
		bottom:60px!important;
		left: 30px!important;
}

#ar-button{
	bottom: 70px!important;
	right: 0px!important;
}

#color-variants ul > li{
		width: 130px;
		height: 140px;
}
#color-variants ul{
				padding-left: 6px!important;
				margin-block-start: 0.2em;
				margin-bottom: 0;
			}
}

@media screen and (max-width: 1200px) {

#clickndrag{
position: fixed; 
z-index: 99; 
left: 50%; 
top: 40%; 
transform: translate(-50%, -50%); 
padding: 10px 20px; 

}


#ar-button{
	bottom: 107px!important;
	padding-right: 1px!important;
}

#color-variants{
	position: fixed;
		bottom: 100px!important;
		left: 50px!important;
}


#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }

#color-variants ul > li{
		margin: 0px 2px;
}
}


@media screen and (max-width: 1000px) {
#clickndrag{
position: fixed; 
z-index: 99; 
left: 50%; 
top: 40%; 
transform: translate(-50%, -50%); 
padding: 10px 20px; 

}


#ar-button{
	bottom: 21px!important;
	padding-right: 1px!important;
}

#color-variants{
	position: fixed;
	bottom: 17px!important;
	left: 30px!important;
}


#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }

#color-variants ul > li{
		margin: 0px 2px;
}
}





@media screen and (max-width: 770px) {


#color-variants{
		bottom: 45px!important;
		left: 20px!important;
}

#ar-button{
	bottom: 60px!important;
		right: 20px!important;
}
		#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
#color-variants ul > li{
		margin: 0px 2px;
		width: 120px;
		height: 80px;
}
}
@media screen and (max-width: 738px) {

#color-variants{
		bottom: 30px!important;
		left: 20px!important;
}

#ar-button{
	bottom: 49px!important;
	right: 20px!important;
}
		#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
#color-variants ul > li{
		margin: 0px 2px;
		width: 120px;
		height: 80px;
}
}
@media screen and (max-width: 720px) {

#color-variants{
		bottom: 30px!important;
		left: 20px!important;
}

#ar-button{
	padding-bottom: 20px!important;
		right: 10px!important;
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }

#color-variants ul > li{
		margin: 0px 2px;
		width: 120px;
		height: 80px;
}
}
@media screen and (max-width: 686px) {


#color-variants{
		bottom: 30px!important;
		left: 20px!important;
}

#ar-button{
	padding-bottom: 20px!important;
		right: 10px!important;
}
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }

#color-variants ul > li{
		margin: 0px 2px;
		width: 120px;
		height: 80px;
}
}
@media screen and (max-width: 669px) {


#color-variants{
		bottom: 40px!important;
		left: 20px!important;
}

#ar-button{
	padding-bottom: 1px!important;
	right: 0px!important;
}
#color-variants ul{
				padding-left: 6px!important;
				margin-block-start: 0.2em;
				/* margin-bottom: 17px; */
			}

#color-variants ul > li{
		margin: 0px 2px;
		width: 120px;
		height: 80px;
}
}
@media screen and (max-width: 480px) {

		#clickndrag{
		position: fixed; 
		z-index: 99; 
		left: 50%; 
		top: 35%; 
		transform: translate(-50%, -50%); 
		padding: 10px 20px; 

	}

#ar-button{
				bottom: 28px!important;
				right: 0px!important;
		}

#color-variants{
		padding-bottom: 9px;
		padding-left: 1px;
		padding-right: 10px;
		bottom: 16px!important;
		left: 10px!important;
}

#color-variants ul > li{
		margin: 0px 2px;
		width: 60px;
		height: 60px;
		 }
#color-variants ul{
				padding-left: 6px!important;
	margin-block-start: 0.2em;
		 }
}

#variant-color-name{
			font-size: 20px;
	padding-left: 10px;
	padding-top: 0px;
	}
@media screen and (max-width: 416px) {

		 #clickndrag{
		position: fixed; 
		z-index: 99; 
		left: 50%; 
		top: 35%; 
		transform: translate(-50%, -50%); 
		padding: 10px 20px; 

	}

#ar-button{
				bottom: 1px!important;
				right: -17px!important;
		}

#color-variants{
		padding-bottom: 1px;
		padding-left: 1px;
		padding-right: 0;
		bottom: -19px!important;
		left: 10px!important;
}

#color-variants ul > li{
		margin: 0px 2px;
		width: 40px;
		height: 40px;
		 }
#color-variants ul{
				padding-left: 6px!important;
				margin-block-start: 0.2em;
				margin-bottom: 17px;
			}

#variant-color-name{
			font-size: 20px;
	padding-left: 10px;
	padding-top: 0px;
	}


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

		#clickndrag{
		position: fixed; 
		z-index: 99; 
		left: 50%; 
		top: 45%; 
		transform: translate(-50%, -50%); 
		padding: 10px 20px; 

	}

#ar-button{
				bottom: 5px!important;
				left: 286px!important;
		}

#color-variants{
		
bottom: -5px!important;
		
left: 10px!important;
}

#color-variants ul > li{
		margin: 0px 2px;
		width: 40px;
		height: 40px;
		 }
#color-variants ul{
				padding-left: 6px!important;
				margin-block-start: 0.2em;
				max-width: 232px;
				overflow-x: auto;
				white-space: nowrap;
				margin-bottom: 5px;
			}
}

#variant-color-name{
			font-size: 20px;
	padding-left: 10px;
	padding-top: 0px;
	}


#ar-button {
position: fixed;
}

#model-viewer {

position: fixed;

}