paytabs-vue/src/assets/css/express.css

Paytabs Express Checkout for Vue

.popup-wrap
{
    position: relative;
    border-radius: 7px !important;
    overflow: hidden;
}
#paytabs_express {
    display: none;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 2%;
    width: 400px;
    z-index: 10000;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;      
}
#fadediv
{
    width: 100%; height: 100%; opacity: 0.3; background-color: black;
}
.open_popup
{
    border:none;
    z-index: 100000000;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    border-radius:5px;
    color:#fff;
    text-transform:uppercase;
    display:block;
    background-image: url(https://www.paytabs.com/theme/express_checkout/img/checkout.png) !important;
    background-repeat: no-repeat;
    width:150px; height:30px;
    cursor:pointer;
    background-color:transparent;
    text-indent: -999999px;
    white-space: nowrap;
    /*    
        background: rgb(87,183,44);  Old browsers 
        background: -moz-linear-gradient(top,  rgb(87,183,44) 0%, rgb(65,155,25) 100%);  FF3.6+ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(87,183,44)), color-stop(100%,rgb(65,155,25)));  Chrome,Safari4+ 
        background: -webkit-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Chrome10+,Safari5.1+ 
        background: -o-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Opera 11.10+ 
        background: -ms-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  IE10+ 
        background: linear-gradient(to bottom,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  W3C 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b72c', endColorstr='#419b19',GradientType=0 ); /* IE6-9 */
}
.close_
{
    background-image: url(https://www.paytabs.com/theme/express_checkout/img/close.png) !important;
    width: 11px; height: 11px; position: absolute; z-index: 1000; top: 7px; right: 6px; cursor: pointer;
}
#overlay{
    position:fixed; top:0; left:0; background:rgba(0,0,0,0.7); z-index:9996; width:100%; height:100%; display:block;  
}


.open_popup_express
{
    border:none;
    z-index: 100000000;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    border-radius:5px;
    color:#fff;
    text-transform:uppercase;
    display:block;
    background-image: url(https://www.paytabs.com/theme/express_checkout/img/checkout.png) !important;
    background-repeat: no-repeat;
    width:150px; height:30px;
    cursor:pointer;
    background-color:transparent;
    text-indent: -999999px;
    white-space: nowrap;
    /*    
        background: rgb(87,183,44);  Old browsers 
        background: -moz-linear-gradient(top,  rgb(87,183,44) 0%, rgb(65,155,25) 100%);  FF3.6+ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(87,183,44)), color-stop(100%,rgb(65,155,25)));  Chrome,Safari4+ 
        background: -webkit-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Chrome10+,Safari5.1+ 
        background: -o-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Opera 11.10+ 
        background: -ms-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  IE10+ 
        background: linear-gradient(to bottom,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  W3C 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b72c', endColorstr='#419b19',GradientType=0 ); /* IE6-9 */
}

#overlay2{
    position:fixed; top:0; left:0; background:rgba(0,0,0,0.7); z-index:9996; width:100%; height:100%; display:block;  
}

#paytabs_express_v2 {
    display: none;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 2%;
    width: 400px;
    z-index: 10000;
}

.PT_open_popup,.PT_open_iframe
{
    border:none;
    z-index: 100000000;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    border-radius:5px;
    color:#fff;
    text-transform:uppercase;
    display:block;

    background-repeat: no-repeat;
    width:150px; height:30px;
    cursor:pointer;
    background-color:transparent;
    text-indent: -999999px;
    white-space: nowrap;
    /*    
        background: rgb(87,183,44);  Old browsers 
        background: -moz-linear-gradient(top,  rgb(87,183,44) 0%, rgb(65,155,25) 100%);  FF3.6+ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(87,183,44)), color-stop(100%,rgb(65,155,25)));  Chrome,Safari4+ 
        background: -webkit-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Chrome10+,Safari5.1+ 
        background: -o-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  Opera 11.10+ 
        background: -ms-linear-gradient(top,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  IE10+ 
        background: linear-gradient(to bottom,  rgb(87,183,44) 0%,rgb(65,155,25) 100%);  W3C 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b72c', endColorstr='#419b19',GradientType=0 ); /* IE6-9 */
}
#ar_button
{
    background-image: url(https://www.paytabs.com/theme/express_checkout/images/checkout_ar.png);
}
#en_button
{
    background-image: url(https://www.paytabs.com/theme/express_checkout/images/checkout.png);
}
#ar_agnipay_button
{
    background-image: url(https://www.paytabs.com/theme/express_checkout/images/buynow_ar.png);
}
#en_agnipay_button
{
    background-image: url(https://www.paytabs.com/theme/express_checkout/images/buynow.png);
}
#PT_overlay{
    position:fixed; top:0; left:0; background:rgba(0,0,0,0.7); z-index:9996; width:100%; height:100%; display:block;  
}

.PT_popup-wrap
{
    position: relative;
    border-radius: 7px !important;
    overflow: hidden;
}

.iframe_wrap {
    height:auto;
    background:#fff;
    color:#000;
    cursor:pointer;
}
.hidden_iframe {
    height:0px;
    -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}
.hidden_iframe.open {
    height:100%;
    width:100%;
    -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}
.popup-wrap{
    text-align:center;
    margin:0 auto ;
    -webkit-box-shadow: 1px 1px 5px 4px rgba(50, 50, 50, 0.63);
    -moz-box-shadow:    1px 1px 5px 4px rgba(50, 50, 50, 0.63);
    box-shadow:         1px 1px 5px 4px rgba(50, 50, 50, 0.63);
    position:relative; 
    z-index:10;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #fff;

}
.content-area{
	background:#f8f8f8;
	padding:20px 30px;
}
.login-wrap{
	background:#fff;
	display:inline-block;
	width:100%;
	/*margin-left:-3px;*/
	vertical-align:top;
	border-radius:7px;
	overflow:hidden;
}