.wbt-bg-all{
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4) url('../img/bg-modal.png') center;
    display:none;
    z-index:1000;
}

.wbt-message{
    position: fixed;
    top:calc(50% - 75px);
    left:calc(50% - 120px);
    width:240px;
    height:150px;
    border-radius:10px;
    border-top:5px solid #97d729;
    background: #ffffff;
    box-shadow: 0 0 0 8px rgba(255,255,255,0.4), 0 0 8px rgba(0,0,0,0.4);
    padding:20px;
    display:none;
    z-index:1200;
}
.bg-ok{
    background:#ffffff url('../img/message/bg-ok.png') no-repeat;
    background-size: 240px;
    background-position: center 180px;
}
.bg-error{
    background:#ffffff url('../img/message/bg-error.png') no-repeat;
    background-size: 240px;
    background-position: center 180px;
}

.msg-title{
    font-family:WarungKopi;
    font-size:20px;
    color:#00a04b;
    line-height:20px;
}
.msg-separator{
    margin-top:10px;
    margin-bottom:15px;
    width:100%;
    height:3px;
    border-left:30px solid #219ebc;
    background: #eaf6da;
}

.msg-text{
    margin-top:10px;
    font-family:Roboto;
    font-size:15px;
    color:#000000;
    text-align: left;
    line-height:20px;
}
.msg-text span{
    background: #219ebc;
    color:#ffffff;
    border-radius:5px;
    padding-left:5px;
    padding-right:5px;
}

.msg-footer{
    position: absolute;
    bottom:-20px;
    right:-45px;
    width:120px;
    height:120px;
    background:url('../img/message/ico-3.png') no-repeat;
    background-size: 120px;
}

/** Question **/
.ctn-question{
    position: fixed;
    top:calc(50% - 90px);
    left:calc(50% - 120px);
    width:240px;
    height:180px;
    background: #ffffff;
    border-radius:10px;
    border-top:5px solid #219ebc;
    box-shadow:0 0 8px rgba(0,0,0,0.2);
    padding:20px;
    display:none;
    z-index:1200;
}

.q-options{
    margin:auto;
    margin-top:20px;
    width:170px;
    height:50px;
}
.q-confirm{
    float:left;
    width:75px;
    height:40px;
    background:#d40408 url('../img/icon-min/delete-white.png') no-repeat;
    background-position: 5px center;
    background-size: 18px;
    margin:5px;
    font-family:Lato;
    font-size:13px;
    color:#ffffff;
    line-height:40px;
    text-align: center;
    border-radius:5px;
    cursor:pointer;
}
.q-cancel{
    float:left;
    width:75px;
    height:40px;
    background:#98c1d9;
    margin:5px;
    font-family:Lato;
    font-size:13px;
    color:#ffffff;
    line-height:40px;
    text-align: center;
    border-radius:5px;
    cursor:pointer;
}

.q-confirm:hover{
    background: #c80105 url('../img/icon-min/delete-white.png') no-repeat;
    background-position: 5px center;
    background-size: 18px;
}
.q-cancel:hover{
    background: #3d5a80;
}

@keyframes anim-cat {
  0% {  	
    background: url('../img/message/cat-1.png') no-repeat center;
  }
  50% {  	
    background: url('../img/message/cat-2.png') no-repeat center;
  }
  100% {  	
    background: url('../img/message/cat-1.png') no-repeat center;
  }
}