<template>
<div class="modal fade app-modal" v-bind:id="id" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" :class="aClass">
            <slot></slot>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        props:['id', 'aClass']
    }
</script>

<style>
.app-modal{
	z-index: 2200;
}

.app-modal .modal-dialog{
	margin-top: 110px;
}

.modal-backdrop{
	z-index: 2190 !important;
}

.primary{
	background-color: #337ab7;
	color: #fff;
}

.primary .modal-body{
	background-color: #fff;
	border-left: solid 1px #337ab7;
	border-right: solid 1px #337ab7;
	color: #000;
}

.primary .modal-footer{
	background-color: #fff;
	border-radius: 5px;
	border-left: solid 1px #337ab7;
	border-right: solid 1px #337ab7;
	border-bottom: solid 1px #337ab7;
	color: #000;
}
</style>