@charset "utf-8";
.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spinner {
    width: 120px;
    height: 120px;
    border: 12px solid #e0ffff;
    border-top: 12px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#canvas3d {
top:0;
left:0;
width: 600px;
height: 400px;
display: block;
z-index: 1;
}
.search-area {
position: absolute;
top: 140px;
right: 20px;
}
.search-icon {
position: absolute;
top: 5px;
right: 190px;
font-size: 1.4em;
}
#search_word {
width: 180px;
height: 30px;
}
.search-history-dropdown {
position: absolute;
top: 36px;
left: 0;
min-width: 180px;
max-width: 320px;
max-height: 300px;
overflow-y: auto;
display: none;
background: #fff;
border: 1px solid #c8c8c8;
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
border-radius: 6px;
padding: 6px 0;
z-index: 3000;
}
.search-history-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 12px;
cursor: pointer;
user-select: none;
color: #222;
background: transparent;
}
.search-history-item:nth-child(odd)  { background: #fafafa; }
.search-history-item:nth-child(even) { background: #ffffff; }
.search-history-item:hover { background: #eaf2fe; }
.search-history-item.active { background: #dbe9ff; }
.search-history-item .label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-history-item .remove {
color: #888;
font-weight: bold;
padding: 0 6px;
}
.search-history-item .remove:hover { color: #c00; }
#hover-info {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.8);;
border: 1px solid blue;
padding: 4px 8px;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-size: 1.5em;
color: blue;
white-space: nowrap;
pointer-events: none;
z-index: 1000;
}
.pic-button {
border: 1px solid transparent;
width:100px;
height:85px;
background-color: white;
padding: 0;
overflow: hidden;
margin: 5px;
transition: border-color 0.3s;
}
.pic-button img {
width: 100%;
height: 100%;
}
.selected-img {
border: 4px solid blue;
box-sizing: border-box;
border-radius: 4px;
}
.selected-subclass {
border: 4px solid blue;
border-radius: 4px;
background-color: orange;
}
#toolbox {
width: auto;
max-width: 100%;
display: inline-block;
}
.toolbox-bar {
display: flex;
align-items: center;
background-color: #f9f9f9;
padding: 6px;
gap: 6px;
}
.tool-btn {
width: 70px;
text-align: center;
padding: 2px 0;
border: 2px solid #bbb;
background: #f0f0f0;
border-radius: 4px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: background 0.2s;
}
.tool-btn:hover {
background: #e0e0e0;
}
.right-group {
display: flex;
gap: 8px;
margin-left: auto;
}
.tool-btns-wrapper {
display: none;
}
#detach-toggle:checked + label + .tool-btns-wrapper {
display: flex;
gap: 10px;
}
#undo_mesh_wrapper tbody {
pointer-events: auto;
}
#undo_mesh_wrapper input {
pointer-events: auto;
}
#Thumbnails {
display: none;
grid-template-columns: repeat(auto-fit, 240px);
gap: 10px;
justify-content: start;
max-width: calc(290px * 2 + 10px);
background: #fff;
padding: 10px;
box-sizing: border-box;
position: absolute;
position: absolute;
top: 180px;
right: 20px;
}
.thumbnail-wrapper { width: 240px; user-select: none; }
.thumbnail-image {
width: 100%;
height: 339px;
object-fit: contain;
border: 1px solid #ccc;
}
#pagelist {
scroll-padding-top: 50px;
}
.edge-toggle-btn i {
color: #8e8e93;
transition: color 0.3s ease;
}
.edge-toggle-btn.active i {
color: #30b158;
}
.this-transparency  i {
color: #8e8e93;
transition: color 0.3s ease;
}
.this-transparency  i {
color: #30b158;
}
#GaugeDrop tbody tr:nth-child(odd) {
background-color: rgb(208,216,232);
color: black;
}
#GaugeDrop tbody tr:nth-child(even) {
background-color: rgb(233,237,244);
color: black;
}
.selected-row {
background-color: rgb(79,129,189) !important;
color: white !important;
}
#GaugeDrop tbody tr:nth-child(odd) {
background-color: rgb(208,216,232) !important;
color: black !important;
}
#GaugeDrop tbody tr:nth-child(even) {
background-color: rgb(233,237,244) !important;
color: black !important;
}
#GaugeDrop {
max-height: 75vh !important;
overflow-y: auto;
}
#canvas-copyright {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
color: #2b2b2b;
font-size: 12px;
line-height: 1.2;
pointer-events: none;
background: transparent;
}
#info-modal.modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
}
#info-modal .modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
}
#info-modal .modal-dialog {
position: relative;
width: min(960px, 90vw);
height: min(680px, 85vh);
background: #fff;
border: 2px solid #000;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
z-index: 10001;
}
#info-modal .modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid #ddd;
background: #f5f7fa;
}
#info-modal .modal-header h2 {
font-size: 16px;
margin: 0;
}
#info-modal .modal-close {
cursor: pointer;
border: 1px solid #999;
background: #fff;
border-radius: 4px;
width: 28px;
height: 28px;
font-size: 18px;
line-height: 26px;
text-align: center;
}
#info-modal .modal-close:hover {
background: #eee;
}
#info-modal .modal-body {
position: relative;
flex: 1;
padding: 0;
overflow: hidden;
}
#info-modal .modal-body iframe {
width: 100%;
height: 100%;
border: 0;
}