@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,500,700');  
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" );

#backgroundImage
{
	position: absolute;
	left: 0%;
	top:0%;
	width: 100%;
	height: 100%;
	background: no-repeat 100% 100% url("https://images.pexels.com/photos/7722834/pexels-photo-7722834.jpeg");
	z-index: -2;
}

#frozenGlassPanel
{
	position: absolute;
	left: 50%;
	top:50%;
	width: 90%;
	height: 90%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	z-index: -1;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	align-items: center;
}
			

#threeContainer
{
	position: absolute;
	width: 100%;
	height: 100%;
}

#labelContainer
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

#casterToggleContainer
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	display: none;
}

#main_title
{
	position: absolute;
	left: 9%;
	top:18%;
	font-size: 30px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:lighter;
	transform: translateX(0%);
	pointer-events: none;
}

#sub_title
{
	position: absolute;
	left: 9%;
	top:23%;
	width: 20%;
	text-align: left;
  	font-family: "Roboto", sans-serif;
  	font-weight: 300;
  	font-size: 12px;
	line-height:150%;
  	color: rgba(0, 0, 0, 0.75);
	pointer-events: none;
}

.mainBottom_panel
{
	position: absolute;
	right: 9%;
	top:18%;
    width: 24%;
    height: 4%;
    display: flex;
    justify-content:center; 
    z-index: 9;
}

.main_btn
{
    position: relative;
    width: 20%;
    height: 100%;
	background-color: rgba(255, 255, 255, 0);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1%;
	margin-right: 1%;
	border-radius: 15% / 50%;
	pointer-events: auto;
}

.btn_text
{
	position: absolute;
    right: 0px;
    left: 0px;
	text-align: center;
	font-family: "Roboto", sans-serif;
    font-size: 12px;
	font-weight: 300;
    color: rgba(0, 0, 0, 0.9);
	display: block;
}

			

i{
	color: rgba(255, 255, 255, 0);
	display: none;
}

j
{
	align-self: center;
	color: rgba(10, 151, 207,0.5);
}

k
{
	padding-right: 3%;
	color: rgba(255, 255, 255, 1);
}


#grid_table 
{
	position: absolute;	
	top:36%;
	left: 9%;
 	display: grid;
 	grid-template-columns: 0.1fr 1fr 2fr;
 	gap: 0px;
 	width: 21%;
 	background-color: rgba(255, 255, 255, 0);
}

.cell {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 6px;
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height:150%;
  color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.label 
{
	position: absolute;
	width: 30px;
	height: 30px;
	color: #000000;
	font-family: sans-serif;
	padding: 2px;
	background: rgba(255, 255, 255, 0.45);
	border-radius: 50% / 50%;
	border-style: solid;
	border-width: 1px;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	pointer-events: auto;
	opacity: 1;
	user-select: none;
}

.accessory_tag
{
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #6bb4f7;
	user-select: none;
}
			.alignCenter
			{
				display: flex;
				justify-content: center;
				flex-direction: column;
			}
			
#hud_btn_panel
{
	position: absolute;
	right: 31%;
	top:21%;
	width: 30px;
}

.hud_btn
{
	position: relative;
	width: 30px;
	height: 30px;
	color: rgba(0, 0, 0, 0.45);
	margin-bottom: 18px;
	text-align: center;
}

#default_camera_btn
{
	position: absolute;
	top: 15%;
	left: 30%;
}

#show_spec_btn
{
	position: absolute;
	top: 15%;
	right: 30%;	
	display: none;
}

#hide_spec_btn
{
	position: absolute;
	top: 15%;
	right: 30%;	
	display: none;
	z-index: 10;
}

#download_btn
{
	display: block;
}

#item_container
{
	position: absolute;	
	top:24%;
	right: 7.5%;
	width: 24%;
	height: 60%;
	gap: 48px 18px;
 	display: flex;
	flex-wrap:  wrap;
	align-content:flex-start;
	overflow-y: auto;
	pointer-events: fill;
	user-select: none;
}

			.item
			{
				position: relative;
				width: 20%;
				aspect-ratio: 1 / 1;
				border-radius: 6% 6%;
				background-color: rgba(0, 0, 0, 0.1);
				background-image: url('./images/NoImage_001_white.png');
				background-size: auto 100%; 
				background-position: center;
				display: flex;
				justify-content: center;
				overflow: visible;

				border-style: solid;
				border-width: 1.5px;
				border-color: rgba(255, 255, 255, 1);
			}

			.item_title
			{
				position: absolute;
				top:105%;
				font-family: "Roboto", sans-serif;
				font-size: 10px;
				font-weight: 500;
				color: rgba(90, 90, 90, 1);
				text-align: center;
			}

			#SelectedItemController
			{
				position: absolute;
				width: 18%;
				aspect-ratio: 1 / 1;
				cursor: move;
				display: block;
				z-index: 9;
				pointer-events: fill;
				/*transform: translate(-50%,-50%);*/
			}

#SelectedItemWindow
{
	position: relative;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50% / 50%;	
	transform: translate(-50%,-50%);
	border-bottom: solid 2px #6bb4f7;
	border-top:solid 2px #6bb4f7;
	touch-action: none;
}

.window_border
{
	border-style: groove;
	border-width: 2px;
	border-color: rgba(10, 151, 207,0.5)
}

.ControllerBtn
{
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 25%;
	height: 25%;
	transform: translate(-50%,-50%);
    border-radius: 50%;
}

.ControllerBtn:nth-child(1)
{
	top: 50%;
	left: 5%;
}

.ControllerBtn:nth-child(2)
{
	top: 50%;
	right: -15%;
}

.ControllerBtn:nth-child(3)
{
	top: 5%;
	left: 50%;
}

.ControllerBtn:nth-child(4)
{
	bottom: -15%;
	left: 50%;
}

/*確認鍵*/
.ControllerBtn:nth-child(5)
{
	width: 15%;
	height: 15%;
	top: 4%;
	right: -8%;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/*刪除健*/
.ControllerBtn:nth-child(6)
{
	width: 15%;
	height: 15%;
	bottom: -10%;
	right: -8%;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#loading_canvas{
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100vw;
	height: 100vh;
	display: none;
	justify-content: center;
	flex-direction: column;
	pointer-events: fill;
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(1.5px);
	-webkit-backdrop-filter: blur(1.5px);
	z-index: 99;
}

.loadingUI{
	align-self: center;
	width: 180px;
	height:180px;
	background-image: url(./images/portfolio_2023_loading.png);
}

#caster_toggle_label_1
{
	display: none;
}

#caster_toggle_label_2
{
	display: none;
}

#caster_toggle_label_3
{
	display: none;
}

#caster_toggle_label_4
{
	display: none;
}

#caster_toggle_label_5
{
	display: none;
}

#caster_toggle_label_6
{
	display: none;
}

/* Toggle */
.switch {
  position:absolute;
  display: inline-block;
  width: 48px;
  height: 25px;
  scale: 1;
  pointer-events: fill;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: -1px;
  bottom: 1.5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #6bb4f7;
}

input:focus + .slider {
  box-shadow: 0 0 1px #6bb4f7;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle_title
{
  position: absolute;
  left: -60px;
  top: 8.5px;
  font-size: 18px;
  text-align: center;
  color: #6bb4f7;
	font-family: "Roboto", sans-serif;
}

.logo
{
	position:fixed;
	top:3%;
	left: 3%;
	height: 30px;
	aspect-ratio: 80/13.75;
	background-image: url(./images/fimawork_logo_C_white.png);
	background-size: 100% 100%;
	opacity: 1;
	z-index: 9;
	cursor: pointer;
}

h3
{
	margin-top: 30px;
	margin-right: -3px;
	font-family:"Inter", sans-serif;
    font-size: 15px;
    color: #ffffff;
	font-weight: 300;
	text-align: right;
	letter-spacing: 9px;
}

.logo:hover
{
	opacity: 0.5;
}

@keyframes UI_rotate
{
	0% {transform: rotate(0);}
	8.33% {transform: rotate(30deg);}
	16.66% {transform: rotate(60deg);}
	24.99% {transform: rotate(90deg);}
	33.32%	{transform: rotate(120deg);}
	41.65%	{transform: rotate(150deg);}
	49.98%	{transform: rotate(180deg);}
	58.31%	{transform: rotate(210deg);}
	66.64%	{transform: rotate(240deg);}
	74.97%	{transform: rotate(270deg);}
	83.3%	{transform: rotate(300deg);}
	91.63%	{transform: rotate(330deg);}
	100% {transform: rotate(360deg);}
}

.rotate_anim{
	animation: UI_rotate;
	animation-duration: 1.5s;
	animation-timing-function: step-end;
	animation-iteration-count: infinite;
}

						
@keyframes blinking_animation 
{
	0% {border-color: rgba(10, 151, 207,0.75);}
	20% {border-color: rgba(10, 207, 174, 0.75);}
	40%{border-color: rgba(107, 231, 134, 0.75);}
	60% {border-color: #aedf2677;}
	80% {border-color: rgba(10, 207, 92, 0.75);}
	100%{border-color: rgba(10, 151, 207,0.75);}
}

.window_blinking_anim
{
	animation: blinking_animation; 
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function:ease-in-out;
}


			@keyframes fadeIn_animation 
			{
				0% {opacity: 0;}
				100%{opacity: 1;}
			}

			.label_fadeIn_anim
			{
				animation: fadeIn_animation;
				animation-duration: 0.5s;
				animation-delay: 0.2s;
				animation-iteration-count:1;
				animation-fill-mode:both;
				animation-timing-function:linear;
			}

			#system_info
			{
				padding: 0.6% 1.2% 0.6% 1.2%;
				text-align: center;
				font-family: "Roboto", sans-serif;
			  	font-weight: 300;
              	font-size: 15px;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(255, 0, 0, 0.3);
				backdrop-filter: blur(1.5px);
    			-webkit-backdrop-filter: blur(1.5px);
				border-radius: 6px 6px;
				z-index: 99;
				display: none;
			}

			@media (hover: hover) 
			{
			  	.main_btn:hover
				{
					background-color: rgba(255, 255, 255, 0.5);
				}

				.label:hover
				{
					background-color: rgba(0, 0, 0, 0.05);
				}

				.accessory_tag:hover
				{
					opacity: 0.5;
				}

				.hud_btn:hover
				{
					color: rgba(0, 0, 0, 0.15);
				}

				.item:hover
				{
					border-color: #6bb4f7;
				}

				.ControllerBtn:hover
				{
					opacity: 0.6;
				}

			}

			@media screen and (max-width:1400px)/*平板(橫向)*/
			{
				#main_title
				{
					left: 50%;
					top: 9%;
					font-size: 24px;
					transform: translateX(-50%);
				}

				#sub_title
				{
					position: absolute;
					left: 6%;
					top:19%;
					width: 25%;
					text-align: left;
				}

				#grid_table 
				{
					position: absolute;	
					top:36%;
					left: 6%;
    			 	width: 25%;
    			}

				.cell 
				{
				  font-size: 12px;
    			}

				#hud_btn_panel
				{
					position: absolute;
					left: 68%;
					top:18%;
					width: 33px;
				}

				.hud_btn
				{
					margin-top: 18px;
					margin-bottom: 18px;
				}

				.btn_text
				{
            	    font-size: 10px;
				}

				#item_container
				{
					right: 6%;
					width: 24%;
				}

				.item
				{
					width: 18%;
					aspect-ratio: 1 / 1;
					border-radius: 6% 6%;
					background-color: rgba(0, 0, 0, 0.05);
				}

				#SelectedItemController
				{
					top: 10%;/*誤差修正*/
					width: 24%;
				}

				.ControllerBtn:active
				{
					opacity: 0.1;
				}

			/*	#download_btn
				{
					display: none;
				}*/
			}

			@media screen and (max-width:900px)/*平板(直向)*/
			{
				#threeContainer
				{
					height: 80%;
					padding-bottom: 20%;
				}

				.mainBottom_panel
				{
					display: none;
            	}

				#hud_btn_panel
				{
					position: absolute;
					left: 6%;
					top:15%;
					width: 30px;
				}

				#main_title
				{
					top: 7.5%;
				}

				#sub_title
				{
					position: absolute;
					left: 50%;
					top:10.5%;
					width: 70%;
					text-align: center;
					transform: translate(-50%);
				}

				#grid_table 
				{
					position: absolute;	
					top:78%;
					left: 6%;
    			 	width: 88%;
    			}

				.cell 
				{
				  font-size: 12px;
    			}

				#item_container
				{
					right: 6%;
					width: 12%;
					top:16%;
				}

				.item
				{
					width: 100%;
					aspect-ratio: 1 / 1;
					border-radius: 6% 6%;
					background-color: rgba(0, 0, 0, 0.05);
				}

				#SelectedItemController
				{
					width: 24%;
				}

				.ControllerBtn:active
				{
					opacity: 0.6;
				}

			/*	#download_btn
				{
					display: none;
				}*/

				.logo
				{
					top:3%;
					left: 6%;
					height: 24px;
					display: none;
				}
			
				h3
				{
					margin-top: 24px;
					margin-right: -2px;
				    font-size: 15px;
					text-align: right;
					letter-spacing: 4.2px;
					display: none;
				}
			}

@media screen and (max-width:768px)/*手機*/
{
/*	body
	{
		overflow-x: hidden;
		overflow-y: scroll;
	}
				
	#backgroundImage
	{
		height: 150%;
		opacity: 1;
		background-size: auto 100%;
	}*/

	#frozenGlassPanel
	{
		
		height: 94%;
		transform: translate(-50%, -50%);
	}

	#threeContainer
	{
		height: 87%;
		padding-bottom: 27%;
	}
				
				
	#main_title
	{
		left: 50%;
		top: 6%;
		font-size: 15px;
		transform: translateX(-50%);
	}

	#sub_title
	{
		top:140%;
		width: 75%;
		display: none;
	}

	.mainBottom_panel
	{
		width: 100%;
		left: 50%;
		top:80%;
		transform: translate(-50%,-50%);
		display: none;
    }

	.main_btn
	{
		width: 45px;
		height: 45px;
		margin-left: 1.2%;
		margin-right: 1.2%;
		border-radius: 50% / 50%;
    }
				

	.main_btn:active
	{
		background-color: rgba(255, 255, 255, 0.5);
	}

	.hud_btn:active
	{
		color: rgba(0, 0, 0, 0.3);
	}

	.label:active
	{
		background-color: rgba(0, 0, 0, 0.05);
	}

	.btn_text
	{
		display: none;
	}

	i{
		color: rgba(0, 0, 0, 0.6);
		display: block;
	}

	#grid_table 
	{
		position:absolute;
		top: 50%;
		left: 50%;
     	width: 90%;
		height: 96%;
		background-color: rgba(255, 255, 255,0);
		transform: translate(-50%,-50%);
		z-index: 9;
		display: none;
    }

	.cell 
	{
      background-color: rgb(215, 215, 215);
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  font-size: 15px;
    }

	#hud_btn_panel
	{
		left:88%;
		top:30%;
	}

	.hud_btn
	{
		margin-top: 18px;
		margin-bottom: 18px;
	}

/*	#download_btn
	{
		display: none;
	}*/

	#item_container
	{
		position: absolute;	
		top:86%;
		left: 50%;
		width: 80%;
		height: 15%;
		transform: translate(-50%,-50%);
		overflow-x:auto;
		overflow-y:hidden;
		flex-direction: column;/*必須使用才會有scrollbar出現*/
	}

	.item
	{
		width: 24%;
		aspect-ratio: 1 / 1;
		border-radius: 25% 25%;
		background-color: rgba(0, 0, 0, 0.05);
		overflow: visible;
	}

	.item_title
	{
		position: absolute;
		top: 105%;
		font-size: 10px;
		color: rgba(0, 0, 0, 0.75);
	}

	.item_image
	{
		display: none;
	}

	.accessory_tag
	{
		top: -5%;/*誤差修正*/
	}

	#SelectedItemController
	{
		top: 5%;/*誤差修正*/
		width: 50%;
	}

	.ControllerBtn:active
	{
		opacity: 0.6;
	}

	#default_camera_btn
	{
		top: 10%;
		left: 5%;
	}

	#show_spec_btn
	{
		top: 10%;
		left: 5%;	
		display: block;
	}

	#hide_spec_btn
	{
		position: absolute;
		top: 0%;
		right: 6%;	
		display: none;
		border: solid 1px rgba(255, 255, 255, 1);
	}
}