@charset "utf-8";
.view {
display: flex;
flex-direction: row;
align-items: flex-start;
border:1px lightgray solid;
}

.view #preview {
width:480px;
height:480px;
display: flex;
justify-content: center;
align-items: center;
border-right:1px lightgray solid;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%2220%22%3E%3Ctext%20x%3D%2250%22%20y%3D%2210%22%20font-size%3D%225%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20text-anchor%3D%22middle%22%3EJPEG%E3%81%BE%E3%81%9F%E3%81%AFPNG%E3%82%92%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%3C%2Ftext%3E%3C%2Fsvg%3E");
}
.view #info {
position:relative;
width:calc(100% - 480px)
}
.view #info ul {
width:100%;
display: flex;
flex-direction: row;
flex-wrap:wrap;
text-align:right;
}
.view #info ul.high {
background-color:lightcyan;
}
.view #info ul.low {
background-color:lightgrey;
color:gray;
}
.view #info ul:hover:not(:first-of-type) {
background-color:peachpuff;
}
.view #info li {
list-style-type: none;
width:20%;
border-bottom:1px lightgray solid;
padding:1px 3px;
}
.view #info li:first-child {
width:30%;
text-align:left;
}
.view #info ul:hover:not(:first-of-type):before {
content:'';
left:-480px;
top:0;
display:block;
position:absolute;
width:480px;
height:480px;
background-color:rgba(0,0,0,0.5);
z-index:100;
}
.opt {
display: flex;
flex-direction: row;
}
.opt fieldset {
flex: auto;
border: 3px solid #1F497D;
background: #ddd;
border-radius: 3px;
padding: 8px;
}
.opt fieldset legend {
background: #1F497D;
color: #fff;
padding: 4px 8px ;
font-size: 12px;
border-radius: 3px;
box-shadow: 0 0 0 5px #ddd;
margin-left: 20px;
}