.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 300;
	background: rgba(0, 0, 0, 0.40);
	backdrop-filter: blur(3px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: all 0.15s linear;
	overflow-x: hidden;
}

.modal--show {
	opacity: 1;
	visibility: visible;
}

.modal--show .modal__dialog {
	transform: none;
}

.modal__dialog {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	margin: auto;
	padding: 10px;
	transform: translate(0, -20px);
	transition: transform .3s ease-out;
}

.modal__dialog--500 {
	max-width: 520px;
}

.modal__dialog--600 {
	max-width: 620px;
}

.modal__dialog--375 {
	max-width: 395px;
}
.modal__dialog--350 {
	max-width: 350px;
}

.modal__dialog--750 {
	max-width: 770px;
}

.modal__dialog--420 {
	max-width: 440px;
}

.modal__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	border-radius: 32px;
	transition: all 0.3s ease-out;
	position: relative;
	--guttes-x: 20px;
}

.modal-right-full .modal__dialog {
	margin: 0;
	margin-left: auto;
	align-items: stretch;
}

.modal__body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.modal-right-full-style .modal__content {
	--guttes-x: 24px;
}
.modal-right-full .modal__body {
	padding: 32px var(--guttes-x) var(--guttes-x) var(--guttes-x);
	flex: auto;
}
.modal-right-full-style .modal__body {
	padding-top: var(--guttes-x);
}
.modal-right-full .modal__header+.modal__body {
	padding-top: 12px;
}

.modal__body-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.modal__header {
	padding: var(--guttes-x) var(--guttes-x) 0 var(--guttes-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	position: sticky;
	top: 0;
	background-color: #fff;
	border-radius: 32px 32px 0 0;
	z-index: 3;
}

.modal__header .btn:not(.btn-inherit) {
	min-width: 44px;
	min-height: 44px;
}

.modal__header .btn:not(.btn-inherit):hover {
	opacity: .6;
}

.modal__header-title {
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 36px;
}

.modal__footer {
	padding: 0 var(--guttes-x) var(--guttes-x) var(--guttes-x);
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	bottom: 0;
	background-color: #fff;
	border-radius: 0 0 32px 32px;
}

.modal__title {
	font-weight: 500;
	font-size: 22px;
	line-height: 21px;
}

.modal__body .btn-close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
}

.modal__body .btn-close.pos-12 {
	top: 12px;
	right: 12px;
}

.modal__body .btn-modal-back {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
}

.modal__body-group {
	display: flex;
	flex: auto;
	max-height: calc(100vh - 20px);
}

.modal__body-group .modal__body {
	overflow: auto;
}

.modal__body-group .modal__body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.modal__body-group-item {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
}

.modal__body-group-item+.modal__body-group-item {
	border-left: 1px solid #ECF1F5;
}

.group-item--ative {
	display: flex !important;
}

.modal-right-full-style .modal__dialog{
	padding: 0;
}
.modal-right-full-style .modal__content{
	border-radius: 0;
}
.btn-close-left-outside {
	position: absolute;
	left: -16px;
	top: 21px;
	z-index: 30;
}
.outside-btn-title {
	padding-left: 12px;
}
@media (max-width: 767.98px) {
	.modal__content {
		border-radius: 0;
	}

	.modal__dialog {
		padding: 0;
	}

	.modal__body {
		padding: 32px 20px;
		gap: 20px;
	}
	.outside-btn-title {
		padding-left: 0;
		padding-right: 40px;
	}
	.modal__body .btn-close {
		top: 15px;
		right: 15px;
	}
	.btn-close-left-outside {
		left: auto;
		right: 24px;
	}
	.modal__body .btn-close.pos-12 {
		top: 12px;
		right: 12px;
	}

	/* .modal__body .btn-modal-back {
		left: 15px;
		top: 15px;
	} */
	.modal__body-group-item {
		flex: 0 0 100%;
		display: none;
	}

	.modal__body-group {
		max-height: none;
	}
}