:root {
	--component-popup-header-height: 41px;
	--component-popup-footer-height: 41px;
}

.componentPopup {width: 800px; border: 1px solid #5d646d; background-color: white;}
.componentPopup > .header {
	display: flex; align-items: center; box-sizing: border-box;
	height: var(--component-popup-header-height); border-bottom: 1px solid #5d646d; background-color: #eee;
}
.componentPopup > .header .title {margin: 0; padding-right: 1rem; font-size: 1rem;}
.componentPopup > .header .close {
	width: 40px; height: 40px; margin-right: auto; cursor: pointer;
	text-align: center; line-height: 40px; font-size: 20px; color: #777;
}
.componentPopup > .header .close:hover {color: #000;}

.componentPopup > .body {min-height: 400px; overflow-y: auto;}
.componentPopup > .body {max-height: calc(100vh - 2px);}
.componentPopup.hasHeader > .body {max-height: calc(100vh - var(--component-popup-header-height) - 2px);}
.componentPopup.hasFooter > .body {max-height: calc(100vh - var(--component-popup-footer-height) - 2px);}
.componentPopup.hasHeader.hasFooter > .body {
	max-height: calc(100vh - var(--component-popup-header-height) - var(--component-popup-footer-height) - 2px);
}

.componentPopup > .footer {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 1rem;
	height: var(--component-popup-footer-height); border-top: 1px solid #5d646d; background-color: #eee;
}