/* == Modal == */
.modal-open .dimmer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1049;
		background-color: rgba(0, 0, 0, 0.75);
}
.modal-open {
		overflow: hidden;
}
.modal-open .wojo.modal {
		overflow-x: hidden;
		overflow-y: auto;
}
.wojo.modal {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1050;
		display: none;
		width: 100%;
		height: 100%;
		overflow: hidden;
		outline: 0;
}
.wojo.modal .dialog {
		position: relative;
		width: auto;
		pointer-events: none;
		margin: 1.75rem auto;
		display: flex;
		align-items: center;
		min-height: calc(100% - (1.75rem * 2));
}
.wojo.modal .dialog > .content {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		pointer-events: auto;
		background-color: var(--white-color);
		background-clip: padding-box;
		border-radius: 1rem;
		outline: 0;
}
.wojo.modal .dialog > .content > .header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1rem;
		border-bottom: 1px solid var(--grey-color-500);
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
}
.wojo.modal .dialog > .content > .header > button {
		background: var(--grey-color-300);
		border: 0;
		cursor: pointer;
		padding: 0;
		line-height: 1;
		border-radius: var(--radius);
		margin: 0;
		width: 2rem;
		height: 2rem;
		text-align: center;
}
.wojo.modal .dialog > .content > .header h5 {
		margin-bottom: 0;
		line-height: 1.5;
		font-size: 1rem;
		font-weight: 600;
}
.wojo.modal .dialog > .content > .header h5 span {
		margin: 0 .5rem;
		font-size: 1rem;
}
.wojo.modal .dialog > .content > .body {
		position: relative;
		flex: 1 1 auto;
		padding: 1.5rem;
}
.wojo.modal .dialog > .content > .footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 1rem;
		border-top: 1px solid var(--grey-color-500);
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem;
}
.wojo.modal .dialog > .content > .footer > :not(:first-child) {
		margin-left: .250rem;
}
.wojo.modal .dialog > .content > .footer > :not(:last-child) {
		margin-right: .250rem;
}
/* == Size == */
.wojo.small.modal .dialog {
		width: 320px;
}
.wojo.modal .dialog {
		width: 560px;
}
.wojo.medium.modal .dialog {
		width: 640px;
}
.wojo.big.modal .dialog {
		width: 1024px;
}
.wojo.full.modal .dialog {
		width: 100%;
}
/* == Phone == */
@media screen and (max-width: 640px) {
		.wojo.small.modal .dialog,
		.wojo.modal .dialog,
		.wojo.medium.modal .dialog,
		.wojo.big.modal .dialog,
		.wojo.full.modal .dialog {
				width: 100%;
		}
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
		.wojo.big.modal .dialog,
		.wojo.full.modal .dialog {
				width: 100%;
		}
}