.xendit-overlay-box {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#xendit-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.xendit-overlay-text {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.label-dd {
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    color: #3D3D3D;
}

.input-dd {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    font-size: 1em !important;
}

.subtitle-dd {
    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
    color: #3D3D3D;
}

.input-cvv-dd {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 16px 18px;
    background-position: 98% 50%;
    cursor: pointer;
}


.three-ds-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

#three-ds-container {
    width: 550px;
    height: 450px;
    line-height: 200px;
    position: fixed;
    top: 25%;
    left: 40%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
    z-index: 9999; /* 1px higher than the overlay layer */
}

.xendit-cc-icons{
    display: flex;
    float: right;
    max-width: 84px;
    flex-flow: wrap;
}

.xendit-gateway-payment-label {
    display: flex;
    float: right;
    flex-flow: wrap;
}
.xendit-gateway-payment-label .xendit-cc-icons {
    max-width: 100%;
}
.xendit-gateway-payment-description.test-description {
    color: red;
    font-size:80%;
    margin-top:10px;
}