#payAdvantageOverlayBpayLock {
     position: absolute; /* Sit on top of the page content */
     display: none; /* Hidden by default */
     width: 100%; /* Full width (cover the whole page) */
     height: 100%; /* Full height (cover the whole page) */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, 0.8); /* White background with opacity */
     z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
     cursor: default; /* Add a pointer on hover */
     text-align: center;
 }

 #payAdvantageOverlayBpayLock:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #333;
    animation: spinner .6s linear infinite;
 }
 
#payAdvantageOverlayCreditCardLock {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* White background with opacity */
    z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
    cursor: default; /* Add a pointer on hover */
    text-align: center;
}

 #payAdvantageOverlayCreditCardLock:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #333;
    animation: spinner .6s linear infinite;
 }
 
#payAdvantageBillerOverlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white; /* Black background with opacity */
    z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
    cursor: default; /* Add a pointer on hover */
}

#payAdvantageCreditCardOverlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white; /* Black background with opacity */
    z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
    cursor: default; /* Add a pointer on hover */
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}