.alertable {
position: fixed;
z-index: 9999;
top: 38vh;
left: calc(50% - 150px);
width: 300px;
background: white;
border-radius: 4px;
padding: 20px;
margin: 0 auto;
} .alertable-overlay {
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .5);
} .alertable-message {
margin-bottom: 20px;
} .alertable-prompt {
margin-bottom: 20px;
}
.alertable-input {
width: 100%;
border-radius: 4px;
box-shadow: none;
border: solid 1px #ccc;
font-family: inherit;
font-size: inherit;
color: inherit;
padding: 6px 12px;
display: block;
box-sizing: border-box;
margin-bottom: 10px;
} .alertable-buttons {
text-align: right;
} .alertable-ok {
background: #09d;
border: solid 1px #09d;
font-family: inherit;
font-size: inherit;
color: white;
border-radius: 4px;
padding: 6px 12px;
margin-left: 4px;
cursor: pointer;
}
.alertable-ok:hover,
.alertable-ok:focus.
.alertable-ok:active {
background-color: #08c;
} .alertable-cancel {
border: solid 1px #ddd;
background: white;
font-family: inherit;
font-size: inherit;
color: #888;
border-radius: 4px;
padding: 6px 12px;
margin-left: 4px;
cursor: pointer;
}
.alertable-cancel:hover,
.alertable-cancel:focus,
.alertable-cancel:active {
background-color: #f2f2f2;
}