#floor{
    position:absolute;
    left: 0px;
    right: 0px;
    height: 60px;
    padding-top: 20px;
    padding-left: min(10%, 20px);
    padding-right: min(10%, 20px);
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, #dddddd 0px, #dddddd 1px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 100%);
    text-align: center;
    color: #888888;
    font-size: 14px;
    line-height: 20px;
}
#controller{
    position: absolute;
    box-sizing: border-box;
    background: rgba(237, 240, 241, 1);
    z-index: 300;
    border: solid 1px #dadada; 
    /*box-shadow: 0px 1px 0px #cccccc;*/
}
#pathway{
    position: absolute;
}
#frame{
    position:absolute;
    border-bottom: dashed 1px #dddddd;
    z-index: 0;
    display: none;
    box-sizing: border-box;  
}
#frame span{
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: #bbbbbb;
    font-size: 12px;
}
#h_ruler{
    position:absolute;
    display: flex;
    text-align: center;
    margin-top: -34px;
    z-index: 600;
    background-image: linear-gradient(#aaaaaa, #aaaaaa), linear-gradient(#aaaaaa, #aaaaaa), linear-gradient(#aaaaaa, #aaaaaa);
    background-size: 100% 1px, 1px 9px, 1px 9px;
    background-position: bottom 4px center, bottom left 0px, bottom right 0px;
    background-repeat: no-repeat;
}
.distance{
    display: none;
    color: #aaaaaa;
    height: 20px;
    line-height: 14px;
    font-size: 14px;
    background-image: linear-gradient(#aaaaaa, #aaaaaa);
    background-size: 1px 9px;
    background-position: bottom right 0px;
    background-repeat: no-repeat;
}
#v_ruler{
    position:absolute;
    display: flex;
    text-align: center;
    margin-left: 14px;
    margin-top: -20px;
    transform: rotate(90deg);
    transform-origin: left bottom;
    z-index: 600;
    background-image: linear-gradient(#aaaaaa, #aaaaaa), linear-gradient(#aaaaaa, #aaaaaa), linear-gradient(#aaaaaa, #aaaaaa);
    background-size: 100% 1px, 1px 9px, 1px 9px;
    background-position: bottom 4px center, bottom left 0px, bottom right 0px;
    background-repeat: no-repeat;
}
.height{
    color: #aaaaaa;
    height: 20px;
    line-height: 14px;
    font-size: 14px;
}
#person{
    position:absolute;
    display: none;
    background-image: url(../img/person.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 500px;
    height: 500px;
    z-index: 600;
}
#testbody{
    position:absolute;
    display: none;
    background-color:#555555;
    z-index: 600;
}
#r_leaf, #l_leaf, #r_wall, #l_wall{
    position: absolute;
    background-color: rgba(0, 130, 194, 0.07);
    border: solid 1px #dddddd;
    box-sizing: border-box;
    box-shadow: inset 5px 5px 0px rgba(237, 240, 241, 1), inset -5px -5px 0px rgba(237, 240, 241, 1), inset 6px 6px 1px #d2d2d2, inset -6px -6px 1px #d2d2d2;
}
.wall{
    box-shadow: none !important;
    background-color: #f5f5f5 !important;
    transition: box-shadow 0.4s, background-color 0.4s;
}
.sensor{
    position:absolute;
    background-image: url(../img/sensor.svg);
    background-repeat: no-repeat;
    background-position: top center;
    opacity: 1;
    display: none;
    z-index: 600;
}
.field{
    position:absolute;
    background-repeat: no-repeat;
    background-position: top center;
    display: none;
    opacity: 0.4;
    z-index: 500;
    text-align: center;
    color: #ffffff;
}
.f0{
    background-image: url(../img/field_0.svg);
}
.f1{
    background-image: url(../img/field_1.svg);
}
.f2{
    background-image: url(../img/field_2.svg);
}
.f3{
    background-image: url(../img/field_3.svg);
}
.f4{
    background-image: url(../img/field_4.svg);
}
.f5{
    background-image: url(../img/field_5.svg);
}
.f6{
    background-image: url(../img/field_6.svg);
}
.f7{
    background-image: url(../img/field_7.svg);
}
.f8{
    background-image: url(../img/field_8.svg);
}
.f9{
    background-image: url(../img/field_9.svg);
}
.setting{
    position:absolute;
    display: none;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    margin-left: -15px;
    margin-top: -70px;
    z-index: 600;
    background-color: #0081C1;
    color: #ffffff;
    cursor: default; 
    font-size: 14px;
    overflow: hidden;
    text-align: center;
    transition: width 0.4s, margin-left 0.4s;
}
.setting::before{
	content: "IR width : ";
	display: inline-block;
	vertical-align: top;
	width: 0px;
	opacity: 0;
	white-space: pre;
	overflow: hidden;
	transition: width 0.4s, opacity 0.4s;	
}
.setting:hover, .active{
	width: 90px;
	margin-left: -45px;
}
.setting:hover::before, .active::before {
	width: 60px;
	opacity: 1;	
}