/* Bootstrap5 Modal Compatibility */

.img-fluid,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
	display: block;
	max-width: 100%;
	height: auto;
}

.modal-body {
	padding: 20px;
}

.modal-dialog {
	margin-left:auto !important;
	margin-right:auto !important;
}

/* モーダルの角を丸くする */
.modal-content {
	border-radius: 6px;
}

 /* モーダルを上下左右中央配置 */
.modal.show {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.modal.show .modal-dialog {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}

.modal.show.modal-fixed {
	display:block !important;
}

.fade.show {
	opacity: 1;
}

/* モーダル表示アニメーション無効 */
.modal.fade {
	transition: none !important;
}

.modal.fade .modal-dialog {
	transform: none !important;
	transition: none !important;
}

.modal.show .modal-dialog {
	transform: none !important;
}

/* 背景を白透過 */
.modal-backdrop.show {
	opacity: 0.5;
	background-color: #fff;
}

/* 分類管理 > 追加モーダルのみ背景を黒透過に設定 */
.holder-add-backdrop {
	background-color:rgba(0, 0, 0, 0.5) !important;
	color: rgb(34, 34, 34) !important;
	z-index: 1080 !important;
}
.holder-add-backdrop.show {
	opacity: 0.3 !important;
}