.bg{
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	overflow: hidden;
	display: block;
	background: rgba(0,0,0,.5);
}


.modal{
	position: absolute;
	display: block;
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgba(0,0,0,.4);
	background: #f2f2f2;
	height: auto;
	font-size: 14px;
}


.modal.success{
    color: #3c763d;
    background-color: #dff0d8;
}

.modal.info{
    color: #31708f;
    background-color: #d9edf7;
}

.modal.warning{
    color: #8a6d3b;
    background-color: #fcf8e3;
}

.modal.danger{
	color: #a94442;
    background-color: #f2dede;
}



/*********** BOX **************/


.modal.box .body{
	padding: 20px 20px !important;
	width: calc(100% - 40px) !important;
    height: calc(100% - 40px) !important;
}
/********** BAR **************/


.modal.bar{
	display: block;
	width:100%;
	padding:0;
	height:auto;
	border-radius: 0;
	box-shadow: 0px 0px 5px rgba(0,0,0,.4);
}

.modal.bar .body{
	padding: 8px;
}



.modal  .close{
	position: absolute;
	top:8px;
	right:8px;
	display: block;
	width: 16px;
	height: 16px;
	background: url('data:image/svg+xml;utf8,<svg width="16px" height="16px" viewBox="-22 13 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-1" stroke="none" fill="%23666" fill-rule="evenodd" transform="translate(-14.000000, 21.071068) scale(-1, 1) rotate(-45.000000) translate(14.000000, -21.071068) " x="-23" y="20.0710678" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23666" fill-rule="evenodd" transform="translate(-14.000000, 21.071068) rotate(-45.000000) translate(14.000000, -21.071068) " x="-23" y="20.0710678" width="18" height="2"></rect></svg>') no-repeat center center;
	cursor: pointer;
	z-index: 101;
}