.uploader-drop{
	background-color:#ececec;
  border: 2px dashed #aaa;
//  padding: 12px;
  user-select: none;
  cursor: pointer;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:180px;
}
.uploader{
}
.upload-box.dragover{
  border-color: #333;
  background: rgba(0,0,0,0.03);
}
.upload-title{ font-weight: 700; }
.upload-icon span{ font-size:40px ;padding:0px; }
.upload-sub{ font-size: 12px; opacity: 0.8; }
.upload-hint{ margin-top: 0px; font-size: 12px; }

#subDrawerBody input[type="text"]{
	box-sizing:border-box;
    padding: 0px 8px;
    border: 1px solid #cccccc;
    font-size: 14px;
    background: rgba(255,255,255,1);
    line-height: 32px;
	height:32px;
    vertical-align: middle;
    display: inline-flex;
    flex: 0 0 auto;
    width: -webkit-fill-available;
    color: black;
    align-items: center;
    white-space: pre;
    text-overflow: unset;
    overflow: visible;
}

.annotation ul{
	display:flex;
	flex-direction:column;
	list-style:none;
	padding:0;
	margin:5px;	
}
.annotation li{
	display:flex;
	font-size:10px;
	color:#222;
}
.annotation li::before{
	content:"※";
	margin-right:.25em;
}
.drawer-body .input-area{
	display:flex;
	flex-direction:row;
	gap:10px;
	padding:8px 0px;
	padding-bottom:0px;
	align-items:center;
	margin-top:16px;
}
.subpage .btn{
}
.subpage .right{
	display:flex;
	justify-content:flex-end;
//	width:100%;
}


.uploader-preview{
}
.uploader.is-empty .uploader-preview { display:none; }
.uploader.is-empty .uploader-drop { display:flex; }

.uploader.has-file .uploader-drop { display:none; }
.uploader.has-file .uploader-preview {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	background-color:#cccccc;
	
}
.uploader-clear{
	position:absolute;
	top:0px;
	right:0px;
}
.uploader-clear:hover{
	background-color:transparent !important;
	color:#555555;
}

.uploader.dragover { outline: 2px dashed #333; }


.uploader-img{
	width:320px;
	height:180px;
	object-fit:contain;
}
#subDrawerPages{
	display:flex;
}
.uploader-preview.bad:before{
	content:"\ef81";
        font-family: "Material Symbols Outlined";
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:50%;
	margin-top:-25px;
	font-size:50px;
	color:red;
}
.uploader-preview.bad img{
	opacity:0.3;
}
.error-img {
    text-align: center;
    position: absolute;
    font-size: 16px;
    /* background-color: red; */
    border-radius: 4px;
    padding: 5px 20px;
    top: 20px;
    color: red;
}
}