@import "Company_Variables.css";

.widget-root .form-group [for*="p_showd2c"],
.d2c-root .form-group [for*="p_showd2c"],
label[for*="p_showd2c"]~.input-group .form-control,
.widget-root .form-group [for*="p_showd2c"]+div>input:disabled,
.d2c-root .form-group [for*="p_showd2c"]+div>input:disabled,
.questions .form-group [for*="p_showd2c"]+div>select:disabled,
[for*="p_showd2c"]~.input-group .form-control:disabled,
[for*="p_showd2c"]~.input-group .input-group-prepend .currency {
    display: none !Important;
}

.account-confirmation,
.account {
    background: url(https://psprod.genasystech.com/images/direct-debit.svg);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

.account-confirmation .footer,
.account .footer {
    font-size: 16px !important;
    font-weight: 400;
    color: var(--cFirst) !important;
    text-align: center !important;
    font-family: var(--fSecondary), sans-serif !important;
    text-transform: uppercase !important;
}

.account-confirmation .title,
.account .title {
    display: none;
}

.account-confirmation .col-sm-4 {
    width: 400px;
}

.account-confirmation .col-sm-8 {
    font-family: var(--fPrimary);
    color: var(--cFirst);
}

.account .form-control {
    width: 300px !important;
}

.account .col-form-label {
    text-transform: uppercase;
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-label {
    width: 50px;
    height: 50px;
    text-align: center;
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-label {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border-radius: 5px;
    box-shadow: none;
    border: 2px solid var(--cBackground);
    z-index: 5;
    box-sizing: border-box;
    padding: 10px;
    background-origin: content-box;
    width: 120px;
    height: 120px;
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-input~.switch-label {
    background-image: url(https://psprod.genasystech.com/images/paypal.svg);
}

.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-input~.switch-label {
    background-image: url(https://psprod.genasystech.com/images/bitcoin.svg);
}

.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-input~.switch-label {
    background-image: url(https://psprod.genasystech.com/images/card-payments.svg);
}

.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-input~.switch-label {
    background-image: url(https://psprod.genasystech.com/images/direct-debit.svg);
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-input:checked~.switch-label {
    border: 1px solid var(--cFirst);
    box-shadow: none !important;
    color: black !Important;
    background-color: var(--cBackground) !Important;
    width: 100px;
    height: 100px;
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-label:after {
    opacity: 100%;
    color: Black;
    left: 120%;
    font-size: 25px;
    color: #00B3CD;
    font-weight: lighter;
    display: none;
}

.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_d2c_paypal"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_d2c_crypto"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_d2c_card"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_d2c_ddebit"]~div .switch .switch-label:before {
    display: none;
}

.payment-method .questions form.ng-valid.ng-star-inserted.ng-dirty,
.payment-method .questions form.ng-valid.ng-star-inserted.ng-dirty.ng-touched,
.payment-method .questions form.ng-untouched.ng-pristine.ng-valid.ng-star-inserted,
.account-confirmation .questions form.ng-valid.ng-star-inserted.ng-dirty,
.account-confirmation .questions form.ng-valid.ng-star-inserted.ng-dirty.ng-touched,
.account-confirmation .questions form.ng-untouched.ng-pristine.ng-valid.ng-star-inserted {
    display: flex !Important;
    flex-wrap: wrap;
    justify-content: center;
}

.payment-method .questions gc-question.lookup-select {
    width: 100%;
    padding-top: 20px;
    max-width: 100%;
    margin-left: 50px;
    margin-right: 50px;
}

.payment-method .questions gc-question {
    margin: 20px;
    width: 100px !Important;
    height: 100px !Important;
}

.payment-method .questions .gc-question.lookup-select.ng-star-inserted.show {
    width: 100%;
}

d2c-root .form-group [for*="p_d2c_paypal"]~*,
d2c-root .form-group [for*="p_d2c_crypto"]~*,
d2c-root .form-group [for*="p_d2c_card"]~*,
d2c-root .form-group [for*="p_d2c_ddebit"]~* {
    width: 100px !Important;
    height: 100px !Important;
    justify-content: center;
}

.payment-method .questions label[for*="p_d2c_paypal"].col-sm-10.col-form-label,
.payment-method .questions label[for*="p_d2c_crypto"].col-sm-10.col-form-label,
.payment-method .questions label[for*="p_d2c_card"].col-sm-10.col-form-label,
.payment-method .questions label[for*="p_d2c_ddebit"].col-sm-10.col-form-label {
    display: none;
}

.account-confirmation .questions,
.payment-method .questions {
    display: flex;
    justify-content: center;
}