.modal {
	.modal-content {
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
		border-radius: 3px;
		border: 0;
	}

	.modal-header {
		padding: 23px 26px;
	}

	.modal-body {
		padding: 0 26px 10px;
	}

	.modal-footer {
		.btn-link {
			font-size: 14px;
			color: #000;
			font-weight: 500;

			&:hover {
				background-color: #eee;
			}
		}
	}
	
	&:not([data-modal-color]) {
		.modal-footer {
			.btn-link {
				font-weight: 500;
	
				&:hover {
					background-color: #eee;
				}
			}
		}
	}

	&[data-modal-color] {
		color: #fff;
		
		.modal-title,
		.modal-footer .btn-link {
			color: #fff;
		}
		
		.modal-footer {
			background: rgba(0,0,0,0.1);
		}
		
		.modal-backdrop { 
			background: #fff;
		}
		
		.modal-footer {
			.btn-link {
				font-weight: 400;
	
				&:hover {
					background-color: rgba(0,0,0,0.1);
				}
			}
		}
	}
	
	&[data-modal-color="blue"] .modal-content {
		background: @m-blue;
	}
	
	&[data-modal-color="cyan"] .modal-content {
		background: @m-cyan;
	}
	
	&[data-modal-color="green"] .modal-content {
		background: @m-green;
	}
	
	&[data-modal-color="lightgreen"] .modal-content {
		background: @m-lightgreen;
	}
	
	&[data-modal-color="lightblue"] .modal-content {
		background: @m-lightblue;
	}
	
	&[data-modal-color="amber"] .modal-content {
		background: @m-amber;
	}
	
	&[data-modal-color="teal"] .modal-content {
		background: @m-teal;
	}
	
	&[data-modal-color="orange"] .modal-content {
		background: @m-orange;
	}
	
	&[data-modal-color="bluegray"] .modal-content {
		background: @m-bluegray;
	}
	
	&[data-modal-color="red"] .modal-content {
		background: @m-red;
	}
}

.modal-backdrop {
    z-index: 10;
}

