/* DARK MODE COLORS */

.darkmode,
.darkmode a,
.darkmode .text,
.darkmode .inline-holder,
.darkmode .overlay-holder,
.darkmode .checkout,
.checkout .darkmode h4,
.checkout .darkmode .billing-country .tp-dropdown__item-color.blue,
.checkout .darkmode .add-credit-card,
.checkout .darkmode .go-back-to-cards,
.checkout .darkmode a.button.promo-code-apply,
.checkout .darkmode button.button.promo-code-apply,
.darkmode .custom-checkbox label,
.checkout .darkmode .consents .custom-checkbox label a,
.checkout .darkmode .consents .custom-checkbox label a:visited,
.checkout .darkmode .receipt .content,
.checkout .darkmode .view-alreadyHasAccess .content,
.darkmode #piano-myaccount,
.darkmode #piano-myaccount .btn-group>.btn,
.darkmode #piano-myaccount .btn-group>.dropdown-menu,
.darkmode #piano-myaccount .btn-group>.popover,
.darkmode #piano-myaccount .change-option-description,
.darkmode #piano-myaccount ul.simple-list>li.simple-list__item--with-dot,
.darkmode #piano-myaccount ul.simple-list>li.simple-list__item,
.darkmode .update-payment-method .payment_info,
.darkmode .vanilla-table tr>td .resource-title,
.darkmode .vanilla-table tr>td .transaction-date,
.darkmode .expiration-warning,
.darkmode .btn.underline,
.darkmode .vanilla-table button,
.darkmode .info-icon-holder,
.darkmode .voucher-last-message-sent-date,
.darkmode .voucher-details,
.darkmode .supporting .support-caption,
.darkmode my-account-licensing,
.darkmode my-account-licensing *,
.darkmode .pn-licensing__dropdown-item-button,
.darkmode .pn-list .pn-list-scopes .dropdown-menu li,
.darkmode .btn.btn-back,
.darkmode .go-back-to-cards-wrapper,
.darkmode .shared-subscription-modal,
.darkmode .shared-subscription-modal .ss__subheading,
.darkmode .shared-subscription-modal .ss__add-shared-account,
.darkmode .shared-subscription-modal .ss__add-shared-account--limit,
.darkmode .youth-overlay-inner,
.darkmode .set-as-default-button,
.darkmode .view-giftParams {
    color: #e9e9e9 !important;
}

.darkmode #piano-myaccount,
.darkmode#piano-checkout,
.darkmode .inline-holder,
.darkmode .footer-modal,
.darkmode .overlay-holder,
.darkmode .background .left,
.darkmode .aboshop-classic-holder,
.darkmode .receipt,
.darkmode .shadow,
.darkmode .radiobutton__label::before,
.darkmode#piano-shared-subscription-modal,
.darkmode#piano-already-has-access,
.darkmode .youth-overlay-inner,
.darkmode .modal .modal-content,
.darkmode .myaccount-custom-modal-container,
.darkmode .update-payment-method .vanilla-table.cards-table .even,
.darkmode#piano-gift,
.darkmode#piano-gift .gift-footer,
.darkmode#piano-redemption {
    background: #121212 !important;
}

.darkmode .background .right {
    background: #555555 !important;
}

.darkmode h1,
.darkmode h2,
.darkmode h3,
.darkmode .right h2,
.checkout .darkmode .account-head-contentcol h1,
.checkout .darkmode .receipt h1,
.checkout .darkmode .view-alreadyHasAccess h1,
.darkmode #piano-myaccount h1,
.darkmode #piano-myaccount h2,
.darkmode #piano-myaccount h3,
.darkmode #piano-myaccount .header-navigation-tabs li a,
.darkmode #piano-myaccount .item-name,
.darkmode #piano-myaccount .manage-dropdown li,
.darkmode #piano-myaccount .section-text,
.darkmode #piano-myaccount .change-option-title,
.darkmode .modal h3,
.darkmode .modal .close i,
.darkmode .vanilla-table tr>th,
.darkmode .voucher-name,
.darkmode .add-new-card-form {
    color: #e9e9e9 !important;
}

.darkmode .right h2,
.darkmode .right .text {
    color: #fff;
}

.darkmode .right .button1 {
    background: #aba9a4 !important;
    color: #121212 !important;
}

.darkmode .right .button1:hover {
    background: #9d9b97 !important;
}

.darkmode .right .button2:not(div),
.darkmode .right .button3:not(div) {
    background: #fff !important;
    color: #121212 !important;
}

.darkmode .right div.button2:not(div),
.darkmode .set-as-default-button {
    background: transparent !important;
}

.darkmode .standard .inlay-background,
.checkout .darkmode .view.view-confirmation .footer-modal {
    background: #555555 !important;
}

.darkmode .offer,
.pn-list .manage-dropdown.dropdown-menu {
    background: #202346 !important;
}

.darkmode .bestseller .offer,
.darkmode .bestseller-bottom .offer,
.darkmode .offers-holder.all-yellow .offer {
    background: #ffe462 !important;
}

.darkmode .bestseller .offer *,
.darkmode .bestseller-bottom .offer *,
.darkmode .offers-holder.all-yellow .offer *,
.darkmode .pn-licensing-select *,
.darkmode .inline-holder .info-text,
.darkmode .billing-country .tp-dropdown__select *,
.checkout .darkmode .account-head .account-head-content h1 {
    color: #202346 !important;
}

.darkmode .best.button2,
.darkmode .bestseller .offer .primary,
.darkmode .bestseller-bottom .offer .primary,
.darkmode .offers-holder.all-yellow .offer .primary {
    background: #202346 !important;
    color: #fff !important;
}

.darkmode .bestseller .offer .primary:hover,
.darkmode .bestseller-bottom .offer .primary:hover,
.darkmode .offers-holder.all-yellow .offer .primary:hover {
    background: #797B90 !important;
}

.darkmode .button2:not(div),
.darkmode .button3:not(div),
.darkmode .btn--large.btn--gray,
.darkmode a.button.gray,
a.button.gray:visited,
.darkmode button.button.gray,
.darkmode button.button.gray:visited,
.darkmode button.secondary {
    background: #6f7187 !important;
    color: #fff !important;
}

.darkmode .additional-payments-holder .btn--large.btn--gray {
    background: #c8c8d1 !important;
}

.darkmode .payment-options .button {
    background-color: #c8c8d1 !important;
    border-color: #c8c8d1;
}

.darkmode .payment-options .button.pay.payment-method-selected,
.darkmode .radiobutton__label::before {
    border-color: #e9e9e9;
}

.darkmode .button2:not(div):hover,
.darkmode .button3:not(div):hover,
.darkmode .btn--large.btn--gray:hover,
.darkmode a.button.gray,
a.button.gray:visited:hover,
.darkmode button.button.gray:hover,
.darkmode button.button.gray:visited:hover,
.darkmode button.secondary {
    background: #474A66 !important;
}

.checkout .darkmode .promo-code-component input {
    border-bottom: 1px solid #7d7d7d !important;
}

.darkmode .custom-radio-button label,
.darkmode .custom-checkbox label:before,
.darkmode .custom-radio-button.with-text label:after,
.darkmode .radiobutton input:checked+.radiobutton__label::before {
    border-color: #e9e9e9 !important;
}

.darkmode .custom-checkbox input:checked+label:before,
.darkmode .custom-radio-button input:checked+label:before,
.darkmode .radiobutton__label::after {
    background: #e9e9e9 !important;
}

.darkmode #piano-myaccount .header-navigation-tabs li.active a {
    border-bottom: 3px solid #e9e9e9;
}

.darkmode .btn.disabled,
.darkmode .btn.disabled:active,
.darkmode .btn.disabled:hover,
.darkmode .btn[disabled],
.darkmode .btn[disabled]:active,
.darkmode .btn[disabled]:hover,
.darkmode .button.small.disabled,
.darkmode .button.small.disabled:hover,
.darkmode .button.small[disabled],
.darkmode .button.small[disabled]:hover,
.darkmode .btn--large.btn--blue[disabled],
.darkmode .btn--large.btn--blue[disabled]:hover,
.darkmode .btn--large.btn--gray[disabled],
.darkmode .btn--large.btn--gray[disabled]:hover {
    opacity: 1 !important;
    background: #555555 !important;
    color: #d4d4d0 !important;
}

.darkmode .btn.underline {
    background: none !important;
}

.darkmode .button1,
.darkmode .primary,
.checkout .darkmode .complete-purchase:not(.disabled):not(:disabled),
.checkout .darkmode .complete-purchase-button:not(.disabled):not(:disabled),
.checkout .darkmode .complete-purchase:not(.disabled):not(:disabled) a,
.checkout .darkmode .complete-purchase-button:not(.disabled):not(:disabled) a,
.darkmode .btn--large.btn--blue:not(.disabled):not(:disabled),
.darkmode .complete-purchase:not(.disabled):not(:disabled),
.darkmode .complete-purchase-button:not(.disabled):not(:disabled),
.darkmode .shared-subscription-modal .add-button,
.darkmode .button.big {
    background: #ffe462 !important;
    color: #202346 !important;
}

.darkmode .button1:hover,
.darkmode .primary:hover,
.checkout .darkmode .complete-purchase:not(.disabled):not(:disabled):hover,
.checkout .darkmode .complete-purchase-button:not(.disabled):not(:disabled):hover,
.checkout .darkmode .complete-purchase:not(.disabled):not(:disabled) a:hover,
.checkout .darkmode .complete-purchase-button:not(.disabled):not(:disabled) a:hover,
.darkmode .btn--large.btn--blue:not(.disabled):not(:disabled):hover,
.darkmode .shared-subscription-modal .add-button:hover,
.darkmode .button.big:hover,
.darkmode .button.big:not(.gray):hover {
    background: #FFF2B7 !important;
}

.darkmode #piano-myaccount .btn-group>.btn:hover,
.darkmode #piano-myaccount .manage-dropdown li:hover,
.darkmode .btn.underline:hover,
.darkmode .underline .btn.dropdown-toggle:hover,
.darkmode .manage-dropwon:hover,
.darkmode .vanilla-table button:hover,
.darkmode .shared-subscription-modal .darkmode .ss__add-shared-account:hover,
.darkmode .shared-subscription-modal .ss__add-shared-account:hover .ss__add-shared-account--limit,
.darkmode .btn.btn-back:hover,
.darkmode .ss__add-shared-account:hover {
    color: #555555 !important;
}

.darkmode .bestseller .bestseller-text div {
    background: #121212;
    color: #e9e9e9 !important;
}

.darkmode .info-icon-holder .info-text .info-text-inner,
.darkmode .info-icon-holder .info-text .info-text-inner,
.darkmode #piano-myaccount .btn-group>.dropdown-menu,
.darkmode .action-select option,
.darkmode .pn-list .pn-list-item.edit,
.darkmode .pn-licensing__dropdown-item-button,
.darkmode .pn-list .pn-list-scopes .dropdown-menu li {
    background: #202346 !important;
    color: #fff !important;
}

.shadow .darkmode .inline-holder {
    box-shadow: 0 0 15px 0 #7D7D7D;
}

.darkmode .payment-method-card-default-payment {
    color: #d4d4d4;
}

.darkmode .vanilla-table tr>td {
    border-color: #7d7d7d;
}

.darkmode .pn-licensing-select,
.darkmode input,
.darkmode textarea,
.darkmode .pn-list input.pn-list-search,
.darkmode .billing-country .tp-dropdown__select,
.darkmode .promo-code-component input,
.darkmode .new-card-form .field-wrapper .input,
.darkmode .pn-list .pn-list-scopes,
.darkmode .datatrans-card-number,
.darkmode .datatrans-cvv {
    background-color: #c8c8d1 !important;
    color: #202346 !important;
}

.darkmode input[name="cardZipCode"]::placeholder,
.darkmode input[name="expire_year"]::placeholder,
.darkmode input[name="expire_month"]::placeholder {
    opacity: .6;
}

.darkmode .pn-list .pn-list-scopes .pn-list-scope,
.darkmode .tariff-plan-mobile .tariff-plan-mobile-value,
.darkmode .payment-options .button.pay {
    color: #202346 !important;
}

.darkmode .pn-list .pn-list-item input {
    color: #e9e9e9 !important;
}

.darkmode input::-webkit-input-placeholder,
.darkmode input::-webkit-input-placeholder,
.darkmode input::-webkit-input-placeholder,
.darkmode input::-webkit-input-placeholder {
    color: #555555 !important;
}

.darkmode .pn-list .pn-list-item input::-webkit-input-placeholder {
    color: #e9e9e9 !important;
}

.darkmode .pn-list .pn-list-item input::-moz-placeholder {
    color: #e9e9e9 !important;
}

.darkmode .pn-list .pn-list-item input:-ms-input-placeholder {
    color: #e9e9e9 !important;
}

.darkmode .pn-list .pn-list-item input:-moz-placeholder {
    color: #e9e9e9 !important;
}

.darkmode .custom-checkbox input:checked+label:after {
    color: #121212 !important;
}

.darkmode .info-icon-holder i {
    color: #e9e9e9 !important;
}

.darkmode .pn-licensing__dropdown-item-button:hover,
.darkmode .pn-list .pn-list-scopes .dropdown-menu li:hover {
    background: transparent;
}

.darkmode #piano-myaccount .right-arrow {
    background-image: linear-gradient(to right, rgba(18, 18, 18, 0.1) -32%, rgba(18, 18, 18, 1) 73%);
}

.darkmode #piano-myaccount .left-arrow {
    background-image: linear-gradient(to left, rgba(18, 18, 18, 0.1) -32%, rgba(18, 18, 18, 1) 73%);
}


/* DARKMODE VERTICALS */

.fuw.darkmode .button2:not(div),
.fuw.darkmode .button3:not(div),
.fuw.darkmode .btn--large.btn--gray .sf.darkmode .button2:not(div),
.sf.darkmode .button3:not(div),
.sf.darkmode .btn--large.btn--gray .femina.darkmode .button2:not(div),
.femina.darkmode .button3:not(div),
.femina.darkmode .btn--large.btn--gray .bilan.darkmode .button2:not(div),
.bilan.darkmode .button3:not(div),
.bilan.darkmode .btn--large.btn--gray {
    background: #aba9a4!important;
    color: #121212 !important;
}

.fuw.darkmode .button2:not(div):hover,
.fuw.darkmode .button3:not(div):hover,
.fuw.darkmode .btn--large.btn--gray:hover .sf.darkmode .button2:not(div):hover,
.sf.darkmode .button3:not(div):hover,
.sf.darkmode .btn--large.btn--gray:hover .femina.darkmode .button2:not(div):hover,
.femina.darkmode .button3:not(div):hover,
.femina.darkmode .btn--large.btn--gray:hover .bilan.darkmode .button2:not(div):hover,
.bilan.darkmode .button3:not(div):hover,
.bilan.darkmode .btn--large.btn--gray:hover {
    background: #9d9b97 !important;
}

.fuw.darkmode .right .button2:not(div),
.sf.darkmode .right .button2:not(div),
.femina.darkmode .right .button2:not(div),
.bilan.darkmode .right .button2:not(div) .fuw.darkmode .right .button2:not(div),
.sf.darkmode .right .button2:not(div),
.femina.darkmode .right .button2:not(div),
.bilan.darkmode .right .button2:not(div) {
    background: #fff !important;
    color: #121212 !important;
}

.fuw.darkmode .offer,
.sf.darkmode .offer,
.femina.darkmode .offer,
.bilan.darkmode .offer,
.fuw .standard .inlay-background,
.sf.darkmode .standard .inlay-background,
.femina.darkmode .standard .inlay-background,
.bilan.darkmode .standard .inlay-background {
    background: #f4f4f4 !important;
    color: #333;
}

.fuw.darkmode .bestseller .offer,
.fuw.darkmode .bestseller-bottom .offer,
.fuw.darkmode .offers-holder.all-yellow .offer,
.sf.darkmode .bestseller .offer,
.sf .bestseller-bottom .offer,
.sf.darkmode .offers-holder.all-yellow .offer,
.femina.darkmode .bestseller .offer,
.femina.darkmode .bestseller-bottom .offer,
.femina.darkmode .offers-holder.all-yellow .offer,
.bilan.darkmode .bestseller .offer,
.bilan .bestseller-bottom .offer,
.bilan.darkmode .offers-holder.all-yellow .offer {
    background: #e9e9e9 !important;
    color: #333;
}

.fuw.darkmode .offer h3,
.sf.darkmode .offer h3,
.femina.darkmode .offer h3,
.bilan.darkmode .offer h3 {
    color: #333 !important;
}


/* darkmode verticals */

@media screen and (max-width: 712px) {
    .darkmode .aboshop-holder .content .left,
    .fuw.darkmode .aboshop-holder .content .left,
    .sf.darkmode .aboshop-holder .content .left,
    .femina.darkmode .aboshop-holder .content .left,
    .bilan.darkmode .aboshop-holder .content .left,
    .darkmode .aboshop-holder h1,
    .fuw.darkmode .aboshop-holder h1,
    .sf.darkmode .aboshop-holder h1,
    .femina.darkmode .aboshop-holder h1,
    .bilan.darkmode .aboshop-holder h1 {
        background: #121212 !important;
    }
    .darkmode .aboshop-holder .content .right,
    .fuw.darkmode .aboshop-holder .content .right,
    .sf.darkmode .aboshop-holder .content .right,
    .femina.darkmode .aboshop-holder .content .right,
    .bilan.darkmode .aboshop-holder .content .right {
        background: #555555 !important;
    }
    .darkmode .expiration-warning .text span:first-child {
        color: #e9e9e9 !important;
    }
}


/* dark mode colors */