.dc-improvedinfo {
border: none;
} .back-btn,
.vsiete-whatsapp-btn {
background: #fff;
border: 1px solid #dee2e6;
color: var(--terthemecolor);
font-size: 0.9rem;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
font-weight: 600;
}
.back-btn:hover,
.vsiete-whatsapp-btn:hover {
background: #f8f9fa;
border-color: #ced4da;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.back-btn:active,
.vsiete-whatsapp-btn:active {
transform: translateY(1px);
} .dc-header {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dc-navigationarea {
background-color: #ffffff;
} .dc-navigationarea .dc-rightarea {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dc-navigationarea .dc-rightarea .vsiete-dashboard {
float: none !important;
margin-left: 0 !important;
padding: 0 !important;
}
.dc-navigationarea .dc-rightarea .vsiete-dashboard>div {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dc-navigationarea .dc-rightarea .vsiete-dashboard .dc-userimg {
order: 0;
margin-left: 0;
margin-right: 8px;
}
.dc-navigationarea .dc-rightarea .vsiete-dashboard .dc-username {
order: 1;
margin-left: 0.25rem;
}
.dc-navigationarea .dc-rightarea .dc-userlogedin {
float: none !important;
padding: 0 !important;
margin-left: 0 !important;
} .dc-navigationarea .dc-rightarea .dc-usernav,
.dc-navigationarea .dc-rightarea .dc-usernav ul,
.dc-navigationarea .dc-rightarea .dc-usernav .sub-menu,
.dc-navigationarea .dc-rightarea .dc-usernav .dashboard-menu-top {
background: #ffffff !important;
color: #222 !important;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.dc-navigationarea .dc-rightarea .dc-usernav ul li a {
color: inherit !important;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn {
display: inline-flex;
align-items: center;
height: 40px;
padding: 8px 14px;
white-space: nowrap;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn i {
font-size: 1.1rem;
margin-right: 0.5rem;
color: #25D366;
} .dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn .vsiete-whatsapp-full {
display: inline;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn .vsiete-whatsapp-short {
display: none;
}
@media (max-width: 600px) {
.dc-navigationarea .dc-rightarea {
gap: 0.5rem;
} .dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn .vsiete-whatsapp-full {
display: none;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn .vsiete-whatsapp-short {
display: inline;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn {
height: 44px;
padding: 8px 12px;
font-size: 0.85rem;
}
.dc-navigationarea .dc-rightarea .vsiete-whatsapp-btn i {
font-size: 1.15rem;
margin-right: 0.5rem;
}
}
.cashea-redesign-container,
.vsiete-wallet-redesign,
.info-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
.wallet-redesign-page-section {
width: 100%;
}
.cashea-redesign-title,
.vsiete-wallet-redesign__title,
.wallet-redesign-page-title {
text-align: left;
margin-bottom: 24px;
}
.cashea-redesign-title h1,
.vsiete-wallet-redesign__title h1,
.wallet-redesign-page-title h1 {
font-size: 1.7rem;
line-height: 30px;
margin-bottom: 11px;
}
.cashea-redesign-title h3,
.vsiete-wallet-redesign__title h3,
.wallet-redesign-page-title h3,
.vsiete-wallet-redesign__title p {
font-size: 1.05rem;
line-height: 1.5;
color: #6c757d;
margin-bottom: 0;
}
.cashea-redesign-section, .wallet-redesign-highlight-card,
.wallet-redesign-payment-box,
.wallet-redesign-immediate-debit-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
} .cashea-redesign-section p,
.wallet-redesign-highlight-card p {
margin-bottom: 10px;
font-size: 1.2rem;
}
.wallet-redesign-highlight-card,
.wallet-redesign-payment-box,
.wallet-redesign-page-section--support .cashea-redesign-section,
.wallet-redesign-page-section--up-to-date {
text-align: center;
}
.wallet-redesign-highlight-amount {
font-size: 2rem;
font-weight: 700;
color: var(--terthemecolor);
}
.btn.dc-btn.btn-primary,
.vsiete-wallet-redesign__actions .btn-primary,
.confirm-phone-btn,
.confirm-reference-btn,
.confirm-date-btn,
.confirm-payment-btn,
.confirm-amount-btn,
.success-btn-primary {
width: 100%;
background-color: var(--themecolor);
border: none;
color: white;
padding: 15px;
font-size: 1.1rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.btn.dc-btn.btn-primary:hover,
.vsiete-wallet-redesign__actions .btn-primary:hover,
.confirm-phone-btn:hover,
.confirm-reference-btn:hover,
.confirm-date-btn:hover,
.confirm-payment-btn:hover,
.confirm-amount-btn:hover,
.success-btn-primary:hover {
background-color: #007bff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn.dc-btn.btn-outline,
.btn.dc-btn.btn-outline.dc-secondary,
.success-btn-outline,
.wallet-redesign-support-btn,
.edit-amount-btn {
width: 100%;
background: transparent;
border: 1px solid #ced4da;
color: #333;
padding: 12px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.btn.dc-btn.btn-outline:hover,
.btn.dc-btn.btn-outline.dc-secondary:hover,
.success-btn-outline:hover,
.wallet-redesign-support-btn:hover,
.edit-amount-btn:hover {
background-color: #f8f9fa;
border-color: #bfbfbf;
color: #222;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
button.cashea-button-caret,
.vsiete-wallet-redesign__card {
width: 100%;
}
.cashea-button-caret,
.vsiete-wallet-redesign__card {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 1rem 1.5rem;
text-decoration: none;
color: var(--terthemecolor);
font-family: 'Poppins', Arial, Helvetica, sans-serif;
transition: all 0.2s ease;
cursor: pointer;
margin-bottom: 10px;
}
.cashea-button-caret:hover,
.vsiete-wallet-redesign__card:hover {
background: #f8f9fa;
border-color: #ced4da;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.cashea-button-caret:focus,
.cashea-button-caret:active,
.vsiete-wallet-redesign__card:focus,
.vsiete-wallet-redesign__card:active {
outline: none !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}
.cashea-button-caret .caret-right,
.vsiete-wallet-redesign__card .caret-right {
font-size: 1.1rem;
color: #6c757d;
transition: transform 0.2s ease;
}
.cashea-button-caret:hover .caret-right,
.vsiete-wallet-redesign__card:hover .caret-right {
transform: translateX(2px);
color: #495057;
}
.cashea-button-caret .button-text,
.vsiete-wallet-redesign__card .button-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: left;
font-size: 1.2rem;
flex: 1;
}
.cashea-button-caret .button-title,
.vsiete-wallet-redesign__card-title {
font-weight: 600;
margin: 0;
color: var(--terthemecolor);
}
.cashea-button-caret .button-subtitle,
.vsiete-wallet-redesign__card-subtitle {
font-size: 1rem;
color: #6c757d;
margin: 0;
} #initial-fee-payment label,
#initial-fee-payment .value-text {
font-size: 1.2rem;
font-weight: 600;
color: var(--terthemecolor);
}
.phone-input-section,
.reference-input-section,
.verification-section,
.dni-input-section {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.phone-input-container,
.reference-input-container,
.vsiete-wallet-redesign__form-row,
.dni-input-container {
display: flex;
gap: 10px;
align-items: stretch;
}
.phone-code-selector,
.vsiete-wallet-redesign__phone-code {
width: 100px;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 0.5rem;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 0.95rem;
color: black;
background: white;
}
.phone-number-input,
.reference-number-input,
.vsiete-wallet-redesign__phone-input,
.vsiete-wallet-redesign__input,
.manual-date-input input[type="date"] {
flex: 1;
border: 1px solid #ced4da !important;
border-radius: 8px !important;
padding: 0.75rem 1rem !important;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 1rem !important;
color: black !important;
background: white !important;
}
.phone-number-input:focus,
.reference-number-input:focus,
.vsiete-wallet-redesign__phone-input:focus,
.vsiete-wallet-redesign__input:focus,
.manual-date-input input[type="date"]:focus {
outline: none;
border-color: #3fabf3;
box-shadow: 0 0 0 2px rgba(63, 170, 243, 0.25);
}
.cashea-input-group {
gap: 10px;
width: 100%;
}
.info-box {
background: #e7f1ff;
border: 1px solid #cfe3ff;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.info-box i {
color: #0d6efd;
font-size: 1.1rem;
margin-top: 0.25rem;
}
.info-box p,
.reference-input-hint {
margin: 0;
font-size: 1rem;
color: var(--terthemecolor);
}
.reference-input-hint {
color: #6c757d;
margin-top: 0.25rem;
margin-bottom: 1rem;
text-align: left;
}
.date-selection-container {
padding: 0;
margin: 0;
}
.date-button-group,
.vsiete-wallet-redesign__date-grid {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 1rem;
}
.date-button,
.vsiete-wallet-redesign__date-btn {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 1rem 1.5rem;
text-decoration: none;
color: var(--terthemecolor);
font-family: 'Poppins', Arial, Helvetica, sans-serif;
transition: all 0.2s ease !important;
cursor: pointer;
position: relative;
}
.date-button:hover,
.vsiete-wallet-redesign__date-btn:hover {
background: #f8f9fa;
border-color: #ced4da;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.date-button.selected,
.vsiete-wallet-redesign__date-btn.selected {
background-color: #bbdefb !important;
border-color: #bbdefb !important;
color: var(--terthemecolor) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.date-button .date-title,
.vsiete-wallet-redesign__date-btn .date-title {
font-weight: 600;
margin: 0;
font-size: 1.1rem;
}
.date-button .date-value,
.vsiete-wallet-redesign__date-btn .date-value,
.vsiete-wallet-redesign__date-btn small {
font-size: 1rem;
color: #6c757d;
margin: 0;
}
.date-button .date-value,
.vsiete-wallet-redesign__date-btn .date-value {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
}
.date-button .date-value .day-number,
.vsiete-wallet-redesign__date-btn .date-value .day-number {
font-weight: 600;
}
.date-button .date-value .month-name,
.vsiete-wallet-redesign__date-btn .date-value .month-name {
text-transform: lowercase;
}
.manual-date-input,
.vsiete-wallet-redesign__manual-date {
display: none;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
border: 1px solid #ced4da;
border-radius: 8px;
background: white;
}
.manual-date-input input[type="date"],
.vsiete-wallet-redesign__manual-date input[type="date"] {
width: 100%;
border: none !important;
padding: 0 !important;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 0.95rem !important;
color: black !important;
background: transparent !important;
}
.manual-date-input:not(.d-none),
.vsiete-wallet-redesign__manual-date:not(.d-none) {
display: block;
}
.verification-data-list,
.vsiete-wallet-redesign__summary {
display: flex;
flex-direction: column;
gap: 1rem;
}
.verification-data-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #dee2e6;
gap: 1rem;
background: white;
}
.vsiete-wallet-redesign__summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem; gap: 1rem;
background: white;
}
.verification-data-item .data-container {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
}
.verification-data-item .data-label,
.success-details-item .detail-label,
.vsiete-wallet-redesign__summary-item span {
font-weight: normal;
margin: 0;
color: #6c757d;
font-size: 1rem;
}
.verification-data-item .data-value,
.success-details-item .detail-value,
.vsiete-wallet-redesign__summary-item strong {
font-size: 1.05rem;
font-weight: bold;
color: var(--terthemecolor);
margin: 0;
}
.vsiete-wallet-redesign__summary-item--stacked,
.wallet-redesign-summary-card,
.wallet-redesign-bank-card,
.wallet-redesign-amount-card {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
width: 100%;
}
.wallet-redesign-bank-card img {
margin-bottom: 8px;
}
.success-section {
background: transparent;
border-radius: 16px;
padding: 0;
margin-bottom: 10px;
text-align: center;
}
.success-icon {
font-size: 3rem;
color: #28a745;
margin-bottom: 1rem;
text-align: center;
}
.success-details-box {
padding: 0;
margin-bottom: 0;
text-align: left;
}
.success-details-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.success-details-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #dee2e6;
flex-flow: column;
background: white;
}
.success-details-item--row {
flex-flow: row !important;
align-items: center;
gap: 0.5rem;
}
.success-details-item--row .detail-label-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.copy-pay-btn {
width: 40px;
height: 40px;
min-width: 40px;
border: 1px solid #d8dde3;
background: #fff;
border-radius: 10px;
color: #4f5d6b;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-pay-btn:hover {
background: #f7f9fc;
border-color: #c8d1da;
}
.copy-pay-btn.is-copied {
border-color: #ccead8;
background: #e9f8ef;
color: #239b56;
}
.copy-pay-btn:hover.dc-btn:hover {
box-shadow: none;
color: #4f5d6b;
}
.copy-pay-btn.disabled,
.copy-pay-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.copy-all-pay-btn.copy-pay-btn {
width: 100%;
min-width: 100%;
height: auto;
padding: 12px;
}
.success-actions,
.vsiete-wallet-redesign__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 1rem;
}
.vsiete-wallet-redesign__actions .dc-btn,
.success-actions .dc-btn,
.success-actions a {
width: 100%;
}
.vsiete-wallet-redesign__actions .dc-btn:disabled,
.success-actions .dc-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.edit-amount-display,
.vsiete-wallet-redesign__amount-display {
font-size: 2.2rem;
font-weight: 700;
color: var(--terthemecolor);
text-align: center;
margin: 40px 0;
}
.edit-amount-display .edit-amount-label {
font-size: 1.1rem;
margin-right: 8px;
color: #6c757d;
}
.edit-amount-display .edit-amount-value {
font-size: 2.2rem;
}
.edit-amount-input {
width: 100%;
max-width: 220px;
margin: 0 auto;
display: block;
text-align: center;
border: none;
background: transparent;
outline: none;
box-shadow: none;
padding: 0;
font-size: 2rem;
font-weight: 700;
color: var(--terthemecolor);
}
.vsiete-wallet-redesign__amount-edit-error {
margin-top: -18px;
margin-bottom: 12px;
color: #c0392b;
font-size: 0.95rem;
text-align: center;
}
.modify-btn {
border: 1px solid #cfd7df;
background: #fff;
color: #4f5d6b;
border-radius: 999px;
padding: 6px 12px;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
.modify-btn:hover {
background: #f5f8fb;
}
#wallet-select-method ul {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
#wallet-select-method ul li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 1rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
#wallet-select-method ul li:hover {
background: #f8f9fa;
border-color: #ced4da;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
#wallet-select-method ul li>div {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
#wallet-select-method ul li>div span:first-child {
font-weight: 600;
color: var(--terthemecolor);
}
#wallet-select-method ul li>div span:last-child {
font-size: 0.95rem;
color: #6c757d;
}
.immediate-debit-banks {
display: flex;
flex-direction: column;
gap: 10px;
}
.bank-card {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 1rem 1.25rem;
cursor: pointer;
}
.bank-card.active,
.bank-card:hover {
border-color: #bbdefb;
background: #f8fbff;
}
.bank-info .alias {
font-weight: 600;
color: var(--terthemecolor);
}
.bank-info .meta {
color: #6c757d;
font-size: 0.95rem;
}
.immediate-debit-form .form-row {
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.immediate-debit-form label {
font-weight: 600;
color: var(--terthemecolor);
}
.immediate-debit-form select,
.immediate-debit-form input {
width: 100%;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 0.75rem 1rem;
background: white;
color: #000;
}
.immediate-debit-form .phone-row,
.immediate-debit-form .dni-row,
.immediate-debit-actions,
.immediate-debit-form .actions {
display: flex;
gap: 10px;
}
.immediate-debit-form .actions,
.immediate-debit-actions {
flex-direction: column;
}
.immediate-debit-inline-inputs {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 10px;
}
.immediate-debit-inline-inputs .vsiete-wallet-redesign__phone-code,
.immediate-debit-inline-inputs .vsiete-wallet-redesign__dni-prefix {
width: 100px;
flex: 0 0 100px;
}
.immediate-debit-inline-inputs .vsiete-wallet-redesign__phone-input,
.immediate-debit-inline-inputs .vsiete-wallet-redesign__dni-input {
flex: 1 1 auto;
width: 100%;
}
.wallet-switch {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
cursor: pointer;
}
.wallet-switch input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
.wallet-switch__slider {
position: relative;
width: 44px;
min-width: 44px;
height: 24px;
background: #ced4da;
border-radius: 999px;
transition: background-color 0.2s ease;
}
.wallet-switch__slider::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease;
}
.wallet-switch input[type="checkbox"]:checked+.wallet-switch__slider {
background: var(--themecolor);
}
.wallet-switch input[type="checkbox"]:checked+.wallet-switch__slider::after {
transform: translateX(20px);
}
.wallet-switch input[type="checkbox"]:focus+.wallet-switch__slider {
box-shadow: 0 0 0 3px rgba(63, 170, 243, 0.25);
}
.wallet-switch__label {
font-weight: 600;
color: var(--terthemecolor);
font-size: 0.98rem;
line-height: 1.35;
}
.required-asterisk {
color: #e74c3c;
font-weight: 700;
}
.wallet-redesign-immediate-debit-otp-title {
margin-bottom: 16px;
}
#immediate-debit-otp-form .form-row label {
font-size: 1rem;
font-weight: 600;
color: var(--terthemecolor);
}
.wallet-redesign-booking-selector {
min-height: 80px;
}
.wallet-redesign-payment-box #payment-amount {
margin-bottom: 16px;
font-size: 1.1rem;
color: var(--terthemecolor);
}
.wallet-redesign-otp-section .otp-buttons {
margin-top: 20px;
}
.wallet-redesign-page-section--support .cashea-redesign-title,
.wallet-redesign-page-section--up-to-date .cashea-redesign-title,
#wallet-pay-confirmation .cashea-redesign-title {
text-align: center;
}
@media (max-width: 600px) {
.back-btn,
.vsiete-whatsapp-btn {
padding: 6px 12px;
font-size: 0.85rem;
}
.cashea-redesign-container,
.vsiete-wallet-redesign,
.info-container {
padding: 16px;
}
.cashea-redesign-title,
.vsiete-wallet-redesign__title {
margin-bottom: 19px;
}
.cashea-redesign-title h1,
.vsiete-wallet-redesign__title h1 {
font-size: 1.4rem;
line-height: 30px;
margin-bottom: 11px;
}
.cashea-redesign-title h3,
.vsiete-wallet-redesign__title h3,
.vsiete-wallet-redesign__title p {
font-size: 1rem;
}
.cashea-redesign-section p,
.wallet-redesign-highlight-card p {
font-size: 1rem;
}
.btn.dc-btn.btn-primary,
.success-btn-primary,
.confirm-phone-btn,
.confirm-reference-btn,
.confirm-date-btn,
.confirm-payment-btn,
.confirm-amount-btn {
font-size: 1rem;
padding: 12px;
}
.cashea-button-caret .button-text,
.vsiete-wallet-redesign__card .button-text {
font-size: 1.1rem;
}
.cashea-button-caret .button-subtitle,
.vsiete-wallet-redesign__card-subtitle,
.date-button .date-value,
.vsiete-wallet-redesign__date-btn .date-value {
font-size: 0.95rem;
}
.success-details-item .detail-label,
.success-details-item .detail-value,
.verification-data-item .data-label,
.verification-data-item .data-value {
font-size: 1rem;
}
.immediate-debit-form .phone-row,
.immediate-debit-form .dni-row,
.immediate-debit-actions,
.immediate-debit-form .actions,
.vsiete-wallet-redesign__actions {
flex-direction: column;
}
}
#payment-select-container {
background-color: #fff;
border-radius: 4px;
padding: 1rem;
margin-block: 1rem;
}
.pending-payment-container {
margin-top: 1rem;
}
.month-title {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.6rem;
}
.month-title span {
font-size: 1rem;
}
ul.pending-payment-list {
list-style-type: none;
padding-inline: 0;
}
ul.pending-payment-list>li {
list-style: none;
display: flex;
border-radius: 4px;
justify-content: space-between;
padding-block: 0.8rem;
margin-bottom: 0.4rem;
padding-inline: 0.6rem;
-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
transition-property: transform, border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
font-size: 1rem;
}
ul.pending-payment-list>li .small span {
font-size: 1rem;
}
ul.pending-payment-list>li[data-selected="true"] {
border-style: solid;
border-width: 2px;
border-color: #22c55e;
}
ul.pending-payment-list>li>div,
div.month-title {
position: relative;
padding-left: 1.75rem;
}
ul.pending-payment-list>li>div::before,
div.month-title::before {
position: absolute;
top: 3px;
left: 0;
font-family: "Font Awesome 5 Free";
content: "";
width: 20px;
height: 20px;
background: #fefefe;
line-height: 28px;
border-radius: 4px;
border: 1px solid #bbb;
}
ul.pending-payment-list>li>div::after,
div.month-title::after {
position: absolute;
top: 3px;
left: 0;
opacity: 0;
font-family: "Font Awesome 5 Free";
content: "\f14a";
width: 20px;
height: 20px;
color: #00cc8d;
line-height: 20px;
border-radius: 4px;
visibility: hidden;
font-weight: 800;
text-align: center;
font-size: 22px;
border: 1px solid #bbb;
}
ul.pending-payment-list>li[data-selected="true"]>div::before,
div.month-title[data-selected="true"]::before {
border-color: #00cc8d;
content: "";
}
ul.pending-payment-list>li[data-selected="true"]>div::after,
div.month-title[data-selected="true"]::after {
opacity: 1;
visibility: visible;
} #wallet-booking-selector #payment-select-container {
background-color: #fff;
border-radius: 4px;
padding: 1rem;
margin-block: 1rem;
}
#wallet-booking-selector .pending-payment-container {
margin-top: 1rem;
}
#wallet-booking-selector .month-title {
font-weight: bold;
font-size: 1rem;
margin-bottom: 0.6rem;
}
#wallet-booking-selector ul.pending-payment-list {
list-style: none !important;
padding-inline: 0 !important;
margin: 0;
}
#wallet-booking-selector ul.pending-payment-list > li {
list-style: none !important;
display: flex !important;
border-radius: 4px;
justify-content: space-between;
padding-block: 0.8rem;
margin-bottom: 0.4rem;
padding-inline: 0.6rem;
-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 1000px) {
ul.pending-payment-list>li:hover {
transform: scale(1.02);
cursor: pointer;
}
.month-title:hover {
cursor: pointer;
}
ul.pending-payment-list > li > div::after,
div.month-title::after {
top: 2px;
}
}
@media (max-width:400px) { ul.pending-payment-list > li > div {
display: flex;
flex-direction: column;
}
ul.pending-payment-list > li > div span.separator {
display: none;
}
ul.pending-payment-list > li > div span.date {
color: #6c757d;
font-size: 0.8rem;
}
}