#checkout-container input[type=number]::-webkit-inner-spin-button, #checkout-container input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#checkout-container {font-family: "Proxima Nova",sans-serif;padding:0;background: #f2f2f2;}
.checkout #waitParent {max-width: 1px;}
#checkout-container a.goto-confirmation {background: #ff1b00;width: 100%;margin: 15px 0;}
#checkout-container .view-offer {background: transparent;}
#checkout-container .maybe-already-purchased {font-weight:bold;background: #000;width: 100%;padding: 0;}
#checkout-container .maybe-already-purchased p {padding: 10px;font-size: 18px;color: #fff;font-weight: normal;}
#checkout-container .maybe-already-purchased p a {font-weight: bold;text-decoration: underline;color: #fff;}
#checkout-container .maybe-already-purchased p a:hover{text-decoration: none}
#checkout-container .account-head-contentcol ul {list-style:disc;padding: 0 0 0 20px;color: #444444;font-size: 17px;line-height: 26px; max-width: 80%;}
#checkout-container .offerDetailsContainer {display:flex;flex-wrap: wrap;justify-content: space-around;}
#checkout-container .account-head {background: transparent;padding: 10px 2%;border: none; font-size: 12px;}
#checkout-container .offerDetails {background: #fff;padding-top: 20px;border-top: 1px solid #b0b0b0;margin: 20px;justify-content: space-between;display: flex;}
#checkout-container .offerDetails:first-child {border: none}
#checkout-container .offerDetails .title {flex-basis: calc(100% - 155px);}
#checkout-container .offerDetails .detail {flex-basis:155px;text-align: center;}
#checkout-container .offerDetails h2 {font-size: 20px;font-weight: bold;}
#checkout-container .offerDetails .price {font-size: 24px;font-weight: bold;}
#checkout-container .offerDetails .price span{display: block}
#checkout-container .offerDetails .price .period {font-size: 14px;}
#checkout-container .offerDetails p {font-size: 14px;color: #888;margin: 10px 0;line-height: 18px;}
#checkout-container a.button.big {line-height: inherit;display: inline-block;margin: 15px 0 0 0;background: #ff1b00;font-size: 16px;width: 100%;padding: 10px 20px;}
#checkout-container a.button.big:hover {background: #12c400}
#checkout-container .mobile-mode .account-terms {table-layout: auto}
#checkout-container h1 {font-family: "Proxima Nova",sans-serif;font-weight: bold;font-size: 26px;background: no-repeat;}
#checkout-container h1.choose-specific-term {font-size:20px;margin: 0 20px;}
#checkout-container .account-head .business-logo {float: right;margin: 0 0 0 20px;}
#checkout-container .account-head-contentcol {margin-left: 0;padding-right:100px}
#checkout-container .account-terms-section {background: #fff;padding: 0 20px 20px;margin: 0 20px 20px;}
#checkout-container .account-terms-section .afterLogin{background: #fff;padding: 0 20px 20px;}
#checkout-container .view-state2, #checkout-container .view-giftParams, #checkout-container #view-confirmation,#checkout-container  .view-receipt, #checkout-container .view-lockedPromoCode, #checkout-container .view-redemption, #checkout-container .view-alreadyHasAccess  {border-top: 5px solid #ff1b00; background: #fff}
#checkout-container .account-popup-header {margin:0;background: #fff;height:90px}
#checkout-container .view-state2 .row.account-head {position: inherit;float:right;width: 40%}
#checkout-container .business-logo {position: absolute;top: 0;right: 20px;}
#checkout-container .business-logo .logo-img {width: 100px; height:100px}
#checkout-container .account-group {float:none}
#checkout-container .view-state2 #payment-form-component {width: 60%}
#checkout-container .view-state2 .row {clear:none}
#checkout-container .view-state2 .yourChoice {font-size:12px;display: block;margin-bottom: 15px;}
#checkout-container .view-state2 .account-head-contentcol {background: #f2f2f2;padding: 10px 15px;}
#checkout-container .view-state2 .account-head-contentcol h1 {font-size:20px;text-align:center; line-height: 22px;}
#checkout-container .view-state2 .account-head-contentcol .logoTerm {text-align: center}
#checkout-container .view-state2 .account-head-contentcol .term-details {text-align: center;font-weight: bold; border-bottom: 1px solid #ccc; padding: 10px; margin-bottom: 10px;}
#checkout-container .view-state2 .account-head-contentcol .term-details b {color:#f22820}
#checkout-container .view-state2 .account-head-contentcol .incl-vat-row {font-size:12px;color:#999;text-align: center;}
#checkout-container .view-state2 .account-head-contentcol .incl-vat-row a {font-weight:bold;color:#ff1b00;}
#checkout-container .view-state2 .tariffPlan {font-size:12px; color:#888; line-height: 16px;}
#checkout-container .view-state2 .tariffPlan .tarrifCell_2{font-weight:bold}
#checkout-container .view-state2 .tariffPlan .rowPlan {padding-left: 20px;}
#checkout-container .view-state2 .tariffPlan .rowPlan:before {margin: 0 10px 0 -20px;content:"\A";width:6px;height:6px;border-radius:50%;background: #888;display:inline-block;}
#checkout-container .view-state2 .tariffPlan .rowPlan:before {margin: 0 10px 0 -20px;content:"\A";width:6px;height:6px;border-radius:50%;background: #888;display:inline-block;}
#checkout-container #payment-form-component h5 {color: #777;font-size:14px;font-weight: bold;margin-bottom: 0;}
#checkout-container #payment-form-component .containerInput {display: inline-block;max-width: 45%;}
#checkout-container #payment-form-component .floatRight {float:right}
#checkout-container #payment-form-component .borderInput {border: 1px solid #ccc;}
#checkout-container #payment-form-component .paymentDescription  {font-size:12px;font-style: italic;color: #888; margin-bottom: 30px;}
#checkout-container #payment-form-component .paymentDescription  .greenDesc {font-weight: bold;display: block;color: #298a0f;font-style: initial;margin: 0;}
#checkout-container #payment-form-component .paymentDescription  img {vertical-align: text-bottom;}
#checkout-container #payment-form-component .auto-renew-purchase {margin-bottom:20px}
#checkout-container #payment-form-component .complete-purchase-button {float:none; margin: 20px 0 0;}
#checkout-container .footerCOntainer {float:left}
#checkout-container .footer-modal {background: none;padding: 0 30px 40px;}
#checkout-container .footer-modal .auto-renew-purchase {width: 100%}
#checkout-container .promo-code-component .promo-code-input-wrapper {width:135px}
#checkout-container .promo-code-component .promo-code-apply {background: #ff1b00;display: block;float: left;padding: 0 9px;margin: 0;}
#checkout-container .promo-code-component .promo-code-apply:hover {background: #12c400}
#checkout-container .payment-options .button.pay.payment-method-selected {border-color: #12c400}
#checkout-container .payment-options .button.pay.payment-method-selected:after {background-color: #12c400}
#checkout-container .gift-header {background: #fff}
#checkout-container .gift-footer {background: #fff}
#checkout-container .gift-footer .access-buttons {display:flex;justify-content: space-between}
#checkout-container .gift-footer .access-buttons a {width: 50%}
#checkout-container .gift-footer .access-buttons a.gray {background:#ccc;width: 35%; color:#fff}
#checkout-container .gift-footer .access-buttons a.gray:hover {background: #12c400}
#checkout-container #view-confirmation .account-head {padding:10px 35px}
#checkout-container #view-confirmation .complete-purchase-button a.button {background: #ff1b00}
#checkout-container #view-confirmation .complete-purchase-button a.button:hover {background-color: #12c400}
#checkout-container #view-confirmation .account-head-content {text-align:center}
#checkout-container #view-confirmation .account-head-content b {color:#ff1b00}
#checkout-container #view-confirmation .term-details {font-size: 14px;color: #666;margin: 15px 0;  display: block;}
#checkout-container #view-confirmation .business-logo {position: absolute; top: 0; right: 20px;}
#checkout-container #view-confirmation .business-logo img {width: 100px;}
#checkout-container .incl-vat-row .link {color:#ff1b00}
#checkout-container .start-screen-content {padding: 0;}
#checkout-container .moreSubsrciption {margin:20px 30px;padding: 0;}
#checkout-container .moreSubsrciption a {color:#7e7e7e;text-decoration: underline;font-weight: bold;font-size: 14px;}
#checkout-container .moreSubsrciption a:hover {text-decoration: none}
#checkout-container .account-data{margin-left:16px}
#checkout-container .view-receipt .account-data{margin:20px}
#checkout-container .view-receipt span {font-size: 16px;color:#333}
#checkout-container .view-receipt h1 {font-size: 30px;padding: 0;margin-bottom: 50px;}
#checkout-container .view-receipt h1 span {font-size: 30px;}
#checkout-container .view-receipt a.button.big {padding: 10px 30px;}
#checkout-container .view-receipt .access-footer {padding: 0 0 20px;border: 0;}
#checkout-container .view-receipt {background: #fff}
#checkout-container .view-lockedPromoCode .promo-code-component .promo-code-apply {float:none;display: inline-block;margin-bottom: 60px; font-size: 16px; font-weight: bold;}
#checkout-container .view-lockedPromoCode {background: #fff}
#checkout-container .redemption-form {text-align: center}
#checkout-container .redemption-header,.redemption-footer {background: #fff;padding: 10px}
#checkout-container .redemption-footer .access-button {display: flex; justify-content: space-between}
#checkout-container .redemption-footer .access-button a.button.big {width: 40%;     color: #fff;}
#checkout-container .access-footer {border: none}
#checkout-container .access-footer a {padding:0 20px;margin:0 20px}
#checkout-container .close-button-wrapper { margin: 0 40px}
#checkout-container .close-button-wrapper a.button.big { margin: 15px 40px 0 0; padding: 10px 20px;}
#checkout-container .promo-code-component.promo-code-unlocked .promo-code-eclipse {margin: 0px auto 5px;}
#checkout-container .view-giftParams .account-popup-header {margin:0}
#checkout-container .view-giftParams .gift-header {padding: 10px 30px;}
#checkout-container .view-giftParams .gift-row {margin: 12px 30px;}
#checkout-container .receipt .content {margin: 20px; width: auto}
.howLength {color:#279fd6; font-weight: bold; background:#fff; text-align: center;padding-bottom: 25px;    font-size: 17px;}

input.ng-invalid-required {
  color: red
}
.payment-options .button.pay.credit, .payment-options .button.pay.edgil_payway, .payment-options .button.pay.eigen, .payment-options .button.pay.spreedly, .payment-options .button.pay.worldpay, .payment-options .button.pay.worldpay_cc_token {background:#f2f2f2 url(https://ocdn.eu/files/pulscms/OTk7MDA_/f2b4fc12ccc4331805acd34787bd70d0.png)  no-repeat center center;background-size: auto; background-size: auto;}
.payment-options .button.pay.paypal_express_checkout, .payment-options .button.pay.paypalbt, .payment-options .button.pay.worldpay_paypal {background:#f2f2f2 url(https://ocdn.eu/files/pulscms/ODI7MDA_/8e608207b3edb575630a5405e42c5e58.png) no-repeat center center;background-size: auto; background-size: auto;}
.payment-options .button.pay {height:80px}
.table-form-inline .field-card-cvv, .table-form-inline .field-card-expiry-month, .table-form-inline .field-card-postal-code {width:155px}
#checkout-container .payment-method-paypalbt {margin:0}
#checkout-container #braintree-paypal-loggedout {margin: 10px 0;}
#lock-modal-overlay {background:#000}
.checkout #waitParent::before { background: url(https://ocdn.eu/files/pulscms/ZGI7MDA_/6a23bb4a550877a8e4bd5082f430d3ed.gif) no-repeat center;}
.view-confirmation .previous-button-wrapper {position:absolute}
input[type=number].flat {border: 0;box-shadow: none; height: 40px;padding: 10px 0; max-width: 100%;}
input.input-date {width: 40px;    background: none;}    
.payment-options li {width:50%}
@media only screen and (max-width: 600px) {
    #checkout-container .account-head {padding:20px 20px 0}
    #checkout-container .account-head .business-logo {display: none}
    #checkout-container .maybe-already-purchased p {font-size:12px}
    #checkout-container h1 {font-size: 18px}
    #checkout-container .account-head-contentcol ul {font-size: 14px; max-width: 100%;}
    #checkout-container .account-head-contentcol li {line-height: 18px;margin-bottom: 10px}
    #checkout-container h1.choose-specific-term {font-size: 18px}
    .mobile-account-terms-section {border:none}
    #checkout-container .offerDetailsContainer {display: block}
    #checkout-container .offerDetails {display: block;margin: 0;padding: 20px;}
    #checkout-container .offerDetails .detail {flex-basis: 100px;}
    #checkout-container .offerDetails .title {display: flex;font-size:12px}
    #checkout-container .offerDetails .price {font-size:18px}
    #checkout-container .offerDetails span {display: block}
    #checkout-container .offerDetails .period {line-height: 12px;font-weight: bold}
    #checkout-container .offerDetails h2 {flex-basis: calc(100% - 100px);font-size: 16px;}
    #checkout-container .mobile-mode .account-terms { margin: 0 4%; box-sizing: border-box; width: 92%;}
    #checkout-container .offerDetails p {font-size:12px;line-height: 16px}
    #checkout-container .start-screen-content {padding:0}
    #checkout-container .moreSubsrciption {margin:15px;}
    #checkout-container .moreSubsrciption a {font-size: 12px}
    #checkout-container ..account-data {padding: 0 15px 0;}
    
    #checkout-container .account-popup-header {margin-bottom: 10px}
    #checkout-container .view-state2 .row.account-head {float: none;width:100%;padding: 0 20px 20px}
    #checkout-container .view-state2 .account-data .account-name.account-mail-only {width: auto}
    #checkout-container .view-state2 .tariff-plan-cell {padding: 0}
    #checkout-container .view-state2 #payment-form-component {width: 100%}
    #checkout-container .view-state2 .select-payment-options {margin:0}
    #checkout-container #payment-form-component h5 {font-size: 12px;margin-top: 10px;}
    #checkout-container .view-state2 .payment-options-wrapper {margin:20px}
    #checkout-container .view-state2 .payment-options {display: flex; justify-content: space-between}
    #checkout-container .view-state2 .payment-options li {height: auto;width:40%;}
    #checkout-container .view-state2 .table-form-inline .icon {height:27px}
    #checkout-container .view-state2 input[type=password].flat, #checkout-container .view-state2 input[type=text].flat,#checkout-container .view-state2 input[type=number].flat {height:30px}
    input[type=number].flat {border:none;padding-left: 0}
    #checkout-container .promo-code-component  {display: flex;justify-content: space-around;}
    #checkout-container .promo-code-component .promo-code-input-wrapper {width:45%}
    #checkout-container .promo-code-component a.button.promo-code-apply {width: 45%;min-width: 45%;}
    #checkout-container .account-data .account-name.account-mail-only {width: auto}
    #checkout-container a.button.back {width:auto}
    #checkout-container .table-form-inline .input {height:30px}
    #checkout-container .business-logo {display:none}
    #checkout-container .receipt .content { margin: 20px auto;}
    #checkout-container .view-receipt span {font-size:15px;display: block}
    #checkout-container .view-receipt h1 {font-size:18px; margin-bottom: 20px;}
    #checkout-container .view-receipt h1 span {font-size:22px}
    #checkout-container .account-head-contentcol {padding-right: 0}
    #checkout-container h1.choose-specific-term {margin: 0 0 10px;}
    .table-form-inline .field-card-cvv, .table-form-inline .field-card-expiry-month, .table-form-inline .field-card-postal-code {width: 100%}
    #checkout-container #payment-form-component .containerInput { width: 45%;}
    .receipt .access-footer-content {text-align: center}
    #checkout-container .close-button-wrapper {margin:auto}
    .view-receipt.view-show {padding: 0 20px;}    
    
    
}