.jc-box {
    position: fixed;
    display: inline;
    text-align: center;
    /* width: 153px; */
    /* height: 82px; */
    color: #000;
    font-size: 16px;
    background: #f5f5f5;
    padding: 10px;
    opacity: 0;
    z-index: 999;
    border: 1px solid #7F7F7F;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 13px 20px;
}

.jc-box:before {
    content: "";
    position: absolute;
    top: -23px;
    right: 19px;
    border-width: 11px;
    border-style: solid;
    border-color: transparent transparent #7F7F7F transparent;
}

.jc-box:after {
    content: "";
    position: absolute;
    top: -20px;
    right: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #ECF0F0 transparent;
}

.jc-question {

}

.jc-btn-wrap {
    margin-top: .5em;
}

.jc-yes, .jc-no {
    cursor: pointer;
    display: inline-block;
    border: medium none;
    color: #fff;
    border-radius: 2px;
    min-width: 55px;
    padding: 0.2em 0.4em;
    box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.4), 0px 1.4em 2em -0.7em rgba(255, 255, 255, 0.2) inset;
}

.jc-yes {
    background: #5cb85c;
    margin-left: -0.5em;
}

.jc-no {
    background: #c9302c;
    margin: 0 -0.5em 0 1em;
}

.jc-yes:hover, .jc-no:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)
}