*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f2f2f6}.transaction-item{padding:12px 24px 12px 0;gap:8px;display:flex;position:relative;align-items:center;border-bottom:1px solid #ececed}.transaction-item:last-child{border-bottom:none}.transaction-item .chevron-right{position:absolute;top:12px;right:4px}.transaction-item .image-wrapper .image{padding:12px;background-color:#ddd;border-radius:8px}.transaction-item .content{display:flex;justify-content:space-between;color:#6c757d;font-size:13px;font-weight:500}.transaction-item .content .percent{font-size:12px;color:#6c757d;background:#f2f2f6;padding:4px;border-radius:8px}.transaction-item .details{width:100%}.transaction-item .details .header{display:flex;justify-content:space-between}.transaction-item .amount{font-size:1.1em}.transaction-item .amount.credit{color:#28a745}.transaction-item .amount.debit{color:#dc3545}.transactions-list-wrapper{max-width:700px;margin:32px auto}.transactions-list-wrapper .transactions-list{max-height:calc(100vh - 286px);overflow-y:auto;border-radius:8px;box-shadow:0 4px 6px #0000001a;background-color:#fff;padding:12px;margin-top:8px}.transactions-list-wrapper .transactions-list h2{margin-bottom:20px;color:#007bff;font-size:2rem}.dashboard{padding:20px 20px 0}.dashboard .info-wrapper{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px}.dashboard .info-wrapper .div3{grid-column-start:1;grid-row-start:2}.dashboard .info-wrapper .div4{grid-row:span 2/span 2;grid-column-start:2;grid-row-start:1}.dashboard .info-wrapper .title1{font-size:13px;font-weight:600;color:#171717}.dashboard .info-wrapper .wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.dashboard .info-wrapper .wrapper .mark-wrapper{width:100%;display:flex;justify-content:flex-end}.dashboard .info-wrapper .wrapper .mark-wrapper .mark{padding:16px;width:min-content;background:#eeeeef;border-radius:100%}.transaction-details{text-align:center;margin:20px;font-family:Arial,sans-serif}.transaction-details .transaction-amount{font-size:48px;font-weight:700;margin-bottom:5px}.transaction-details .transaction-merchant{font-size:18px;color:#666}.transaction-details .transaction-date{font-size:14px;color:#999;margin-bottom:20px}.transaction-details .transaction-card{background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:16px;text-align:left;max-width:90%;margin:0 auto}.transaction-details .transaction-card .transaction-status{font-size:16px;margin-bottom:5px}.transaction-details .transaction-card .transaction-status span{font-weight:700}.transaction-details .transaction-card .transaction-method{font-size:14px;color:#666;margin-bottom:20px}.transaction-details .transaction-card .transaction-total{display:flex;justify-content:space-between;font-size:18px;font-weight:700}.transaction-details .loading,.transaction-details .not-found{font-size:18px;margin-top:50px;color:#888}@media (max-width: 600px){.transaction-details .transaction-amount{font-size:36px}.transaction-details .transaction-card{padding:12px}.transaction-details .transaction-total{font-size:16px}}.transactions-list-wrapper-skeleton{max-height:calc(100vh - 200px);overflow-y:auto}.transactions-list-wrapper-skeleton .transaction-item{display:flex;align-items:center;padding:16px;border-bottom:1px solid #eaeaea}.transactions-list-wrapper-skeleton .transaction-icon{margin-right:12px}.transactions-list-wrapper-skeleton .transaction-details{flex-grow:1}.transactions-list-wrapper-skeleton .transaction-amount{font-size:1rem;font-weight:600}.sm-box{border:1px solid #ddd;border-radius:8px;padding:8px;box-shadow:0 4px 6px #0000001a;background-color:#fff;display:flex;flex-direction:column;justify-content:center}.sm-box p,.sm-box .subtitle1{color:#6c757d;font-size:13px;font-weight:500}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}