html,body {
    background-color:#f3f3f3;
}
#body {
    background-color:#f3f3f3;
    padding-top:50px;
    position:relative;
    overflow:hidden;
    opacity:1;
}
p {
    margin:0;
    padding:0;
}

h1 {
    font-size:28px;
    color:#494949;
    margin-bottom:10px;
    font-weight:600;
}
h3 {
    color:#6a6a6a;
    font-size:18px;
    margin-bottom:30px;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
}
h3 span {
    font-weight:600;
}
p.steps {
    color:#797983;
    font-size:15px;
    margin-bottom:15px;
}
p.steps span {
    font-weight:600;
}
p.label {
    margin-bottom:15px;
    color:#666;
    font-size:18px;
    font-weight:600;
}
.template {
    position:absolute;
    opacity:0;
    z-index:1000;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.template.active {
    opacity:1;
    z-index:2000;
}
.template.complete {
    opacity:0;
    z-index:2000;
}
.template.hidden {
    display:none;
}
.plan-details-list {
    margin-bottom:25px;
}
.plan-details-list li > span {
    display:inline-block;
    width:95%;
    vertical-align:top;
}
.plan-details-list li {
    display:block;
    font-size:17px;
    color:#6a6a6a;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    padding-bottom:5px;
}
.plan-details-list li:before {
    content: "\2022";
    padding-right:10px;
}

#register {
    max-width:500px;
}
.register .content {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.register .isexisting {
    display:none;
}
.register.existing .isexisting {
    display:block;
}
.register.existing .signup {
    display:none;
}

.dvdform li {
    position:relative;
    display:block;
    padding-bottom:15px;
}
.dvdform li.cc-num {
    padding-bottom:8px;
}
.dvdform li div {
    background-color:#fff;
    padding-bottom:0;
    display:block;
    padding:22px 0 15px;
    border-radius: 2px;
    border: solid 1px #d6dbdf;
    max-height:60px;
}
.dvdform li.cardinfo div {
    background-color:transparent;
    padding:0;
    border:none;
}
.dvdform li.is-invalid div {
    border-color:#b92d2b;
}
.dvdform label {
    position:absolute;
    z-index:1;
    left:11px;
    top:20px;
    font-size:16px;
    color:#6a6a6a;
    font-weight:400;
    transition: font .1s ease,top .1s ease,transform .1s ease,-webkit-transform .1s ease,-moz-transform .1s ease,-o-transform .1s ease;
    padding:0;
    text-transform:capitalize;
}
.dvdform label.optional {
    color:#bbb;
}
.dvdform label.pop {
    left:11px;
    top:4px;
    font-size:13px;
    color:#8c8c8c;
    font-weight:700;
}

.dvdform select:focus,
.dvdform input:focus {
    outline:none;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dvdform select,
.dvdform input {
    border:none;
    width:100%;
    color:#232323;
    margin:0;
    padding:0 0 0 10px;
    background-color:transparent;
}
.dvdform select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(https://assets.nflxext.com/us/dvd/signup/select-arrows.png) 98% / 7px no-repeat transparent;
    color:#6a6a6a;
    font-weight:400;
}
.dvdform #state.hasValue {
    color:#232323;
    font-weight:400;
}

.dvdform div.focused {
    border-color: #6a6a6a;
}

button.red {
    margin-top:15px;
    display:inline-block;
}
#videoBox {
    padding-top:40px;
}
#reg-template.template .content {
    display:inline-block;
}
#reg-template.template .content.videoid {
    display:none;
    margin-left:50px;
}
#confirm-template,
#address-template {
    max-width:500px;
}
#payment-template {
    max-width:550px;
}
/* special case for payment plan name */
#payment-template .dvdform {
    max-width:500px;
}
/* read only mode for forms */
#payment.readonly #li-cvv,
#payment.readonly .cardinfo {
    display:none;
}
/*#payment.readonly label { */
#payment.readonly li div{
    padding:0;
    background-color:transparent;
    border:none;
}
#payment.readonly li input {
    margin-left:160px;
}
#payment #useDifferentCard {
    display:none;
}
#payment.readonly #useDifferentCard {
    display:inline-block;
    margin:10px 65px;
}

#reg-template #videoBox img {
    width:210px;
    text-align:center;
}
#addToQForm {
    display:block;
    text-align:center;
    margin-top:13px;
}
#addToQForm input {
    cursor:pointer;
}
#addToQForm label {
    font-size:13px;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    color:#6a6a6a;
    margin-top:2px;
    vertical-align:top;
    cursor:pointer;
}
#confirm-template.template {
    left:0;
    position:relative;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.confirm {
    padding-bottom:70px;
}

.confirm #orderFinalDetails {
    background-color:#fff;
    padding:25px 25px 30px 25px;
    margin-bottom:25px;
}
.startMessage {
    margin-top:35px;
    font-size:12px;
    color:#626262;
}
.startMessage a:hover {
    text-decoration:underline;
}
#giftMembershipMessage {
    display:none;
}
.giftSuccessContainer {
    display:none;
    padding:15px 5px 15px 15px;
    margin:25px 0;
    background-color:#edf5e5;
    border: solid 1px #7ed321;
    color:#0b0b0b;
    font-size:17px;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
}
.giftSuccessContainer span {
    font-weight:600;
}
.giftSuccessContainer.showMsg {
    display:block;
}

.errorContainer {
    max-width:500px;
}
.dvdform li .inlineError {
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    font-size:12px;
    color:#9a0416;
    display:none;
}
.dvdform li.fieldError .inlineError {
    display:inline-block;
}

.dvdform li.fieldError div {
    border: solid 1px #d0011b;
}

#giftCodeContainer {
    display:none;
    background-color:rgba(255,255,255,0.7);
    position:fixed;
    z-index:5000000;
    width:100%;
    height:100%;
    height:100vh;
    top:0;
    left:0;
}
#giftCodeContainer.active {
    display:block;
}
#giftCodeContainer #giftCodeModal {
    position:relative;
}
#giftCodeContainer #giftCode {
    width:90%;
    max-width:600px;
    margin:0 auto;
    margin-top:15%;
    background-color: #fff;
    border: solid 1px #d6dbdf;
    padding:50px 70px;
    position:relative;
}
#giftCodeContainer #giftCode h3 {
    font-size:28px;
    color:#494949;
    margin-bottom:10px;
    font-weight:600;
    font-family:"Gotham", Helvetica, Arial;
}
#giftCodeContainer #giftCode p {
    font-size:17px;
    color:#6a6a6a;
    margin-bottom:35px;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
}
#giftCodeContainer #giftCode p.errorContainer {
    color:#fff;
}

span.payment-icon {
    display:inline-block;
    width:41px;
    height:28px;
    vertical-align:bottom;
    opacity:0.5;
}
span.payment-icon.selected {
    opacity:1;
}
span.icon-visa {
    background: url(//assets.nflxext.com/us/dvd/signup/icon_visa_37x25_2x.png) no-repeat 0 0;
    background-size:100%;
}
span.icon-mastercard {
    background: url(//assets.nflxext.com/us/dvd/signup/icon_mastercard_37x25_2x.png) no-repeat 0 0;
    background-size:100%;
}
span.icon-amex {
    background: url(//assets.nflxext.com/us/dvd/signup/icon_amex_37x25_2x.png) no-repeat 0 0;
    background-size:100%;
}
span.icon-discover {
    background: url(//assets.nflxext.com/us/dvd/signup/icon_discover_37x25_2x.png) no-repeat 0 0;
    background-size:100%;
}
#redeemGiftLink {
    display:inline-block;
    margin-left:15px;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    font-size:14px;
}
.confirm h4 {
    font-size:17px;
    font-weight:600;
    margin-bottom:3px;
    color:#1a1a1a;
}
.orderDetails {
    margin-top:12px;
    margin-bottom:40px;
}
.confirm .orderDetails li {
    display:block;
    font-size:16px;
    color: #616060;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    padding-bottom:4px;
}
.confirm .orderDetails .label {
    color:#1a1a1a;
    display:inline-block;
    padding-right:10px;
}
.shippingAddress {
    font-size:16px;
    margin-bottom:20px;
}
.shippingAddress p {
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
    color:#1a1a1a;
    margin-bottom:15px;
}
.shippingAddress div {
    color: #616060;
    font-family:"Proxima Nova","Gotham", Helvetica, Arial;
}

.fa-eye-close,
.fa-eye-open {
    position:absolute;
    right:18px;
    cursor:pointer;
    display:none;
    color:#232323;
}
.fa-eye-close.active {
    display:inline-block;
}
.fa-eye-open.active {
    display:inline-block;
}
input#password {
    width:90%;
}

.create-account-error div {
    background-color:transparent;
    margin-top:80px;
    padding:30px;
}
.create-account-error h1 {
    font-size:20px;
    font-weight:600;
    margin-bottom:20px;
}
.create-account-error p {
    font-size:16px;
    color:#767676;
    margin-bottom:15px;
}
#forceSaveMasq {
    margin-top:20px;
    position:relative;
}


/* responsive */
@media only screen and (max-width : 991px) {
    #reg-template.hasVideo h1.signup {
        font-size:22px;
    }
    #reg-template.hasVideo .content {
        width:370px;
    }
    #reg-template.hasVideo .content.videoid {
        width:170px;
        margin-left:30px;
        vertical-align:top;
    }
    #reg-template.hasVideo #videoBox img {
        width:170px;
    }
}
@media only screen and (max-width : 767px) {
    #videoBox,
    #addToQForm {
        display:none;
    }
    #reg-template.hasVideo .content {
        width:auto;
    }
}

@media only screen and (max-width : 550px) {
    h1 {
        font-size:20px;
    }
    h3 {
        font-size:16px;
    }
    p.label {
        font-size:16px;
    }
    button.red {
        width:100%;
    }
    #giftCodeContainer #giftCode h3 {
        font-size:20px;
    }
    #giftCodeContainer #giftCode {
        padding:50px 40px;
    }
}