/*=========================================================================
Base
========================================================================== */
.modal {
	button.close {
		color: #333;
		text-shadow: none;
		
		&:active,
		&:focus {
			outline: 0;
		}
	}
	
	&[data-modal="scroll"] {
		.modal-body {
			max-height: 450px;
			overflow-y: auto;
		}
	}
	.modal-content{
		border: 0;
	}
}
/*=========================================================================
Locations
========================================================================== */
.modal.modal-top-left-corner {
	.modal-dialog {
		position: fixed;
		top: 0;
		right: auto;
		bottom: auto;
		left: 30px;
	}
}

.modal.modal-top-right-corner {
	.modal-dialog {
		position: fixed;
		top: 0;
		right: 30px;
		bottom: auto;
		left: auto;
	}
}

.modal.modal-bottom-left-corner {
	.modal-dialog {
		position: fixed;
		top: auto;
		right: auto;
		bottom: 0;
		left: 30px;
	}
}

.modal.modal-bottom-right-corner {
	.modal-dialog {
		position: fixed;
		top: auto;
		right: 30px;
		bottom: 0;
		left: auto;
	}
}

.modal.modal-left-side {
	border-radius: 0;
	
	.modal-dialog {
		position: fixed;
		top: 0;
		right: auto;
		bottom: 0;
		left: 0;
		border-radius: 0;
		margin: 0;
		
	}
	.modal-content {
		border-radius: 0;
		width: 300px;
		height: 100vh;
		top: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
	}
}

.modal.modal-right-side {
	border-radius: 0;
	
	.modal-dialog {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		border-radius: 0;
		margin: 0;
		
	}
	.modal-content {
		border-radius: 0;
		width: 300px;
		height: 100vh;
		top: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
	}
}
.modal.modal-top-frame {
	border-radius: 0;
	
	.modal-dialog {
		position: fixed;
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		border-radius: 0;
		margin: 0;
				max-width: none;
	}
	.modal-content {
		border-radius: 0;
	width: 100%;
		height: 300px;
		max-width: none;
		top: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
	}
}
.modal.modal-bottom-frame {
	border-radius: 0;
	
	.modal-dialog {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 0;
		margin: 0;
	 max-width: none;
	}
	.modal-content {
		border-radius: 0;
width: 100%;
		height: 300px;
		max-width: none;
		top: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
	}
}

.modal-xl{
	.modal-dialog{
		max-width: 1200px;
	}
}