@import url("root.css");
@import url("btn.css");
@import url("input.css");

@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        font-size: 14px;
    }
}

html, body, #Main, #Root {
    height: 100%;
}

#Root {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

header {
    padding-block: var(--spacing-md);
    background-color: var(--color-background);
}

body {
    background-color: var(--color-background);
    font-family: var(--font-family-inter);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav svg {
    width: 40px;
    height: 40px;
}

header nav a#Homepage_Link {
    display: inline-flex;
    text-decoration: none;
    font-family: var(--font-family-gabarito);
    font-weight: 500;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 40px;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
    color: var(--color-text-main);
}

header nav a#Homepage_Link:hover {
    color: var(--color-accent);
}

header nav a#Homepage_Link:hover svg path{
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

.container {
    max-width: 1224px;
    margin-inline: auto;
    /* padding-inline: 1%; */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-inter);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}


h3 {
    font-size: var(--font-size-xl);
}
h4 {
    font-size: var(--font-size-lg);
}
h5 {
    font-size: var(--font-size-md);
}
h6 {
    font-size: var(--font-size-sm);
}

h1 + p {
    color: #333;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin-block-end: 32px;
}

#Hero_Section_Button_Group a {
    height: 56px;
    padding: 0 40px;
}

canvas {
    max-width: 400px;
    max-height: 400px;
    margin-block-end: var(--spacing-2xl);
}

table {
    border-collapse: collapse;
    text-transform: capitalize;
}

.wallet-icon svg {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    outline: 1px solid var(--color-background);
    outline-offset: -1px;
}

.wallet-icon svg.credit path {
    fill: #11b57d;
}

.wallet-icon svg.debit path {
    fill: #5871a8;
}

/* Transactions Table */
#Transaction_Summary {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    margin-block-end: var(--spacing-lg);
}

#Transaction_Summary div {
    display: flex;
    gap: 40px;
}

#Transaction_Summary strong {
    color: var(--color-text-main);
    font-weight: 600;
}

.transactions-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}

.transactions-table th {
    text-align: left;
    color: #687180;
    font-weight: 500;
}

.transactions-table td,
.transactions-table th {
    padding: var(--spacing-xs) var(--spacing-sm);
}

.transactions-table tr {
    background-color: var(--color-background);
}

.transactions-table tbody tr:nth-child(odd) {
    background-color: #fcfbfc;
}

.transactions-table .transaction-date {
    font-size: var(--font-size-md);
    color: var(--color-text-main);
    font-weight: 500;
}
.transactions-table .posted-date {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.transactions-table .transaction-vendor {
    color: var(--color-text-main);
    font-weight: 500;
    font-size: var(--font-size-md);
}

.transactions-table .transaction-description {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

.transactions-table td.text-success {
    color: var(--color-accent);
}

.transactions-table .amount {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
}

.transactions-table .amount sup {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.transactions-table .badge {
    position: relative;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease-in;
    text-transform: lowercase;
    padding: 2px 8px 2px 18px;
    border-radius: 20px;
    font-size: var(--font-size-md);
    background-color: var(--color-background);
}

.transactions-table .badge::after {
    position: absolute;
    content: "";
    top: 9px;
    left: 8px;
    width: 5px;
    height: 5px;
    background-color: var(--color-background);
    border-radius: 50%;
}

.transactions-table .badge.badge-paid {
    color: var(--color-accent);
}

.transactions-table .badge.badge-paid::after {
    background-color: var(--color-accent);
}

.transactions-table .badge.badge-received {
    color: #01a2ea;
}

.transactions-table .badge.badge-received::after {
    background-color: #01a2ea;
}

.transactions-table .wallet-icon {
    position: relative;
    display: inline-block;
    float: left;
    width: 36px;
    height: 36px;
    background-color: #f3f5f9;
    border-radius: 8px;
    margin-inline-end: 16px;
    margin-block-start: 2px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
}

.solar--wallet-outline {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235c76ad' d='M19 12a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3Cpath fill='%235c76ad' fill-rule='evenodd' d='M9.944 3.25h3.112c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238c.924.925 1.219 2.163 1.326 3.77c.577.253 1.013.79 1.06 1.47c.005.061.005.126.005.186v3.866c0 .06 0 .125-.004.185c-.048.68-.484 1.218-1.061 1.472c-.107 1.606-.402 2.844-1.326 3.769c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153H9.944c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433v-.112c0-1.838 0-3.294.153-4.433c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153m10.224 12.5H18.23c-2.145 0-3.981-1.628-3.981-3.75s1.836-3.75 3.98-3.75h1.938c-.114-1.341-.371-2.05-.87-2.548c-.423-.423-1.003-.677-2.009-.812c-1.027-.138-2.382-.14-4.289-.14h-3c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S3.025 6.705 2.89 7.71c-.138 1.028-.14 2.382-.14 4.289s.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h3c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812c.499-.498.756-1.206.87-2.548M5.25 8A.75.75 0 0 1 6 7.25h4a.75.75 0 0 1 0 1.5H6A.75.75 0 0 1 5.25 8m15.674 1.75H18.23c-1.424 0-2.481 1.059-2.481 2.25s1.057 2.25 2.48 2.25h2.718c.206-.013.295-.152.302-.236V9.986c-.007-.084-.096-.223-.302-.235z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.bi--credit-card-2-front {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%235c76ad'%3E%3Cpath d='M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3Cpath d='M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5'/%3E%3C/g%3E%3C/svg%3E");
}

.transactions-table .wallet-icon svg {
    position: absolute;
    bottom: -6px;
    right: -6px;
}


.Button_Group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

footer {
    background: #fafafa;
    padding: 40px 80px 80px;
    margin-block-start: var(--spacing-2xl);
}

.footer_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    font-family: var(--font-family-inter);
    color: var(--color-text-main);
    font-weight: 500;
    text-decoration: none;
}

a:not(.btn-primary):hover {
    color: var(--color-accent);
}