.dialog,
.dialog:before,
.dialog:after,
.dialog div,
.dialog div:before,
.dialog div:after,
.dialog span,
.dialog span:before,
.dialog span:after,
.dialog button,
.dialog button:before,
.dialog button:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.dialog-wrap{
position:fixed;
display:table;
vertical-align:middle;
top:0;
left:0;
bottom:-4000px;
width:100%;
height:100%;
color:#444;
background-color:transparent;
}

.dialog-center{
content:'';
display:table-cell;
vertical-align:middle;
text-align:center;
}

.dialog{
display:inline-block;
max-width:90%;
background-color:#fff;
text-align:center;
border-radius:.15rem;
box-shadow:0 0 5px #000;
overflow:hidden;
}

.dialog-title{
display:block;
background-color:#eee;
border-bottom:1px #ddd solid;
padding:15px 30px;
font-size:26px;
}

.dialog-subtitle{
display:block;
border-bottom:1px #ddd solid;
padding:1.6rem;
font-size:18px;
}

.dialog-toaster-wrap{
position:fixed;
top:60px;
right:25px;
color:#444;
background-color:transparent;
text-align:right;
max-width:90%;
}

.dialog-toaster-wrap i{
margin-right:.5rem;
color:#ff0;
}

.dialog-toaster-subtitle{
display:inline-block;
padding:10px 15px ;
font-size:16px;
color:#fff;
background-color:#444;
text-align:center;
border:1px solid #555;
border-radius:.15rem;
box-shadow:0 0 5px #000;
overflow:hidden;
}

.dialog-button-wrap button{
margin-right:5px;
}

.dialog-button-wrap button:last-child{
margin-right:0;
}

.dialog-button-wrap{
padding:20px;
}

.dialog-backLayer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}

/* -- For large devices -- */
@media(min-width:768px)
{
	.dialog	{
	min-width:400px;
	max-width:80%;
	}	
}

@media(min-width:1024px)
{
	.dialog	{
	max-width:500px;
	}	
}