* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; font-weight: normal; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
button, input[type="reset"], input[type="button"], input[type="submit"] { line-height: normal; }
html, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; word-wrap: break-word; }


@font-face {
    font-family: 'futuraregular';
    src: url('../fonts/futura-webfont.eot'); src: url('../fonts/futura-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/futura-webfont.woff2') format('woff2'), url('../fonts/futura-webfont.woff') format('woff'), url('../fonts/futura-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'futurabold';
    src: url('../fonts/futurabold-webfont.eot'); src: url('../fonts/futurabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/futurabold-webfont.woff2') format('woff2'), url('../fonts/futurabold-webfont.woff') format('woff'), url('../fonts/futurabold-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'futurabook'; src: url('../fonts/futurabook-webfont.eot'); src: url('../fonts/futurabook-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/futurabook-webfont.woff2') format('woff2'), url('../fonts/futurabook-webfont.woff') format('woff'), url('../fonts/futurabook-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'futuralight';
    src: url('../fonts/futuralight-webfont.eot'); src: url('../fonts/futuralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/futuralight-webfont.woff2') format('woff2'), url('../fonts/futuralight-webfont.woff') format('woff'), url('../fonts/futuralight-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}

body {position:relative; color: #003b49; font-family: 'futurabook', sans-serif, Arial; font-weight: normal; font-size: 16px; overflow-x: hidden; background: #fff; background: -moz-linear-gradient(top,  #e0e0e0 0%, #eeeeee 25%, #ffffff 60%, #ffffff 100%); background: -webkit-linear-gradient(top,  #e0e0e0 0%,#eeeeee 25%,#ffffff 60%,#ffffff 100%); background: linear-gradient(to bottom,  #e0e0e0 0%,#eeeeee 25%,#ffffff 60%,#ffffff 100%); }

strong { font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'futurabold'; margin: 0; }
h1 { font-size: 22px; margin: 0 0 15px 30px; }
h2 { font-size: 18px; }
h3 { font-size: 18px; font-family: 'futuraregular'; }
h4 { font-size: 16px; font-family: 'futurabook'; }
a { text-decoration: none; cursor: pointer; outline: 0 !important; }
a:hover { text-decoration: none; }
a:link, a:visited { border: none; }
p { margin: 0 0 15px 0; }
ul { margin: 0; padding: 0; list-style-type: none; }
img { display: block; }
title, date, sidebar { display: block; }
input, textarea, select { border-radius: 0; }
label { font-weight: normal; margin: 0; }

.clear { clear: both; }
.tCenter { text-align: center; }
.CCenter { margin: 0 auto; }
.overHid { overflow: hidden; }
.hide { display: none; }
.left { float: left; }
.right { float: right; }

/* Clearfix */
.clearfix:after, .clearfix:before { content: ' '; display: table; }
.clearfix:after { clear: both; }

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {font-size: 16px; background: #fff; }
}


/*////////////////// GENERAL LAYOUT //////////////////*/
main, header, section, footer, article { width: 100%; }
main { max-width: 1100px; margin: 0 auto; margin-bottom: 50px; }
header { padding: 15px 0; border-bottom: 1px solid #aaaaaa; margin-bottom: 15px; }
.container { width: 100%; clear: both; }
footer {  }
section { float: left; width: 70%; background: #fff; border: 1px solid #d2d2d2; padding: 0 20px 30px 20px; margin-top: 50px; }
aside { float: right; width: 27.272727272727%; }


.panel { -webkit-box-shadow: none;  box-shadow: none; }
.panel.panel-default { margin-bottom: 25px; float: left; clear: both; width: 100%; }
.panel-default > .panel-heading { background: none; }

section h2 { position: relative; width: 100%; clear: both; font-family: 'futuraregular'; border-bottom: 1px solid #d2d2d2; margin-bottom: 13px; }
section h2 a { color: #003b49; display: block; width: 100%; padding: 5px 0; text-decoration: none !important; }
section .tab-content h2 a:after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -8px; width: 11px; height: 16px; background: url('../img/sub-title_arrow.png') no-repeat 0 0; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }
section .tab-content h2 a.collapsed:after { transform:rotate(0); -webkit-transform:rotate(0); -moz-transform:rotate(0); }

.transAll { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; }
.tooltipIcon { position: relative; float: left; width: 22px; height: 22px; display: inline-block; background: url('../img/tooltip-info_icon.png') no-repeat 0 0; cursor: pointer; }

.desktop { display: block; }
.mobile { display: none; }


/*////////////////////// HEADER //////////////////////*/
header .logo { float: left; }
header .secureL { float: right; margin-top: 5px; }
header .merchantLogo { float: right; margin-right: 10px; max-width: 165px; max-height: 85px; }


/*////////////////////// FOOTER //////////////////////*/
footer { border: 1px solid #d2d2d2; padding: 8px; margin-top: 12px; background: #ffffff; background: -moz-linear-gradient(top,  #ffffff 0%, #f8f8f8 25%, #f0f0f0 55%, #e2e2e2 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#f8f8f8 25%,#f0f0f0 55%,#e2e2e2 100%); background: linear-gradient(to bottom,  #ffffff 0%,#f8f8f8 25%,#f0f0f0 55%,#e2e2e2 100%); }


/*//////////////////// CARD INFO ///////////////////*/
#paymentTypeTab { margin: -50px 0 25px 10px; }
#paymentTypeTab li { float: left; min-width: 150px; font-family: 'futuraregular'; margin-right: 3px; background: #fff; }
#paymentTypeTab li a { display: block; border: 1px solid #d2d2d2; padding: 13px 15px; text-align: center; color: #003b49; text-decoration: none; }
#paymentTypeTab li a.active { color: #f1592a; border-color: #8b8b8b; border-bottom: 1px solid #fff; }

section .tab-content { width: 100%; clear: both; margin-bottom: 25px; }
section .tab-content .tab-pane { display: none; } 
section .tab-content .tab-pane.active { display: block; } 
section .tab-content .tab-pane.active { display: block; } 

/* Form Area */
.cardForm { float: left; width: 310px; }
.cardForm label, .account-payment-form label { font-family: 'futuralight'; width: 100%; margin: 12px 0 5px 0; }
.cardForm input, .cardForm select, .account-payment-form input, .account-payment-form select { /*width: 100%;*/ border: 1px solid #d2d2d2; padding: 10px 15px; font-size: 14px; color: #002027; text-transform: uppercase; font-family: 'futuraregular'; letter-spacing: 0.5px; }
.cardForm input:focus, .cardForm select:focus, .account-payment-form input:focus, .account-payment-form select:focus { background-color: #f5f4f4; }
.cardForm .cardNums input { float: left; margin-right: 5px; width: 72px; text-align: center; }
.cardForm .cardNums input.amex { width: 79px; padding-left: 8px; padding-right: 8px; }
.cardForm .cardNums input:last-child { margin-right: 0; }
.cardForm select, .account-payment-form select { float: left; width: 110px; margin-right: 5px; text-transform: inherit; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url('../img/select_arrow.png') no-repeat right center; }
.cardForm .cvc input { width: 75px; /*float: left;*/ text-align: center; }
.cardForm .cvc .tooltipIcon { margin: 10px 0 0 10px; }

.account-payment-form select { width: 180px; }

.cardForm input.error, .cardForm select.error { border-color: #f1592a; }
.errorMsg { width: 100%; clear: both; color: rgb(255, 0, 0); font-weight: bold; padding-top: 20px; }
.successMsg { width: 100%; clear: both; color: #44b669; font-weight: bold; padding-top: 20px; }


.pointArea { width: 100%; float: left; clear: both; margin: 10px 0 30px 0; background: #f5f4f4; padding: 7px 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 14px; }
.pointArea .availableBar { float: left; padding-top: 9px; }
.pointArea .availableBar span { font-weight: bold; padding-left: 5px; }

.pointArea .usedBar { float: left; }
.pointArea .usedBar span { display: inline-block; float: left; padding-top: 15px; }

.pointArea .usedBar .price { float: left; background: #fff; border: 1px solid #d2d2d2; font-size: 15px; color: #003b49; font-family: 'futuraregular'; padding-right: 10px; margin-left: 15px; }
.pointArea .usedBar .price input { float: left; border: 0; padding: 6px 7px 6px 10px; width: 100px; text-align: right; font-size: 15px; color: #003b49; font-family: 'futuraregular'; }
.pointArea .usedBar .price span { padding-top: 6px; }

.pointArea .usedBar .used { float: left; margin-left: 12px; padding-top: 20px; }
.pointArea .usedBar .used input { width: 15px; height: 15px; padding: 0; margin: 0 10px 0 0; border: 1px solid #d2d2d2; }
.pointArea .usedBar .used span { font-weight: bold; }

/* Card Area */
.cardBoxes { float: right; margin-top: 13px; }
#cardArea { position: relative; float: right; width: 290px; height: 190px; font-family: Arial, sans-serif, verdana; }
#cardArea .front, #cardArea .back { position: absolute; width: 270px; height: 172px; background: url('../img/credit-card_bg.png') no-repeat 0 0; z-index: 10; }
#cardArea .front.active, #cardArea .back.active { z-index: 15; }
#cardArea .front { bottom: 0; right: 0; background-position: 0 0; }
#cardArea .front.active { top: 0; left: 0; bottom: inherit; right: inherit; }
#cardArea .front.amerExp { background-position: 0 -360px; }
#cardArea .front div, #cardArea .front img { position: absolute; font-weight: bold; font-size: 13px; }
#cardArea .front .topLogo { position: absolute; top: 15px; left: 23px; height: 35px; }
#cardArea .front .bottLogo { position: absolute; bottom: 10px; right: 10px; height: 35px; }
#cardArea .front .numbers { left: 37px; bottom: 51px; }
#cardArea .front .numbers.amex { left: 25px; }
#cardArea .front .numbers span { display: inline-block; font-size: 18px; margin-right: 10px; font-weight: bold; }
#cardArea .front .date { bottom: 31px; left: 122px; }
#cardArea .front .date span { font-weight: bold; text-transform: uppercase; }
#cardArea .front .name { bottom: 9px; left: 37px; text-transform: uppercase; }
#cardArea .back { bottom: 0; right: 0; background-position: 0 -180px; }
#cardArea .back.active { top: 0; left: 0; bottom: inherit; right: inherit; }
#cardArea .back div { position: absolute; top: 75px; right: 100px; width: 75px; text-align: right; font-weight: bold; font-size: 16px; }

/*.cardBoxes .saveBar { float: left; clear: both; margin-top: 20px; }
.cardBoxes .saveBar div { float: left; font-size: 14px; }
.cardBoxes .saveBar div input { margin-right: 5px; }*/
.cardBoxes .saveBar .tooltipIcon { margin-left: 5px; }

.otherPaymInfoBox { border-bottom: 1px solid #d2d2d2; padding-bottom: 10px; }
.otherPaymInfoBox p { font-size: 14px; }


/*//////////////////// REGISTERED CARDS ///////////////////*/
.cardSelect { width: 614px; position: relative; }
.cardSelect .cardB { border: 1px solid #d2d2d2; width: 100%; float: left; clear: both; background: #fff; margin-bottom: 2px; }
.cardSelect .cardB:hover { background: #fdf6f4; }
.cardSelect .cardB .clickArea { float: left; padding: 13px 0 13px 10px; cursor: pointer; }

.cardSelect .cardB div { float: left; }
.cardSelect .cardB .logo { width: 92px; text-align: left; display: table; }
.cardSelect .cardB .logo img { max-width: 92px; float: left; margin-top: -8px; }
.cardSelect .cardB .info { width: 370px; margin: 0 10px; }
.cardSelect .cardB .info span { display: inline-block; }
.cardSelect .cardB .info span:first-child { padding-right: 5px; }
.cardSelect .cardB .info span:last-child { padding-left: 5px; }

.cardSelect .card-menu { display: none; }

.cardSelect .cardB .editBox { width: 110px; font-size: 11px; text-align: right; padding: 13px 10px 13px 0; float: right; }
.cardSelect .cardB .editBox a { display: inline-block; color: #003b49; margin-top: 3px; text-decoration: none !important; }
.cardSelect .cardB .editBox .error { display: none; width: 100%; color: #ff0000; text-align: right; }

.cardSelect .cardB.expired .clickArea { padding: 10px 0 10px 10px; }
.cardSelect .cardB.expired .editBox { padding: 8px 10px 7px 0;  }
.cardSelect .cardB.expired .logo img { margin-top: 7px; }
.cardSelect .cardB.expired .info { margin-top: 5px; }
.cardSelect .cardB.expired .editBox .error { display: block; }
.cardSelect .cardB.editing .clickArea { padding: 6px 0 5px 10px; }
.cardSelect .cardB.editing .editBox { padding: 6px 10px 5px 0;  }

.cardSelect .cardB.editing .editBox a { margin: 0 0 3px 0; }
.cardSelect .cardB.editing .logo img { margin-top: 10px; }
.cardSelect .cardB.editing .info { margin-top: 7px; }
.cardSelect .cardB .editDateBox { display: none; width: 100%; clear: both; }
.cardSelect .cardB .editDateBox select { border: 1px solid #d2d2d2; font-size: 10px; }
.cardSelect .cardB.editing .editDateBox { display: block; }

.cardSelect .cardB.selected { position: relative; background: #f5f4f4; cursor: pointer; }
.cardSelect .cardB.selected:after { content: ''; position: absolute; right: 10px; top: 50%; width: 11px; height: 16px; margin-top: -8px; background: url('../img/sub-title_arrow.png') no-repeat 0 0; }
.cardSelect .cardB.selected.open:after { transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }

.cardSelect .cardB .firstBar { color: #f1592a; }


/*//////////////////// PAYMENT OPTIONS ///////////////////*/
.paymentOpt { width: 100%; padding: 10px; background: #fafafa; margin-bottom: 25px; }
.paymentOpt .bankLogo { margin: 5px 0 10px 0; display:none }
.paymentOpt .seeAllPayOpt { display: inline-block; float: left; clear: both; font-size: 14px; color: #f1592a; font-weight: bold; }
.paymentOpt .standardOpt, .paymentOpt .onlineOpt { float: left; width: 100%; background: #fff; border: 1px solid #c9c9c9; padding: 10px 10px 20px 10px; margin-bottom: 10px; font-family: 'futuraregular'; max-height: 265px; overflow: hidden; }
.paymentOpt .standardOpt, .paymentOpt .offlineOpt { float: left; width: 100%; background: #fff; border: 1px solid #c9c9c9; padding: 10px 10px 20px 10px; margin-bottom: 10px; font-family: 'futuraregular'; max-height: 265px; overflow: hidden; }

.paymentOpt .standardOpt .head { padding-right: 20px; margin-bottom: 10px; }
.paymentOpt .standardOpt table { width: 100%; }
.paymentOpt .standardOpt table thead { border-bottom: 1px solid #c9c9c9; padding-bottom: 10px; }
.paymentOpt .standardOpt table thead th { text-align: center; padding-bottom: 5px; width: 31.33333333%; }
.paymentOpt .standardOpt table thead th:first-child { width: 6%; }

.paymentOpt .scrollArea { max-height: 195px; overflow: auto;}
.paymentOpt .standardOpt table tbody {  }
.paymentOpt .standardOpt table tbody td { text-align: center; font-size: 14px; border-right: 1px solid #fff;  width: 31.33333333%; }
.paymentOpt .standardOpt table tbody tr:nth-child(even) td { background: #f5f4f4; }
.paymentOpt .standardOpt table tbody tr td:first-child { width: 6%; background: #fff; }
.paymentOpt .standardOpt table tbody td label { font-weight: normal; margin: 0; cursor: pointer; display: block; padding: 7px 0 6px 0; }

.paymentOpt.twoBox .standardOpt { width: 100%; }
.paymentOpt .onlineOpt { width: 100%; float: right; padding: 10px 15px 20px 15px; min-height: 265px; }
.paymentOpt .onlineOpt h3 { border-bottom: 1px solid #c9c9c9; font-size: 16px; padding-bottom: 5px; margin-bottom: 15px; }

.paymentOpt .onlineOpt table { margin-bottom: 15px; }
.paymentOpt .onlineOpt table:last-child { margin-bottom: 0; }
.paymentOpt .onlineOpt table thead th { font-size: 14px; color: #f1592a; padding-bottom: 5px; }
.paymentOpt .onlineOpt table tbody td { padding: 5px 0 4px 0; }
.paymentOpt .onlineOpt table tbody td label { cursor: pointer; display: block; padding: 5px 0 4px 0; font-size: 14px; }
.paymentOpt .onlineOpt table tbody td:last-child { padding: 0; }
.paymentOpt .onlineOpt table tbody td:first-child { width: 30px; }

.paymentOpt .offlineOpt { float: right; padding: 10px 15px 20px 15px; min-height: 265px; }
.paymentOpt .offlineOpt h3 { border-bottom: 1px solid #c9c9c9; font-size: 16px; padding-bottom: 5px; margin-bottom: 15px; }

.paymentOpt .offlineOpt table { margin-bottom: 15px; }
.paymentOpt .offlineOpt table:last-child { margin-bottom: 0; }
.paymentOpt .offlineOpt table thead th { font-size: 14px; color: #f1592a; padding-bottom: 5px; }
.paymentOpt .offlineOpt table tbody td { padding: 5px 0 4px 0; }
.paymentOpt .offlineOpt table tbody td label { cursor: pointer; display: block; padding: 5px 0 4px 0; font-size: 14px; }
.paymentOpt .offlineOpt table tbody td:last-child { padding: 0; }
.paymentOpt .offlineOpt table tbody td:first-child { width: 30px; }


/*////////////////// CONTRACT & 3D SECURE & PAY BTN AREA /////////////////*/
/* Contract Box */
.lastCheckAndPayArea .contract { width: 100%; clear: both; margin-bottom: 25px; padding-left: 10px; }
.lastCheckAndPayArea .contract label { font-family: 'futurabook'; margin-left: 8px; }
.lastCheckAndPayArea .contract label a { font-family: 'futuraregular'; font-weight: bold; color: #003b49; text-decoration: underline; }
.lastCheckAndPayArea .contract label a:hover { text-decoration: none; }

/* 3D Secure Box */
.secure3D { width: 100%; clear: both; margin-bottom: 25px; }
.secure3D div { position: relative; float: left; background: #f5f4f4; padding: 5px 36px 5px 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.secure3D div label { margin-left: 5px; }
.secure3D div:after { content: ''; position: absolute; width: 16px; height: 20px; right: 10px; top: 50%; margin-top: -10px; background: url('../img/3d-secure_icon.png') no-repeat 0 0; }
.secure3D div input { margin-top: 2px; }
.secure3D .tooltipIcon { margin: 5px 0 0 10px; }

/* Check and Pay Box */
.checkAndPayBox { width: 100%; clear: both; margin-bottom: 20px; }
.checkAndPayBox ul { float: left; max-width: 580px; }
.checkAndPayBox ul li { position: relative; float: left; padding: 0 30px 0 10px; }
.checkAndPayBox ul li:after { content: ''; position: absolute; width: 19px; height: 50px; right: 0; top: 50%; margin-top: -25px; background: url('../img/check-list_seperator.png') no-repeat 0 0; }
.checkAndPayBox ul li:last-child:after { display: none; }
.checkAndPayBox ul li:last-child { padding-right: 0; }
.checkAndPayBox ul li:first-child { padding-left: 0; }
.checkAndPayBox ul li label, .checkAndPayBox ul li span { clear: both; text-align: center; display: block; font-family: 'futuraregular'; }
.checkAndPayBox ul li label { font-size: 14px; margin-bottom: 4px; }
.checkAndPayBox ul li span { font-size: 18px; font-weight: bold; }

.checkAndPayBox .payBtn, .continueBtn { float: right; }
.checkAndPayBox .confirmBtn {  }
.checkAndPayBox .payBtn, .confirmBtn { border: 1px solid #5b9300; width: 178px; text-align: center; padding: 9px 0; color: #fff; font-family: 'futuraregular'; font-weight: bold; font-size: 18px; background: #89c000; background: -moz-linear-gradient(top,  #89c000 0%, #7db501 50%, #6fa701 100%); background: -webkit-linear-gradient(top,  #89c000 0%,#7db501 50%,#6fa701 100%); background: linear-gradient(to bottom,  #89c000 0%,#7db501 50%,#6fa701 100%); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; letter-spacing: 1px; margin-top: 4px; }
.checkAndPayBox .payBtn:hover, .confirmBtn:hover { border-color: #71af0d; background: #a6dc1f; background: -moz-linear-gradient(top,  #a6dc1f 0%, #9dd425 50%, #88c01a 100%); background: -webkit-linear-gradient(top,  #a6dc1f 0%,#9dd425 50%,#88c01a 100%); background: linear-gradient(to bottom,  #a6dc1f 0%,#9dd425 50%,#88c01a 100%); }
.continueBtn {background-color: rgba(128, 128, 128, 0.5); width: 178px; text-align: center; padding: 9px 0; color: #fff; font-family: 'futuraregular'; font-weight: bold; font-size: 18px; border-radius: 5px; border: rgba(128, 128, 128, 0.5); letter-spacing: 1px; margin-top: 14px;}
.checkAndPayBox .editBtn{border:1px solid #012730;width:178px;text-align:center;padding:9px 0;color:#fff;font-family:futuraregular;font-weight:700;font-size:18px;background:#89c000;background:-moz-linear-gradient(top,#003b49 0,#013643 50%,#012730 100%);background:-webkit-linear-gradient(top,#003b49 0,#013643 50%,#012730 100%);background:linear-gradient(to bottom,#003b49 0,#013643 50%,#012730 100%);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;letter-spacing:1px;margin-top:4px}
.checkAndPayBox .editBtn:hover{border-color:#71af0d;background:#a6dc1f;background:-moz-linear-gradient(top,#014757 0,#084351 50%,#011f26 100%);background:-webkit-linear-gradient(top,#014757 0,#084351 50%,#011f26 100%);background:linear-gradient(to bottom,#014757 0,#084351 50%,#011f26 100%)}


.bottAlertBox { float: left; clear: both; width: 100%; border: 1px solid #d2d2d2; padding: 10px; margin-top: 20px; }
.bottAlertBox span { position: relative; display: inline-block; width: 100%; padding-left: 37px;  background: url('../img/tooltip-info_icon.png') no-repeat left top; }


/*//////////////////// SIDEBAR ///////////////////*/
aside .box { background: #fff; border: 1px solid #d7d7d7; padding: 8px 0 20px 20px; margin-bottom: 20px; }
aside .box h3 { position: relative; width: 100%; border-bottom: 1px solid #d7d7d7; font-weight: bold; padding-bottom: 8px; margin-bottom: 8px; }

aside .box h4 { width: 100%; color: #333333; margin-bottom: 4px; }
aside .box span { display: inline-block; width: 100%; font-size: 20px; color: #333333; font-family: 'futuraregular'; margin-bottom: 15px; }
aside .box span.total { font-size: 24px; font-weight: bold; }
aside .box.orderInfo a { display: inline-block; margin: 10px 0; clear: both; background: #003b49; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #fff; padding: 5px 15px; font-size: 14px;  }
aside .box.orderInfo a:hover { background: #f1592a; }

aside .box.address h3 {  }
aside .box p { font-size: 14px; color: #333333; margin-bottom: 25px; padding-right: 35px; }
aside .box p:last-child {  }
aside .box .mobilAccord:last-child p { margin-bottom: 0; }
aside .bannerBox { width: 300px; max-height: 250px; overflow: hidden; margin-bottom: 25px; }


/*///////////////// SPLASH BOXES ////////////////*/
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); -ms-filter: "alpha(opacity=50)"; z-index: 9980; }
.splashBox { display: none; position: fixed; z-index: 9990; width: 900px; left: 50%; margin-left: -450px; top: 50%; background: #fff; -webkit-box-shadow: 0 0 20px rgba(50,50,50,0.5); -moz-box-shadow: 0 0 20px rgba(50,50,50,0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.splashBox .head { width: 100%; position: relative; padding: 10px 15px; text-align: left; background: #F26033; background: -moz-linear-gradient(top,  #f57c56 0%, #f26033 50%, #e94816 100%); background: -webkit-linear-gradient(top,  #f57c56 0%,#f26033 50%,#e94816 100%); background: linear-gradient(to bottom,  #f57c56 0%,#f26033 50%,#e94816 100%); -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.splashBox .head h4 { font-weight: bold; color: #fff; font-size: 18px; }
.splashBox .head .close { position: absolute; display: block; right: 15px; top: 11px; width: 22px; height: 22px; background: url('../img/close_icon.png') no-repeat 0 0; }
.splashBox .content { padding: 15px; max-height: 500px; overflow-x: hidden; overflow-y: auto; }
.splashBox .content h5 { width: 100%; font-size: 16px; text-align: center; margin-bottom: 15px; }
.splashBox .content p { color: #333; }

.splashBox .confirm { padding: 15px; }
.splashBox .confirm a { display: inline-block; background: #003b49; color: #fff; padding: 10px 0; width: 180px; text-align: center; font-size: 14px; font-weight: bold; }
.splashBox .confirm a:hover { background: #F26033; }

.splashBox.allPaymentOpt { width: 980px; margin-left: -490px; }
.splashBox.allPaymentOpt .payOptTable { width: 100%; }
.payOptTable th, .payOptTable td { text-align: center; color: #333; font-size: 12px; font-family: Arial, sans-serif, Verdana; font-weight: bold; }
.payOptTable th { padding: 10px 0; }
.payOptTable th img { margin: 0 auto; }
.payOptTable td { padding: 25px 0 23px 0; border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; }
.payOptTable td:last-child { border-right: 1px solid #ebebeb; }
.payOptTable tr:last-child td { border-bottom: 1px solid #ebebeb; }
.payOptTable td span { display: inline-block; clear: both; width: 100%; color: #333; font-family: Arial, sans-serif, Verdana; font-weight: bold; font-size: 13px; }
.payOptTable td span.tot { font-weight: normal; color: #808080; }
.payOptTable td:first-child, .payOptTable th:first-child { font-size: 13px; padding: 0 5px; }
.payOptTable td.cashPrice { background: #fefbf4; }

.splashBox.orderDet .orderList { width: 100%; }
.splashBox.orderDet .orderList li { width: 100%; float: left; clear: both; padding: 15px 0; border-bottom: 1px solid #ccc; }
.splashBox.orderDet .orderList li:last-child { border: 0; }
.splashBox.orderDet .orderList li span, .splashBox.orderDet .orderList li h5 { display: inline-block; float: left; text-align: center; font-size: 14px; margin: 0; }
.splashBox.orderDet .orderList li h5 { font-family: 'futuraregular'; font-weight: bold; } 

.splashBox.orderDet .orderList li span:first-child, .splashBox.orderDet .orderList li h5 { width: 40%; text-align: left; padding-left: 10px !important; }
.splashBox.orderDet .orderList li span:nth-child(2) { width: 15%; }
.splashBox.orderDet .orderList li span:nth-child(3) { width: 10%; }
.splashBox.orderDet .orderList li span:nth-child(4) { width: 15%; }
.splashBox.orderDet .orderList li span:last-child { width: 20%; }

.splashBox.orderDet .orderList li.head { background: #fafafa; padding: 0; text-align: center; padding: 0; }
.splashBox.orderDet .orderList li.head span { font-size: 12px; font-weight: bold; border-right: 1px solid #fff; padding: 10px 0; }
.splashBox.orderDet .orderList li.head span:last-child { border: 0; }

.splashBox.conf { width: 600px; margin-left: -300px; }
.splashBox.conf .content { text-align: center; padding-top: 30px; } 
.splashBox.conf .confirm { padding-bottom: 30px; text-align: center; }
.splashBox.conf .confirm a {  }


/*/////////////////// RESULT PAGES //////////////////*/
body.result { background: #fff; }
.resultPage { background: #f5f4f4; border: 1px solid #d2d2d2; padding: 40px 50px 80px 50px; text-align: center; }
.resultPage img { margin: 0 auto; margin-bottom: 30px; }
.resultPage h2 { margin-bottom: 35px; font-size: 20px; }
.resultPage p { margin-bottom: 30px; }
.resultPage .count { margin-bottom: 25px; }
.resultPage .count strong { font-weight: bold; }
.resultPage .redirect { display: inline-block; color: #f1592a; text-decoration: underline; }

.resultPage.successful h2 { color: #44b669; }
.resultPage.error h2 { color: #ed1f24; }





/*///////////////// RESPONSIVE ////////////////*/
@media (max-width:1140px) {
    header { padding: 10px; }
    header .logo { max-width: 140px; }
    header .secureL { max-width: 50px; margin-top: 11px; }
    header .merchantLogo { max-width: 140px; max-height: 60px; }
    
    main { padding: 0 10px; }
    
    .cardSelect { width: 100%; }
    
    
    
    
    
}
@media (max-width:980px) { 
    
    .desktop { display: none; }
    .mobile { display: block; }
    
    .splashBox, .splashBox.allPaymentOpt, .splashBox.conf { width: 94%; margin-left: -47%; }
    .splashBox .content { max-height: 400px; }
    
    aside { width: 100%; float: left; margin-bottom: 25px; }
    section { width: 100%; clear: both; }
     
    aside .bannerBox { margin: 0 auto; }
    aside .bannerBox { display: none; }
    
    aside .box { padding-bottom: 0 !important; }
    aside .box h3 { cursor: pointer; }
    aside .box h3:after { content: ''; position: absolute; right: 10px; top: 5px; width: 11px; height: 16px; background: url('../img/sub-title_arrow.png') no-repeat 0 0; }
    aside .box h3.open:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); }
    .mobilAccord { display: none; padding-bottom: 10px; }

    .resultPage { padding: 30px 30px 50px 30px; }

}
@media (max-width:768px) { 
    body { font-size: 14px; }
    
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
    h3 { font-size: 16px; }
    h4 { font-size: 14px; }
    aside .box span { font-size: 18px; }
    aside .box span.total { font-size: 22px; }
    aside .box p { font-size: 13px; }
    #paymentTypeTab { margin-top: -48px; }
    #paymentTypeTab li a { font-size: 14px; }
    
    .cardSelect .cardB .info { font-size: 14px; }
    .cardBoxes { display: none; }
    .cardForm { width: 100%; max-width: 70%; }
    .pointArea .usedBar { margin-left: 40px; }
    .lastCheckAndPayArea .contract label { display: inline; }
    .checkAndPayBox ul { width: 100%; max-width: 100%; margin-bottom: 30px; }
    .checkAndPayBox .payBtn { clear: both; float: none; margin: 0 auto; display: block; }
    .cardSelect .cardB .editBox { float: left; clear: both; text-align: left; width: auto; padding-left: 10px !important; }
    .cardSelect .cardB .editBox .error { text-align: left; } 
    .cardSelect .cardB .clickArea { width: 100%; }
    
    .splashBox .head { padding: 10px; }
    .splashBox .head h4 { font-size: 14px; }
    .splashBox .head .close { right: 10px; top: 9px; }
    .splashBox .content { padding: 10px; }
    
    .splashBox.allPaymentOpt .content { padding: 5px; }
    .payOptTable td { padding: 15px 0 13px 0; }
    .payOptTable td span { font-size: 11px; }
    .payOptTable td:first-child, .payOptTable th:first-child { padding: 0; font-size: 11px; }
    .payOptTable th img { max-width: 50px; }
    
    .resultPage img { max-width: 120px; }
    .resultPage h2 { font-size: 18px; }

}
@media (max-width:640px) { 
    h1 { clear: both; margin-left: 10px; }
    header { padding: 10px 0; }
    header .logo { max-width: 120px; }
    header .secureL { margin-top: 6px; }
    header .merchantLogo { max-width: 120px; max-height: 60px; }
    aside { margin-bottom: 10px; }
    aside .box { padding: 8px 0 10px 10px; }
    aside .box.orderInfo a { font-size: 13px; }
    aside .box h3 { font-size: 15px; }
    section { padding: 0 10px 20px 10px; }
    #paymentTypeTab { margin-left: 0; }
    #paymentTypeTab li { min-width: 110px; }
    .pointArea .usedBar { margin-left: 0; clear: both; margin-top: 15px; }
    .paymentOpt .onlineOpt { width: 100%; clear: both; float: left; }
    .paymentOpt.twoBox .standardOpt { width: 100%; }
    .splashBox.orderDet .orderList li span, .splashBox.orderDet .orderList li h5 { font-size: 13px; }
    
    .cardSelect .cardB .info { clear: both; margin: 10px 0 0 0; width: 100%; }
    .cardSelect .cardB.expired .info { margin-top: 10px; }
    .cardSelect .cardB .editBox { padding-top: 0; }
    
    .checkAndPayBox ul li { padding: 0 20px 0 5px; }
    
    .resultPage { padding: 20px 15px 30px 15px; }
    .resultPage img { max-width: 100px; margin-bottom: 20px; }
    .resultPage h2 { font-size: 16px; margin-bottom: 20px; }
    
}
@media (max-width:490px) {
    .cardForm { max-width: 100%; }
    .pointArea .usedBar .used { margin-left: 0; clear: both; }
    .splashBox .confirm a { width: 140px; font-size: 13px; }
    section { margin-top: 0px; }
    #paymentTypeTab { margin-top: 10px; }
    #paymentTypeTab li { width: 100%; margin-right: 0; }
    #paymentTypeTab li.active a { border-color: #d2d2d2; }
    .checkAndPayBox ul li { padding-bottom: 10px; }
}

/* Costum below */
@media screen and (min-width: 768px) {
	.confArea {
	  width: 50%;
	}
}
@media screen and (max-width: 768px) {
	.confArea {
	  width: 100%;
	}
}
.confArea {
    float: left;
    clear: both;
    margin: 10px 0 30px 0;
    background: #f5f4f4;
    padding: 7px 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 16px;
}
.confArea .confListing{
   	padding-top: 9px;
}
.confArea .confListing span {
    font-weight: bold;
    padding-left: 5px;
    float:right;
}
.rightAlignedContainer{
	float:right;
}
.confirmSection{
	display:none;
}

.pleaseWaitOverlay{
	display:none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    opacity: 0.85;
    text-align:center;
}

.pleaseWaitOverlay .overlayMsg{
	margin-top: 60px
}

.populatedPoints{
    display: none;
    flex-direction: column;
    width: 100%;
}
.availableBar{
    margin: 10px 0px 10px 0px
}
.price{
    margin: 10px 0px 10px 0px
}

.loading-container{
	position: relative;
	min-height: 50px;
}

.loading-wrapper{
    margin: 10px 0px 10px 0px;
	width:100%;
	display:none;
}
.selectToSeePoints{
    margin: 10px 0px 10px 0px;
}
.loading-wrapper span{
	display:inline-block;
}
.loading{
	height:12px;
	width: 44px;
	background: url('../img/loading.gif') no-repeat 0 0;
	display:inline-block;
}

.point-error{
	border-color: #f1592a !important;
}
/* Autocomplete workaround  */
input[readonly] {
     cursor: text;
     background-color: #fff;
}

.maximum-mobil-cursor-pointer {
	cursor: pointer;
}
.saveBar{
    display:block;
    float: left;
    margin: 12px 0px 0px 0px;
}
.saveBarChck{
    display: flex;
}
.saveBarChck input{
    margin-top: 15px;
}
.saveBarChck label{
    margin-left: 5px;
}

input[name="pan"]::-webkit-outer-spin-button,
input[name="pan"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[name="pan"] {
    -moz-appearance: textfield;
}

.loan-button-container {
    border: 1px solid #cfd1d0;
    border-radius: 10px;
    height: 80px !important;
}

.loan-button-container:has(input:checked) {
    border: 1px solid black;
}

.bankloan-image {
    object-fit: contain;
    width: 50%;
    height: 50%;
    margin-left: 20px;
}

#FIBA_LOAN {
    margin-left: 8px;
    margin-top: 8px;
}

#ISBANK_LOAN {
    margin-left: 8px;
    margin-top: 8px;
}

#KUVEYTTURK_LOAN {
    margin-left: 8px;
    margin-top: 8px;
}

.numbered-text {
    counter-increment: section-counter;
}

.numbered-text::before {
    content: counter(section-counter) ". ";
    font-weight: bold;
}

.fibaTable th {
    border: 1px solid #ddd;
    padding: 8px;
    background-color: #f2f2f2;
}

.fibaTable td {
    border: 1px solid #ddd;
    padding: 8px;
}

.modal-text, .modal-text:hover {
    cursor: pointer;
    text-decoration: underline;
    font-size: 12px;
    float: right;
    margin-right: 4px;
    margin-top: -0.3rem;
    color: black;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.normalColor {
    background: linear-gradient(to bottom,  #89c000 0%,#7db501 50%,#6fa701 100%);
    border: 1px solid #5b9300;
}