#modal
{
	display: none;
	width: 90%;
	left: 50%;
	top: 10%;
	transform: translate(-50%, 0);
	position: fixed;
	max-height: 80%;
	background-color: #ffffff;
	z-index: 9999;
}
.modal-s
{
	max-width: 400px;
}
.modal-m
{
	max-width: 600px;
}
.modal-l
{
	max-width: 800px;
}
.modal-header
{
	text-align: left;
	padding: 16px 24px;
	text-transform: none;
	margin: 0;
}
.modal-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	gap: 1rem;
}
.header-level3_modal
{
	text-align: left;
	text-transform: none;
	margin: 0;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.modal-header-x-button
{
	width: 28px;
	cursor: pointer;
}
.modal-hr
{
	border: 1px solid #e7e7e7;
	margin: 0;
}
.modal-main-part
{
    padding: 24px;
    overflow-y: auto;
    max-height: calc(80vh - 200px);
}
.modal-main-part_popup
{
	height: calc(100vh - 140px);
	max-height: none;
}
.modal-footer
{
    display: flex;
    justify-content: flex-end;
	align-items: center;
	padding: 16px 24px;
	gap: 12px;
}

.modal-follow-row
{
	display: flex;
	align-items: center;
	padding: 6px 0;
	justify-content: space-between;
}
.modal-follow-row:first-of-type
{
	padding-top: 0;
}
.modal-follow-row:last-of-type
{
	padding-bottom: 0;
}
.modal-follow-row-left-part
{
	display: flex;
    /*column-gap: 8px; Not supported in Safari. */
    align-items: center;
}
.modal-follow-row-left-part > *
{
	margin-right: 8px;
}