.dialog-bg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.65);
	text-align:center;
}

.dialog-frame {
	display:inline-block;
	box-sizing:border-box;
	background-color:#F0F0F0;
	position:relative;
	top:70px;
	margin:10px auto;
	padding:0;
	width:450px;
	min-height:200px;
	text-align:left;
	font-size:0.8rem;
	color:#222;
}
.dialog-frame *{
	box-sizing:border-box;
}
.dialog-frame :not(input):not(textarea) {
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}
.dialog-title{
	position:relative;
	height:2em;
	line-height:2em;
	width:100%;
	margin:0;
	background-color:#444;
	color:#eee;
	text-indent:1rem;
}
.dialog-close-button{
	position:absolute;
	top:0;right:0;
	display:inline-block;
	width:2em; height:2em;
	background-color:#808080;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9xJREFUeNrsmstPU0EUxstDQgt9UIiPjS5c+1i4NCYuXBijUVFEfCAoEUXAV4jxv3DnX2Bi4sqta3WhMQgEBAq0lLeJYEzUaNvrN/G7yeSkuY/eW2zwTvJLSztzZr45Z86d6VBlGEZoK5Tq0BYpgZBASCDkPxFSa/N9FQiDJv69Dr5v0tgiWr9fwA8vQurBYdAGouAVeAnWyixiOzgFjoFv4Dl4bTWJdkKiNNZOUUfALvAUfC6TiBbQA/r5/icjYcRKiN0ayQGDgmvATjAAujlr5RDRBQbBDvZZyzHkLFuqLYoFdeAoeAcKxt+SByvgEWixae8GZesxbRc03nMMdVbtnXQQBifBR4owyxp4CJp9EKFsPACrmv0cGGHf9XY2nHYUAWfBsOYZ9boI7nsUkwT3wILw+jD7DDux46ZDJeYMGBdi1CwOlRhmzWy7qoWSEjHGviJObbntWM1OKxgVcbzM0Ei6sNXENstaOBVou9VJOHkRYnrmHD1jaGKWXIhJcn0tC+8qm21uPOFFiCnmNGcvpw1GiRkACYu2cdZZFgvb9ES4lDF5yTQRzt6YmNV50M/QKRZOd0BWE5H34gk/hCgawHkwKVKzmu1BISZJT6wIEZNeRfghRNEILnBW88IzfRSQ5PtMkTVx0asIv4SYYtSApsWzIMsdwJAIpwLrttOroUoRYq4ZNbBPmhhV1omhPSfGWTfiV/9+CjE90wGmtLRsFPHEZdYNVaoQRRTcEPsms6jPbvotQlFdpuNzPU+Xxb4zjwT+Fp9nJgZ6mbHyRvGSpVfilRpaSsR1MCvWxop2xjDXiarTwzYVJcRcF1LEHLhFD8yK1DzHNrFKEaIG0gXS4omdAt1c2FHWSYmHZpp1ov9aiBpkpxigwdmXsx1n6M2IMFPp+KrXTOY1nExP6APLWMR/nAIz4iClbFzzIsbLZrFTe/CZ4TTrIFRiFDMjwmyKNqObJSTGDqfFwp53kYlirLsgziSpUsWUsiauUIS+7Zjj88NNBoqzTVp4JlXKFsbtprCDm8K88ERviWk0wdQ8L0J0Alwqx48PDdo2XZ+9BZ4zEh6SRhNtZIXtGYpp9EtImKfAcbEmVOa57dNWI0Fb8uA1wdNj2KuQarAfvBWzteSDJ4qJ6aNtPQG8AQc4lpKF1IDjYEPL+5kyiNATQJ+2Zgrs+wTYZtXW7lpB/Qq+BIbBIZAGT8ALsFGGI8BX8Az8AnfBHvadBQXLGykH/zCgbo72gb1gEXzg5Us5SwwcBLvBNBi1uylzIsS8EKrlHUVuE68FFXnw266yUyHBrW4gJBASCAmE+Fr+CDAAcoe9MW0cH3UAAAAASUVORK5CYII=');
	color:#222;
}

.dialog-pane{
	color:#222;
	padding:1em;
	max-height:400px;
	overflow-y:auto;
	line-height: 1.8em;
	word-break:break-word;
	margin-bottom:45px; /* is height of the '.dialog-foot' */
}
.dialog-pane input[type='text']{
	font-size:1.1em;
	margin:6px 0;
}

.dialog-foot{
	display:block;
	height:45px;
	width:100%;
	position:absolute;
	bottom:0;
}
.dialog.btn{
	display:inline-block;
	width:50%;
	height:45px;
	line-height:45px;
	text-align:center;
	cursor:default;
}
.btn.cancel{color:#ddd;background-color:#888888;}
.btn.cancel:hover{background-color:#aaaaaa;}
.btn.apply{color:#fff; background-color:#0383e3;}
.btn.apply:hover{background-color:#1199ff;}

/* page.cssから移動 2023-4-13 */
.loader-wrapper{
	position: fixed;
	top:30%; left: calc( 50% - 120px);
	display: inline-block;
	box-sizing: border-box;
	margin:0;
	width: 240px;
	height: 100px;
	text-align:center;
}
.loader-message {display:inline-block; border-radius:1em;margin:.5em;max-width:200px;overflow:hidden;text-overflow: ellipsis;}
.loader-message .text{ background-color:rgba(255,255,255,1); line-height:2;padding:0.5em; white-space:nowrap;}
.loader {
	display: inline-block;
	box-sizing: border-box;
	margin:0;
	width: 75px;
	height: 75px;
	border: 2px solid #0cf;
	border-radius: 50%;
	animation: spin 0.75s infinite linear;
	text-align:center;
}
.loader::before,
.loader::after {
	box-sizing: border-box;
	left: -2px;
	top: -2px;
	display: none;
	position: absolute;
	content: '';
	width: inherit;
	height: inherit;
	border: inherit;
	border-radius: inherit;
}
.loader-3,
.loader-3::before,
.loader-3::after {
	display: inline-block;
	border-color: transparent;
	border-top-color: #0cf;
	animation-duration: 1.5s;
}
.loader-3::before {
	transform: rotate(120deg);
}
.loader-3::after {
	transform: rotate(240deg);
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}