@charset "utf-8";

@font-face {
    font-family:SegoeUI;
    src:local("Segoe UI"),url(../../images/checkout/fonts/normal/latest.woff2) format("woff2"),url(../../images/checkout/fonts/normal/latest.woff) format("woff"),url(../../images/checkout/fonts/normal/latest.ttf) format("truetype"),url(../../images/checkout/fonts/normal/latest.svg#web) format("svg");
    font-weight:400
}
@font-face {
    font-family:SegoeUI;
    src:local("Segoe UI Light"),url(../../images/checkout/fonts/light/latest.woff2) format("woff2"),url(../../images/checkout/fonts/light/latest.woff) format("woff"),url(../../images/checkout/fonts/light/latest.ttf) format("truetype"),url(../../images/checkout/fonts/light/latest.svg#web) format("svg");
    font-weight:100
}
@font-face {
    font-family:SegoeUI;
    src:local("Segoe UI Semilight"),local("Segoe UI"),url(../../images/checkout/fonts/semilight/latest.woff2) format("woff2"),url(../../images/checkout/fonts/semilight/latest.woff) format("woff"),url(../../images/checkout/fonts/semilight/latest.ttf) format("truetype"),url(../../images/checkout/fonts/semilight/latest.svg#web) format("svg");
    font-weight:200
}
@font-face {
    font-family:SegoeUI;
    src:local("Segoe UI Semibold"),url(../../images/checkout/fonts/semibold/latest.woff2) format("woff2"),url(../../images/checkout/fonts/semibold/latest.woff) format("woff"),url(../../images/checkout/fonts/semibold/latest.ttf) format("truetype"),url(../../images/checkout/fonts/semibold/latest.svg#web) format("svg");
    font-weight:600
}
@font-face {
    font-family:SegoeUI;
    src:local("Segoe UI Bold"),local("Segoe UI"),url(../../images/checkout/fonts/bold/latest.woff2) format("woff2"),url(../../images/checkout/fonts/bold/latest.woff) format("woff"),url(../../images/checkout/fonts/bold/latest.ttf) format("truetype"),url(../../images/checkout/fonts/bold/latest.svg#web) format("svg");
    font-weight:700
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
body {
    margin: 0;

}
a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 600
}

dfn {
    font-style: italic
}

h1 {
    margin: .67em 0;
    font-size: 2em
}

mark {
    color: #000;
    background: #ff0
}

small,.font-small {
    font-size:85%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    padding: .35em .625em .75em;
    margin: 0 2px;
    border: 1px solid silver
}

legend {
    padding: 0;
    border: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 600
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    /*font-family:SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family:Arial, sans-serif;
    font-size:13px;
    line-height: 1.42857143;
    color: #575757;
    background-color: #fff
}

button,
input,
select,
textarea {
    font-family:Arial, sans-serif;
    font-size: inherit;
    line-height: inherit
}

a {
    color: #337ab7;
    text-decoration: none
}

a:focus,
a:hover {
    color: #23527c;
    text-decoration: underline
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

figure {
    margin: 0
}

img {
    vertical-align: middle
}

.row {
    margin-right: -15px;
    margin-left: -15px
}

input[type=button].btn-block,
input[type=reset].btn-block,
input[type=submit].btn-block {
    width: 100%
}

.collapse {
    display: none
}

.collapse.in {
    display: block
}
.text-danger { color:#D81619 !important;}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

.well blockquote {
    border-color: #ddd;
    border-color: rgba(0, 0, 0, .15)
}

.well-lg {
    padding: 24px;
    border-radius: 6px
}

.well-sm {
    padding: 9px;
    border-radius: 3px
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2
}

.close:focus,
.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family:Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 0;
    line-break: auto
}

.tooltip.in {
    filter: alpha(opacity=90);
    opacity: .9
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.pull-right {
    float: right!important
}

.pull-left {
    float: left!important
}

.hide {
    display: none!important
}



label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 600
}

input[type=search] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input[type=checkbox],
input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal
}

input[type=file] {
    display: block
}

input[type=range] {
    display: block;
    width: 100%
}

select[multiple],
select[size] {
    height: auto
}

input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

output {
    display: block;
    padding-top: 7px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555
}

.form-control,.control-invalid {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;

    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    font-weight:200;
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1
}

.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed
}

textarea.form-control {
    height: auto
}

input[type=search] {
    -webkit-appearance: none
}
.invalidForm .form-control {
    outline: 0;
    border-color: #ff7076;
    border-top-color: #ff5c61;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0),0 1px 0 rgba(255,255,255,0),0 0 2px 0 rgba(255,0,0,0.5);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0),0 1px 0 rgba(255,255,255,0),0 0 2px 0 rgba(255,0,0,0.5);
    -ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0),0 1px 0 rgba(255,255,255,0),0 0 2px 0 rgba(255,0,0,0.5);
    -o-box-shadow: inset 0 1px 2px rgba(0,0,0,0),0 1px 0 rgba(255,255,255,0),0 0 2px 0 rgba(255,0,0,0.5);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0),0 1px 0 rgba(255,255,255,0),0 0 2px 0 rgba(255,0,0,0.5);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=date].form-control,
    input[type=time].form-control,
    input[type=datetime-local].form-control,
    input[type=month].form-control {
        line-height: 34px
    }
    .input-group-sm input[type=date],
    .input-group-sm input[type=time],
    .input-group-sm input[type=datetime-local],
    .input-group-sm input[type=month],
    input[type=date].input-sm,
    input[type=time].input-sm,
    input[type=datetime-local].input-sm,
    input[type=month].input-sm {
        line-height: 30px
    }
    .input-group-lg input[type=date],
    .input-group-lg input[type=time],
    .input-group-lg input[type=datetime-local],
    .input-group-lg input[type=month],
    input[type=date].input-lg,
    input[type=time].input-lg,
    input[type=datetime-local].input-lg,
    input[type=month].input-lg {
        line-height: 46px
    }
}

.form-group {
    margin-bottom: 15px
}

.checkbox,
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkbox label,
.radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer
}

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px
}

.checkbox+.checkbox,

.radio+.radio {
    margin-top: -5px
}

.checkbox-inline,
.radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer
}

.checkbox-inline+.checkbox-inline,
.radio-inline+.radio-inline {
    margin-top: 0;
    margin-left: 10px
}

fieldset[disabled] input[type=checkbox],
fieldset[disabled] input[type=radio],
input[type=checkbox].disabled,
input[type=checkbox][disabled],
input[type=radio].disabled,
input[type=radio][disabled] {
    cursor: not-allowed
}

.checkbox-inline.disabled,
.radio-inline.disabled,
fieldset[disabled] .checkbox-inline,
fieldset[disabled] .radio-inline {
    cursor: not-allowed
}

.checkbox.disabled label,
.radio.disabled label,
fieldset[disabled] .checkbox label,
fieldset[disabled] .radio label {
    cursor: not-allowed
}

.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0
}

.form-control-static.input-lg,
.form-control-static.input-sm {
    padding-right: 0;
    padding-left: 0
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

select.input-sm {
    height: 30px;
    line-height: 30px
}

select[multiple].input-sm,
textarea.input-sm {
    height: auto
}

.form-group-sm .form-control {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.form-group-sm select.form-control {
    height: 30px;
    line-height: 30px
}

.form-group-sm select[multiple].form-control,
.form-group-sm textarea.form-control {
    height: auto
}

.form-group-sm .form-control-static {
    height: 30px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

select.input-lg {
    height: 46px;
    line-height: 46px
}

select[multiple].input-lg,
textarea.input-lg {
    height: auto
}

.form-group-lg .form-control {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px
}

.form-group-lg select.form-control {
    height: 46px;
    line-height: 46px
}

.form-group-lg select[multiple].form-control,
.form-group-lg textarea.form-control {
    height: auto
}

.form-group-lg .form-control-static {
    height: 46px;
    min-height: 38px;
    padding: 11px 16px;
    font-size: 18px;
    line-height: 1.3333333
}

.has-feedback {
    position: relative
}

.has-feedback .form-control {
    padding-right: 42.5px
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none
}

.form-group-lg .form-control+.form-control-feedback,
.input-group-lg+.form-control-feedback,
.input-lg+.form-control-feedback {
    width: 46px;
    height: 46px;
    line-height: 46px
}

.form-group-sm .form-control+.form-control-feedback,
.input-group-sm+.form-control-feedback,
.input-sm+.form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.has-success .checkbox,
.has-success .checkbox-inline,
.has-success .control-label,
.has-success .help-block,
.has-success .radio,
.has-success .radio-inline,
.has-success.checkbox label,
.has-success.checkbox-inline label,
.has-success.radio label,
.has-success.radio-inline label {
    color: #3c763d
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168
}

.has-success .input-group-addon {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #3c763d
}

.has-success .form-control-feedback {
    color: #3c763d
}

.has-warning .checkbox,
.has-warning .checkbox-inline,
.has-warning .control-label,
.has-warning .help-block,
.has-warning .radio,
.has-warning .radio-inline,
.has-warning.checkbox label,
.has-warning.checkbox-inline label,
.has-warning.radio label,
.has-warning.radio-inline label {
    color: #8a6d3b
}

.has-warning .form-control {
    border-color: #8a6d3b;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-warning .form-control:focus {
    border-color: #66512c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b
}

.has-warning .input-group-addon {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #8a6d3b
}

.has-warning .form-control-feedback {
    color: #8a6d3b
}

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label {
    color: #a94442
}

.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.has-error .form-control:focus {

    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483
}

.has-error .input-group-addon {
    color: #a94442;
    background-color: #f2dede;
    border-color: #a94442
}

.has-error .form-control-feedback {
    color: #a94442
}

.has-feedback label~.form-control-feedback {
    top: 25px
}

.has-feedback label.sr-only~.form-control-feedback {
    top: 0
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373; font-size:12px;
}

@media (min-width:768px) {
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle
    }
    .form-inline .form-control-static {
        display: inline-block
    }
    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle
    }
    .form-inline .input-group .form-control,
    .form-inline .input-group .input-group-addon,
    .form-inline .input-group .input-group-btn {
        width: auto
    }
    .form-inline .input-group>.form-control {
        width: 100%
    }
    .form-inline .control-label {
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .checkbox,
    .form-inline .radio {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle
    }
    .form-inline .checkbox label,
    .form-inline .radio label {
        padding-left: 0
    }
    .form-inline .checkbox input[type=checkbox],
    .form-inline .radio input[type=radio] {
        position: relative;
        margin-left: 0
    }
    .form-inline .has-feedback .form-control-feedback {
        top: 0
    }
}

.form-horizontal .checkbox,
.form-horizontal .checkbox-inline,
.form-horizontal .radio,
.form-horizontal .radio-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0
}

.form-horizontal .checkbox,
.form-horizontal .radio {
    min-height: 27px
}

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px
}

@media (min-width:768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right
    }
}

.form-horizontal .has-feedback .form-control-feedback {
    right: 15px
}

@media (min-width:768px) {
    .form-horizontal .form-group-lg .control-label {
        padding-top: 11px;
        font-size: 18px
    }
}

@media (min-width:768px) {
    .form-horizontal .form-group-sm .control-label {
        padding-top: 6px;
        font-size: 12px
    }
}
/* CSS Document */
.overlayView {
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 99;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    perspective: 800;
    -webkit-perspective: 800;
    opacity: 1;
    background: rgba(0,0,0,0.6);
}
.overlayView>a.testMode {
    position: fixed;
    top: 14px;
    right: 14px;
    display: block;
    background: #f7e633;
    color: #363636;
    font-weight: 600;
    font-size: 11px;
    text-decoration: none;
    height: 26px;
    padding: 0 9px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    line-height: 26px;
}
.checkout-box {
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
    width:302px;
    -webkit-box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.9);
    box-shadow: 0px 6px 15px 0 rgba(0,0,0,0.9);
    background-color: #f5f5f7;
}
.checkout-box .checkout-close { position:absolute; width:21px; height:21px; display:block;right:5px; top:8px}
.checkout-box .checkout-close:after {content:url(../../images/checkout/close.png); margin:0px 3px}
.checkout-box a.checkout-close:hover { text-decoration:none}
.checkout-box .merchant-image {
    position: absolute;
    top: -34px;
    left: 53%;
    margin-left: -45px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 1px 2px 1px rgba(0,0,0,0.3);
    width:70px; height:70px; z-index:1000; background:#ffffff;
}
.checkout-box .merchant-image>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;

}
.checkout-box .checkout-header {
    padding: 40px 20px 10px 20px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-image: -webkit-linear-gradient(#f5f5f7,#e9e9ea);
    background-image: -moz-linear-gradient(#f5f5f7,#e9e9ea);
    background-image: -ms-linear-gradient(#f5f5f7,#e9e9ea);
    background-image: -o-linear-gradient(#f5f5f7,#e9e9ea);
    background-image: linear-gradient(#f5f5f7,#e9e9ea);
    border-bottom:1px solid #dcdcdc;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.checkout-box .flatbg {
    background:#e8e9eb;
    /*background:#f1f4f5;*/
    border-bottom:none;
}

.loginbar { font-size:13px; font-weight:normal; border-bottom:1px solid #dcdcdc; text-align:center; padding:6px 0px; background:#e9e9ea}
.loginbar span { border-right:1px solid #dcdcdc; display:inline-block; padding-right:7px; margin-right:5px}
.checkout-header h3 {
    margin-top: 0;
    margin-bottom:0px;
    font-size:16px;
    font-weight: 600;
    text-align:center;
}
.checkout-header p.service-name { margin:0px; padding-bottom:0px; text-align:center}
.checkout-body { padding:25px 25px 10px; border-top:0px solid #ffffff}
.checkout-body h3.subtitle { margin:0px 0px 10px; font-size:14px; color:#666666; font-weight:normal}
.checkout-iframe { padding:0px;}
.checkout-iframe iframe { border:none; width:100%; height:250px; overflow-y:scroll}
.input-email,.card-number,.card-date,.card-cvc,.input-address,.input-captcha,.card-holdername, .input-country { position:relative}
.input-email input[type=email],.card-infor .card-number input,.card-infor .card-date input,.card-infor .card-cvc input,.input-address input[type=text],.input-address input[type=tel], .input-phone input[type=tel], .input-phone input[type=text],.card-holdername input[type=text], .input-fullName input[type=text] { padding-left:34px}
.bank-issues select.form-control {padding-left: 29px; color: #808080; border-top: 0px; border-radius: 0px 0px 3px 3px;}
.input-email:before,.card-number:before,.card-date:before,.card-cvc:before,.input-mobile:before,.input-address:before,.input-phone:before,.card-holdername:before,.bank-select:before, .input-fullName:before, .input-country:before {position:absolute; left:11px; top:9px; z-index:12; width:25px; content: ""; }
.card-number input.form-control,.card-holdername input.form-control {border-radius:0px; border-bottom:1px solid rgba(255,255,255,0);font-family:Arial, sans-serif;}
.no-border input.form-control { border-radius:0px}
.card-number input.form-control:focus,.card-holdername input.form-control:focus {border-bottom:1px solid #66afe9; box-shadow:inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6)}
.input-email .loading,.input-email .closing,.input-captcha .checkoutcaptcha { position:absolute; top:12px; right:12px}
.input-captcha .checkoutcaptcha {top:2px; right:4px}
.input-captcha .checkoutcaptcha img { width:86px; height:30px}
.input-email .closing { top:7px; right:3px}
.card-holdername:before {content:url(../../images/checkout/user.svg); display:block; width:16px; height:14px}
.input-fullName:before {content:url(../../images/checkout/user.svg); display:block; width:16px; height:14px}
.input-country:before {content:url(../../images/checkout/global.svg); display:block; width:16px; height:14px}
.input-email:before {content:url(../../images/checkout/email.svg); display:block; width:16px; height:14px}
/*.identity-card-number:before {content:url(../../images/checkout/identity-card-number.svg);display:block; width:16px; height:14px}*/
.card-number:before {content:url(../../images/checkout/credit-card.svg);display:block; width:16px; height:14px}
.card-date:before {content:url(../../images/checkout/calendar.svg); display:block; width:14px; height:14px}
.card-cvc:before {content:url(../../images/checkout/lock.svg); display:block; width:14px; height:14px; left:59%}
.input-mobile:before,.input-phone:before {content:url(../../images/checkout/mobile.svg); display:block; width:16px; height:14px; left:9px}
.input-phone-flag .intl-tel-input .flag-container{right:22px}
.input-address:before {content:url(../../images/checkout/location-pin.svg); display:block; width:14px; height:14px; top:8px; left:9px}
.bank-select:before {content:url(../../images/checkout/bank-icon.svg); display:block; width:14px; height:14px; top:8px; left:11px}
.card-infor .card-number,.card-infor .card-date { margin-bottom:0px}
.card-infor .card-holdername input.form-control {border-radius:3px 3px 0px 0px;}
.card-infor .input-address input.form-control {border-radius:0px 0px 3px 3px;}
.card-infor .card-date input { width:55%; float:left; border-radius:0px 0px 0px 3px; border-right: 0px}
.bank-issues .card-date input { width:100%; float:none; border-radius:0px 0px 0px 3px; border-right:1px solid #CCC;}

.card-infor .card-cvc input.form-control { width:45%; float:left;border-radius:0px 0px 3px 0px}
.card-infor .zip-code .card-date input.form-control,.card-infor .bank-issues .card-date input.form-control,.card-infor .zip-code .card-cvc input.form-control { border-radius: 0px }
.remember-me,.verificode,.alepayTerm,.installment { padding:5px 10px 8px 30px; line-height:5px; line-height:25px; position:relative; display:block; width:100%; border-radius:3px; color:#5b5b65}
.remember-me { padding:0px 0px 0px 20px}
.installment { padding-bottom:0px}
.installment { color:#E00000; text-transform:uppercase; padding-left:10px}
.alepayTerm { border:1px solid #C7C7C7; padding:5px 10px 5px 0px; line-height:18px; margin-bottom:20px}
.alepayTerm label.remember-me { font-weight:normal; line-height:18px; padding-bottom:0px}
.alepayTerm label.remember-me input { top:5px}
i.payment-success { background:url(../../images/checkout/checkmark_circle.svg); display:block; width:30px; height:30px; background-size:30px 30px; margin:-6px auto;}
i.icon-succes,i.icon-timeOver,i.icon-error,i.icon-infor,i.icon-review { background:url(../../images/checkout/success.png); display:block; width:60px; height:60px; background-size:60px 60px; margin-bottom:20px}
i.icon-timeOver {background:url(../../images/checkout/WACE-UP_Icon_Time.png);width:60px; height:60px; background-size:60px 60px}
i.icon-error {background:url(../../images/checkout/error.png);width:60px; height:60px; background-size:60px 60px}
i.icon-infor {background:url(../../images/checkout/infor.png);width:60px; height:60px; background-size:60px 60px}
i.icon-review {background:url(../../images/checkout/warning.png);width:60px; height:60px; background-size:60px 60px}

.verificode,.verificode-invalid { border:1px solid #C7C7C7; text-align:center; font-size:13px; padding:5px 10px 8px; font-weight:normal;box-shadow: 0 1px 0 0 hsla(0,0%,100%,.9);}
.verificode-invalid { border:1px solid #CF1A1D; border-radius:3px}
.verificode .loader { color:#333333; margin-right:10px; display:inline-block; margin-top:10px}
.form-guide { font-weight:normal; font-size:13px}
.form-guide h3 { margin:0px; font-size:14px}
.remember-me input,.installment input { position:absolute; left:10px; top:8px;}
.remember-me input { left:0px; top:2px}
.installment input { border:1px solid #23527c;}
#rememberme,#InstallmentBox {padding:8px 10px 40px; margin-top:-5px; position:relative; font-size:12px; border-top:1px solid #dcdcdc}
#InstallmentBox { padding-bottom:0px; padding-top:5px}
#InstallmentBox img.bankAccept { max-width:220px; display:block; margin:0px auto}
.rememberme-cont { position:relative}
.input-mobile,.selectInstallments { margin:0px -11px -1px; width:253px; font-weight:600; position:absolute; bottom:0px}
.selectInstallments { margin-top:10px; position:inherit}
.input-mobile span.codecountry { position:absolute; bottom:7px; left:30px; font-size:14px;}
.input-mobile input { padding-left:25px; text-align:left}
.selectInstallments select.form-control { border:1px solid #ED8600; font-size:13px; border-radius:0px}
.selectInstallments select.form-control:last-child { border-radius:0px 0px 3px 3px; margin-top:-1px}
.paymentButton,.backhomeButton,.installmentBtn,.btn-alt {color: #fff; background-color:#3c8dbc; display: block; width: 100%; border:1px solid #3c8dbc; padding:8px 10px; border-radius:4px; font-weight:600; font-size:14px; text-align:center}
.paymentButton:hover,a.paymentButton:hover,a.paymentButton:active,a.paymentButton:visited { background-color: #286090; text-decoration:none; color:#ffffff; outline:none}
.paymentSuccess,.paymentSuccess:hover { background:#346E00; border:1px solid #346E00}
.backhomeButton {background:#EFEFEF; border:1px solid #dcdcdc; color:#7b7b7b}
.installmentBtn { background:#ED8600;border: 1px solid #ED8600;}
.rememberme-cont .flag,.card-number .card-type {position: absolute;top:7px;right: 12px; width: 23px; height: 17px; pointer-events: none;}
.rememberme-cont .flag img {transform: scale(1); width:30px}
.card-number .card-type img {transform: scale(1); width:30px}
.card-infor { margin-bottom:25px}
.card-infor .prefill>input {
    background-image:url(../../images/checkout/black-dots.png);
    background-size: 96px 5px;
    background-repeat: no-repeat;
    background-position: 37px 13px;
    padding-left: 141px;
}
.card-infor .three-dots>input {
    background-image:url(../../images/checkout/cvc-dots-three.png);
    background-size: 19px 5px;
    background-repeat: no-repeat;
    background-position: 34px 15px;
}
.loader {
    color:#286090;
    font-size: 12px;
    text-indent: -9999em;
    overflow: hidden;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.0s infinite ease;
    animation: load6 0.7s infinite ease;
}
.closingBtn {width: 21px;
             height: 21px;
             background-image: url(../../images/checkout/close_btn.png);
             background-size: 13px;
             background-position: 2px;
             background-repeat:no-repeat;
             right: 6px;
             top: 6px;}
.loading-page { text-align:center}
.loading-page .loader { font-size:3px;width: 45px; height: 45px;}
.loading-page p {}
.paymentButton .loader { color:#fff; margin:3px auto}
.border-btm {box-shadow: 0 1px 0 0 hsla(0,0%,100%,.9);border-radius: 0px 0px 3px 3px;}

@-webkit-keyframes load6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes load6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

.shake {
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: panelShakeAnimation;
    -moz-animation-duration: 400ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-name: panelShakeAnimation;
}

.input-OTP input.form-control,.input-OTP2 input.form-control { width:14%; display:table-cell; margin:0px; text-align:center; padding:0px 0px; font-size:18px; height:45px; margin-right:4px}
.input-OTP2 input.form-control {width: 11%;margin-right: 0px;}
.input-OTP3 input.form-control {width: 100%;margin-right: 0px; text-align: center; font-size: 18px; height:45px;}
.input-OTP input.form-control:last-child,.input-OTP2 input.form-control:last-child { margin-right:0px}
.moneyCharge input.form-control { width:100%; text-align:center; font-size:18px; hanging-punctuation:45px;}
.text-gray { color:#7b7b7b}
.overlayView .brandingLogoView { position: fixed; left: 14px; bottom: 14px;}
.checkou-wrap {position: relative; margin:0 auto; width:305px;}
.Overlay {
    /*position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.6);
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    z-index: -1;*/
}
.Overlay-Badge--testMode {
    color: #363636;
    border-radius: 5px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    padding-left: 9px;
    padding-right: 9px;
    height: 26px;
    line-height: 26px;
}

.Overlay-Badge--topRight {
    position: fixed;
    top: 14px;
    right: 24px; width:85px;
}
.Overlay-Badge--topRight img,.Overlay-Badge--topCenter img {width:100%}
.Overlay-Badge--topCenter {
    position: fixed;
    top: 20px;
    width:110px; left:46.3%
}
.Overlay-Badge--bottomLeft {
    position: fixed;
    bottom: 14px;
    left: 14px;
}
.legalLinksView {
    position: relative;
    width: 100%;
    text-align:right; color:rgba(255, 255, 255, 0.7); font-size:12px; line-height:24px;
}
.legalLinksView span { display:block; padding-right:15px}
.legalLinksView .alepayLogo { position:absolute; left:0px; width:70px}
.legalLinksView .alepayLogo a,.legalLinksView .alepayLogo a:visited { outline:none}
.legalLinksView .nganluongLogo { left:inherit; right:0px}
.legalLinksView .alepayLogo img,.legalLinksView .nganluongLogo img { width:100%}
.legalLinksView a {
    color: #d2d2d3;
    font-size: 12px;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    padding: 0 10px;
}
.legalLinksView a:first-child {
    border-right: 1px solid #a1a1a5;
}

.checkout-box .button-navBack, .checkout-box .button-navClose,.checkout-box .button-PopoverClose {
    background: no-repeat;
    cursor: pointer;
    position: absolute;
}
.checkout-box .button-navClose {
    width: 25px;
    height: 25px;
    background-image:url(../../images/checkout/close.png);
    background-size: 17px;
    background-position: 4px 4px;
    right: 6px;
    top: 6px;
}
.checkout-box .button-PopoverClose {
    width: 25px;
    height: 25px;
    background-image: url(../../images/checkout/close_btn.png);
    background-size: 11px 15px;
    background-position: 5px 4px;
    left: 4px;
    top: 7px;
}
.checkout-box .button-navBack {
    width: 24px;
    height: 24px;
    background-image: url(../../images/checkout/back.png);
    background-size: 16px;
    background-position: 4px 4px;
    left: 7px;
    top: 7px;
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.card-number .Textbox-iconLeft {
    position: absolute;
    top: 0;
    bottom: 0;
}
.Icon--desktop {
    width: 30px;
    height: 30px;
}
.card-number .Textbox-iconLeft .Icon {
    display: block;
    height: 100%;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:before,
.btn-group-vertical>.btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
    display: table;
    content: " "
}

.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical>.btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
    clear: both
}
.hidden { display:none}

#sdt,#installment,#BankLinked { position:relative; padding-bottom:0px;border: 1px solid #C7C7C7;border-radius:3px;}
#sdt .fbutton,#installment .fbutton { position:relative; z-index:2; background:#F5F5F7;border-radius:3px;}
#installment,#installment .fbutton { background:#ffffff}
#installment { border:1px solid #ED8600; color:#333333; text-align:center}
#installment a,#installment a:visited,.remember-me a,.remember-me a:visited { color:#286090; text-decoration:underline}
#sdt .pullDown,#installment .pullDown { position:relative; z-index:0}
.fbutton label {margin-bottom: 0px;font-size: 13.5px;font-weight: 200;}
.fbutton label.small {font-size: 11.5px}
.expandMobi .rememberme-cont { display:block;}
.rememberme-cont {display:none}
#BankLinked { padding-top:3px; padding-bottom:3px; margin-bottom:25px}
#BankLinked h4 { margin-top:5px; padding-left:10px; margin-bottom:10px}
#BankLinked label { display:block; font-size:13px; padding:5px 10px; margin-bottom:0px; font-weight:normal}
#BankLinked label input { margin-top:2px; vertical-align:top; margin-right:8px}


/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
slideDown
==============================================
*/


.slideDown{
    animation-name: slideDown;
    -webkit-animation-name: slideDown;	

    animation-duration: 1s;	
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;	
    -webkit-animation-timing-function: ease;	

    visibility: visible !important;						
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(-4%);
    }
    80%{
        transform: translateY(4%);
    }
    95%{
        transform: translateY(-2%);
    }			
    100% {
        transform: translateY(0%);
    }		
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%);
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(-4%);
    }
    80%{
        -webkit-transform: translateY(4%);
    }
    95%{
        -webkit-transform: translateY(-2%);
    }			
    100% {
        -webkit-transform: translateY(0%);
    }	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp{
    animation-name: slideUp;
    -webkit-animation-name: slideUp;	

    animation-duration: 1s;	
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;	
    -webkit-animation-timing-function: ease;

    visibility: visible !important;			
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }			
    100% {
        transform: translateY(0%);
    }	
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50%{
        -webkit-transform: translateY(-8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(-4%);
    }
    95%{
        -webkit-transform: translateY(2%);
    }			
    100% {
        -webkit-transform: translateY(0%);
    }	
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;	

    animation-duration: 1s;	
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;	
    -webkit-animation-timing-function: ease-in-out;		

    visibility: visible !important;	
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }			
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }			
    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
slideRight
==============================================
*/


.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight;	

    animation-duration: 1s;	
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;	
    -webkit-animation-timing-function: ease-in-out;		

    visibility: visible !important;	
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }			
    100% {
        transform: translateX(0%);
    }	
}

@-webkit-keyframes slideRight {
    0% {

        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }			
    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;	

    animation-duration: 1.6s;	
    -webkit-animation-duration: 1.6s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease -out;

    visibility: visible !important;	
}

@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }
    30%{
        transform: translateY(-8%) scaleX(0.5);
    }	
    40%{
        transform: translateY(2%) scaleX(0.5);
    }
    50%{
        transform: translateY(0%) scaleX(1.1);
    }
    60%{
        transform: translateY(0%) scaleX(0.9);		
    }
    70% {
        transform: translateY(0%) scaleX(1.05);
    }			
    80%{
        transform: translateY(0%) scaleX(0.95);		
    }
    90% {
        transform: translateY(0%) scaleX(1.02);
    }	
    100%{
        transform: translateY(0%) scaleX(1);		
    }
}

@-webkit-keyframes slideExpandUp {
    0% {
        -webkit-transform: translateY(100%) scaleX(0.5);
    }
    30%{
        -webkit-transform: translateY(-8%) scaleX(0.5);
    }	
    40%{
        -webkit-transform: translateY(2%) scaleX(0.5);
    }
    50%{
        -webkit-transform: translateY(0%) scaleX(1.1);
    }
    60%{
        -webkit-transform: translateY(0%) scaleX(0.9);		
    }
    70% {
        -webkit-transform: translateY(0%) scaleX(1.05);
    }			
    80%{
        -webkit-transform: translateY(0%) scaleX(0.95);		
    }
    90% {
        -webkit-transform: translateY(0%) scaleX(1.02);
    }	
    100%{
        -webkit-transform: translateY(0%) scaleX(1);		
    }
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
    animation-name: expandUp;
    -webkit-animation-name: expandUp;	

    animation-duration: 0.7s;	
    -webkit-animation-duration: 0.7s;

    animation-timing-function: ease;	
    -webkit-animation-timing-function: ease;		

    visibility: visible !important;	
}

@keyframes expandUp {
    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60%{
        transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        transform: translateY(3%);
    }	
    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }	
}

@-webkit-keyframes expandUp {
    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60%{
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        -webkit-transform: translateY(3%);
    }	
    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
    }	
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out;	
    -webkit-animation-timing-function: ease-in-out;		

    visibility: visible !important;	
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;		
    }
    60% {
        transform: scale(1.1);	
    }
    80% {
        transform: scale(0.9);
        opacity: 1;	
    }	
    100% {
        transform: scale(1);
        opacity: 1;	
    }		
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;		
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1;	
    }	
    100% {
        -webkit-transform: scale(1);
        opacity: 1;	
    }		
}

/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen;	

    animation-duration: 1.2s;	
    -webkit-animation-duration: 1.2s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    visibility: visible !important;	
}

@keyframes expandOpen {
    0% {
        transform: scale(1.8);		
    }
    50% {
        transform: scale(0.95);
    }	
    80% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(0.98);
    }	
    100% {
        transform: scale(1);
    }			
}

@-webkit-keyframes expandOpen {
    0% {
        -webkit-transform: scale(1.8);		
    }
    50% {
        -webkit-transform: scale(0.95);
    }	
    80% {
        -webkit-transform: scale(1.05);
    }
    90% {
        -webkit-transform: scale(0.98);
    }	
    100% {
        -webkit-transform: scale(1);
    }					
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance{
    animation-name: bigEntrance;
    -webkit-animation-name: bigEntrance;	

    animation-duration: 1.6s;	
    -webkit-animation-duration: 1.6s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    visibility: visible !important;			
}

@keyframes bigEntrance {
    0% {
        transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
        opacity: 1;
    }
    45% {
        transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
        opacity: 1;
    }	
    75% {
        transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
        opacity: 1;
    }	
    100% {
        transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }		
}

@-webkit-keyframes bigEntrance {
    0% {
        -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
        opacity: 0.2;
    }
    30% {
        -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
        opacity: 1;
    }
    45% {
        -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
        opacity: 1;
    }	
    75% {
        -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
        opacity: 1;
    }
    90% {
        -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
        opacity: 1;
    }	
    100% {
        -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
        opacity: 1;
    }				
}

/*
==============================================
hatch
==============================================
*/

.hatch{
    animation-name: hatch;
    -webkit-animation-name: hatch;	

    animation-duration: 2s;	
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-in-out;	
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 

    visibility: visible !important;		
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    }	
    65% {
        transform: rotate(1deg);
    }	
    80% {
        transform: rotate(-1deg);
    }		
    100% {
        transform: rotate(0deg);
    }									
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }	
    65% {
        -webkit-transform: rotate(1deg);
    }	
    80% {
        -webkit-transform: rotate(-1deg);
    }		
    100% {
        -webkit-transform: rotate(0deg);
    }		
}


/*
==============================================
bounce
==============================================
*/


.bounce{
    animation-name: bounce;
    -webkit-animation-name: bounce;	

    animation-duration: 1.6s;	
    -webkit-animation-duration: 1.6s;

    animation-timing-function: ease;	
    -webkit-animation-timing-function: ease;	

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 	
}

@keyframes bounce {
    0% {
        transform: translateY(0%) scaleY(0.6);
    }
    60%{
        transform: translateY(-100%) scaleY(1.1);
    }
    70%{
        transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }
    80%{
        transform: translateY(0%) scaleY(1.05) scaleX(1);
    }	
    90%{
        transform: translateY(0%) scaleY(0.95) scaleX(1);
    }				
    100%{
        transform: translateY(0%) scaleY(1) scaleX(1);
    }	
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translateY(0%) scaleY(0.6);
    }
    60%{
        -webkit-transform: translateY(-100%) scaleY(1.1);
    }
    70%{
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
    }
    80%{
        -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
    }	
    90%{
        -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
    }				
    100%{
        -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
    }		
}


/*
==============================================
pulse
==============================================
*/

.pulse{
    animation-name: pulse;
    -webkit-animation-name: pulse;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;		
    }
    50% {
        transform: scale(1);
        opacity: 1;	
    }	
    100% {
        transform: scale(0.9);
        opacity: 0.7;	
    }			
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;		
    }
    50% {
        -webkit-transform: scale(1);
        opacity: 1;	
    }	
    100% {
        -webkit-transform: scale(0.95);
        opacity: 0.7;	
    }			
}

/*
==============================================
floating
==============================================
*/

.floating{
    animation-name: floating;
    -webkit-animation-name: floating;

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);	
    }
    50% {
        transform: translateY(8%);	
    }	
    100% {
        transform: translateY(0%);
    }			
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);	
    }
    50% {
        -webkit-transform: translateY(8%);	
    }	
    100% {
        -webkit-transform: translateY(0%);
    }			
}

/*
==============================================
tossing
==============================================
*/

.tossing{
    animation-name: tossing;
    -webkit-animation-name: tossing;	

    animation-duration: 2.5s;	
    -webkit-animation-duration: 2.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
    0% {
        transform: rotate(-4deg);	
    }
    50% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(-4deg);	
    }						
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-4deg);	
    }
    50% {
        -webkit-transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(-4deg);	
    }				
}

/*
==============================================
pullUp
==============================================
*/

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;	

    animation-duration: 1.1s;	
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%; 		
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }				
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }							
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }				
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }		
}

/*
==============================================
pullDown
==============================================
*/

.pullDown{
    animation-name: pullDown;
    -webkit-animation-name: pullDown;	

    animation-duration: 1.1s;	
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%; 		
}

@keyframes pullDown {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }				
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }							
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }				
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }		
}

/*
==============================================
stretchLeft
==============================================
*/

.stretchLeft{
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%; 
}

@keyframes stretchLeft {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }				
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }							
}

@-webkit-keyframes stretchLeft {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }				
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }		
}

/*
==============================================
stretchRight
==============================================
*/

.stretchRight{
    animation-name: stretchRight;
    -webkit-animation-name: stretchRight;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;	

    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%; 		
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }				
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }							
}

@-webkit-keyframes stretchRight {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }				
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }		
}

/** LINK CARD ***/
.link-card {
    margin-bottom: 10px;
}
.link-card ul {
    padding:0px; margin:10px 0px 10px; list-style:none 
}
.link-card ul li {
    width: 120px;
    float: left; margin-left:9px;
}
.link-card ul li:nth-child(2n+1) { margin-left:0px}
.link-card .card-item {
    float: none;
    margin: 5px auto;
    width: 100%;
    height: 65px;
    background: #fff; 
    border-radius: 2px;box-shadow: 0px 1px 2px 0px #BCBCBC; display:table;
}
.link-card .card-item a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.link-card .card-item a img {
    max-width: 100%;
}
.linked-wrap,.subscription-wrap { overflow-y:scroll; height:110px; border:1px solid #dcdcdc; background:#ffffff; margin-bottom:20px; border-radius:3px; padding:0px 8px}
.subscription-wrap { height: 90px; padding: 8px; font-size: 11px; line-height: 16px; margin-bottom: 10px}
.link-card-guide ul { list-style:none; margin:0px; padding:0px}
.link-card-guide ul li { list-style:decimal; list-style-position:outside; margin-left:45px; padding-left:0px; margin-bottom:8px; position:relative}
.link-card-guide ul li:before { position:absolute; content:"Bước"; left:-45px; font-size:11px; font-style:italic}
.link-card-guide img.card-link { margin:-15px auto 0px auto; width:100px; display:block}

.line-seprate { text-align:center; font-style:italic; margin-bottom:22px; position:relative;border-bottom:1px dashed #CFCFCF; height:11px}
.line-seprate span {background:#f5f5f7; padding-left:5px; padding-right:5px}
.bankAccept-logo { text-align:center; font-size:13px; background:#ffffff; border-bottom:1px dashed #B0B0B0; padding-bottom:10px}
.bankAccept-logo img { display:block; margin:0px auto; max-width:80px}
.btn-alt,a.btn-alt:hover,a.btn-alt:visited { background-color:#f5f5f7; border:2px solid #286090; color:#286090; text-decoration:none}
.checkout-inner { margin-top:45px}

.MethodTab-wrapper {
    width: 100%;
    position: relative;
    background-color: #e8e9eb; padding-top:15px;
}
.MethodTab-tabList {
    list-style: none;
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 33px;
    background-image: linear-gradient(#e8e9eb,#dedede);
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.MethodTab-tabListItem {
    display: table-cell;
    text-align: center;
    padding-bottom: 0;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
}
.Tab-selected {
    background-color: #f5f5f7;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #d2d2d3;
    box-shadow: inset 0 1px 0 0 #fff;
}
.Tab-first {
    border-left: 0;
}
.Tab-last {
    border-right: 0;
}
.Tab-selected::after {
    content: "";
    z-index: 10;
    background-color: #f5f5f7;
    height: 5px;
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
}
.Tab-selectedNext::before {
    content: "";
    z-index: 10;
    background-color: #f5f5f7;
    height: 5px;
    width: 10px;
    position: absolute;
    bottom: -2px;
    left: -2px;
}
.Tab-selectedNext::after {
    border-bottom-left-radius: 5px;
    content: "";
    z-index: 100;
    background-color: #dfdfdf;
    border-bottom: 1px solid #d2d2d3;
    border-left: 1px solid #d2d2d3;
    box-shadow: 0 1px 0 0 #fff;
    height: 10px;
    width: 10px;
    position: absolute;
    bottom: 0;
    left: -1px;
}
.Tab-selectedPrev::before {
    content: "";
    z-index: 10;
    background-color: #f5f5f7;
    height: 5px;
    width: 10px;
    position: absolute;
    right: -2px;
    bottom: -2px;
}
.Tab-selectedPrev::after {
    border-bottom-right-radius: 5px;
    content: "";
    z-index: 100;
    background-color: #dfdfdf;
    border-bottom: 1px solid #d2d2d3;
    border-right: 1px solid #d2d2d3;
    box-shadow: 0 1px 0 0 #fff;
    height: 10px;
    width: 10px;
    position: absolute;
    bottom: 0;
    right: -1px;
}
.MethodTab-edge {
    border-top: 1px solid #fff;
    box-shadow: 0 -1px 0 0 #d2d2d3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 100%;
    height: 4px;
    background-color: #f5f5f7;
    margin-bottom: -3px;
}
ul.MethodTab-tabList a,ul.MethodTab-tabList a:hover,ul.MethodTab-tabList a:active {text-decoration:none; outline:none; color:#333333}


.MethodtabCont { display:none}
#installmentwrap { display:block}
.orderInfo { padding-top:7px; position:relative}
.orderInfo span { float:right; border-bottom:1px dashed #bcbcbc; padding-bottom:3px; display:block; cursor:pointer; font-weight:600; padding-right:13px; position:relative}
.orderInfo-wrap,.OTP-infor,.policy-infor,.loading-box2 {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffffff;
    background-clip: padding-box;
    box-shadow: 1px 1px 1px 0 #ccc;
    max-height: 450px;
    box-shadow: 0 1px 4px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.3);
    -moz-box-shadow: 0 1px 2px 1px rgba(0,0,0,.3);
    list-style-type: none;
    position:absolute;
    z-index:333333; top:35px; margin:0px -20px;
}
.OTP-infor { width:302px; height:250px; margin:0px; bottom:0px; top:inherit;border-radius:0px 0px 6px 6px; text-align:center}
.policy-infor,.loading-box2 { width:100%; height:100%; margin:0px; bottom:1px; top:inherit; border-radius:0px 0px 6px 6px; z-index:130; background:#f5f5f7; text-align:center}
.policy-infor .closePolicy,.OTP-infor .closeOTP,a.altbtn { display:inline-block; padding:5px 18px; margin:0px auto; border:1px solid #bcbcbc; border-radius:4px; text-align:center}
.policy-infor .closePolicy a,.policy-infor a:hover.closePolicy,.OTP-infor a:hover.closeOTP { text-decoration:none}
.OTP-infor .otp-wrap { padding:15px}
.policy-infor .policy-wrap { margin-top:45px; height:345px; overflow-y:auto; padding:15px; text-align:left}
.policy-infor .policy-wrap h4,.OTP-infor .otp-wrap h4 { margin-top:0px}
.policy-infor .policy-wrap p { text-align:justify}
.loading-box2 {max-height: inherit; border-radius: 6px}
.loading-box2 .loading-wrap {display: table; width: 100%; height: 100%}
.loading-box2 .loading-wrap img { width: 60px;text-align: center; margin: 45% auto}
.OTP-infor .otp-wrap p { margin-top:0px}
.orderInfo-wrap .pointer {
    background: url(../../images/checkout/icon_flyoutArrow_up_2x.png) no-repeat scroll 0 0 transparent;
    height: 10px;
    position: absolute;
    right: 19px;
    top: -10px;
    width: 34px;
    z-index:333333
}
.orderInfo-container ul { margin:0px; padding:0px; list-style:none}
.orderInfo-container ul li.detail {background:#ffffff; padding:7px 0px; border-top:1px solid #ccc; display:table;table-layout: fixed; width:100%}
.orderInfo-container ul li.title { background:#ffffff; font-weight:600;padding:9px 19px; position:relative}
.orderInfo-container ul li.detail .itemsName {display:table-cell; padding-left:19px; padding-right:10px;}
.orderInfo-container ul li.detail .itemsPrice {display:table-cell; width:125px; text-align:right; padding-right:19px; word-wrap: break-word;}
.orderInfo-container ul li.detail .itemsPrice strong { font-weight:600}
.orderInfo-container ul li.detail:last-child { padding-bottom:10px}
.orderInfo-container a.closeOrder { position:absolute; right:10px; width:40px; text-align:center; display:block; top:0px; height:35px; line-height:35px; color:#949494; font-size:14px}
.orderInfo-container a.closeOrder:hover,.orderInfo-container a.closeOrder:active { text-decoration:none; color:#949494;}
#orderPrice:after { content:"\25be"; position:absolute; right:0px; width:12px; padding-left:0px; top:-3px; font-size:18px; color:#999999}
.orderInfo.no-after span{padding-right:0px;}
#orderPrice.no-after:after{content:none;}

.buyer-info .input-email input.form-control,.card-infor .card-holdername input.form-control {-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}

.buyer-info .input-phone,.card-infor .card-cvc,.card-infor .input-address,.buyer-info .input-email,.card-infor .bank-select { position:relative}
.card-infor .input-address input.form-control {border-top: 0px}
.buyer-info .input-email:hover,.card-infor .card-number:hover,.card-infor .card-holdername:hover,.card-infor .input-address:hover { z-index:5}
.buyer-info .input-phone .flag,.buyer-info .input-phone .ico-infor,.card-infor .card-cvc .ico-infor,.card-infor .input-address .ico-infor {position: absolute;bottom: 7px;right: 0px;width: 30px; z-index:10}
.buyer-info .input-phone .flag img { width:90%}
.buyer-info .input-phone .ico-infor,.card-infor .card-cvc .ico-infor,.card-infor .input-address .ico-infor { top:4px; text-align:center; border-left:0px solid #dcdcdc; height:30px}
.buyer-info .input-phone .ico-infor img,.card-infor .card-cvc .ico-infor img,.card-infor .input-address .ico-infor img { width:7px; margin-top:7px; margin-left:0px}
.buyer-info .input-phone input.form-control { border-radius:0px 0px 4px 4px;}
.fullborder .input-phone input.form-control { border-radius:4px}
.buyer-info .input-email input.form-control { border-radius:4px 4px 0px 0px}
.buyer-info .input-phone input.form-control:focus { position:relative; z-index:0}

.buyer-full-info .input-fullName input.form-control {-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}
.buyer-full-info .input-fullName input.form-control { border-radius:4px 4px 0px 0px}
.buyer-full-info .input-fullName:hover{ z-index:5}

.buyer-full-info .input-email input.form-control {-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}
.buyer-full-info .input-email input.form-control { border-radius:0px 0px 0px 0px}
.buyer-full-info .input-email:hover{ z-index:5}

.buyer-full-info .input-phone,.buyer-full-info .input-email, .buyer-full-info .input-fullName { position:relative}
.buyer-full-info .input-phone .flag,.buyer-full-info .input-phone .ico-infor {position: absolute;bottom: 7px;right: 0px;width: 30px; z-index:10}
.buyer-full-info .input-phone .flag img { width:90%}
.buyer-full-info .input-phone .ico-infor { top:4px; text-align:center; border-left:0px solid #dcdcdc; height:30px}
.buyer-full-info .input-phone .ico-infor img { width:7px; margin-top:7px; margin-left:0px}
.buyer-full-info .input-phone input.form-control { border-radius:0px 0px 4px 4px;}
.buyer-full-info .input-phone input.form-control:focus { position:relative; z-index:0}

.pdtop { padding-top:15px}

.Popover {
    position: absolute;
    z-index: 10;
    -webkit-transform-origin: -8px 15px;
    transform-origin: -8px 15px; z-index: 100; 
}
.Popover-arrow {
    content: "";
    position: absolute;
    top: -11px;
    right: 10px;
    width: 18px;
    height: 12px;
    background: url(../../images/checkout/icon_flyoutArrow_up_2x.png);
    background-size: 100% 100%;
}
.Popover-content {
    padding: 9px 10px 9px 30px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
    color:#333333;
    display: block; font-size:12px;border: 1px solid #696969;
}

.Overlay-Badge--topRight {top: 10px;right: 14px;}
.fsize11 { font-size:11px}
.grayfont { color:#7F7F7F}
.succes-icon {}
.isize48 { width:48px}
.isize60 { width:60px}
.isize30 { width:30px; vertical-align:middle}
.imb15 { margin-bottom:15px}
.greenSvg {fill:#356e00;}
.whiteSvg {fill:#ffffff;}
.redSvg {fill:#DC0B0E;}
a.link-text { text-decoration:underline}
.moneyCharge .border-btm { border-radius:3px}

.AlepayPage{background: -webkit-linear-gradient(#f0f0f0,#ffffff) fixed;background: linear-gradient(#f0f0f0,#ffffff) fixed; height:100vh}
.AlepayPage .Overlay { z-index:1; position:inherit}
.AlepayPage .checkou-wrap { max-width:370px; width:inherit}
.AlepayPage .checkou-wrap .checkout-box { width:100%}
.AlepayPage .Overlay { background:none}
.AlepayPage .checkout-inner { margin-top:0px; padding-top:120px}
.AlepayPage .checkout-inner .checkout-box {box-shadow: 0 1px 4px rgba(95,113,127,.4), 0 0 1px 1px rgba(65,100,129,.15);}
.AlepayPage .checkout-inner .legalLinksView a { color:#008cdd;text-shadow:0 1px 0 rgba(255,255,255,0.5)}

.loading-bar { width: 100%; height: 100vh; z-index: 99999; position: fixed; display: table}
.loading-bar .loader-img { display: table-cell; text-align: center; vertical-align: middle}
.loading-bar .loader-img img {width: 60px}


input.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color:#7A7A7A;font-family:Arial, sans-serif;
}
input.form-control::-moz-placeholder { /* Firefox 19+ */
    color:#7A7A7A;font-family:Arial, sans-serif;
}
input.form-control:-ms-input-placeholder { /* IE 10+ */
    color:#7A7A7A;font-family:Arial, sans-serif;
}
input.form-control:-moz-placeholder { /* Firefox 18- */
    color:#7A7A7A;font-family:Arial, sans-serif;
}

@media screen and (min-width: 641px){
    .Popover {
        width: 180px;
        top: 0px;
        left: 265px;
    }
    .Popover-arrow {
        content: "";
        position: absolute;
        top: 11px;
        height: 19px;
        background: url(../../images/checkout/icon_flyoutArrow_left_2x.png);
        background-size: 100% 100%;
        left: -9.5px;
        width: 10px;
    }
}
@media screen and (max-width: 641px){
    .Popover{
        width: 75%;
        top: 38px;
        right:0px; left:inherit;
    }

}
@media screen and (max-width: 481px){
    .checkou-wrap,.checkout-box { width:100%}
    .Popover { width:75%;right: 0px; left:inherit}

}
.order-review,.address-review { padding-top: 7px }
.order-review table,.address-review  { border-top: 1px solid #bcbcbc }
.order-review td { border-bottom: 1px dotted #dcdcdc; padding: 5px 0px}
.order-review td.last-child {border-top: 1px solid #dcdcdc; border-bottom: 0px}
.address-review {margin-top: 7px}
.address-review p { margin:0px; }
.p-t-15 {padding-top: 15px}

.link-code {
    position: relative;
    padding-bottom: 0px;
    border: 1px solid #C7C7C7;
    border-radius: 3px; background: #fff3e8; word-wrap: break-word; line-height: 14px; padding: 3px;
}
.text-bold {font-weight: bold;}
.select2-container--default .select2-selection--single {border-radius: 4px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {padding-left: 34px !important; padding-top: 3px !important;}
/* Styling for Select2 with error */
.has-error .select2-selection {
    border-color: #ff7076 !important;
}

/* start 'enter' transition on main view */
.content-view.ng-enter {
    /* transition on enter for .5s */
    transition: .5s;

    /* start with opacity 0 (invisible) */
    opacity: 0;
    padding-top: 10px;
}

/* end 'enter' transition on main view */
.content-view.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
    padding-top: 0px;
}
.review-instruction {
    font-weight: bold;
    border: 1px dashed;
    padding: 5px;
    margin: 0 -10px;
}